@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700;750;800&display=swap');

:root {
    --orange: #ff5a00;
    --ink: #101116;
    --muted: #747b8c;
    --line: #eaecef
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    font-size: 13px
}

button,
input,
select,
textarea {
    font: inherit
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

button {
    color: inherit
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 5px
}

h1,
h2,
h3,
p {
    margin: 0
}

h1 {
    font-size: clamp(42px, 4.2vw, 66px);
    line-height: 1.02;
    letter-spacing: -2.6px;
    font-weight: 750
}

h2 {
    font-size: clamp(28px, 2.65vw, 40px);
    line-height: 1.04;
    letter-spacing: -1.4px;
    font-weight: 700
}

h1 span,
h2 span,
.orange,
.logo strong {
    color: var(--orange)
}

p {
    color: var(--muted);
    line-height: 1.5
}

section {
    padding: 30px max(4.8vw, 24px);
    border-bottom: 1px solid var(--line)
}

header {
    height: 87px;
    padding: 0 4.8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--line);
    background: #fffffff5;
    position: relative;
    z-index: 10
}

.logo {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: .9
}

.logo>img {
    width: 35px;
    height: 35px;
    border-radius: 8px;
    box-shadow: 0 7px 16px #ff5a0033
}

.logo-mark {
    position: relative;
    display: block;
    width: 68px;
    height: 68px;
    overflow: hidden;
    border-radius: 0;
    background: transparent
}

.logo-mark img {
    position: absolute;
    width: 160px;
    max-width: none;
    height: auto;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity .15s ease
}

.logo-mark.ready img { opacity: 1 }

.logo-type {
    display: block
}

.logo strong {
    color: var(--orange);
    font: inherit
}

.logo small {
    display: block;
    font-size: 10px;
    letter-spacing: 5px;
    margin-top: 7px;
    font-weight: 650
}

.logo em {
    display: block;
    font-style: normal;
    font-size: 7px;
    letter-spacing: 1.5px;
    margin-top: 10px;
    color: var(--muted)
}

.internship-section {
    min-height: 440px;
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(500px, 1.15fr);
    align-items: center;
    gap: clamp(36px, 7vw, 110px);
    background-color: #fffaf7;
    background-image: radial-gradient(circle at 8% 90%, #ff5a001a, transparent 26%), linear-gradient(#e9deda75 1px, transparent 1px), linear-gradient(90deg, #e9deda75 1px, transparent 1px);
}

.internship-copy>p:not(.eyebrow) {
    max-width: 500px;
    margin: 22px 0 28px;
    font-size: 15px;
    line-height: 1.75
}

.internship-board {
    border: 1px solid #31343c;
    background: #15171d;
    color: #fff;
    box-shadow: 15px 15px 0 #ff5a00;
    transform: rotate(1deg)
}

.board-top, .board-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    font: 10px monospace;
    letter-spacing: .8px;
    color: #afb5c0
}

.board-top { border-bottom: 1px solid #343944 }
.board-top i { color: #ff5a00; font-style: normal }

.internship-board article {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 21px 20px;
    border-bottom: 1px solid #343944;
    transition: background .2s, transform .2s
}

.internship-board article:hover { background: #242833; transform: translateX(7px) }
.track-number { color: var(--orange); font: 15px monospace }
.internship-board article b, .internship-board article small { display: block }
.internship-board article b { font-size: 15px; letter-spacing: -.2px }
.internship-board article small { color: #969eaa; margin-top: 6px; font-size: 10px }
.internship-board article em { color: #ffab7b; font: 9px monospace; white-space: nowrap }
.board-foot { color: #d2d8e0; font-size: 8px; flex-wrap: wrap }

nav {
    display: flex;
    gap: 25px;
    font-size: 10px;
    font-weight: 550
}

nav a:hover {
    color: var(--orange)
}

.header-actions,
.actions {
    display: flex;
    align-items: center;
    gap: 14px
}

.primary,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 40px;
    padding: 11px 18px;
    border-radius: 4px;
    font-weight: 550;
    font-size: 11px;
    border: 1px solid #d6d9df;
    background: white;
    transition: transform .2s, box-shadow .2s
}

.primary {
    background: var(--orange);
    border-color: var(--orange);
    color: white;
    box-shadow: inset 0 -3px 8px #e6460020
}

.primary:hover,
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #ff5a001a
}

.primary b,
.button b {
    font-size: 18px;
    font-weight: 400
}

.outline {
    color: var(--orange);
    border-color: var(--orange);
    min-height: 33px;
    padding: 6px 15px
}

.online {
    border: 1px solid var(--line);
    padding: 11px;
    border-radius: 5px;
    font-size: 10px;
    white-space: nowrap
}

i {
    font-style: normal
}

.online i,
.footer-bottom i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a83b00;
    margin-right: 7px;
    box-shadow: 0 0 8px #a83b0055
}

.menu {
    display: none
}

.grid-paper {
    background-image: linear-gradient(#ededed55 1px, transparent 1px), linear-gradient(90deg, #ededed55 1px, transparent 1px);
    background-size: 42px 42px
}

.hero {
    display: grid;
    grid-template-columns: 40% 60%;
    padding-top: 42px;
    padding-bottom: 25px;
    overflow: hidden;
    min-height: 550px
}

.eyebrow {
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 650;
    margin-bottom: 15px
}

.eyebrow i,
.activity i {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--orange);
    border-radius: 50%;
    margin-right: 6px
}

.hero-copy {
    position: relative;
    z-index: 2;
    padding-top: 9px
}

.intro {
    max-width: 390px;
    font-size: 13px;
    margin: 18px 0
}

.play {
    background: #111;
    color: white;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    font-size: 8px
}

.stats {
    display: flex;
    gap: 45px;
    margin-top: 30px
}

.stats strong {
    font-size: 24px;
    letter-spacing: -1px
}

.stats small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 5px
}

.universe {
    position: relative;
    height: 490px;
    margin: -30px -22px 0 -12px;
    background: radial-gradient(ellipse at 55% 55%, #ffdfc299, transparent 60%)
}

.connections {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    filter: drop-shadow(0 0 3px #ff5a0066)
}

.core {
    position: absolute;
    left: 33%;
    top: 37%;
    width: 39%;
    height: 35%;
    transform: rotate(-7deg);
    filter: drop-shadow(0 18px 14px #743d2830)
}

.core-face {
    height: 100%;
    background: repeating-linear-gradient(0deg, transparent 0 15px, #ff5a0020 16px), repeating-linear-gradient(90deg, #141817 0 15px, #ff5a0020 16px);
    border: 1px solid #725036;
    border-radius: 10px 10px 15px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    color: white;
    font-size: 25px;
    font-weight: 650;
    letter-spacing: -1px;
    box-shadow: inset 0 0 30px #000, 0 0 28px #ff5a0030
}

.core-face span {
    color: var(--orange)
}

.core-face small {
    width: 100%;
    text-align: center;
    font-size: 9px;
    letter-spacing: 3px;
    margin-top: 4px
}

.core-face em {
    font-style: normal;
    width: 100%;
    text-align: center;
    font-size: 6px;
    color: #ff9b55;
    margin-top: 20px;
    letter-spacing: 1px
}
.core-face .core-brand { display: block; width: 145px; height: 96px; object-fit: contain; filter: drop-shadow(0 5px 8px #0009); }

.core-top {
    position: absolute;
    top: -27px;
    left: 11%;
    width: 80%;
    height: 50px;
    background: linear-gradient(160deg, #343936, #0c0e0d);
    transform: skewX(-30deg);
    border: 1px solid #62605a;
    border-radius: 10px;
    z-index: -1
}

.tech-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffffff2;
    border: 1px solid #ededed;
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 10px 22px #6144290b;
    transform: rotate(-7deg);
    cursor: grab;
    touch-action: none;
    user-select: none;
    z-index: 3;
    transition: box-shadow .2s
}

.tech-node:hover {
    box-shadow: 0 5px 24px #ff5a002a
}

.tech-node b {
    display: block;
    font-size: 11px;
    letter-spacing: -.3px
}

.tech-node small {
    display: block;
    font-size: 8px;
    color: var(--muted);
    margin-top: 6px
}

.web {
    left: 8%;
    top: 4%
}

.mobile {
    left: 47%;
    top: 1%
}

.ai {
    right: 1%;
    top: 16%
}

.payment {
    right: -2%;
    top: 46%
}

.cctv {
    right: -2%;
    top: 66%
}

.server {
    left: 36%;
    bottom: 3%
}

.network {
    right: 6%;
    bottom: -2%
}

.database {
    left: 7%;
    top: 63%
}

.monitor {
    width: 48px;
    height: 39px;
    border: 4px solid #252829;
    background: #a83b00;
    transform: skewY(-4deg);
    box-shadow: 3px 2px 0 #aaa;
    position: relative
}

.monitor:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 9px;
    bottom: -13px;
    left: 10px;
    background: #818582;
    clip-path: polygon(35% 0, 65% 0, 65% 75%, 100% 85%, 100% 100%, 0 100%, 0 85%, 35% 75%)
}

.code-lines {
    height: 80%;
    margin: 4px;
    background: repeating-linear-gradient(0deg, #b66c31 0 1px, transparent 1px 5px);
    width: 65%
}

.phone {
    border: 3px solid #343835;
    border-radius: 6px;
    width: 25px;
    height: 52px;
    color: var(--orange);
    text-align: center;
    line-height: 15px;
    font-size: 13px;
    background: #fafafa;
    box-shadow: 3px 2px 0 #ccc
}

.phone span {
    font-size: 7px
}

.device-icon {
    font-size: 32px;
    color: #363d3b;
    text-shadow: 3px 2px #ddd
}

.db-icon {
    font-size: 34px;
    line-height: 10px;
    color: #626b6e;
    text-shadow: 3px 3px #ccc;
    padding: 8px 0
}

.server-icon {
    font-size: 23px;
    line-height: 12px;
    background: #29312f;
    color: #868d8d;
    padding: 6px;
    border-radius: 3px;
    border-right: 5px solid #111
}

.camera-icon {
    background: linear-gradient(#fafafa, #a8b1b0);
    border-radius: 10px 30px 30px 10px;
    color: #a83b00;
    font-size: 32px;
    padding: 0 8px;
    box-shadow: 3px 5px #ddd;
    transform: rotate(-13deg)
}

.router-icon {
    font-size: 40px;
    line-height: 36px;
    color: #212827
}

.floating {
    position: absolute;
    left: 1%;
    top: 25%;
    width: 36%;
    height: 28%;
    z-index: 4;
    transform: rotate(-7deg) skewY(-2deg)
}

.terminal {
    background: #111717;
    border: 3px solid #424644;
    border-radius: 5px;
    color: #eee;
    padding: 10px;
    box-shadow: 7px 6px 0 #d8d9d2, 0 15px 25px #161a1920
}

.terminal>div {
    font-size: 10px
}

.terminal>div>span {
    color: var(--orange);
    font-size: 23px;
    margin-right: 10px;
    float: left
}

.terminal small {
    display: block;
    font-size: 7px;
    color: #a5aaa5
}

.terminal pre {
    font-size: 9px;
    line-height: 1.8;
    color: #a9bdbd
}

.terminal pre span {
    color: #d7ac7b
}

.terminal pre em {
    color: #ff5a00;
    font-style: normal
}

.handnote {
    font-family: cursive;
    font-style: italic;
    font-size: 15px;
    line-height: 1.2;
    color: #9b9ca7;
    transform: rotate(-10deg);
    position: absolute
}

.note-one {
    right: 0;
    top: 0
}

.note-two {
    left: 10%;
    bottom: 0
}

.note-three {
    right: -1%;
    bottom: -5%;
    font-size: 12px
}

.node-status {
    position: absolute;
    bottom: -22px;
    left: 28%;
    font-size: 7px;
    color: #999;
    letter-spacing: 1.3px
}

.activity {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    padding: 15px 2.5%;
    font-size: 9px;
    overflow: hidden;
    white-space: nowrap
}

.activity>b {
    flex-shrink: 0;
    padding-right: 20px;
    border-right: 1px solid #ddd
}

.ticker {
    display: flex;
    gap: 24px;
    overflow: hidden;
    flex: 1;
    color: #555c6b
}

.ticker span {
    border-right: 1px solid #aab0bd;
    padding-right: 20px;
    font-size: 8px
}

.ticker em {
    color: var(--orange);
    margin: 0 8px
}

.stack-section {
    display: grid;
    grid-template-columns: 44% 24% 32%;
    align-items: center;
    padding-top: 34px;
    padding-bottom: 30px;
    min-height: 325px
}

.stack-section h2 {
    font-size: clamp(32px, 3.4vw, 48px)
}

.stack-section p:not(.eyebrow) {
    max-width: 430px;
    margin: 14px 0;
    font-size: 12px
}

.micro-path {
    display: flex;
    gap: 25px;
    margin-top: 24px;
    font-size: 9px
}

.micro-path i {
    color: var(--orange)
}

.layer-index {
    border-left: 1px dashed #ff7f42;
    padding-left: 20px
}

.layer-index>button {
    display: flex;
    border: 0;
    background: none;
    align-items: center;
    gap: 25px;
    text-align: left;
    width: 100%;
    padding: 7px 0
}

.layer-index>button>b {
    font-size: 14px;
    color: #697080;
    font-weight: 500
}

.layer-index strong {
    font-size: 9px;
    display: block
}

.layer-index small {
    font-size: 8px;
    color: var(--muted);
    display: block;
    margin-top: 3px
}

.layer-index button.active strong {
    color: var(--orange)
}

.layer-visual {
    height: 290px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.layers {
    width: 210px;
    position: relative;
    margin-top: 30px
}

.layer {
    height: 38px;
    width: calc(110px + var(--n)*15px);
    margin: 0 auto -5px;
    position: relative;
    background: linear-gradient(165deg, #fff, #dededb);
    clip-path: polygon(50% 0, 100% 24%, 100% 72%, 50% 100%, 0 72%, 0 24%);
    text-align: center;
    padding-top: 14px;
    font-size: 9px;
    box-shadow: inset 0 -13px 6px #00000012;
    transition: transform .3s, background .3s
}

.layer:nth-last-child(-n+3) {
    background: linear-gradient(165deg, #a7aba9, #2e3231);
    color: white
}

.layer:last-child {
    background: linear-gradient(165deg, #424746, #080909)
}

.layer.active {
    background: linear-gradient(165deg, #fff5eb, #ffb880);
    transform: translateY(-5px)
}

.pixel-cube {
    position: absolute;
    color: var(--orange);
    font-size: 38px;
    top: 0;
    left: 45%;
    text-shadow: 4px 4px #ffb882
}

.layer-visual .handnote {
    right: -15px;
    top: 65px;
    font-size: 18px
}

.dark {
    background: #0b0e0d;
    color: white;
    border-color: #252825
}

.dark p {
    color: #c1c3c1
}

.capabilities {
    display: grid;
    grid-template-columns: 31% 22% 47%;
    gap: 0;
    padding-top: 24px;
    padding-bottom: 24px
}

.capabilities h2 {
    font-size: 33px
}

.capabilities p:not(.eyebrow) {
    max-width: 280px;
    font-size: 12px;
    margin: 12px 0 20px
}

.cap-tabs {
    padding: 0 24px 0 15px;
    align-self: center
}

.cap-tab {
    display: flex;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-left: 1px solid #3b3b32;
    background: none;
    color: #c2c3c7;
    padding: 10px 8px;
    gap: 17px;
    font-size: 11px
}

.cap-tab.active {
    color: var(--orange);
    border: 1px solid #663212;
    background: #ff5a000a;
    border-radius: 3px
}

.cap-tab.active span {
    background: var(--orange);
    color: white;
    margin: -10px 0 -10px -8px;
    padding: 10px 8px
}

.dashboard {
    border: 1px solid #565b59;
    border-radius: 6px;
    padding: 9px;
    display: flex;
    gap: 8px;
    background: linear-gradient(135deg, #292d2b, #111514);
    min-height: 225px;
    box-shadow: 0 0 0 3px #000
}

.dashboard aside {
    width: 18%;
    font-size: 7px;
    color: #b6bab8;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 8px 3px
}

.dashboard aside b {
    font-size: 9px;
    margin-bottom: 10px;
    color: white
}

.dashboard-main {
    background: #fafafa;
    color: #101116;
    width: 57%;
    padding: 15px 13px 8px;
    border-radius: 4px;
    align-self: stretch;
    margin-top: 12px
}

.dashboard-main>small {
    font-size: 5px;
    color: #767e7a
}

.dashboard-main h3 {
    font-size: 26px;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 10px 0
}

.dash-stats {
    display: flex;
    justify-content: space-between;
    gap: 5px
}

.dash-stats>div {
    border: 1px solid #eee;
    padding: 7px;
    flex: 1
}

.dash-stats b {
    font-size: 12px
}

.dash-stats small {
    font-size: 5px;
    display: block;
    margin-top: 4px;
    color: var(--muted)
}

.chart {
    height: 43px;
    display: flex;
    gap: 3px;
    align-items: end;
    margin-top: 15px
}

.chart i {
    width: 6px;
    height: var(--height);
    background: var(--orange);
    border-radius: 1px 1px 0 0
}

.chart i:nth-child(n+16) {
    background: #d9dde2
}

.dash-label {
    font-size: 5px;
    color: #8c9196;
    margin-top: 5px
}

.dash-label span {
    float: right;
    color: #a83b00
}

.recent {
    width: 25%;
    border: 1px solid #353b37;
    padding: 12px 6px;
    border-radius: 5px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 6px;
    color: #c0c4c2
}

.recent b {
    font-size: 8px
}

.process {
    display: grid;
    grid-template-columns: 27% 73%;
    align-items: center;
    padding-top: 22px;
    padding-bottom: 22px
}

.process h2 {
    font-size: 31px
}

.process p:not(.eyebrow) {
    font-size: 11px;
    margin: 6px 0 12px
}

.process .eyebrow {
    font-size: 8px;
    margin-bottom: 10px
}

.process-steps {
    display: flex;
    gap: 18px;
    padding-left: 10px
}

.step {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 18px 8px;
    text-align: center;
    position: relative;
    transition: background .3s, border .3s
}

.step:not(:last-child):after {
    content: '→';
    position: absolute;
    right: -16px;
    top: 37px;
    color: var(--orange);
    font-size: 23px
}

.step-icon,
.flow-icon {
    display: inline-grid;
    place-items: center;
    background: #fff2ea;
    color: var(--orange);
    font-size: 25px;
    border-radius: 50%;
    width: 39px;
    height: 39px
}

.step small {
    display: block;
    color: var(--orange);
    font-size: 9px;
    margin: 11px 0 5px
}

.step b {
    font-size: 11px
}

.step p {
    font-size: 10px !important;
    margin: 8px auto 0 !important;
    max-width: 83px
}

.step.active,
.flow-card.active {
    background: #fff4ec;
    border-color: var(--orange)
}

.split-section {
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 0;
    align-items: center;
    padding-top: 23px;
    padding-bottom: 23px
}

.split-section>div:first-child {
    padding-right: 24px
}

.split-section h2 {
    font-size: 30px
}

.split-section>div:first-child>p:not(.eyebrow) {
    font-size: 11px;
    margin: 10px 0 12px;
    max-width: 230px
}

.split-section .eyebrow {
    font-size: 9px;
    margin-bottom: 13px
}

.development {
    display: flex;
    position: relative;
    padding: 13px;
    border-radius: 5px;
    min-height: 245px;
    gap: 20px;
    border: 1px solid #404541;
    box-shadow: 0 3px 10px #0002
}

.editor {
    width: 49%;
    border: 1px solid #3a4240;
    border-radius: 5px;
    overflow: hidden
}

.editor-tabs {
    display: flex;
    gap: 7px;
    align-items: center;
    border-bottom: 1px solid #363d3b;
    height: 30px;
    padding: 0 8px
}

.editor-tabs i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff665a
}

.editor-tabs i:nth-child(2) {
    background: #ffbd44
}

.editor-tabs i:nth-child(3) {
    background: #ff5a00
}

.editor-tabs span {
    font-size: 8px;
    color: #c9cecc;
    padding: 9px 7px
}

.editor-tabs span:first-of-type {
    background: #242a27
}

.editor pre {
    font-size: 9px;
    line-height: 1.9;
    padding: 7px;
    white-space: pre-wrap
}

.muted {
    color: #737b76
}

.purple {
    color: #dbaa82
}

.cyan {
    color: #ffb184
}

.green {
    color: #ff5a00
}

.editor output {
    font: 8px monospace;
    color: #ff5a00;
    display: block;
    padding: 0 10px 10px
}

.site-preview {
    width: 49%;
    background: white;
    color: #141617;
    border: 4px solid #dadad8;
    border-radius: 7px;
    transform: rotate(-1deg);
    margin: 3px 0 8px;
    overflow: hidden
}

.browser-bar {
    font-size: 8px;
    background: #f0f0ee;
    color: var(--orange);
    padding: 5px
}

.browser-bar span {
    color: #9b9b98;
    margin-left: 25px;
    font-size: 6px
}

.preview-nav {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    font-size: 13px
}

.preview-nav b span {
    color: var(--orange)
}

.preview-nav small {
    font-size: 6px
}

.preview-body {
    padding: 14px;
    position: relative;
    overflow: hidden;
    height: 165px
}

.preview-body h3 {
    font-size: 29px;
    line-height: 1;
    letter-spacing: -1px;
    position: relative;
    z-index: 1
}

.preview-body p {
    font-size: 6px;
    color: #777;
    margin: 7px 0 13px
}

.preview-body .primary {
    font-size: 7px;
    min-height: 25px;
    padding: 5px 9px;
    position: relative;
    z-index: 1
}

.building {
    position: absolute;
    right: 0;
    bottom: -15px;
    height: 160px;
    width: 47%;
    display: flex;
    align-items: end;
    transform: skewY(-13deg)
}

.building i {
    width: 33%;
    height: 75%;
    background: repeating-linear-gradient(0deg, transparent 0 8px, #adb9bb 9px 10px), repeating-linear-gradient(90deg, #354446 0 9px, #879594 10px 11px);
    border-right: 4px solid #b7c3c1
}

.building i:nth-child(2) {
    height: 100%
}

.building i:nth-child(3) {
    height: 85%
}

.build-arrow {
    color: var(--orange);
    font-size: 35px;
    position: absolute;
    top: 46%;
    left: 48%;
    z-index: 2
}

.code-product {
    position: absolute;
    bottom: 0;
    left: 37%;
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--orange);
    background: #0b0e0d;
    border: 1px solid #38403c;
    border-radius: 18px 18px 0 0;
    padding: 8px 20px
}

.code-product b {
    margin: 0 12px
}

.automation-flow {
    display: flex;
    gap: 20px;
    position: relative;
    padding: 10px 0 15px
}

.flow-card {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
    flex: 1;
    position: relative;
    transition: .3s;
    min-width: 0
}

.flow-card:not(:nth-child(4)):after {
    content: '→';
    color: var(--orange);
    position: absolute;
    right: -18px;
    top: 50%;
    font-size: 23px
}

.flow-icon {
    font-size: 20px;
    width: 30px;
    height: 30px;
    margin-right: 6px
}

.flow-card>b {
    font-size: 8px;
    vertical-align: middle
}

.flow-card p {
    font-size: 10px;
    margin-top: 14px;
    line-height: 1.7
}

.flow-card:nth-child(3) p {
    color: #858b95
}

.robot {
    width: 94px;
    align-self: center;
    flex-shrink: 0;
    text-align: center;
    position: relative
}

.robot-head {
    background: linear-gradient(120deg, white, #bdc5c3);
    height: 64px;
    border-radius: 27px 27px 23px 23px;
    border: 1px solid #dedede;
    padding: 13px 8px;
    box-shadow: 4px 5px 0 #ddd
}

.robot-head span {
    display: block;
    background: #192525;
    color: #ffb184;
    border-radius: 15px;
    font-size: 32px;
    line-height: 34px;
    letter-spacing: 3px
}

.robot-body {
    height: 36px;
    width: 58px;
    margin: 3px auto;
    background: linear-gradient(120deg, #fff, #c3cac8);
    border-radius: 15px 15px 25px 25px;
    color: var(--orange);
    padding-top: 7px
}

.robot small {
    font-size: 6px;
    color: #919994
}

.automation-flow>output {
    position: absolute;
    bottom: -6px;
    font-size: 7px;
    color: #999
}

.cloud-panel {
    display: flex;
    border: 1px solid #2c3330;
    border-radius: 5px;
    padding: 13px;
    min-height: 180px
}

.world-map {
    position: relative;
    width: 58%;
    display: flex;
    align-items: center
}

.world-map svg {
    width: 100%
}

.map-points {
    filter: drop-shadow(0 0 7px #ff6a00)
}

.map-label {
    position: absolute;
    left: 58%;
    top: 52%;
    background: #f6f6f6;
    color: #272e2c;
    border-radius: 4px;
    font-size: 8px;
    padding: 9px;
    box-shadow: 0 2px 10px #0005
}

.map-label small {
    display: block;
    font-size: 6px;
    margin-top: 5px
}

.map-label em {
    color: #a83b00;
    font-style: normal
}

.server-metrics {
    width: 42%;
    border: 1px solid #2d3430;
    border-radius: 5px;
    padding: 3px 12px
}

.metric {
    display: grid;
    grid-template-columns: 1.3fr 1fr .8fr .6fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #262c29;
    font-size: 8px;
    color: #d3d7d5
}

.metric:last-child {
    border: 0
}

.metric em {
    color: #ff5a00;
    font-style: normal;
    font-size: 8px
}

.metric b {
    font-weight: 400
}

.office-section {
    grid-template-columns: 25% 55% 20%;
    min-height: 240px
}

.office-demo {
    height: 235px;
    position: relative
}

.office-floor {
    position: absolute;
    left: 16%;
    top: 13%;
    width: 68%;
    height: 72%;
    background: #e5e3da;
    transform: rotate(-23deg) skewX(27deg) scaleY(.8);
    border: 7px solid #d4d2c9;
    box-shadow: -7px 12px 0 #b6b5ad, 0 30px 30px #b9a18f40;
    display: grid;
    grid-template-columns: 42% 58%;
    gap: 7px;
    padding: 6px
}

.room {
    border: 4px solid #e9e8e0;
    border-top: 10px solid #d2d3cd;
    background: repeating-linear-gradient(90deg, #f4f2eb 0 20px, #deded5 21px);
    position: relative;
    font-size: 6px;
    color: #777c74;
    padding: 3px
}

.meeting-table {
    width: 55%;
    height: 45%;
    background: #ad9d83;
    position: absolute;
    left: 25%;
    top: 30%;
    border: 4px solid #c8bda9;
    box-shadow: -6px 8px 0 #b2b4ad
}

.desks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 8px
}

.desk {
    height: 23px;
    background: #c8b797;
    border: 2px solid #efe9dc;
    position: relative
}

.desk:before {
    content: '';
    position: absolute;
    background: #253333;
    border: 2px solid #858b82;
    width: 15px;
    height: 13px;
    left: 2px;
    top: -7px;
    box-shadow: 3px 3px #999
}

.rack {
    background: #303c36;
    color: #ffb184;
    padding: 10px;
    margin: 7px;
    width: 60%;
    font-size: 16px
}

.office-tag {
    position: absolute;
    background: #fffffff7;
    border: 1px solid #eee;
    box-shadow: 0 3px 14px #80634c0b;
    border-radius: 5px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 22px;
    color: var(--orange);
    padding: 8px 12px;
    text-align: left;
    z-index: 2
}

.office-tag span {
    font-size: 9px;
    color: #29302e
}

.office-tag small {
    display: block;
    color: var(--muted);
    font-size: 8px;
    margin-top: 3px
}

.tag-meeting {
    left: 8%;
    top: 0
}

.tag-camera {
    right: 14%;
    top: 0
}

.tag-wifi {
    right: 0;
    bottom: 55px
}

.tag-work {
    left: 34%;
    bottom: 0
}

.office-checks {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 9px
}

.office-checks>b {
    font-size: 11px;
    margin-bottom: 6px
}

.office-checks>span {
    color: #788292
}

.office-checks>span:first-letter {
    color: #a83b00
}

.office-checks output {
    font-size: 8px;
    line-height: 1.5;
    color: var(--orange)
}

.projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.project {
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 12px;
    text-align: left;
    background: #fff;
    transition: .2s
}

.project:hover {
    transform: translateY(-4px);
    border-color: #ffb68d
}

.project>small {
    color: var(--orange);
    font-size: 9px;
    font-weight: 600
}

.project>h3 {
    font-size: 11px;
    margin: 3px 0 10px;
    font-weight: 550
}

.tags {
    display: flex;
    gap: 5px
}

.tags span {
    font-size: 7px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: #737e90
}

.project-art {
    height: 110px;
    position: relative;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#fff, #f8f9f8)
}

.project-screen {
    width: 77%;
    height: 90px;
    background: white;
    border: 5px solid #292e2d;
    border-bottom-width: 9px;
    border-radius: 4px;
    transform: perspective(500px) rotateY(-10deg);
    box-shadow: 3px 4px 7px #0002;
    padding: 5px
}

.mock-top {
    height: 6px;
    border-bottom: 1px solid #ddd;
    background: linear-gradient(90deg, var(--orange) 12%, transparent 12%);
    margin-bottom: 5px
}

.mock-content {
    display: grid;
    grid-template-columns: 15% 1fr;
    gap: 6px;
    height: 62px
}

.mock-side {
    background: repeating-linear-gradient(0deg, #dce2e1 0 2px, #fafafa 2px 8px)
}

.mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px
}

.mock-grid i {
    background: linear-gradient(135deg, #fff4e9, #f4f6f5);
    border: 1px solid #eee;
    position: relative
}

.mock-grid i:after {
    content: '';
    width: 40%;
    height: 2px;
    position: absolute;
    left: 20%;
    top: 40%;
    background: var(--orange);
    opacity: .5
}

.project:nth-child(2) .mock-grid i {
    background: #ffedf0
}

.project-phone {
    position: absolute;
    bottom: 0;
    left: 8%;
    width: 29px;
    height: 66px;
    border: 3px solid #252c28;
    border-radius: 5px;
    background: repeating-linear-gradient(0deg, #fff 0 8px, #ffe0cb 8px 14px);
    box-shadow: 3px 3px 5px #0002
}

.project:nth-child(3) .project-phone {
    left: auto;
    right: 1%;
    width: 70px;
    height: 60px
}

.testimonials {
    display: grid;
    grid-template-columns: 24% 40% 36%;
    gap: 0;
    align-items: center;
    padding-top: 22px;
    padding-bottom: 22px
}

.testimonials h2 {
    font-size: 27px
}

.testimonials p:not(.eyebrow) {
    font-size: 11px;
    max-width: 210px;
    margin-top: 8px
}

.quote {
    position: relative;
    padding: 0 32px 0 45px
}

.quote>span {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--orange);
    font: 40px Georgia;
    background: #fff4ec;
    border-radius: 50%;
    width: 30px;
    text-align: center;
    height: 30px
}

.quote blockquote {
    margin: 0;
    font-size: 13px;
    line-height: 1.5
}

.quote>div {
    margin-top: 18px
}

.quote b {
    font-size: 8px
}

.quote small {
    display: block;
    font-size: 9px;
    color: var(--muted);
    margin-top: 4px
}

.impact {
    border-left: 1px solid var(--line);
    padding-left: 25px
}

.impact .stats {
    gap: 0;
    justify-content: space-between;
    margin-top: 12px
}

.impact .stats strong {
    font-size: 34px
}

.final-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    min-height: 145px;
    background-image: radial-gradient(#65452b55 .6px, transparent .6px);
    background-size: 17px 17px
}

.final-cta>div:first-child {
    width: 31%;
    z-index: 2
}

.final-cta h2 {
    font-size: 30px
}

.final-cta p {
    font-size: 10px;
    margin-top: 10px
}

.dark-button {
    background: transparent;
    color: #ddd;
    border-color: #626663
}

.final-cta>button {
    z-index: 2
}

.final-cta>small {
    font-size: 7px;
    line-height: 1.4;
    position: absolute;
    right: 5%;
    top: 25px;
    letter-spacing: 1px
}

.globe {
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1px solid #665141;
    right: 3%;
    top: 30px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 60% 15%, #ff5a0055, transparent 22%), repeating-radial-gradient(ellipse at 50% 50%, transparent 0 26px, #656c6944 27px 28px);
    transform: rotate(-25deg);
    box-shadow: inset 15px 0 45px #7773
}

.globe:after,
.globe:before {
    content: '';
    position: absolute;
    inset: 10px 85px;
    border: 1px solid #73787366;
    border-radius: 50%
}

.globe:before {
    inset: 10px 30px
}

.globe div {
    width: 7px;
    height: 7px;
    background: var(--orange);
    box-shadow: 0 0 12px 5px #ff5a0066, 90px 30px 10px #ff5a00, -60px 50px 8px #ff5a00;
    position: absolute;
    top: 35px;
    left: 140px;
    border-radius: 50%
}

footer {
    padding: 27px 4.8% 15px
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr .8fr 1.7fr;
    gap: 24px;
    padding-bottom: 24px
}

.footer-main .logo {
    font-size: 27px
}

.footer-main .logo small {
    font-size: 8px
}

.footer-main .logo em {
    color: #bbb;
    font-size: 7px
}

.footer-main>div:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 10px
}

.footer-main b {
    font-size: 10px;
    margin-bottom: 4px;
    font-weight: 500
}

.footer-main a:not(.logo),
.footer-main>div>button {
    color: #aeb3af;
    font-size: 9px
}

.footer-main>div>button {
    background: none;
    border: 0;
    padding: 0;
    text-align: left
}

.social {
    font-size: 7px;
    letter-spacing: 1px;
    color: #777f78;
    margin-top: 22px
}

.footer-note {
    font-size: 8px !important;
    color: #959e97;
    justify-content: center
}

.footer-note strong {
    font-size: 18px;
    color: #eee;
    font-weight: 500
}

.footer-note .button {
    width: 130px;
    color: var(--orange);
    margin-top: 6px;
    padding: 7px 12px;
    border: 1px solid #5e391f
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #414640;
    padding-top: 15px;
    color: #acb2ad;
    font-size: 8px
}

.footer-bottom span:last-child {
    font-size: 12px;
    letter-spacing: 1px
}

dialog {
    width: min(520px, calc(100% - 32px));
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 35px;
    box-shadow: 0 25px 100px #0005
}

dialog::backdrop {
    background: #a83b00c0;
    backdrop-filter: blur(5px)
}

.close-dialog {
    position: absolute;
    right: 16px;
    top: 12px;
    border: 0;
    background: none;
    font-size: 27px;
    color: #777
}

dialog h2 {
    font-size: 37px
}

dialog>p:not(.eyebrow) {
    margin: 14px 0;
    font-size: 12px
}

form {
    display: grid;
    gap: 12px
}

form label {
    display: grid;
    gap: 6px;
    font-size: 11px;
    font-weight: 550
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid #dedede;
    border-radius: 4px;
    padding: 10px;
    background: #fafafa;
    color: #333
}

form output {
    font-size: 11px;
    color: #a83b00
}

body.modal-open {
    overflow: hidden
}

body.mobile-nav-open {
    overflow: hidden
}

@media(min-width:1450px) {

    main,
    header,
    footer {
        max-width: 1600px;
        margin: auto
    }

    .hero {
        min-height: 650px
    }

    .universe {
        height: 570px
    }

    .hero-copy {
        padding-top: 35px
    }

    section {
        padding-top: 38px;
        padding-bottom: 38px
    }
}

@media(max-width:1100px) {
    header {
        gap: 15px
    }

    nav {
        gap: 14px
    }

    .online {
        display: none
    }

    .hero {
        grid-template-columns: 41% 59%;
        min-height: 490px
    }

    .universe {
        height: 445px
    }

    .stats {
        gap: 30px
    }

    .tech-node {
        padding: 9px;
        gap: 7px
    }

    .tech-node b {
        font-size: 9px
    }

    .tech-node small {
        font-size: 7px
    }

    .core-face {
        font-size: 22px
    }

    .note-one {
        right: 0;
        font-size: 12px
    }

    .capabilities h2 {
        font-size: 28px
    }

    .cap-tabs {
        padding-right: 12px
    }

    .cap-tab {
        font-size: 9px
    }

    .recent {
        display: none
    }

    .dashboard-main {
        width: 78%
    }

    .dashboard aside {
        width: 22%
    }

    .flow-card {
        padding: 10px
    }

    .flow-card>b {
        display: block;
        margin-top: 5px
    }

    .robot {
        width: 70px
    }

    .robot-head {
        height: 55px;
        padding: 10px 6px
    }

    .robot-head span {
        font-size: 25px
    }

    .robot small {
        font-size: 5px
    }

    .layer-visual .handnote {
        display: none
    }

    .process-steps {
        gap: 12px
    }

    .step:not(:last-child):after {
        right: -13px
    }

    .split-section h2 {
        font-size: 26px
    }

    .impact .stats strong {
        font-size: 28px
    }

    .footer-main {
        gap: 18px
    }

    .header-actions .primary {
        font-size: 10px;
        padding: 10px
    }

    .editor pre {
        font-size: 8px
    }

    .automation-flow {
        gap: 13px
    }

    .flow-card:not(:nth-child(4)):after {
        right: -13px
    }

    .project-art {
        height: 95px
    }
}

@media(max-width:760px) {

    .internship-section {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-top: 52px;
        padding-bottom: 52px
    }

    .internship-board {
        width: calc(100% - 10px);
        transform: none;
        box-shadow: 10px 10px 0 var(--orange)
    }

    .internship-board article {
        grid-template-columns: 29px 1fr;
        gap: 10px;
        padding: 18px 14px
    }

    .internship-board article em { grid-column: 2; margin-top: -5px }

    header {
        height: 75px;
        padding: 0 20px
    }

    .logo {
        font-size: 25px
    }

    .logo small {
        font-size: 8px;
        letter-spacing: 4px
    }

    .logo em {
        font-size: 6px;
        margin-top: 7px
    }

    .header-actions {
        gap: 12px
    }

    .header-actions .primary {
        min-height: 34px;
        font-size: 9px;
        padding: 7px 10px;
        gap: 10px
    }

    .menu {
        display: block;
        border: 0;
        background: none;
        font-size: 25px;
        line-height: 1
    }

    nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 75px;
        left: 0;
        width: min(82vw, 330px);
        height: calc(100dvh - 75px);
        background: #fff;
        border-right: 1px solid #ddd;
        padding: 34px 28px;
        gap: 25px;
        font-size: 12px;
        font-weight: 650;
        letter-spacing: .2px;
        box-shadow: 12px 0 32px #1011161a;
        z-index: 2;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-102%);
        transition: transform .34s ease, opacity .24s ease, visibility 0s linear .34s
    }

    nav.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition: transform .34s cubic-bezier(.22,.8,.25,1), opacity .24s ease
    }

    nav a {
        width: 100%;
        padding: 5px 0;
        opacity: 0;
        transform: translateX(-18px);
        transition: opacity .22s ease, transform .28s ease
    }

    nav.open a {
        opacity: 1;
        transform: translateX(0)
    }

    nav.open a:nth-of-type(1) { transition-delay: .10s }
    nav.open a:nth-of-type(2) { transition-delay: .16s }
    nav.open a:nth-of-type(3) { transition-delay: .22s }
    nav.open a:nth-of-type(4) { transition-delay: .28s }
    nav.open a:nth-of-type(5) { transition-delay: .34s }
    nav.open a:nth-of-type(6) { transition-delay: .40s }

    .menu-backdrop {
        display: block;
        position: fixed;
        inset: 75px 0 0;
        z-index: -1;
        border: 0;
        background: #10111666;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility 0s linear .25s
    }

    nav.open + .menu-backdrop {
        z-index: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .25s ease
    }

    section {
        padding: 28px 22px
    }

    .hero {
        display: flex;
        flex-direction: column;
        padding-top: 27px;
        min-height: 0
    }

    .hero-copy {
        padding: 0
    }

    .hero h1 {
        font-size: 49px;
        letter-spacing: -2px
    }

    .hero h1>span br {
        display: none
    }

    .hero .intro {
        font-size: 12px;
        max-width: 420px
    }

    .hero .stats {
        justify-content: space-between;
        max-width: 400px;
        margin-top: 24px
    }

    .universe {
        height: 390px;
        margin: 30px -5px 6px;
        min-width: 0
    }

    .core-face {
        font-size: 21px
    }

    .tech-node {
        padding: 8px
    }

    .tech-node b {
        font-size: 8px
    }

    .tech-node small {
        font-size: 6px
    }

    .web {
        left: 3%
    }

    .mobile {
        left: 45%
    }

    .ai {
        right: 0;
        top: 19%
    }

    .floating {
        width: 39%;
        top: 27%;
        height: 29%;
        left: 0
    }

    .terminal pre {
        font-size: 7px
    }

    .terminal>div {
        font-size: 8px
    }

    .terminal>div>span {
        font-size: 18px
    }

    .core {
        left: 34%;
        top: 40%;
        width: 40%;
        height: 31%
    }

    .database {
        left: 1%;
        top: 62%
    }

    .server {
        left: 30%;
        bottom: 4%
    }

    .network {
        right: 0;
        bottom: 0
    }

    .cctv {
        right: -1%;
        top: 69%
    }

    .payment {
        right: -1%;
        top: 48%
    }

    .tech-node .device-icon {
        font-size: 24px
    }

    .monitor {
        width: 35px;
        height: 29px
    }

    .phone {
        height: 43px;
        width: 22px;
        font-size: 10px;
        line-height: 11px
    }

    .note-one {
        font-size: 10px;
        right: 0
    }

    .note-two {
        font-size: 12px;
        left: 6%
    }

    .note-three {
        display: none
    }

    .camera-icon {
        font-size: 23px;
        padding: 0 6px
    }

    .router-icon {
        font-size: 29px
    }

    .server-icon {
        font-size: 19px
    }

    .db-icon {
        font-size: 28px
    }

    .node-status {
        font-size: 6px;
        left: 20%;
        bottom: -15px
    }

    .activity {
        padding: 12px 20px;
        gap: 10px
    }

    .activity>b {
        font-size: 8px;
        padding-right: 10px
    }

    .ticker {
        gap: 15px
    }

    .stack-section {
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .stack-section>div:first-child {
        grid-column: 1/-1
    }

    .stack-section h2 {
        font-size: 37px
    }

    .stack-section p:not(.eyebrow) {
        max-width: 100%
    }

    .layer-index {
        padding-left: 10px
    }

    .layer-index>button {
        gap: 12px
    }

    .layer-visual {
        height: 260px
    }

    .layers {
        width: 170px
    }

    .layer {
        width: calc(80px + var(--n)*12px)
    }

    .pixel-cube {
        top: 0
    }

    .capabilities {
        grid-template-columns: 1fr;
        padding: 26px 22px;
        gap: 20px
    }

    .capabilities p:not(.eyebrow) {
        max-width: 100%;
        margin: 10px 0 15px
    }

    .cap-tabs {
        display: flex;
        overflow-x: auto;
        padding: 0;
        gap: 8px;
        padding-bottom: 5px
    }

    .cap-tab {
        min-width: 150px;
        border: 1px solid #393c36;
        padding: 10px;
        align-items: center;
        border-radius: 4px
    }

    .cap-tab.active span {
        margin: 0;
        padding: 0;
        background: none;
        color: var(--orange)
    }

    .dashboard {
        min-height: 230px
    }

    .dashboard-main {
        width: 60%
    }

    .dashboard aside {
        width: 18%
    }

    .recent {
        display: flex;
        width: 22%;
        font-size: 5px
    }

    .dashboard-main h3 {
        font-size: 27px
    }

    .process {
        display: block
    }

    .process h2 br {
        display: none
    }

    .process h2 {
        font-size: 31px;
        max-width: 320px
    }

    .process-steps {
        padding: 0;
        margin-top: 22px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px
    }

    .step {
        min-width: 103px;
        scroll-snap-align: start
    }

    .split-section {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .split-section>div:first-child {
        padding-right: 0
    }

    .split-section>div:first-child>p:not(.eyebrow) {
        max-width: 360px
    }

    .split-section h2 {
        font-size: 30px
    }

    .development {
        min-height: 220px;
        padding: 8px;
        gap: 12px
    }

    .editor-tabs {
        gap: 3px;
        padding: 0 4px
    }

    .editor-tabs span {
        font-size: 6px;
        padding: 5px 2px
    }

    .editor-tabs span:last-child {
        display: none
    }

    .editor pre {
        font-size: 6px;
        padding: 5px;
        line-height: 2
    }

    .editor output {
        font-size: 6px;
        padding: 5px
    }

    .preview-nav {
        padding: 7px;
        font-size: 9px
    }

    .preview-nav small {
        font-size: 4px
    }

    .preview-body {
        padding: 9px
    }

    .preview-body h3 {
        font-size: 22px
    }

    .preview-body p {
        font-size: 5px;
        max-width: 80px
    }

    .browser-bar {
        font-size: 5px
    }

    .browser-bar span {
        font-size: 4px;
        margin-left: 7px
    }

    .building {
        width: 50%;
        height: 105px
    }

    .code-product {
        left: 25%;
        font-size: 7px;
        padding: 6px 12px
    }

    .build-arrow {
        font-size: 24px;
        left: 47%
    }

    .automation-flow {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        padding-bottom: 15px
    }

    .flow-card>b {
        display: inline;
        font-size: 9px
    }

    .flow-card {
        min-height: 132px;
        padding: 12px
    }

    .flow-card:nth-child(2):after {
        display: none
    }

    .flow-card:nth-child(3):after {
        right: -13px
    }

    .robot {
        display: none
    }

    .flow-card p {
        font-size: 11px
    }

    .cloud-panel {
        flex-direction: column;
        gap: 10px;
        padding: 10px
    }

    .world-map {
        width: 100%;
        height: 175px
    }

    .world-map svg {
        height: 100%
    }

    .server-metrics {
        width: 100%
    }

    .metric {
        font-size: 9px;
        padding: 9px 0
    }

    .office-section {
        grid-template-columns: 1fr
    }

    .office-demo {
        height: 240px
    }

    .office-checks {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .office-checks>b,
    .office-checks output {
        grid-column: 1/-1
    }

    .office-tag {
        font-size: 18px;
        padding: 8px
    }

    .office-tag span {
        font-size: 8px
    }

    .office-tag small {
        font-size: 7px
    }

    .tag-camera {
        right: 0
    }

    .tag-meeting {
        left: 0
    }

    .tag-work {
        bottom: 5px
    }

    .projects {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .project {
        padding: 15px;
        display: grid;
        grid-template-columns: 45% 55%;
        align-items: center
    }

    .project-art {
        grid-row: 1/4;
        margin: 0 14px 0 0;
        height: 100px
    }

    .project>small {
        align-self: end;
        font-size: 10px
    }

    .project>h3 {
        font-size: 12px;
        margin: 4px 0
    }

    .tags {
        align-self: start;
        flex-wrap: wrap
    }

    .tags span {
        font-size: 6px;
        padding: 4px
    }

    .project-screen {
        width: 90%;
        height: 85px
    }

    .project-phone {
        left: 0
    }

    .testimonials {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .testimonials>div:first-child p {
        max-width: 100%
    }

    .quote {
        padding-right: 0
    }

    .impact {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 20px 0 0
    }

    .impact .stats strong {
        font-size: 33px
    }

    .final-cta {
        flex-wrap: wrap;
        gap: 12px;
        padding-bottom: 32px;
        min-height: 230px
    }

    .final-cta>div:first-child {
        width: 100%
    }

    .final-cta>small {
        right: 22px
    }

    .globe {
        right: -100px;
        top: 60px;
        opacity: .5
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 26px
    }

    .footer-main>div:first-child {
        grid-column: 1/-1
    }

    .footer-main>div:not(:first-child) {
        font-size: 11px
    }

    .footer-main a:not(.logo) {
        font-size: 11px
    }

    .footer-note {
        grid-column: 1/-1
    }

    .footer-bottom {
        gap: 15px;
        flex-wrap: wrap;
        line-height: 1.5
    }

    .footer-bottom span:last-child {
        display: none
    }

    footer {
        padding: 28px 22px 20px
    }

    dialog {
        padding: 28px 22px
    }

    dialog h2 {
        font-size: 32px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important
    }

    .connections {
        display: none
    }
}

/* Premium carousel, portfolio and client-story presentation */
.hero h1 { font-size: clamp(58px, 5.6vw, 92px); letter-spacing: -4px; }
.hero .intro { font-size: 15px; line-height: 1.7; }

.process { grid-template-columns: 31% 69%; padding-top: 62px; padding-bottom: 62px; background: linear-gradient(115deg, #fff8f3, #fff 48%); }
.process h2 { font-size: clamp(39px, 3.35vw, 56px); line-height: .98; }
.process-carousel, .project-carousel { min-width: 0; overflow: hidden; }
.process-steps, .projects { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 3px 15px; }
.process-steps::-webkit-scrollbar, .projects::-webkit-scrollbar { display: none; }
.step { flex: 0 0 min(270px, 42%); scroll-snap-align: start; min-height: 246px; padding: 28px 24px; text-align: left; border: 1px solid #e4e6e9; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 12px 32px #20272b0a; }
.step:not(:last-child):after { display: none; }
.step.active { color: #fff; background: #171a20; border-color: #171a20; transform: translateY(-7px); box-shadow: 0 20px 40px #171a2030; }
.step-icon { width: 48px; height: 48px; font-size: 27px; }
.step small { margin: 22px 0 7px; font: 10px monospace; letter-spacing: 1px; }
.step b { display: block; font-size: 22px; letter-spacing: -1px; }
.step p { max-width: 180px; margin-left: 0 !important; font-size: 12px !important; line-height: 1.6; }
.step.active p { color: #b6bdc7; }
.step-progress { position: absolute; bottom: 0; left: 0; height: 4px; width: 0; background: var(--orange); transition: width .5s; }
.step.active .step-progress { width: 100%; }
.carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #717989; font: 10px monospace; letter-spacing: .8px; }
.carousel-arrow { width: 38px; height: 38px; border: 1px solid #dfe2e6; border-radius: 50%; background: white; font-size: 18px; transition: .2s; }
.carousel-arrow:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
#work .project-controls { align-items: center; }
#work .project-controls .carousel-arrow { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0; font-size: 15px; line-height: 1; }

.projects { gap: 18px; padding: 6px 3px 18px; }
.project { flex: 0 0 min(280px, 78%); min-height: 235px; border-radius: 12px; padding: 14px; box-shadow: 0 8px 25px #17222d0b; scroll-snap-align: start; }
/* Show two complete project cards at a time on tablet and desktop. */
@media (min-width: 761px) {
    #work .project { flex: 0 0 calc((100% - 18px) / 2); min-width: 0; }
}
.project:hover { box-shadow: 0 18px 36px #ff5a0019; }
.project h3 { font-size: 15px; margin-top: 5px; }
.project-controls { justify-content: space-between; }

.testimonials { display: block; padding: 76px max(4.8vw, 24px); overflow: hidden; background: #101218; color: #fff; border: 0; }
.testimonial-heading { max-width: 630px; margin-bottom: 36px; }
.testimonial-heading h2 { font-size: clamp(38px, 4vw, 62px); letter-spacing: -2.5px; }
.testimonial-heading p:not(.eyebrow) { margin-top: 16px; max-width: 470px; color: #aeb5c0; font-size: 15px; }
.testimonial-marquees { display: grid; gap: 16px; width: 100%; max-width: 100%; }
.marquee-row { width: 100vw; max-width: 100%; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); cursor: grab; user-select: none; -webkit-user-select: none; }
.marquee-row::-webkit-scrollbar { display: none; }
.marquee-track { display: flex; gap: 16px; width: max-content; will-change: transform; animation: none !important; user-select: none; -webkit-user-select: none; }
.marquee-row.reverse .marquee-track { animation: none !important; }
.marquee-row:hover .marquee-track { animation: none !important; }
.marquee-row.is-grabbing { cursor: grabbing !important; }
.testimonial-card { flex: 0 0 315px; min-height: 155px; padding: 18px; border: 1px solid #303641; border-radius: 10px; background: #1a1d25; }
.testimonial-card>div { display: flex; justify-content: space-between; gap: 12px; color: #ff9a62; font-size: 10px; }
.testimonial-card>div b { color: #eef0f4; font-size: 11px; }
.testimonial-card p { margin: 17px 0; color: #c3c9d1; font-size: 12px; line-height: 1.6; }
.testimonial-card small { color: #7f8998; font: 10px monospace; }
.impact-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 38px; }
.impact-tiles>div { padding: 20px; border-top: 1px solid #464d59; background: linear-gradient(135deg, #1c2029, #14171e); }
.impact-tiles strong, .impact-tiles small { display: block; }
.impact-tiles strong { color: #ff8e51; font-size: clamp(30px, 3vw, 48px); letter-spacing: -2px; }
.impact-tiles small { color: #aab2be; margin-top: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
@keyframes marquee-left { to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media(max-width:760px) {
  .hero h1 { font-size: clamp(50px, 13vw, 68px); letter-spacing: -3px; }
  .process { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 48px; }
  .step { flex-basis: 82%; }
  .work-section { grid-template-columns: 1fr; gap: 28px; }
  .project { flex-basis: 84%; }
  .testimonials { padding-top: 54px; padding-bottom: 54px; }
  .testimonial-card { flex-basis: 278px; }
  .impact-tiles { grid-template-columns: 1fr 1fr; }
}

@media(prefers-reduced-motion:reduce) { .marquee-track { animation: none; } }

/* Expanded service experience */
:root {
    --muted: #626b7c
}

body {
    font-size: 16px
}

header {
    position: sticky;
    top: 0;
    backdrop-filter: blur(18px)
}

nav {
    font-size: 12px;
    gap: 24px;
    font-size: 15px;
    font-weight: 600
}

.menu-backdrop { display: none }

section {
    padding-top: 76px;
    padding-bottom: 76px
}

h2,
.split-section h2,
.capabilities h2,
.testimonials h2,
.final-cta h2 {
    font-size: clamp(34px, 3.8vw, 58px);
    line-height: 1.08;
    letter-spacing: -1.8px
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 1.6px
}

.primary,
.button {
    font-size: 14px;
    min-height: 48px;
    padding: 13px 20px
}

.hero {
    grid-template-columns: 47% 53%;
    min-height: 710px;
    padding-top: 75px;
    padding-bottom: 65px;
    background-color: #fffdfa
}

.hero h1 {
    font-size: clamp(54px, 4.65vw, 88px);
    letter-spacing: -4px;
    line-height: 1.05
}

.hero .intro {
    font-size: 18px;
    line-height: 1.75;
    max-width: 550px;
    margin: 28px 0
}

.hero .stats {
    gap: 40px;
    margin-top: 36px
}

.stats strong {
    font-size: 32px
}

.stats small {
    font-size: 12px
}

.universe {
    margin: 15px -15px 0 0;
    height: 530px
}

.core {
    animation: core-hover 6s ease-in-out infinite
}

.online i,
.eyebrow i {
    animation: status-pulse 2.5s infinite
}

.activity {
    padding-top: 18px;
    padding-bottom: 18px
}

.activity>b {
    white-space: nowrap
}

.ticker {
    mask-image: linear-gradient(90deg, #000 80%, transparent)
}

.stack-section p:not(.eyebrow),
.split-section>div:first-child>p:not(.eyebrow),
.capabilities p:not(.eyebrow),
.testimonials p:not(.eyebrow),
.final-cta p {
    font-size: 16px;
    line-height: 1.75;
    max-width: 460px;
    margin-top: 18px;
    margin-bottom: 24px
}

.stack-section h2 {
    font-size: clamp(36px, 3.6vw, 56px)
}

.process h2 {
    font-size: clamp(34px, 3.6vw, 54px)
}

.quote blockquote {
    font-size: 19px
}

.footer-main a:not(.logo),
.footer-main>div>button,
.footer-main b {
    font-size: 12px
}

.footer-bottom {
    font-size: 11px
}

form label,
dialog>p:not(.eyebrow) {
    font-size: 14px
}

input,
select,
textarea {
    font-size: 16px
}

.services-section {
    background: #f6f7f8
}

.section-heading {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: end;
    gap: 65px;
    margin-bottom: 45px
}

.section-heading>p {
    font-size: 17px;
    line-height: 1.8;
    max-width: 475px
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.service-card {
    position: relative;
    padding: 30px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .3s, border-color .3s, box-shadow .3s
}

.service-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s
}

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-6px);
    border-color: #ffb28a;
    box-shadow: 0 18px 45px #1723320b
}

.service-card:hover:before,
.service-card:focus-within:before {
    transform: scaleX(1)
}

.service-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px
}

.service-top svg {
    width: 52px;
    height: 52px;
    color: var(--orange);
    background: #fff3eb;
    padding: 7px;
    border-radius: 8px
}

.service-top>span {
    font: 11px monospace;
    color: #828a96;
    letter-spacing: 2px
}

.service-card .service-tagline {
    font-size: 12px;
    font-weight: 600;
    color: #c14706;
    margin-bottom: 10px
}

.service-card h3 {
    font-size: clamp(23px, 2vw, 30px);
    letter-spacing: -1px;
    line-height: 1.2;
    margin-bottom: 18px
}

.service-card>p {
    font-size: 15px;
    line-height: 1.8
}

.service-card ul {
    padding: 22px 0 25px;
    margin: 0;
    list-style: none;
    display: grid;
    gap: 12px
}

.service-card li {
    font-size: 13px;
    line-height: 1.65;
    color: #4d5867;
    position: relative;
    padding-left: 19px
}

.service-card li:before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--orange)
}

.service-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    gap: 8px
}

.service-bottom>span {
    font: 9px monospace;
    letter-spacing: 1px;
    color: #78818e
}

.service-bottom button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 50%;
    font-size: 23px;
    transition: background .2s, color .2s
}

.service-bottom button:hover {
    background: var(--orange);
    color: #fff
}

.service-footnote {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-top: 35px
}

.service-footnote>span {
    font: 10px monospace;
    max-width: 190px;
    line-height: 1.8;
    letter-spacing: 1px
}

.service-footnote i {
    display: inline-block;
    background: var(--orange);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px
}

.service-footnote p {
    font-size: 14px;
    flex: 1
}

.service-footnote .button {
    flex-shrink: 0
}

.operations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9%;
    background: #a83b00;
    background-image: radial-gradient(ellipse at 85% 50%, #a83b0055, transparent 60%)
}

.operations>div>p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.8;
    max-width: 510px;
    margin-top: 25px;
    color: #a9b6af
}

.ops-points {
    display: grid;
    gap: 21px;
    margin-top: 35px
}

.ops-points b {
    font-size: 15px;
    color: #fff1e8
}

.ops-points p {
    font-size: 14px;
    color: #9da9a1;
    margin-top: 7px;
    line-height: 1.7
}

.ops-console {
    align-self: center;
    border: 1px solid #3b4941;
    border-radius: 10px;
    background: #a83b00;
    box-shadow: 0 25px 80px #0004;
    overflow: hidden
}

.console-bar {
    border-bottom: 1px solid #a83b00;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font: 10px monospace;
    color: #c2cec5
}

.console-bar small {
    font-size: 8px;
    color: #8c9a90
}

.console-bar i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffb184;
    margin-right: 5px
}

.radar {
    height: 320px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(#879e8910 1px, transparent 1px), linear-gradient(90deg, #879e8910 1px, transparent 1px);
    background-size: 24px 24px
}

.radar-orbit {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid #a83b00;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%
}

.orbit-two {
    width: 160px;
    height: 160px;
    border-style: dashed;
    animation: orbit-spin 40s linear infinite
}

.radar-sweep {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 290px;
    height: 290px;
    translate: -50% -50%;
    border-radius: 50%;
    background: conic-gradient(transparent 65%, #ff6b001f 95%, #ff7c0066);
    animation: orbit-spin 8s linear infinite
}

.radar-center {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    background: #a83b00;
    border: 1px solid #b57a44;
    border-radius: 18px;
    color: #ff8135;
    font-size: 28px;
    font-weight: 750;
    box-shadow: 0 0 40px #ff5a001a
}

.radar-center span {
    font: 8px monospace;
    letter-spacing: 3px;
    margin-top: -15px
}

.radar-label {
    position: absolute;
    background: #a83b00;
    border: 1px solid #a83b00;
    border-radius: 4px;
    padding: 9px;
    color: #fff1e8;
    font: 9px monospace;
    letter-spacing: 1px
}

.r1 {
    top: 35px;
    left: 18%
}

.r2 {
    right: 8%;
    top: 135px
}

.r3 {
    bottom: 35px;
    left: 34%
}

.r4 {
    left: 6%;
    top: 185px
}

.console-log {
    padding: 10px 25px 22px
}

.console-log p {
    font: 12px monospace;
    padding: 12px 0;
    border-bottom: 1px solid #a83b00;
    color: #ffb184
}

.console-log p span {
    color: #76887a;
    margin-right: 12px
}

.console-log b {
    float: right;
    color: #ffb184
}

.console-command {
    font: 13px monospace;
    color: #ff8b44;
    padding-top: 20px
}

.cursor {
    animation: cursor-blink 1s steps(2, start) infinite
}

.support-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.support-section>div>p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.8;
    margin: 24px 0
}
.support-section h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.08; letter-spacing: -1.4px; }

.support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.support-grid article>span {
    display: block;
    color: var(--orange);
    font-size: 32px;
    margin-bottom: 14px
}

.support-grid h3 {
    font-size: 19px;
    margin-bottom: 10px;
    letter-spacing: -.5px
}

.support-grid p {
    font-size: 14px;
    line-height: 1.8
}

.reveal-pending {
    opacity: 0;
    transform: translateY(24px)
}

.reveal-visible {
    opacity: 1;
    transform: none;
    transition: opacity .65s, transform .65s;
    transition-delay: var(--reveal-delay, 0ms)
}

@keyframes core-hover {
    50% {
        transform: translateY(-12px) rotate(-4deg)
    }
}

@keyframes status-pulse {
    50% {
        box-shadow: 0 0 0 5px #ff5a0015
    }
}

@keyframes orbit-spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes cursor-blink {
    to {
        opacity: 0
    }
}

@media(max-width:1100px) {
    nav {
        gap: 12px;
        font-size: 11px
    }

    .service-card {
        padding: 22px
    }

    .hero h1 {
        font-size: 62px
    }

    .hero .intro {
        font-size: 16px
    }

    .hero .actions {
        flex-wrap: wrap
    }

    .section-heading {
        gap: 30px
    }

    .operations {
        gap: 40px
    }

    .support-section {
        gap: 35px
    }

    .universe {
        height: 490px
    }

    .service-footnote {
        gap: 18px
    }

    .testimonials {
        grid-template-columns: 1fr 1.3fr
    }

    .impact {
        grid-column: 1/-1;
        border-left: 0;
        margin-top: 35px;
        padding-left: 0
    }

    .testimonials .impact .stats {
        max-width: 600px
    }
}

@media(max-width:760px) {
    section {
        padding: 48px 22px
    }

    header {
        height: 75px
    }

    .hero {
        padding-top: 40px;
        padding-bottom: 40px;
        min-height: 0
    }

    .hero h1 {
        font-size: clamp(42px, 10vw, 64px);
        letter-spacing: -2.5px
    }

    .hero .intro {
        font-size: 16px
    }

    .hero .stats {
        gap: 15px
    }

    .hero .stats strong {
        font-size: 28px
    }

    .hero .stats small {
        font-size: 11px
    }

    .hero .actions {
        gap: 10px
    }

    .hero .actions .button,
    .hero .actions .primary {
        font-size: 12px;
        padding: 12px
    }

    .universe {
        height: 390px;
        margin: 40px 0 0
    }

    .eyebrow {
        font-size: 9px
    }

    .section-heading,
    .operations,
    .support-section {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .section-heading {
        margin-bottom: 28px
    }

    .section-heading>p {
        font-size: 16px
    }

    .service-grid {
        grid-template-columns: 1fr
    }

    .service-card {
        padding: 26px
    }

    .service-card h3 {
        font-size: 29px
    }

    .service-top {
        margin-bottom: 23px
    }

    .service-card li {
        font-size: 14px
    }

    .service-footnote {
        align-items: start;
        flex-direction: column;
        gap: 16px
    }

    .service-footnote>span {
        max-width: none
    }

    .support-grid {
        gap: 22px
    }

    .support-grid h3 {
        font-size: 17px
    }

    .support-grid p {
        font-size: 14px
    }

    .ops-console {
        min-width: 0
    }

    .console-bar {
        font-size: 8px;
        padding: 14px
    }

    .console-bar small {
        font-size: 7px
    }

    .radar-label {
        font-size: 8px
    }

    .console-log {
        padding-left: 18px;
        padding-right: 18px
    }

    .console-log p {
        font-size: 11px
    }

    .testimonials {
        grid-template-columns: 1fr
    }

    .impact {
        margin-top: 0
    }

    .quote blockquote {
        font-size: 18px
    }

    .final-cta>div:first-child {
        width: 100%
    }

    .footer-main {
        gap: 28px
    }

    .footer-bottom {
        font-size: 10px
    }

    .activity>b {
        font-size: 8px
    }

    .stack-section h2 {
        font-size: 36px
    }

    .header-actions .primary {
        font-size: 10px
    }

    .service-card:hover {
        transform: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .reveal-pending {
        opacity: 1;
        transform: none
    }

    .reveal-visible {
        transition: none
    }

    .radar-sweep {
        background: conic-gradient(transparent 65%, #ff6b001f 95%, #ff7c0066)
    }
}

/* Connected workspace: larger type, interactive planning and controlled motion. */
.reading-progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 100;
    pointer-events: none
}

.motion-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    border: 1px solid #ff5a0040;
    background: #fffdf8f2;
    color: #9a3b09;
    border-radius: 30px;
    padding: 10px 15px;
    font-size: 11px;
    box-shadow: 0 4px 20px #0001;
    backdrop-filter: blur(10px)
}

.motion-toggle span {
    margin-left: 6px
}

.motion-paused *,
.motion-paused *:before,
.motion-paused *:after {
    animation-play-state: paused !important
}

.hero h1 span {
    background: linear-gradient(110deg, #ff5a00 20%, #d84200 40%, #ff8b42 50%, #ff5a00 65%);
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: headline-flow 9s ease-in-out infinite
}

.hero .terminal {
    animation: terminal-drift 7s ease-in-out infinite
}

.service-card {
    background-image: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 0%), #ff5a000b, transparent 55%)
}

.service-top svg {
    transition: transform .4s
}

.service-card:hover .service-top svg {
    transform: rotate(-7deg) scale(1.1)
}

.service-card h3 {
    font-size: clamp(26px, 2.5vw, 36px)
}

.service-card>p {
    font-size: 16px
}

.service-card li {
    font-size: 14px
}

.process p:not(.eyebrow) {
    font-size: 15px
}

.step b {
    font-size: 14px
}

.step p {
    font-size: 12px !important
}

.step {
    padding: 22px 8px
}

.cap-tab {
    font-size: 13px;
    padding-top: 14px;
    padding-bottom: 14px
}

.capabilities {
    grid-template-columns: 30% 25% 45%
}

.technical-label {
    font: 10px monospace;
    letter-spacing: 2px;
    color: var(--orange)
}

.setup-lab {
    background-color: #fffdfb
}

.lab-workspace {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    border: 1px solid #e3ded9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 70px #63351309
}

.lab-controls {
    background: #fff;
    padding: 38px
}

.lab-controls>label {
    display: block;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 550;
    margin: 28px 0 20px
}

.lab-controls output {
    display: block;
    color: var(--orange);
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -1px;
    margin-top: 8px
}

.lab-controls input[type=range] {
    padding: 0;
    accent-color: var(--orange);
    width: 100%;
    cursor: pointer
}

.range-ends {
    display: flex;
    justify-content: space-between;
    font: 9px monospace;
    color: #7d807f;
    margin-top: 10px
}

.lab-controls fieldset {
    border: 0;
    padding: 0;
    margin: 28px 0
}

.lab-controls legend {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 17px
}

.lab-controls fieldset label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    margin: 15px 0;
    color: #626b71
}

.lab-controls input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: var(--orange)
}

.lab-preview {
    background: #101411;
    color: white;
    min-width: 0;
    display: flex;
    flex-direction: column
}

.topology {
    padding: 42px 24px 24px;
    background-image: radial-gradient(#52595066 1px, transparent 1px);
    background-size: 17px 17px
}

.topology-root {
    width: 155px;
    padding: 22px 12px;
    margin: auto;
    text-align: center;
    background: #a83b00;
    border: 1px solid #886039;
    border-radius: 6px;
    color: var(--orange);
    font-size: 20px;
    font-weight: 750;
    box-shadow: 0 0 35px #ff5a0015
}

.topology-root>span {
    display: block;
    font: 8px monospace;
    color: #bfc7be;
    letter-spacing: 1px;
    margin-top: 8px
}

.topology-lines {
    height: 56px;
    width: 76%;
    margin: auto;
    border-bottom: 1px solid #ff5a0070;
    position: relative
}

.topology-lines:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    left: 50%;
    background: var(--orange)
}

.topology-lines:after {
    content: '';
    position: absolute;
    left: calc(50% - 3px);
    top: 0;
    width: 6px;
    height: 6px;
    background: #ff8b35;
    border-radius: 50%;
    box-shadow: 0 0 13px #ff5a00;
    animation: packet-down 2s infinite
}

.topology-nodes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.topology-nodes>div {
    text-align: center;
    position: relative;
    padding-top: 25px
}

.topology-nodes>div:before {
    content: '';
    height: 20px;
    width: 1px;
    background: #ff5a0070;
    position: absolute;
    left: 50%;
    top: 0
}

.topology-nodes span {
    display: block;
    font-size: 24px;
    color: #ff8b44
}

.topology-nodes strong {
    display: block;
    font-size: 32px;
    letter-spacing: -1px;
    margin: 8px 0
}

.topology-nodes small {
    font: 7px monospace;
    letter-spacing: .5px;
    color: #aab6aa
}

.plan-summary {
    padding: 22px 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto
}

.plan-summary span {
    padding: 7px 9px;
    border: 1px solid #a83b00;
    color: #ffb184;
    font: 9px monospace;
    border-radius: 3px
}

.estimate-note {
    font-size: 12px;
    line-height: 1.7;
    color: #9aa69b;
    padding: 0 28px 28px
}

.delivery-section {
    background-image: linear-gradient(90deg, #ff5a0004, transparent)
}

.delivery-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px
}

.delivery-track article {
    border-top: 1px solid #61402a;
    padding-top: 26px;
    position: relative
}

.delivery-track article:before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    left: 0;
    top: -4px;
    background: var(--orange);
    box-shadow: 0 0 15px #ff5a0040
}

.delivery-track article>span {
    font: 10px monospace;
    color: #ff9c62;
    letter-spacing: 1px
}

.delivery-track h3 {
    font-size: 27px;
    letter-spacing: -1px;
    margin: 22px 0 14px
}

.delivery-track p {
    font-size: 15px;
    line-height: 1.8;
    color: #a6ada7
}

.service-faq {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 70px
}

.service-faq>div>p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.8;
    margin: 24px 0
}

.faq-items details {
    border-bottom: 1px solid #ddd;
    padding: 23px 0
}

.faq-items details:first-child {
    padding-top: 0
}

.faq-items summary {
    font-size: 17px;
    font-weight: 550;
    cursor: pointer;
    list-style: none;
    padding-right: 28px;
    position: relative;
    line-height: 1.5
}

.faq-items summary:after {
    content: '+';
    position: absolute;
    right: 0;
    color: var(--orange);
    font-size: 23px;
    top: -3px
}

.faq-items details[open] summary:after {
    content: '−'
}

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

.faq-items p {
    font-size: 15px;
    line-height: 1.8;
    margin-top: 18px;
    animation: answer-in .3s ease-out
}

.operations .radar-label {
    animation: radar-beacon 4s infinite
}

.operations .r2 {
    animation-delay: 1s
}

.operations .r3 {
    animation-delay: 2s
}

.operations .r4 {
    animation-delay: 3s
}

@keyframes radar-beacon {
    50% {
        border-color: #ff843f;
        box-shadow: 0 0 20px #ff5a001a
    }
}

@keyframes headline-flow {
    50% {
        background-position: 100% 50%
    }
}

@keyframes terminal-drift {
    50% {
        transform: translateY(9px) rotate(-5deg) skewY(-2deg)
    }
}

@keyframes packet-down {
    to {
        transform: translateY(50px);
        opacity: 0
    }
}

@keyframes answer-in {
    from {
        opacity: 0;
        transform: translateY(-5px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:1100px) {
    .lab-controls {
        padding: 26px
    }

    .service-faq {
        gap: 35px
    }

    .cap-tab {
        font-size: 11px
    }

    .delivery-track {
        gap: 18px
    }

    .delivery-track h3 {
        font-size: 23px
    }

    .capabilities {
        grid-template-columns: 30% 25% 45%
    }
}

@media(max-width:760px) {

    .lab-workspace,
    .service-faq {
        grid-template-columns: 1fr
    }

    .lab-controls {
        padding: 25px
    }

    .topology {
        padding: 32px 14px 22px
    }

    .topology-nodes {
        gap: 5px
    }

    .topology-nodes small {
        font-size: 6px
    }

    .lab-controls>label {
        font-size: 19px
    }

    .lab-controls fieldset label {
        font-size: 13px
    }

    .delivery-track {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px
    }

    .delivery-track h3 {
        font-size: 24px
    }

    .delivery-track p {
        font-size: 14px
    }

    .service-faq {
        gap: 28px
    }

    .faq-items summary {
        font-size: 16px
    }

    .motion-toggle {
        bottom: 12px;
        right: 12px;
        padding: 9px 12px
    }

    .motion-toggle span {
        font-size: 10px
    }

    .capabilities {
        grid-template-columns: 1fr
    }

    .cap-tab {
        font-size: 11px
    }

    .hero h1 {
        font-size: clamp(45px, 11.5vw, 68px)
    }

    .service-card h3 {
        font-size: 30px
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero h1 span {
        background: none;
        color: var(--orange)
    }

    .faq-items p {
        animation: none
    }

    .motion-toggle {
        display: none
    }
}

/* Final presentation overrides */
.hero h1 { font-size: clamp(58px, 5.6vw, 92px); letter-spacing: -4px; }
.testimonials { display: block; padding: 76px max(4.8vw, 24px); overflow: hidden; background: #101218; color: #fff; border: 0; }
.testimonial-heading { max-width: 630px; margin-bottom: 36px; }
.testimonial-heading h2 { font-size: clamp(38px, 4vw, 62px); letter-spacing: -2.5px; }
.testimonial-heading p:not(.eyebrow) { margin-top: 16px; max-width: 470px; color: #aeb5c0; font-size: 15px; }
.testimonial-marquees { display: grid; gap: 16px; width: 100%; max-width: 100%; }
.marquee-row { width: 100vw; max-width: 100%; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); cursor: grab; user-select: none; -webkit-user-select: none; }
.marquee-row::-webkit-scrollbar { display: none; }
.marquee-track { display: flex; gap: 16px; width: max-content; will-change: transform; animation: none !important; user-select: none; -webkit-user-select: none; }
.marquee-row.reverse .marquee-track { animation: none !important; }
.testimonial-card { flex: 0 0 315px; min-height: 155px; padding: 18px; border: 1px solid #303641; border-radius: 10px; background: #1a1d25; }
.testimonial-card>div { display:flex; justify-content:space-between; gap:12px; color:#ff9a62; font-size:10px; }
.testimonial-card>div b { color:#eef0f4; font-size:11px; }.testimonial-card p { margin:17px 0; color:#c3c9d1; font-size:12px; line-height:1.6; }.testimonial-card small { color:#7f8998; font:10px monospace; }
.impact-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:38px; }.impact-tiles>div { padding:20px; border-top:1px solid #464d59; background:linear-gradient(135deg,#1c2029,#14171e); }.impact-tiles strong,.impact-tiles small { display:block; }.impact-tiles strong { color:#ff8e51; font-size:clamp(30px,3vw,48px); letter-spacing:-2px; }.impact-tiles small { color:#aab2be; margin-top:5px; font-size:11px; text-transform:uppercase; letter-spacing:1px; }
@media(max-width:760px) { .hero h1 { font-size:clamp(50px,13vw,68px); letter-spacing:-3px; }.impact-tiles { grid-template-columns:1fr 1fr; }.testimonial-card { flex-basis:278px; }.testimonials { padding-top:54px; padding-bottom:54px; } }

/* Mobile header navigation */
@media(max-width:760px) {
    header nav { font-size: 12px }
    header .menu-backdrop { display: block }
}

@media(prefers-reduced-motion:reduce) {
    header nav,
    header nav a,
    header .menu-backdrop { transition: none }
}

/* Full-screen mobile menu */
@media(max-width:760px) {
    header .logo,
    header .header-actions { position: relative; z-index: 3 }

    header nav {
        top: 0;
        width: 100%;
        height: 100dvh;
        padding: 142px 11vw 42px;
        gap: 0;
        background: linear-gradient(145deg, #17191f 0%, #101116 70%);
        border: 0;
        box-shadow: none
    }

    header nav a {
        display: flex;
        align-items: center;
        min-height: 54px;
        padding: 12px 0;
        border-bottom: 1px solid #ffffff1f;
        color: #fff;
        font-size: clamp(14px, 4vw, 17px);
        font-weight: 650;
        letter-spacing: .7px
    }

    header nav a::before {
        width: 34px;
        color: var(--orange);
        font: 10px/1 monospace;
        letter-spacing: 0
    }

    header nav a:nth-of-type(1)::before { content: '01' }
    header nav a:nth-of-type(2)::before { content: '02' }
    header nav a:nth-of-type(3)::before { content: '03' }
    header nav a:nth-of-type(4)::before { content: '04' }
    header nav a:nth-of-type(5)::before { content: '05' }
    header nav a:nth-of-type(6)::before { content: '06' }
    header nav a:hover,
    header nav a:focus-visible { color: var(--orange) }

    header .menu-backdrop { display: none }
    header:has(nav.open) .logo-type { color: #fff }
    header:has(nav.open) .logo small { color: #d9dde5 }
    header:has(nav.open) .menu { color: #fff }
}

/* Brand lockup and the connected software / hardware story. */
header { gap: 24px; }
header .logo { align-items: center; flex-shrink: 0; gap: 10px; }
header .logo-mark { width: 39px; height: 54px; flex: 0 0 39px; }
header .logo-mark img { width: 107px; height: auto; top: -4px; left: 50%; opacity: 1; }
header .logo-type { font-size: 23px; letter-spacing: -1px; line-height: 1; color: var(--ink); }
header .logo-type small { display: block; margin: 7px 0 0; font: 9px/1.2 Inter, Arial, sans-serif; letter-spacing: 3px; color: #626b7c; }
header nav { gap: clamp(14px, 2vw, 30px); white-space: nowrap; }
header nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
header nav a .nav-icon { display: inline-grid; place-items: center; width: 13px; flex: 0 0 13px; line-height: 1; }
header nav a > span { display: inline-block; line-height: 1.2; }
header nav a:hover { color: var(--orange); }
.about-section { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; }
.about-copy > p:not(.eyebrow) { max-width: 590px; margin:10px 0; font-size: 17px; line-height: 1.8; }
.about-stack { background: #fff; border: 1px solid #dce1e8; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px #151b2810; }
.stack-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 20px 24px; background: #f7f8fa; font: 9px/1.5 monospace; letter-spacing: 1px; }
.about-stack article { display: flex; align-items: center; gap: 22px; padding: 27px 24px; border-top: 1px solid var(--line); }
.stack-symbol { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border: 1px solid #ff5a0033; background: #fff5ef; color: var(--orange); border-radius: 12px; font: 25px monospace; }
.about-stack article small { font: 9px monospace; letter-spacing: 1px; color: var(--muted); }
.about-stack h3 { margin: 9px 0; font-size: 21px; letter-spacing: -.6px; }
.about-stack article p { font-size: 12px; line-height: 1.7; }
.careers-section { background: radial-gradient(ellipse at top right, #ff5a0014, transparent 55%), #101319; }
.careers-section .section-heading > p { color: #b0b7c4; }
.career-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.career-card { padding: 34px; background: #ffffff04; border: 1px solid #ffffff24; border-radius: 14px; transition: border-color .2s, background .2s; }
.career-card:hover { border-color: #ff5a0088; background: #ffffff08; }
.career-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; color: #ff8950; }
.career-top > span { font: 36px monospace; }
.career-top small, .career-bottom small { font: 10px/1.5 monospace; letter-spacing: 1px; }
.career-card h3 { font-size: clamp(25px, 2.6vw, 38px); letter-spacing: -1px; margin-bottom: 18px; }
.career-card > p { color: #b0b7c4; line-height: 1.8; max-width: 500px; }
.career-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 35px; }
.career-tags span { padding: 8px 12px; border: 1px solid #ffffff26; border-radius: 5px; font-size: 11px; color: #d1d6de; }
.career-bottom { display: grid; gap: 18px; border-top: 1px solid #ffffff24; padding-top: 25px; }
.career-bottom small { color: #9da7b7; }
.career-bottom .button { background: #fff; color: #17191f; justify-content: space-between; width: 100%; }
.career-note { margin-top: 24px; color: #a7afbd; font-size: 13px; }
.project .photo-art { height: 250px; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #263644, #151923); isolation: isolate; margin-bottom: 20px; }
.photo-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.project:hover .photo-art img { transform: scale(1.06); }
.photo-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0004, transparent 40%, #000b); pointer-events: none; }
.project-number, .project-photo-title, .project-arrow { position: absolute; z-index: 1; color: #fff; }
.project-number { top: 18px; left: 18px; font: 10px monospace; letter-spacing: 1px; }
.project-photo-title { bottom: 22px; left: 18px; right: 60px; text-align: left; font-size: 23px; font-weight: 650; }
.project-arrow { right: 18px; bottom: 18px; width: 34px; height: 34px; display: grid; place-items: center; background: #fff; color: #111; border-radius: 50%; }
@media (min-width: 761px) and (max-width: 1100px) { header { padding-left: 24px; padding-right: 24px; gap: 16px; } header nav { font-size: 12px; gap: 16px; } header .header-actions .primary { padding: 12px; font-size: 11px; } header .logo-type { font-size: 20px; } }
@media (max-width: 760px) { header .logo-type { font-size: 21px; } header .logo-mark { width: 32px; flex-basis: 32px; height: 46px; } header .logo-mark img { width: 92px; } header .logo-type small { font-size: 8px; letter-spacing: 2.6px; } .about-section, .career-grid { grid-template-columns: 1fr; } .about-section { gap: 35px; } .career-card { padding: 25px; } .stack-caption { padding: 16px; font-size: 8px; } .about-stack article { padding: 22px 16px; gap: 14px; } .project .photo-art { height: 220px; } header nav { gap: 0; } }
@media (prefers-reduced-motion: reduce) { .photo-art img, .career-card { transition: none; } }

/* Animated system demo: terminal, connected stages and a seamless event stream. */
.system-lab { background: #f8fafc; padding-top: 48px; padding-bottom: 0; overflow: hidden; }
.system-lab-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.system-lab-heading h2 { font-size: clamp(28px, 3vw, 44px); letter-spacing: -1.5px; }
.simulation-badge { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: #617064; font: 10px monospace; }
.simulation-badge i, .system-terminal-footer i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #ff5a0018; animation: status-pulse 2.5s infinite; }
.system-demo { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.5fr); border: 1px solid #dce2e9; border-radius: 16px; overflow: hidden; background: white; box-shadow: 0 12px 40px #17203008; }
.system-terminal { background: #10161e; color: #dce5f1; min-width: 0; }
.system-window-bar { display: flex; justify-content: space-between; gap: 10px; padding: 18px 22px; background: #ffffff04; border-bottom: 1px solid #ffffff10; font: 10px monospace; color: #8d9eb2; }
.window-dots { color: #ed8c56; letter-spacing: 3px; }
.system-mode { display: flex; gap: 8px; padding: 20px 22px 0; }
.system-mode button { background: transparent; color: #a4b2c6; border: 1px solid #ffffff20; border-radius: 6px; padding: 9px 12px; font: 11px monospace; }
.system-mode button[aria-pressed="true"] { color: #ffaf80; border-color: #ff8b4c66; background: #ff5a0018; }
.system-code { padding: 25px 22px; font: 12px/1.9 monospace; min-height: 246px; }
.code-comment { color: #8190a6; font-size: 11px; }
.system-code pre { margin: 12px 0 20px; min-height: 114px; color: #ffbd98; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.code-prompt { color: #ffad7d; font-size: 11px; }
.system-caret { display: inline-block; width: 6px; height: 13px; margin-left: 4px; background: #ff9860; vertical-align: middle; animation: system-blink 1s steps(2, start) infinite; }
.system-terminal-footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #ffffff16; padding: 16px 22px; font: 9px monospace; letter-spacing: .5px; color: #9cacbf; }
.system-terminal-footer i { margin-right: 7px; }
.system-flow-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 26px; background-image: radial-gradient(#9baabc44 1px, transparent 1px); background-size: 18px 18px; min-width: 0; }
.system-flow-label, .system-demo-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font: 9px/1.5 monospace; letter-spacing: .6px; color: #748194; }
.system-flow { display: flex; align-items: center; padding: 38px 0; }
.system-flow-node { flex: 1; min-width: 0; padding: 18px 6px; text-align: center; background: #fff; border: 1px solid #dce3eb; border-radius: 10px; box-shadow: 0 5px 14px #10161e05; transition: transform .4s, border-color .4s, box-shadow .4s; }
.system-flow-node.is-current { border-color: #ff8a49; box-shadow: 0 7px 25px #ff5a0018; transform: translateY(-7px); }
.system-node-icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 17px; border-radius: 9px; background: #f1f4f8; color: #5c728b; font: 22px monospace; }
.is-current .system-node-icon { background: #fff0e5; color: #ff5a00; }
.system-flow-node small, .system-flow-node b, .system-flow-node em { display: block; }
.system-flow-node small { font: 8px monospace; color: #8792a3; }
.system-flow-node b { font-size: 12px; margin: 8px 0; }
.system-flow-node em { font: 9px/1.4 monospace; color: #68768a; }
.system-link { flex: 0 0 23px; height: 1px; background: #d7dfe8; position: relative; }
.system-link i { position: absolute; top: -2px; left: 0; width: 7px; height: 5px; background: #ff7a30; border-radius: 2px; box-shadow: 0 0 8px #ff5a0055; animation: system-packet 2s linear infinite; }
.system-link:nth-of-type(2) i { animation-delay: .6s; }
.system-link:nth-of-type(3) i { animation-delay: 1.2s; }
.system-output { display: flex; align-items: center; gap: 12px; padding: 17px; background: #ffffffed; border: 1px solid #dce3eb; border-radius: 9px; }
.system-output-icon { display: grid; place-items: center; flex: 0 0 28px; height: 28px; background: #fff0e5; color: #b94708; border-radius: 50%; }
.system-output small { font: 8px monospace; color: #7b8899; letter-spacing: 1px; }
.system-output p { margin-top: 5px; font-size: 12px; color: #3b485a; }
.system-signal { display: flex; align-items: center; gap: 3px; height: 25px; margin-left: auto; }
.system-signal i { width: 3px; height: 15px; background: #ff9860; animation: system-signal 1.1s ease-in-out infinite alternate; }
.system-signal i:nth-child(even) { animation-delay: -.7s; height: 24px; }
.system-demo-controls { margin-top: 23px; }
.system-demo-controls button { padding: 7px 10px; background: white; border: 1px solid #dce3eb; border-radius: 5px; color: #576579; font: 10px monospace; }
.system-lab .activity { padding: 23px 0; gap: 18px; border-bottom: 0; }
.system-lab .activity > b { display: flex; align-items: center; gap: 9px; font: 10px monospace; color: #354459; }
.system-lab .activity small { font: 8px monospace; color: #8995a5; }
.system-lab .ticker { min-width: 0; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent); }
.ticker-track { display: flex; width: max-content; flex-shrink: 0; animation: system-ticker 32s linear infinite; }
.ticker-group { display: flex; align-items: center; flex-shrink: 0; }
.system-lab .ticker-group > span { font: 10px monospace; border-right: 1px solid #dce2e9; padding: 0 24px; }
.system-lab .ticker em { margin-left: 0; font-style: normal; }
.system-lab:hover .ticker-track { animation-play-state: paused; }
.system-accessible-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.system-lab.demo-paused *, .system-lab.demo-paused *::after { animation-play-state: paused !important; }
@keyframes system-ticker { to { transform: translateX(-50%); } }
@keyframes system-packet { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }
@keyframes system-blink { to { opacity: 0; } }
@keyframes system-signal { to { transform: scaleY(.35); } }
@media (max-width: 1100px) { .system-demo { grid-template-columns: minmax(260px, .9fr) minmax(0, 1.3fr); } .system-flow-panel { padding: 20px 14px; } .system-link { flex-basis: 15px; } .system-flow-node b { font-size: 10px; } }
@media (max-width: 850px) { .system-demo { grid-template-columns: 1fr; } .system-lab-heading { align-items: flex-start; flex-direction: column; } .system-flow-panel { padding: 24px 18px; } .system-flow-node b { font-size: 12px; } }
@media (max-width: 480px) { .system-flow { flex-direction: column; padding: 25px 0; } .system-flow-node { width: 100%; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 14px; text-align: left; } .system-node-icon { grid-row: 1 / 4; margin: 0; align-self: center; } .system-flow-node b { margin: 5px 0; } .system-flow-node.is-current { transform: translateX(3px); } .system-link { width: 1px; flex-basis: 23px; } .system-link i { top: 0; left: -2px; width: 5px; height: 7px; animation-name: system-packet-vertical; } .system-lab .activity { flex-wrap: wrap; } .system-lab .activity > b { width: 100%; border: 0; } .system-lab .ticker { flex-basis: 80%; } .system-code { font-size: 11px; } }
@keyframes system-packet-vertical { 0% { transform: translateY(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .system-lab *, .system-lab *::after { animation: none !important; transition: none !important; } .system-lab .ticker { overflow-x: auto; mask-image: none; } .ticker-group[aria-hidden="true"] { display: none; } }

/* Three distinct environments: delivery playbook, product studio, cloud observatory. */
#process.delivery-studio { grid-template-columns: minmax(0,.85fr) minmax(0,1.5fr); gap: 65px; padding-top: 90px; padding-bottom: 90px; background: #fffaf3; }
#process h2 { font-size: clamp(34px,3.6vw,54px); line-height: 1.09; letter-spacing: -2px; }
#process h2 span { color: #8c8579; }
#process .eyebrow { font-size: 10px; line-height: 1.7; margin-bottom: 23px; }
#process > div > p:not(.eyebrow) { font-size: 16px; line-height: 1.8; margin: 25px 0; max-width: 410px; }
#process .process-carousel { border-top: 1px solid #ded5c8; overflow: hidden; }
.delivery-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 20px 0 30px; font: 9px/1.5 monospace; letter-spacing: 1px; color: #8c7960; }
#process .process-steps { gap: 12px; padding: 9px 2px 18px; }
#process .step { flex: 0 0 31%; min-height: 225px; border: 1px solid #e8ddcc; background: #fffdf9; padding: 22px 17px; border-radius: 2px 20px 2px 2px; box-shadow: none; cursor: pointer; transition: transform .25s, background .25s; }
#process .step.active { background: #f16a29; border-color: #f16a29; color: #fff; box-shadow: 0 9px 20px #ee70231a; transform: translateY(-5px); }
#process .step-icon { background: transparent; color: #b5a894; border-radius: 0; justify-content: start; font: 30px monospace; width: auto; }
#process .step.active .step-icon, #process .step.active small, #process .step.active p { color: #fff4e7; }
#process .step small { font: 10px monospace; color: #a1896b; margin: 25px 0 8px; }
#process .step b { font-size: 22px; letter-spacing: -.7px; }
#process .step p { font-size: 12px !important; line-height: 1.6; color: #8a7e6e; }
#process .step-progress { background: #ffc599; height: 3px; }
.delivery-detail { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid #ded5c8; border-bottom: 1px solid #ded5c8; min-height: 106px; }
.delivery-detail > span { font: 9px/1.6 monospace; color: #9c795c; flex: 0 0 68px; }
#process .delivery-detail p { font-size: 14px; margin: 0; line-height: 1.7; color: #62594b; }
.delivery-detail > b { margin-left: auto; color: #e77437; font-size: 25px; }
#process .carousel-controls { justify-content: flex-end; margin-top: 18px; }
#process .carousel-arrow { background: transparent; border-color: #ddcfbd; }
#engineering.product-studio { display: block; padding-top: 85px; padding-bottom: 85px; background: #fffaf7; }
#engineering > div:first-child { padding: 0; position: relative; max-width: none; margin-bottom: 38px; }
#engineering h2 { font-size: clamp(36px,4.2vw,62px); max-width: 850px; }
#engineering h2 span { color: var(--orange); }
#engineering .eyebrow { color: var(--orange); letter-spacing: 1.5px; }
#engineering > div:first-child > p:not(.eyebrow) { max-width: 580px; color: #747b8c; font-size: 16px; }
#engineering #build-demo { position: absolute; right: 0; bottom: 0; background: #ff5a00; border-color: #ff5a00; color: white; }
#engineering .development { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; padding: 0; background: #15171d; border: 1px solid #eaecef; border-radius: 16px; box-shadow: 0 25px 55px #10111612; overflow: hidden; }
.studio-toolbar { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 15px; padding: 20px 25px; font: 10px/1.5 monospace; letter-spacing: 1px; color: #aeb3bd; border-bottom: 1px solid #ffffff15; }
.studio-toolbar i { display: inline-block; width: 7px; height: 7px; background: #ff5a00; border-radius: 2px; margin-right: 7px; }
.studio-toolbar b { font-weight: 400; margin-left: 22px; color: #ffab7b; }
#engineering .editor { width: auto; border: 0; border-right: 1px solid #ffffff15; border-radius: 0; background: #15171d; }
.pane-label { display: flex; justify-content: space-between; padding: 20px 24px; font: 9px monospace; letter-spacing: 1.3px; color: #aeb3bd; border-bottom: 1px solid #ffffff12; }
#engineering .editor-tabs { height: 46px; padding: 0 24px; border-bottom-color: #ffffff12; }
#engineering .editor-tabs span { font-size: 10px; }
#engineering .editor-tabs span:first-of-type { background: #33302e; }
#engineering .editor pre { padding: 23px; font: 12px/2.1 monospace; overflow-wrap: anywhere; min-height: 280px; }
#engineering .purple { color: #c2a0f0; }
#engineering .cyan { color: #8acbd9; }
#engineering .green { color: #ffb184; }
#engineering .editor output { padding: 18px 24px; font-size: 11px; background: #ffffff03; border-top: 1px solid #ffffff12; }
#engineering .build-arrow { display: none; }
#engineering .site-preview { width: auto; margin: 24px; border: 1px solid #eaecef; border-radius: 10px; transform: none; align-self: center; box-shadow: 0 20px 40px #0003; }
#engineering .site-preview .pane-label { color: #747b8c; background: #fffaf7; border-bottom: 1px solid #eaecef; padding: 14px; }
#engineering .browser-bar { padding: 10px 14px; background: #f5f5f5; }
#engineering .browser-bar span { font: 9px monospace; }
#engineering .preview-nav { padding: 20px; }
#engineering .preview-body { height: 270px; padding: 24px; background: radial-gradient(ellipse at bottom right,#ffd7ad,transparent 70%),#fffaf4; }
#engineering .preview-body h3 { font-size: clamp(36px,3.5vw,55px); max-width: 250px; }
#engineering .preview-body p { font-size: 11px; max-width: 160px; line-height: 1.7; }
#engineering .preview-body .primary { font-size: 9px; letter-spacing: 0; padding: 10px; }
#engineering .building { opacity: .65; }
#engineering .code-product { position: relative; bottom: auto; left: auto; transform: none; grid-column: 1 / -1; display: flex; justify-content: center; gap: 24px; padding: 20px; background: #202229; font: 9px monospace; letter-spacing: 2px; color: #b7bdc7; overflow: hidden; }
#engineering .code-product b { color: #ffab7b; }
.build-track { position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: #ff5a00; }
.is-building .build-track { animation: studio-build 2.6s linear forwards; }
#infrastructure.cloud-observatory { display: block; background: linear-gradient(#ededed55 1px, transparent 1px), linear-gradient(90deg, #ededed55 1px, transparent 1px), #fff; color: #101116; padding-top: 85px; padding-bottom: 85px; border-color: #eaecef; background-size: 42px 42px; }
#infrastructure > div:first-child { position: relative; padding: 0; margin-bottom: 38px; }
#infrastructure h2 { font-size: clamp(36px,4.2vw,62px); }
#infrastructure h2 span, #infrastructure .eyebrow { color: var(--orange); }
#infrastructure > div:first-child > p:not(.eyebrow) { color: #747b8c; max-width: 580px; font-size: 16px; }
#cloud-check { position: absolute; right: 0; bottom: 0; color: #ffffff; border-color: #ff5a00; background: #ff5a00; }
#infrastructure .cloud-panel { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); padding: 0; background: #15171d; border: 1px solid #34373f; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 65px #0003; }
.cloud-toolbar, .cloud-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 26px; color: #b2b8c2; font: 10px/1.6 monospace; letter-spacing: 1px; background: #ffffff03; border-bottom: 1px solid #34373f; }
.cloud-toolbar small { font: inherit; color: #a0a7b3; }
.cloud-toolbar i, .cloud-footer i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; background: #ff5a00; }
.cloud-overview { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-bottom: 1px solid #34373f; }
.cloud-overview > div { padding: 25px; border-right: 1px solid #34373f; }
.cloud-overview > div:last-child { border: 0; }
.cloud-overview small { color: #a0a7b3; font: 9px monospace; letter-spacing: 1px; }
.cloud-overview strong { display: block; font-size: 28px; font-weight: 500; margin-top: 12px; letter-spacing: -1px; }
.cloud-overview strong span { color: #ff5a00; font-size: 10px; margin-left: 14px; }
.cloud-overview em { font: 11px monospace; color: #a0a7b3; margin-left: 8px; letter-spacing: 0; }
#infrastructure .world-map { width: auto; min-height: 310px; padding: 20px; background: radial-gradient(#71768040 1px,transparent 1px); background-size: 14px 14px; }
#infrastructure .world-map svg { overflow: visible; }
.cloud-routes { stroke-dasharray: 6 7; animation: cloud-route-flow 12s linear infinite; }
#infrastructure .map-points { fill: #ff5a00; filter: drop-shadow(0 0 8px #ff5a0066); }
#infrastructure .map-label { background: #282421; color: #fff0e6; border: 1px solid #754323; padding: 11px 15px; font: 11px monospace; }
#infrastructure .map-label small { font-size: 9px; }
#infrastructure .server-metrics { width: auto; margin: 22px; padding: 0 18px; border: 1px solid #34373f; background: #1c1e25; border-radius: 9px; align-self: center; }
#infrastructure .metric { font: 11px/1.7 monospace; padding: 16px 0; gap: 10px; border-color: #34373f; color: #b5bcc7; grid-template-columns: 1.3fr 1fr .8fr .6fr; }
#infrastructure .metric em { font-size: 10px; color: #ff5a00; }
#infrastructure .metric b { color: #f5f5f7; }
.cloud-footer { border-top: 1px solid #34373f; border-bottom: 0; color: #a0a7b3; font-size: 9px; }
.is-checking .cloud-routes { animation-duration: 1s; stroke: #ffb17f; }
.is-checking .cloud-overview strong:first-of-type { color: #ffab7b; }
@keyframes studio-build { to { width: 100%; } }
@keyframes cloud-route-flow { to { stroke-dashoffset: -130; } }
@media(max-width:1100px) { #process.delivery-studio { grid-template-columns: 1fr; gap: 30px; } #process .step { flex-basis: 28%; } #engineering #build-demo, #cloud-check { position: static; margin-top: 6px; } #infrastructure .metric { font-size: 9px; gap: 6px; } #engineering .editor pre { font-size: 10px; } }
@media(max-width:760px) { #process.delivery-studio, #engineering.product-studio, #infrastructure.cloud-observatory { padding-top: 55px; padding-bottom: 55px; } #process .step { flex-basis: 72%; min-height: 225px; } #engineering .development, #infrastructure .cloud-panel { grid-template-columns: minmax(0,1fr); } #engineering .editor { border-right: 0; } #engineering .editor pre { min-height: auto; font-size: 10px; padding: 18px; } #engineering .site-preview { margin: 18px; } #engineering .studio-toolbar { padding: 15px; font-size: 8px; letter-spacing: .3px; } .studio-toolbar b { margin-left: 5px; } #engineering .code-product { gap: 12px; font-size: 8px; letter-spacing: .5px; } .cloud-overview { grid-template-columns: 1fr 1fr; } .cloud-overview > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #34373f; } .cloud-overview > div { padding: 20px; } .cloud-overview strong { font-size: 25px; } #infrastructure .world-map { min-height: 230px; } #infrastructure .server-metrics { margin: 0 15px 22px; padding: 0 12px; } #infrastructure .metric { font-size: 9px; } .cloud-toolbar, .cloud-footer { padding: 17px; font-size: 8px; } .delivery-detail { gap: 12px; } #process .delivery-detail p { font-size: 12px; } }
@media(prefers-reduced-motion:reduce) { #process .step, .cloud-routes, .is-building .build-track { animation: none; transition: none; } }

/* Primary software and digital service catalogue. */
#software-services { background-color: #fffaf7; padding-top: 70px; padding-bottom: 70px; }
#software-services .software-service-icon { font: 32px/1 monospace; color: var(--orange); }
#software-services .service-card { border-top: 3px solid var(--orange); }
@media (max-width: 760px) { #software-services { padding-top: 45px; padding-bottom: 45px; } }

/* Compact typography across desktop and mobile. */
main .hero h1 {
    font-size: clamp(36px, 4.2vw, 60px);
    line-height: 1.1;
    letter-spacing: -2px;
}
main section h2,
#process h2,
#engineering h2,
#infrastructure h2 {
    font-size: clamp(27px, 2.8vw, 40px);
    line-height: 1.15;
    letter-spacing: -1px;
}
main .hero .intro,
main .section-heading > p,
main .about-copy > p:not(.eyebrow),
main .split-section > div:first-child > p:not(.eyebrow),
main .stack-section p:not(.eyebrow),
main .capabilities p:not(.eyebrow),
main .testimonials p:not(.eyebrow),
main .final-cta p,
#process > div > p:not(.eyebrow),
#engineering > div:first-child > p:not(.eyebrow),
#infrastructure > div:first-child > p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.75;
}
main .service-card h3,
main .career-card h3 {
    font-size: clamp(20px, 1.7vw, 24px);
    letter-spacing: -.5px;
    line-height: 1.25;
}
main .service-card > p:not(.service-tagline),
main .career-card > p { font-size: 13px; line-height: 1.75; }
main .about-stack h3, #process .step b { font-size: 19px; }
main .primary, main .button { font-size: 12px; }
main .stats strong, main .impact-tiles strong { font-size: 26px; letter-spacing: -.8px; }
#engineering .preview-body h3 { font-size: clamp(28px, 2.8vw, 38px); }
@media (max-width: 760px) {
    main .hero h1 { font-size: clamp(32px, 8.5vw, 42px); letter-spacing: -1.2px; }
    main section h2, #process h2, #engineering h2, #infrastructure h2 {
        font-size: 26px;
        letter-spacing: -.7px;
    }
    main .service-card h3, main .career-card h3 { font-size: 20px; }
    main .stats strong, main .impact-tiles strong { font-size: 23px; }
}

/* The connected-office demo is temporarily removed from the public page. */
#office { display: none !important; }

/* Delivery section aligned with the main ONEPIXEL orange / paper theme. */
#process.delivery-studio {
  background-color: #fffaf7;
  background-image: linear-gradient(#f0e9e2 1px, transparent 1px), linear-gradient(90deg, #f0e9e2 1px, transparent 1px);
  background-size: 34px 34px;
  color: var(--ink);
}
#process.delivery-studio::before { color: #ff5a0012; }
#process.delivery-studio h2 { color: var(--ink); }
#process.delivery-studio h2 span { color: var(--orange); }
#process.delivery-studio > div > p:not(.eyebrow) { color: #687080; }
#process.delivery-studio .process-carousel { border-color: #e4d9cf; }
#process.delivery-studio .delivery-caption { color: #9d765c; }
#process.delivery-studio .step { background: #ffffffd9; border-color: #e4d9cf; color: var(--ink); box-shadow: 0 8px 20px #7d4c2410; }
#process.delivery-studio .step:hover { background: #fff; border-color: #ff9c6d; }
#process.delivery-studio .step.active { background: linear-gradient(145deg, #ff6d2d, #e85316); border-color: #f06428; color: #fff; box-shadow: 0 12px 26px #e85e271f; }
#process.delivery-studio .step b { color: var(--ink); }
#process.delivery-studio .step.active b { color: #fff; }
#process.delivery-studio .step p { color: #7c746d; }
#process.delivery-studio .step.active p { color: #fff1e8; }
#process.delivery-studio .step small { color: #a9856d; }
#process.delivery-studio .step.active small { color: #ffe0cf; }
#process.delivery-studio .delivery-detail { border-color: #e4d9cf; }
#process.delivery-studio .delivery-detail > span { color: #9d765c; }
#process.delivery-studio .delivery-detail p { color: #5e5a56; }
#process.delivery-studio .carousel-arrow { color: var(--ink); border-color: #dacbc0; }
#process.delivery-studio .carousel-arrow:hover { color: #fff; background: var(--orange); border-color: var(--orange); }

/* Technical delivery cards: each stage has its own signal and motion cue. */
#process .step { background: linear-gradient(145deg, #ffffff08, #ffffff03); }
#process .step::after { content: '↗'; position: absolute; right: 14px; top: 14px; color: #ffffff44; font: 15px monospace; }
#process .step:nth-child(1) .step-icon { color: #72c7ff; }
#process .step:nth-child(2) .step-icon { color: #b695ff; }
#process .step:nth-child(3) .step-icon { color: #ffcf70; }
#process .step:nth-child(4) .step-icon { color: #ff986f; }
#process .step:nth-child(5) .step-icon { color: #ff5a00; }
#process .step:nth-child(6) .step-icon { color: #f38cff; }
#process .step:hover .step-icon { animation: process-signal .65s ease-out; }
#process.process-playing .step.active .step-icon { animation: process-signal 1.1s ease-in-out infinite; }
#process .step.active::after { color: #fff9; }
@keyframes process-signal {
  0% { transform: translateY(0) scale(1) rotate(0); }
  45% { transform: translateY(-5px) scale(1.16) rotate(-8deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { #process .step:hover .step-icon, #process.process-playing .step.active .step-icon { animation: none; } }

/* Final mobile overrides (kept last so they win over the legacy responsive rules). */
@media (max-width: 760px) {
  #capabilities { display: block; padding: 48px 18px 42px; overflow: hidden; }
  #capabilities h2 { font-size: 30px; line-height: 1.05; }
  #capabilities .cap-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
  #capabilities .cap-tabs::-webkit-scrollbar { display: none; }
  #capabilities .cap-tab { flex: 0 0 145px; min-width: 145px; height: 47px; padding: 8px 10px; font-size: 10px; }
  #capabilities .dashboard { display: flex; min-height: 210px; padding: 7px; gap: 6px; overflow: hidden; }
  #capabilities .dashboard aside { flex: 0 0 54px; width: 54px; gap: 11px; font-size: 6px; }
  #capabilities .dashboard aside span:nth-of-type(n+3) { display: none; }
  #capabilities .dashboard-main { flex: 1; width: auto; padding: 12px 10px 7px; margin-top: 8px; }
  #capabilities .dashboard-main h3 { font-size: 23px; }
  #capabilities .recent { flex: 0 0 65px; width: 65px; padding: 8px 4px; gap: 8px; font-size: 6px; }
  #process.delivery-studio { background: radial-gradient(circle at 85% 15%, #343947 0 1px, transparent 1px), linear-gradient(135deg, #171a21, #242832); background-size: 18px 18px, auto; color: #fff; }
  #process.delivery-studio::before { content: '01  02  03  04  05  06'; position: absolute; right: -35px; top: 16px; color: #ffffff14; font: 24px monospace; letter-spacing: 2px; }
  #process.delivery-studio h2 span { color: #ff9b68; }
  #process.delivery-studio .process-steps { display: flex; overflow-x: auto; padding-bottom: 12px; }
  #process.delivery-studio .step { flex: 0 0 72%; min-height: 185px; background: #ffffff08; border-color: #ffffff1c; }
  #process.delivery-studio .step.active { background: linear-gradient(145deg, #ff6c29, #c84712); border-color: #ff955e; }
}

/* Final theme override for the delivery section. */
#process.delivery-studio { background-color: #fffaf7; background-image: linear-gradient(#f0e9e2 1px, transparent 1px), linear-gradient(90deg, #f0e9e2 1px, transparent 1px); background-size: 34px 34px; color: var(--ink); }
#process.delivery-studio::before { color: #ff5a0012; }
#process.delivery-studio h2 { color: var(--ink); }
#process.delivery-studio h2 span { color: var(--orange); }
#process.delivery-studio > div > p:not(.eyebrow) { color: #687080; }
#process.delivery-studio .process-carousel { border-color: #e4d9cf; }
#process.delivery-studio .delivery-caption { color: #9d765c; }
#process.delivery-studio .step { background: #ffffffd9; border-color: #e4d9cf; color: var(--ink); box-shadow: 0 8px 20px #7d4c2410; }
#process.delivery-studio .step:hover { background: #fff; border-color: #ff9c6d; }
#process.delivery-studio .step.active { background: linear-gradient(145deg, #ff6d2d, #e85316); border-color: #f06428; color: #fff; }
#process.delivery-studio .step b { color: var(--ink); }
#process.delivery-studio .step.active b { color: #fff; }
#process.delivery-studio .step p { color: #7c746d; }
#process.delivery-studio .step.active p { color: #fff1e8; }
#process.delivery-studio .step small { color: #a9856d; }
#process.delivery-studio .step.active small { color: #ffe0cf; }
#process.delivery-studio .delivery-detail { border-color: #e4d9cf; }
#process.delivery-studio .delivery-detail > span { color: #9d765c; }
#process.delivery-studio .delivery-detail p { color: #5e5a56; }
#process.delivery-studio .carousel-arrow { color: var(--ink); border-color: #dacbc0; }
#process.delivery-studio .carousel-arrow:hover { color: #fff; background: var(--orange); border-color: var(--orange); }

/* Software expertise: a clean, scrollable mobile workspace. */
@media (max-width: 760px) {
  #capabilities { display: block; padding: 48px 18px 42px; overflow: hidden; }
  #capabilities > div:first-child { margin-bottom: 22px; }
  #capabilities h2 { font-size: 30px; line-height: 1.05; }
  #capabilities p:not(.eyebrow) { font-size: 11px; line-height: 1.6; max-width: 330px; }
  #capabilities > div:first-child .primary { font-size: 10px; padding: 10px 12px; }
  #capabilities .cap-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
  #capabilities .cap-tabs::-webkit-scrollbar { display: none; }
  #capabilities .cap-tab { flex: 0 0 145px; min-width: 145px; height: 47px; padding: 8px 10px; font-size: 10px; white-space: nowrap; }
  #capabilities .dashboard { display: flex; min-height: 210px; padding: 7px; gap: 6px; border-radius: 10px; overflow: hidden; }
  #capabilities .dashboard aside { flex: 0 0 54px; width: 54px; gap: 11px; font-size: 6px; }
  #capabilities .dashboard aside span:nth-of-type(n+3) { display: none; }
  #capabilities .dashboard-main { flex: 1 1 auto; width: auto; padding: 12px 10px 7px; margin-top: 8px; }
  #capabilities .dashboard-main h3 { font-size: 23px; }
  #capabilities .dash-stats { gap: 3px; }
  #capabilities .dash-stats > div { padding: 5px; }
  #capabilities .dash-stats b { font-size: 10px; }
  #capabilities .recent { flex: 0 0 65px; width: 65px; padding: 8px 4px; gap: 8px; font-size: 6px; }
  #capabilities .recent span { line-height: 1.25; }
}

/* A stronger delivery-studio identity for the blank-screen journey. */
#process.delivery-studio { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 15%, #343947 0 1px, transparent 1px), linear-gradient(135deg, #171a21, #242832); background-size: 18px 18px, auto; color: #fff; }
#process.delivery-studio::before { content: '01  02  03  04  05  06'; position: absolute; right: 5%; top: 34px; color: #ffffff14; font: 42px monospace; letter-spacing: 8px; }
#process.delivery-studio h2 span { color: #ff9b68; }
#process.delivery-studio > div > p:not(.eyebrow) { color: #aeb6c5; }
#process.delivery-studio .process-carousel { border-color: #ffffff1c; }
#process.delivery-studio .delivery-caption { color: #ffad82; }
#process.delivery-studio .step { background: #ffffff08; border-color: #ffffff1c; }
#process.delivery-studio .step:hover { background: #ffffff12; }
#process.delivery-studio .step.active { background: linear-gradient(145deg, #ff6c29, #c84712); border-color: #ff955e; }
#process.delivery-studio .step b { color: #fff; }
#process.delivery-studio .step p { color: #aeb6c5; }
#process.delivery-studio .step.active p { color: #fff1e8; }
#process.delivery-studio .delivery-detail { border-color: #ffffff1c; }
#process.delivery-studio .delivery-detail p { color: #d8dee8; }
#process.delivery-studio .carousel-arrow { color: #fff; border-color: #ffffff35; }
@media (max-width: 760px) {
  #process.delivery-studio { padding-top: 52px; padding-bottom: 48px; }
  #process.delivery-studio::before { top: 16px; right: -35px; font-size: 24px; letter-spacing: 2px; }
  #process.delivery-studio .process-steps { display: flex; overflow-x: auto; padding-bottom: 12px; }
  #process.delivery-studio .step { flex: 0 0 72%; min-height: 185px; }
}

/* Delivery playbook and automation lab. */
#process.delivery-studio {
    background: radial-gradient(ellipse at 0 100%, #ff5a000c, transparent 55%), #fff;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 5vw, 72px);
    padding-top: 65px;
    padding-bottom: 65px;
}
#process h2 span { color: var(--orange); }
#process h2 .process-highlight { color: #ff5a00 !important; }
#process .process-carousel {
    padding: 24px;
    border: 1px solid #34373f;
    border-radius: 18px;
    background: #17191f;
    box-shadow: 0 20px 45px #10111612;
    min-width: 0;
}
#process .delivery-caption { color: #adb3bf; padding: 0 0 22px; font-size: 9px; }
#process .carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#process .carousel-arrow { display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; line-height: 1; text-align: center; }
#process #process-count { min-width: 42px; text-align: center; }
#process .process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0; }
#process .step { min-width: 0; min-height: 166px; padding: 16px; border-radius: 10px; background: #22252d; border: 1px solid #373b45; color: #fff; position: relative; overflow: hidden; }
#process .step:hover { border-color: #ff965d; transform: translateY(-3px); }
#process .step.active { background: var(--orange); border-color: var(--orange); transform: none; box-shadow: 0 6px 20px #ff5a0020; }
#process .step-icon { color: #ffab7b; font-size: 23px; height: 30px; margin: 0; }
#process .step small { font-size: 9px; margin: 12px 0 7px; color: #aeb6c5; }
#process .step b { font-size: 17px; letter-spacing: -.3px; }
#process .step p { font-size: 11px !important; color: #b4bdcc; margin-top: 8px; }
#process .delivery-detail { margin-top: 20px; padding: 17px 0; border-color: #373b45; min-height: 90px; }
#process .delivery-detail > span { color: #ffab7b; }
#process .delivery-detail p { color: #d5dae3; font-size: 12px; }
#process .carousel-controls { color: #adb3bf; }
#process .carousel-arrow { border-color: #414652; color: #fff; border-radius: 50%; }
#process .carousel-arrow:hover { background: var(--orange); border-color: var(--orange); }
#automation.automation-studio {
    display: grid;
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    gap: clamp(28px, 5vw, 72px);
    background: linear-gradient(#f0e7e155 1px, transparent 1px), linear-gradient(90deg, #f0e7e155 1px, transparent 1px), #fffaf7;
    background-size: 32px 32px;
    padding-top: 65px;
    padding-bottom: 65px;
}
#automation .automation-flow { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 24px; border: 1px solid #e8ded7; background: #ffffffed; border-radius: 18px; box-shadow: 0 20px 45px #6d42200b; counter-reset: workflow; min-width: 0; }
.automation-caption { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; font: 9px/1.6 monospace; color: #69717e; }
.automation-caption i { display: inline-block; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; margin-right: 5px; }
.automation-caption small { font: inherit; color: #a15327; }
#automation .flow-card { counter-increment: workflow; padding: 20px; min-height: 180px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fafafa; box-shadow: none; }
#automation .flow-card::before { content: '0' counter(workflow); position: absolute; right: 17px; top: 18px; font: 11px monospace; color: #9197a2; }
#automation .flow-card::after { display: none; }
#automation .flow-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffd9c2; border-radius: 10px; background: #fff0e6; color: #da4d00; font-size: 20px; margin-bottom: 14px; }
#automation .flow-card > b { display: block; font-size: 13px; color: #20232b; }
#automation .flow-card p { font-size: 12px; color: #657080; line-height: 1.75; margin-top: 9px; }
#automation .flow-card.active { background: #fff5ee; border-color: var(--orange); box-shadow: 0 0 0 3px #ff5a000b; transform: translateY(-2px); }
#automation .automation-flow > output { position: static; grid-column: 1 / -1; width: auto; text-align: left; padding: 13px 15px; border-radius: 8px; background: #17191f; color: #ffc7a6; font: 11px/1.6 monospace; }
#process #run-process, #automation #run-ai { background: var(--orange); color: #fff; border-color: var(--orange); }
@media (max-width: 1000px) {
    #process.delivery-studio, #automation.automation-studio { grid-template-columns: minmax(0,1fr); gap: 28px; }
}
@media (max-width: 520px) {
    #process.delivery-studio, #automation.automation-studio { padding-top: 45px; padding-bottom: 45px; }
    #process .process-carousel, #automation .automation-flow { padding: 18px 14px; border-radius: 14px; }
    #process .process-steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
    #process .step { padding: 16px; min-height: auto; width: 100%; box-sizing: border-box; }
    #automation .automation-flow { grid-template-columns: minmax(0,1fr); gap: 12px; }
    #automation .flow-card { min-height: auto; padding: 18px; }
    #process .delivery-detail { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    #process .step, #automation .flow-card { transition: none; transform: none; }
}

/* One-time delivery reveal and user-triggered build sequence. */
#process .step:nth-child(1) { --step-delay: 0ms; }
#process .step:nth-child(2) { --step-delay: 90ms; }
#process .step:nth-child(3) { --step-delay: 180ms; }
#process .step:nth-child(4) { --step-delay: 270ms; }
#process .step:nth-child(5) { --step-delay: 360ms; }
#process .step:nth-child(6) { --step-delay: 450ms; }
#process.process-entered .step {
    animation: delivery-card-enter 650ms cubic-bezier(.2,.7,.2,1) var(--step-delay) backwards;
}
#process.process-entered > div:first-child {
    animation: delivery-copy-enter 700ms ease-out backwards;
}
#process.process-playing .step.active .step-progress {
    width: 100%;
    transform-origin: left;
    animation: delivery-stage-progress 1100ms linear both;
}
#process.process-playing .step.active .step-icon {
    animation: delivery-icon-pop 550ms ease-out both;
}
#process.process-playing .delivery-detail > b {
    animation: delivery-arrow-move 1100ms ease-in-out infinite;
}
#process #run-process:disabled { cursor: wait; opacity: .7; }
@keyframes delivery-card-enter {
    from { opacity: 0; translate: 0 22px; scale: .97; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes delivery-copy-enter {
    from { opacity: 0; translate: -18px 0; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes delivery-stage-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes delivery-icon-pop {
    0% { transform: scale(.85); }
    55% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes delivery-arrow-move { 50% { translate: 4px -4px; } }
body.motion-paused #process *, body.motion-paused #process *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    #process.process-entered *, #process.process-playing * { animation: none !important; transition: none !important; }
}

/* A compact, editorial number strip for the opening statement. */
.hero .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 610px; margin-top: 34px; border-top: 1px solid #d9dce1; border-bottom: 1px solid #d9dce1; }
.hero .stat-card { position: relative; padding: 15px 13px 16px; border-right: 1px solid #d9dce1; overflow: hidden; }
.hero .stat-card:first-child { padding-left: 0; }
.hero .stat-card:last-child { border-right: 0; }
.hero .stat-card > span { display: block; margin-bottom: 8px; color: var(--orange); font: 8px monospace; letter-spacing: 1px; }
.hero .stats strong { display: block; font-size: clamp(25px, 2.4vw, 35px); line-height: .9; letter-spacing: -2px; }
.hero .stats small { min-height: 24px; margin-top: 10px; font-size: 9px; line-height: 1.35; }
.hero .stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--orange); transition: width .3s ease; }
.hero .stat-card:hover::after { width: 100%; }

/* The hardware mode reads as its own operational workspace. */
.system-lab.hardware-active .system-terminal { background: #10161e; }
.system-lab.hardware-active .system-flow-panel { background-color: #fff9f5; }
.system-lab.hardware-active .system-flow-node.is-current { border-color: var(--orange); box-shadow: 0 7px 25px #ff5a0018; }
.system-lab.hardware-active .is-current .system-node-icon { background: #fff0e5; color: #b94708; }
.system-lab.hardware-active .system-link i { background: var(--orange); }
.system-mode button { cursor: pointer; position: relative; z-index: 2; }
.system-lab.hardware-active .system-mode button[data-system-mode="hardware"] { color: #ffaf80; border-color: #ff8b4c66; background: #ff5a0018; }

/* Product views have deliberately different visual moods, rather than replaying a build animation. */
#engineering .development.view-1 .preview-body { background: radial-gradient(ellipse at bottom right, #c8e5ff, transparent 72%), #f6fbff; }
#engineering .development.view-1 .building i { background: repeating-linear-gradient(0deg, transparent 0 8px, #9ab4cf 9px 10px), repeating-linear-gradient(90deg, #294f70 0 9px, #a2c3dd 10px 11px); }
#engineering .development.view-2 .preview-body { background: radial-gradient(ellipse at bottom right, #d9c9ff, transparent 72%), #fbfaff; }
#engineering .development.view-2 .building { opacity: .82; }
#engineering .development.view-2 .building i { background: repeating-linear-gradient(0deg, transparent 0 8px, #b3a4d5 9px 10px), repeating-linear-gradient(90deg, #503c78 0 9px, #b5a2dc 10px 11px); }

/* Route tracing gives the infrastructure panel a separate action from a health check. */
#infrastructure .cloud-panel.route-traced .cloud-routes { stroke: #ff5a00; animation-duration: 2.2s; }
#infrastructure .cloud-panel.route-traced .map-points { fill: #ff5a00; }
#infrastructure .cloud-panel.route-traced .map-label { border-color: #a83b00; }
@media (max-width: 600px) { .hero .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; } .hero .stat-card:nth-child(2) { border-right: 0; } .hero .stat-card:nth-child(-n+2) { border-bottom: 1px solid #d9dce1; } .hero .stat-card:nth-child(3) { padding-left: 0; } }

/* Readable technology index and stack labels. */
#stack .layer-index { min-width: 0; }
#stack .layer-index > button { gap: 14px; padding: 11px 0; }
#stack .layer-index > button > b { font-size: 16px; }
#stack .layer-index strong { font-size: 12px; line-height: 1.4; }
#stack .layer-index small { font-size: 11px; line-height: 1.6; }
#stack .layer-visual { height: 365px; min-width: 0; }
#stack .layers { width: 250px; max-width: 100%; }
#stack .layer {
    width: min(100%, calc(155px + var(--n)*15px));
    height: 47px;
    padding-top: 16px;
    font-size: 12px;
    font-weight: 600;
}
#stack .pixel-cube { font-size: 40px; }
#stack .layer-visual .handnote { top: auto; bottom: -20px; right: 0; font-size: 12px; }
@media (max-width: 1100px) {
    #stack { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px; }
    #stack > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    #stack { grid-template-columns: minmax(0,1fr); }
    #stack .layer-index { padding-left: 16px; }
    #stack .layer-index strong { font-size: 12px; }
    #stack .layer-index small { font-size: 11px; }
    #stack .layer { font-size: 12px; }
}

/* Keep the footer quiet and brand-led. */
.minimal-footer { padding: 30px max(22px, 5vw) 18px; }
.minimal-footer .footer-main { display: flex; align-items: center; gap: 34px; padding: 0 0 24px; border-bottom: 1px solid #ffffff1a; }
.minimal-footer .logo { display: flex; align-items: center; gap: 9px; margin-right: auto; color: #fff; }
.minimal-footer .logo-mark { width: 34px; height: 43px; flex: 0 0 34px; position: relative; overflow: hidden; }
.minimal-footer .logo-mark img { position: absolute; width: 82px; height: auto; max-width: none; top: -2px; left: 50%; transform: translateX(-50%); }
.minimal-footer .logo-type { font-size: 19px; line-height: 1; letter-spacing: -1px; }
.minimal-footer .logo-type small { display: block; margin-top: 5px; color: #9ea8b4; font: 7px/1.2 Inter, Arial, sans-serif; letter-spacing: 2px; }
.minimal-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.minimal-footer nav a { color: #aeb6c1; font-size: 11px; }
.minimal-footer nav a:hover { color: #ff8950; }
.minimal-footer .primary { padding: 11px 15px; white-space: nowrap; }
.minimal-footer .footer-bottom { padding-top: 16px; border: 0; color: #77818d; font-size: 9px; }
.minimal-footer .footer-bottom i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #ff5a00; }
@media (max-width: 700px) {
  .minimal-footer .footer-main { align-items: flex-start; flex-wrap: wrap; gap: 18px; }
  .minimal-footer nav { order: 3; width: 100%; gap: 14px; }
  .minimal-footer .footer-bottom { gap: 9px; flex-wrap: wrap; }
}

/* Show the complete supplied mark in both lockups; never crop it into a strip. */
header .logo-mark,
.minimal-footer .logo-mark { width: 85px; height: 74px; overflow: visible; }
header .logo-mark img,
.minimal-footer .logo-mark img { position: static; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; transform: none; opacity: 1 !important; visibility: visible !important; }
.brand-logo { width: 85px !important; height: 74px !important; max-width: none !important; object-fit: contain !important; opacity: 1 !important; visibility: visible !important; }
@media (max-width: 760px) {
  header .logo-mark { width: 70px; height: 62px; }
  .brand-logo { width: 70px !important; height: 62px !important; }
}

/* Product-studio polish: ambient depth, responsive surfaces and intentional motion. */
body { overflow-x: clip; }
header { position: sticky; top: 0; z-index: 100; isolation: isolate; background: #fffffff0; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); transition: height .3s ease, box-shadow .3s ease, background .3s ease; }
header.is-scrolled { height: 72px; box-shadow: 0 11px 30px #1414140b; background: #fffffff8; }
.primary { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 22px #ff5a0020; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease !important; }
.primary::before { content: ''; position: absolute; z-index: -1; top: -50%; bottom: -50%; left: -48%; width: 34%; transform: skewX(-20deg); background: #ffffff52; transition: left .55s ease; }
.primary:hover { transform: translateY(-3px); box-shadow: 0 15px 30px #ff5a0030; }
.primary:hover::before { left: 125%; }
.button { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important; }
.button:hover { transform: translateY(-3px); border-color: #ff5a0066; box-shadow: 0 12px 24px #1011160d; }
.service-card, #work .project, .career-card, .testimonial-card { transform-style: preserve-3d; will-change: transform; }
.service-card { overflow: hidden; transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease, border-color .35s ease !important; }
.service-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ff5a0018, transparent 42%); transition: opacity .3s ease; }
.service-card:hover::after { opacity: 1; }
.service-card:hover { box-shadow: 0 22px 42px #27130915 !important; }
#work .project { transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s ease !important; }
#work .project:hover { transform: translateY(-8px); box-shadow: 0 22px 42px #13141514; }
#work .photo-art { overflow: hidden; }
#work .photo-art img { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
#work .project:hover .photo-art img { transform: scale(1.075); filter: saturate(1.08) contrast(1.03); }
.section-heading h2, .system-lab-heading h2 { text-wrap: balance; }
.reveal-pending { filter: blur(5px); }
.reveal-visible { filter: blur(0); transition: opacity .7s ease, translate .7s cubic-bezier(.2,.75,.2,1), filter .7s ease !important; }
@media (max-width: 760px) { header.is-scrolled { height: 64px; } }
@media (prefers-reduced-motion: reduce) { .primary, .button, .service-card, #work .project, #work .photo-art img { transition: none !important; } }


/* Final mobile pass: keep controls compact and prevent horizontal overflow. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  header { min-height: 64px; padding: 10px 16px; gap: 8px; }
  header .logo { min-width: 0; }
  header .header-actions { gap: 6px; }
  header .header-actions .primary { display: none; }
  header .menu { padding: 8px; font-size: 20px; }
  main section { padding-left: 18px; padding-right: 18px; }
  main .hero { min-height: auto; padding-top: 48px; padding-bottom: 40px; }
  main .hero h1 { max-width: 390px; font-size: clamp(31px, 9vw, 43px); line-height: 1.03; letter-spacing: -1.5px; }
  main .hero .intro { max-width: 360px; margin: 14px 0; font-size: 12px; line-height: 1.65; }
  .hero .actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; width: 100%; margin-top: 16px; }
  .hero .actions .primary, .hero .actions .button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 7px; font-size: 10px; white-space: nowrap; }
  .hero .actions .play { flex: 0 0 15px; width: 15px; height: 15px; }
  .hero .stats { width: 100%; margin-top: 24px; }
  .hero .stats strong { font-size: 21px; }
  .hero .stats small { font-size: 8px; }
  .universe { height: 350px; margin: 18px -24px -20px; transform: scale(.82); transform-origin: top center; }
  main section h2, #process h2, #engineering h2, #infrastructure h2 { font-size: clamp(25px, 7.5vw, 36px); line-height: 1.08; letter-spacing: -1px; }
  .section-heading { gap: 18px; }
  .section-heading > p, .split-section > div:first-child > p:not(.eyebrow), #process > div > p:not(.eyebrow), #engineering > div:first-child > p:not(.eyebrow), #infrastructure > div:first-child > p:not(.eyebrow) { font-size: 12px; line-height: 1.65; }
  .split-section > div:first-child { padding-right: 0; }
  .split-section .button, .split-section .primary { font-size: 10px; padding: 10px 12px; }
  .minimal-footer { padding: 26px 18px 16px; }
  .minimal-footer .footer-main { gap: 14px; }
  .minimal-footer .logo-mark { width: 70px; height: 62px; }
  .minimal-footer .brand-logo { width: 70px !important; height: 62px !important; }
  .minimal-footer nav a { font-size: 10px; }
}

/* Last-word mobile sizing for the expertise dashboard and delivery journey. */
@media (max-width: 760px) {
  #capabilities { display: block; padding: 48px 18px 42px; overflow: hidden; }
  #capabilities h2 { font-size: 30px; line-height: 1.05; }
  #capabilities .cap-tabs { display: none !important; }
  #capabilities .dashboard { display: flex; min-height: 210px; padding: 7px; gap: 6px; overflow: hidden; }
  #capabilities .dashboard aside { flex: 0 0 54px; width: 54px; gap: 11px; font-size: 6px; }
  #capabilities .dashboard aside span:nth-of-type(n+3) { display: none; }
  #capabilities .dashboard-main { flex: 1; width: auto; padding: 12px 10px 7px; margin-top: 8px; }
  #capabilities .dashboard-main h3 { font-size: 23px; }
  #capabilities .recent { flex: 0 0 65px; width: 65px; padding: 8px 4px; gap: 8px; font-size: 6px; }
  #process.delivery-studio { background: radial-gradient(ellipse at 0 100%, #ff5a0014, transparent 52%), linear-gradient(#eadfd533 1px, transparent 1px), linear-gradient(90deg, #eadfd533 1px, transparent 1px), #fffaf7; background-size: auto, 24px 24px, 24px 24px, auto; color: var(--ink); }
  #process.delivery-studio::before { color: #ff5a0012; }
  #process.delivery-studio h2 span { color: var(--orange); }
  #process.delivery-studio > div > p:not(.eyebrow) { color: var(--muted); }
  #process #run-process { margin-bottom: 24px !important; }
  #process.delivery-studio .process-carousel { margin-top: 24px !important; padding: 20px 16px; border-radius: 16px; box-sizing: border-box; }
  #process.delivery-studio .process-steps { display: grid; grid-template-columns: 1fr; gap: 14px; overflow: visible; padding: 4px 0; }
  #process.delivery-studio .step { flex: initial; min-height: auto; width: 100%; box-sizing: border-box; padding: 18px 16px; background: #22252d; border: 1px solid #373b45; border-radius: 12px; }
  #process.delivery-studio .step.active { background: var(--orange); border-color: var(--orange); }
}
@media (min-width: 521px) and (max-width: 760px) {
  #process.delivery-studio .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Complete company footer. */
.site-footer { padding: 58px max(22px, 5vw) 20px; background: #111319; }
.site-footer .footer-main { display: grid; grid-template-columns: 1.35fr .75fr .9fr 1.3fr; align-items: start; gap: clamp(26px, 4vw, 64px); padding-bottom: 42px; border-bottom: 1px solid #ffffff1a; }
.site-footer .footer-brand .logo { display: inline-flex; margin: 0 0 20px; }
.site-footer .footer-brand .logo-mark,
.site-footer .footer-brand .brand-logo { width: 135px !important; height: 104px !important; }
.site-footer .footer-brand p { max-width: 310px; color: #9da6b4; font-size: 14px; line-height: 1.8; }
.site-footer .footer-column h3 { margin: 8px 0 18px; color: #fff; font-size: 15px; letter-spacing: -.1px; }
.site-footer .footer-column nav { display: grid; gap: 11px; }
.site-footer .footer-column a { color: #aeb6c1; font-size: 14px; transition: color .2s ease; }
.site-footer .footer-column a i,
.site-footer .footer-contact i,
.site-footer .footer-legal i { width: 17px; margin-right: 8px; color: var(--orange); text-align: center; }
.site-footer .footer-column a:hover { color: var(--orange); }
.site-footer address { font-style: normal; }
.site-footer .footer-contact p { margin: 0 0 15px; color: #aeb6c1; font-size: 14px; line-height: 1.65; }
.site-footer .footer-contact b { display: block; margin-bottom: 3px; color: #ff9b68; font-size: 14px; }
.site-footer .footer-contact > a { display: block; width: fit-content; margin-top: 8px; }
.site-footer .footer-contact > a { font-size: 13px; }
.site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 20px; color: #77818d; font-size: 12px; }
.site-footer .footer-legal { display: flex; gap: 20px; }
.site-footer .footer-legal a { color: #d5dbe3; font-size: 14px; }
.site-footer .footer-legal a:hover { color: var(--orange); }
@media (max-width: 900px) { .site-footer .footer-main { grid-template-columns: 1.2fr 1fr 1fr; } .site-footer .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .site-footer .footer-column nav { position: static; display: grid; width: auto; height: auto; min-height: 0; padding: 0; overflow: visible; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; box-shadow: none; }
  .site-footer .footer-column nav a { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
}

/* Selected work: a spacious, swipe-first project gallery on phones. */
@media (max-width: 760px) {
  #work.work-section { gap: 24px; padding-top: 48px; padding-bottom: 48px; }
  #work > div:first-child > p:not(.eyebrow) { max-width: 100%; margin: 14px 0 18px; }
  #work > div:first-child .button { min-width: 190px; }
  #work .project-carousel { width: 100%; margin: 0; overflow: hidden; }
  #work .projects { display: flex; gap: 16px; padding: 4px 0 16px; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding: 0; }
  #work .project { display: flex !important; flex-direction: column; flex: 0 0 100%; width: 100%; min-height: 0; padding: 14px; border-radius: 14px; box-sizing: border-box; scroll-snap-align: center; }
  #work .project .photo-art { width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 14px; border-radius: 10px; overflow: hidden; background: #11151c; flex-shrink: 0; }
  #work .project .photo-art img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
  #work .project-copy { display: flex; flex-direction: column; flex: 1; width: 100%; text-align: left; }
  #work .project-copy > small { font-size: 10px; margin-bottom: 4px; }
  #work .project-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; margin: 4px 0 12px; }
  #work .project-title-row h3 { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
  #work .project-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; margin-left: auto; }
  #work .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
  #work .tags .tech { padding: 6px 9px; font-size: 9px; }
  #work .project-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 0; margin-top: 6px; width: 100%; }
  #work .project-controls > span { flex: 1; min-width: 0; font-size: 9px; letter-spacing: .5px; text-align: center; }
  #work .project-controls .carousel-arrow { flex-basis: 30px; width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
}
@media (max-width: 390px) {
  #work.work-section { padding-top: 42px; padding-bottom: 42px; }
  #work .project-carousel { width: 100%; margin: 0; }
  #work .projects { padding: 4px 0 14px; }
  #work .project { flex: 0 0 100%; width: 100%; padding: 12px; }
  #work .project-title-row h3 { font-size: 15px; }
  #work .project-controls { padding: 0; }
}

/* Selected-work cards: technology badges and a compact delivery footer. */
#work .project-copy { text-align: left; }
#work .photo-art::after { display: none; }
#work .project-copy > small { display: block; color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .55px; text-transform: uppercase; }
#work .project-copy > h3 { margin: 5px 0 12px; color: var(--ink); }
#work .tags { display: flex; flex-wrap: wrap; gap: 7px; }
#work .tags .tech { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #e8e5e2; border-radius: 999px; background: #fafafa; color: #59616b; font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .25px; }
#work .tags .tech i { width: 5px; height: 5px; border-radius: 50%; background: #7e8792; box-shadow: 0 0 0 3px #7e879218; }
#work .tags .tech-flutter { border-color: #b9e6ff; background: #eef9ff; color: #087ab8; }
#work .tags .tech-flutter i { background: #27b9ef; box-shadow: 0 0 0 3px #27b9ef1f; }
#work .tags .tech-laravel { border-color: #ffd1c8; background: #fff3f0; color: #d8432f; }
#work .tags .tech-laravel i { background: #f05340; box-shadow: 0 0 0 3px #f0534020; }
#work .tags .tech-react { border-color: #bdebf5; background: #effcff; color: #087c96; }
#work .tags .tech-react i { background: #14b8d4; box-shadow: 0 0 0 3px #14b8d420; }
#work .tags .tech-mysql { border-color: #c9dcf0; background: #f2f8ff; color: #326a9c; }
#work .tags .tech-mysql i { background: #4a90c6; box-shadow: 0 0 0 3px #4a90c620; }
#work .tags .tech-php { border-color: #d7d2f4; background: #f6f4ff; color: #6555aa; }
#work .tags .tech-php i { background: #8172c8; box-shadow: 0 0 0 3px #8172c820; }
#work .tags .tech-javascript { border-color: #fce8a6; background: #fffdf0; color: #9c7b00; }
#work .tags .tech-javascript i { background: #eab308; box-shadow: 0 0 0 3px #eab30820; }
#work .tags .tech-node-js { border-color: #c4ecd3; background: #f1fcf5; color: #1e7e45; }
#work .tags .tech-node-js i { background: #22c55e; box-shadow: 0 0 0 3px #22c55e20; }
#work .tags .tech-html5 { border-color: #fed7aa; background: #fff8f0; color: #c2410c; }
#work .tags .tech-html5 i { background: #f97316; box-shadow: 0 0 0 3px #f9731620; }
#work .tags .tech-css3 { border-color: #bfdbfe; background: #f0f7ff; color: #1d4ed8; }
#work .tags .tech-css3 i { background: #3b82f6; box-shadow: 0 0 0 3px #3b82f620; }
#work .tags .tech-bootstrap { border-color: #e9d5ff; background: #faf5ff; color: #7e22ce; }
#work .tags .tech-bootstrap i { background: #a855f7; box-shadow: 0 0 0 3px #a855f720; }
#work .tags .tech-tailwind { border-color: #a5f3fc; background: #ecfeff; color: #0e7490; }
#work .tags .tech-tailwind i { background: #06b6d4; box-shadow: 0 0 0 3px #06b6d420; }
#work .tags .tech-wordpress { border-color: #cbd5e1; background: #f8fafc; color: #334155; }
#work .tags .tech-wordpress i { background: #64748b; box-shadow: 0 0 0 3px #64748b20; }
#work .tags .tech-rest-api { border-color: #fbcfe8; background: #fdf2f8; color: #be185d; }
#work .tags .tech-rest-api i { background: #ec4899; box-shadow: 0 0 0 3px #ec489920; }
#work .tags .tech-razorpay { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
#work .tags .tech-razorpay i { background: #0ea5e9; box-shadow: 0 0 0 3px #0ea5e920; }
#work .tags .tech-html { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
#work .tags .tech-html i { background: #f97316; box-shadow: 0 0 0 3px #f9731620; }
#work .tags .tech-css { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
#work .tags .tech-css i { background: #3b82f6; box-shadow: 0 0 0 3px #3b82f620; }
#work .tags .tech-tailwind,
#work .tags .tech-tailwind-css { border-color: #a5f3fc; background: #ecfeff; color: #0e7490; }
#work .tags .tech-tailwind-css i { background: #06b6d4; box-shadow: 0 0 0 3px #06b6d420; }
#work .tags .tech-firebase { border-color: #fde68a; background: #fffbeb; color: #b45309; }
#work .tags .tech-firebase i { background: #f59e0b; box-shadow: 0 0 0 3px #f59e0b20; }
#work .tags .tech-google-analytics { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
#work .tags .tech-google-analytics i { background: #f9ab00; box-shadow: 0 0 0 3px #f9ab0020; }
#work .project-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #eee9e6; color: #8b9098; font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .65px; }
#work .project-meta span { display: inline-flex; align-items: center; gap: 5px; }
#work .project-meta span:first-child i { width: 6px; height: 6px; border-radius: 50%; background: #a83b00; box-shadow: 0 0 0 3px #a83b0018; }
#work .project-meta span:last-child { color: var(--orange); }
#work .project-meta b { font-size: 11px; line-height: 0; }
@media (max-width: 760px) {
  #work .project-copy > small { font-size: 10px; }
  #work .project-copy > h3 { margin: 5px 0 12px; }
  #work .tags .tech { padding: 7px 10px; font-size: 9px; }
  #work .project-meta { margin-top: 15px; padding-top: 12px; font-size: 8px; }
}
@media (max-width: 600px) {
  .site-footer { padding: 42px 18px 18px; }
  .site-footer .footer-main { grid-template-columns: 1fr 1fr; gap: 28px 18px; padding-bottom: 30px; }
  .site-footer .footer-brand, .site-footer .footer-contact { grid-column: 1 / -1; }
  .site-footer .footer-brand .logo-mark, .site-footer .footer-brand .brand-logo { width: 120px !important; height: 92px !important; }
  .site-footer .footer-brand p { max-width: 350px; font-size: 14px; }
  .site-footer .footer-column h3 { font-size: 15px; }
  .site-footer .footer-column a, .site-footer .footer-contact p, .site-footer .footer-contact > a { font-size: 14px; }
  .site-footer .footer-contact b { font-size: 12px; }
  .site-footer .footer-bottom { display: grid; gap: 14px; font-size: 12px; line-height: 1.5; }
  .site-footer .footer-column nav { position: static; display: grid; width: auto; height: auto; min-height: 0; padding: 0; overflow: visible; opacity: 1; visibility: visible; pointer-events: auto; transform: none; background: transparent; box-shadow: none; }
  .site-footer .footer-column nav a { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
}

/* Rounded controls throughout the site, including card and icon buttons. */
button, .button, .primary, [role="button"] { border-radius: 999px !important; }
button.project, .step[role="button"], .layer-index button, .office-tag { border-radius: 24px !important; }
button.menu-backdrop { border-radius: 0 !important; }
.service-category-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.service-category-tabs button { padding: 12px 24px; border: 1px solid #e3d8d1; background: white; color: #53473f; font: inherit; cursor: pointer; }
.service-category-tabs button[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: white; }
.service-category-tabs button:focus-visible { outline: 3px solid #222; outline-offset: 3px; }
@media (max-width: 760px) {
    #software-services .service-category-tabs { flex-wrap: nowrap; gap: 8px; width: 100%; }
    #software-services .service-category-tabs button { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: clamp(10px, 3.2vw, 13px); white-space: nowrap; }
}
#software-services [role="tabpanel"][hidden] { display: none !important; }
#software-services [role="tabpanel"] { scroll-margin-top: 100px; }

/* Technical diagrams share the opening ecosystem's grid, copper traces and devices. */
.technical-board { position: relative; isolation: isolate; background: radial-gradient(ellipse at 50% 50%, #ffead666, transparent 65%), linear-gradient(#e6e2dd66 1px, transparent 1px), linear-gradient(90deg, #e6e2dd66 1px, transparent 1px), #fafaf8; background-size: auto, 24px 24px, 24px 24px, auto; border: 1px solid #e3ded7; border-radius: 24px; box-shadow: 0 20px 55px #3026190a; }
.technical-caption, .technical-footer { position: absolute; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #80796e; font: 9px/1.5 monospace; letter-spacing: .7px; }
.technical-caption { top: 20px; }.technical-footer { bottom: 18px; justify-content: flex-start; }.technical-footer > span:last-child { margin-left: auto; }
.technical-footer i { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; flex-shrink: 0; }
.technical-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: none; stroke: #e6a675; stroke-width: 1.3; pointer-events: none; }
.signal-path { stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 8 160; animation: connection-signal 9s linear infinite; }
@keyframes connection-signal { to { stroke-dashoffset: -672; } }
#about .about-stack { height: 490px; overflow: hidden; }
#about .map-node { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; width: 39%; height: 150px; padding: 16px; border: 1px solid #e3dfd9; border-radius: 16px; background: linear-gradient(135deg,#fff,#f7f6f3); box-shadow: 6px 8px 0 #dedbd54d, 0 16px 24px #30261908; }
#about .map-node h3 { font-size: 17px; margin: 6px 0; } #about .map-node p { font-size: 10px; line-height: 1.5; margin: 0; } #about .map-node small { font: 8px monospace; margin-top: 10px; }
.map-software { top: 59px; left: 5%; }.map-data { top: 59px; right: 5%; }.map-hardware { bottom: 57px; left: 5%; }.map-support { bottom: 57px; right: 5%; }
.technical-device { color: var(--orange); font: 30px/1 monospace; text-shadow: 3px 3px #ffdec4; }
#about .map-node .monitor { width: 48px; height: 31px; margin: 0; transform: none; flex-shrink: 0; }
.technical-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; padding: 12px 18px; background: linear-gradient(135deg,#30332f,#111410); color: white; border: 1px solid #45483f; border-radius: 12px; box-shadow: 5px 7px 0 #bdb8ac; text-align: center; }
.technical-hub > span { color: #ff8b43; margin-right: 8px; }.technical-hub b { font-size: 16px; }.technical-hub b span { color: #ff7d32; }.technical-hub small { display: block; margin-top: 5px; font: 7px monospace; letter-spacing: 1px; }
.technical-hub .hub-brand { display: block; width: 112px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 8px #0008); }
#stack .layer-visual { height: 460px; padding: 50px 20px; }
#stack .pixel-cube { top: 52px; left: calc(50% - 20px); }
#stack .layers { margin-top: 35px; filter: drop-shadow(10px 14px 8px #342e2920); }
#stack .layer { height: 48px; margin-bottom: -7px; } #stack .layer.active { color: #853600; transform: translate(0,-7px); background: linear-gradient(165deg,#fff1df,#ff9f55); }
#stack .layer-index > button { padding: 10px 14px; } #stack .layer-index > button.active { background: #fff0e4; }
#stack .technical-footer { font-size: 8px; }
#engineering.product-studio { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.3fr); align-items: center; gap: 45px; }
#engineering > div:first-child { margin-bottom: 0; } #engineering h2 { font-size: clamp(32px,3.4vw,52px); }
#engineering #build-demo { position: static; margin-top: 10px; }
#engineering .development { min-width: 0; padding: 0 20px 20px; gap: 22px; background: radial-gradient(ellipse at center,#ffe9d477,transparent 70%), linear-gradient(#e6e2dd66 1px,transparent 1px), linear-gradient(90deg,#e6e2dd66 1px,transparent 1px),#fafaf8; background-size: auto,24px 24px,24px 24px,auto; border-radius: 24px; overflow: visible; }
#engineering .studio-toolbar { padding: 20px 0 0; color: #797266; font-size: 8px; border: 0; letter-spacing: .3px; } #engineering .studio-toolbar b { margin-left: 4px; color: #c35b18; }
#engineering .editor { grid-column: 1 / -1; width: 86%; border: 1px solid #343a40; border-radius: 12px; overflow: hidden; box-shadow: 6px 8px 0 #bfc1bd66,0 15px 25px #a83b0020; transform: perspective(1000px) rotateY(4deg); }
#engineering .editor .pane-label { padding: 12px 16px; } #engineering .editor-tabs { height: 34px; padding: 0 16px; }
#engineering .editor pre { min-height: 0; padding: 14px 16px; font-size: 10px; line-height: 1.7; white-space: pre-wrap; }
#engineering .editor output { padding: 12px 16px; font-size: 9px; }
#engineering .site-preview { grid-column: 1 / -1; width: 75%; justify-self: end; margin: -60px 0 0; z-index: 1; transform: perspective(1000px) rotateY(-5deg); box-shadow: 6px 8px 0 #d7cec2,0 18px 35px #30261920; }
#engineering .preview-body { height: 210px; padding: 18px; } #engineering .preview-body h3 { font-size: 32px; } #engineering .preview-nav { padding: 12px 18px; }
#engineering .code-product { gap: 12px; padding: 10px 0 0; background: transparent; color: #7a7065; font-size: 8px; letter-spacing: .5px; }
@media (max-width: 1100px) { #engineering.product-studio { gap: 28px; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); } }
@media (max-width: 760px) {
  #engineering.product-studio { grid-template-columns: minmax(0,1fr); gap: 28px; }
  #about .about-stack { height: 475px; } #about .map-node { padding: 12px; width: 41%; } #about .map-node h3 { font-size: 14px; } #about .map-node small { font-size: 7px; }
  .technical-caption,.technical-footer { left: 14px; right: 14px; font-size: 7px; letter-spacing: .2px; }
  #engineering .development { padding: 0 14px 16px; } #engineering .editor { width: 94%; } #engineering .site-preview { width: 87%; margin-top: -30px; }
  #engineering .editor pre { font-size: 9px; } #engineering .studio-toolbar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .signal-path { animation: none; } }
.motion-paused .signal-path { animation-play-state: paused; }

/* Compact service selector with one focused preview. */
#capabilities { grid-template-columns: minmax(0,1fr) minmax(170px,.7fr) minmax(0,1.1fr); align-items: center; gap: 24px; padding-top: 38px; padding-bottom: 38px; }
#capabilities h2 { font-size: 29px; line-height: 1.15; }
#capabilities .cap-tabs { padding: 0; }
#capabilities .cap-tab { padding: 9px 12px; gap: 10px; margin: 3px 0; font-size: 14px; }
#capabilities .cap-tab span, #capabilities .cap-tab.active span { margin: 0; padding: 0; background: none; color: inherit; font: 9px monospace; }
#capabilities .expertise-board { min-width: 0; padding: 0; background: #1c211f; border: 1px solid #39403a; border-radius: 16px; box-shadow: none; color: white; }
.expertise-window-bar { display: flex; justify-content: space-between; gap: 8px; padding: 11px 16px; border-bottom: 1px solid #ffffff12; font: 8px monospace; color: #98a39c; }
.expertise-window-bar > span:first-child { color: #ff9a5b; letter-spacing: 2px; }
.expertise-content { padding: 18px 18px 12px; }
.expertise-content > small { color: #ffa66e; font: 8px/1.5 monospace; letter-spacing: .6px; }
#capabilities #cap-title { color: #fff; font-size: 25px; line-height: 1.15; margin: 10px 0; letter-spacing: -.5px; }
#capabilities #cap-description { max-width: none; color: #b7c0b9; font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
.expertise-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.expertise-tools span { padding: 4px 8px; border: 1px solid #ffffff18; border-radius: 999px; font: 9px monospace; color: #c7cec8; }
.expertise-footer { padding: 0 18px 16px; }
.expertise-footer .button { padding: 0; border: 0; background: none; color: #ffa66e; font-size: 11px; box-shadow: none; }
@media (max-width: 1000px) and (min-width: 761px) { #capabilities { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 20px; } #capabilities > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  #capabilities { display: block; padding: 30px 18px; }
  #capabilities > div:first-child { margin-bottom: 18px; }
  #capabilities h2 { font-size: 26px; }
  #capabilities .cap-tabs { display: none !important; }
  #capabilities #cap-title { font-size: 23px; }
  .expertise-content { padding: 15px 16px 10px; }
  .expertise-footer { padding: 0 16px 14px; }
}

/* Small technical workspace: configuration line and connected service nodes. */
#capabilities .expertise-board { background: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px), #141c20; background-size: 18px 18px; border-color: #35434b; box-shadow: inset 0 1px 0 #ffffff08; }
.expertise-window-bar { background: #ffffff03; border-bottom-color: #ffffff12; }
#capabilities #cap-title { font-size: 22px; margin: 8px 0; }
#capabilities #cap-title br { display: none; }
#capabilities #cap-description { font-size: 11px; margin-bottom: 10px; }
.cap-console { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #35434b; border-left: 2px solid #ff8c49; border-radius: 6px; background: #0c1317; }
.cap-prompt { color: #ff9a5b; font: 12px monospace; }
.cap-console code { min-width: 0; color: #ffb184; font: 9px/1.6 monospace; overflow-wrap: anywhere; }
.cap-console-dot { width: 5px; height: 5px; border-radius: 50%; background: #ff9a5b; margin-left: auto; flex-shrink: 0; }
.cap-connections { display: flex; align-items: center; gap: 5px; margin: 10px 0; }
.cap-node { flex: 1; min-width: 0; padding: 7px 5px; border: 1px solid #3a454d; border-radius: 5px; background: #1b262d; font: 9px/1.5 monospace; color: #d0dce0; text-align: center; }
.cap-node small { display: block; color: #d99569; font: 7px monospace; margin-bottom: 3px; }
.cap-connections > i { font-style: normal; color: #f28a47; }
.expertise-tools span { border: 0; border-radius: 3px; padding: 3px 6px; background: #ffffff06; color: #9faeb6; font-size: 8px; }
@media (max-width: 760px) { #capabilities #cap-title { font-size: 21px; } }

/* Fine circuit details retain the compact service panel. */
#capabilities .expertise-board::after { content: ''; position: absolute; top: 42px; right: -1px; width: 2px; height: 30px; background: #f58b48; box-shadow: 0 0 10px #ff813b55; pointer-events: none; }
.cap-line-number { align-self: stretch; display: flex; align-items: center; padding-right: 7px; border-right: 1px solid #ffffff12; color: #66777e; font: 8px monospace; }
.cap-console { box-shadow: inset 0 2px 8px #0003; }
.cap-node { position: relative; box-shadow: 0 3px 0 #080e1255; }
.cap-node small { font-size: 6px; letter-spacing: .3px; }
.cap-port { display: inline-block; width: 3px; height: 3px; margin-right: 4px; border: 1px solid #ef9b63; vertical-align: middle; }
.cap-connections > i { position: relative; flex: 0 0 15px; height: 14px; overflow: hidden; font-size: 0; }
.cap-connections > i::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: #b9744155; }
.cap-connections > i::after { content: ''; position: absolute; top: 6px; left: 0; width: 4px; height: 3px; border-radius: 2px; background: #ffad6f; box-shadow: 0 0 4px #ff9a5b66; animation: cap-signal 2.8s linear infinite; }
.cap-connections > i:nth-of-type(2)::after { animation-delay: 1.4s; }
@keyframes cap-signal { 0% { transform: translateX(-4px); opacity: 0; } 20%,80% { opacity: 1; } 100% { transform: translateX(16px); opacity: 0; } }
.motion-paused .cap-connections > i::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cap-connections > i::after { animation: none; left: 6px; } }

/* A compact floating service window with a warm, editorial finish. */
#capabilities { background: #f7f5f1; color: #252a2c; border-color: #e5e0d8; gap: 30px; }
#capabilities > div:first-child > p:not(.eyebrow) { color: #747571; }
#capabilities .cap-tab { color: #707672; border: 1px solid transparent; transition: background .2s, color .2s, transform .2s; }
#capabilities .cap-tab.active { color: #a94411; background: #ffeadc; border-color: #f4c5a5; transform: translateX(4px); }
#capabilities .cap-tab:hover { background: #eeeae3; color: #303a35; }
#capabilities .cap-tab:focus-visible { outline: 2px solid #c95f25; outline-offset: 3px; }
#capabilities .expertise-board { background: #fff; color: #a83b00; border: 1px solid #dfddd5; border-radius: 18px; box-shadow: 7px 7px 0 #e8e2d8, 0 18px 35px #3130250b; overflow: hidden; }
#capabilities .expertise-board::after { top: 0; right: 24px; width: 40px; height: 3px; background: #ef854c; box-shadow: none; }
.expertise-window-bar { background: #f8f7f3; color: #92958c; border-bottom: 1px solid #eae7df; padding: 12px 18px; }
.expertise-window-bar > span:first-child { color: #df9870; }
.expertise-content { background: radial-gradient(ellipse at 100% 0, #ffe9d86b, transparent 65%); padding: 18px 18px 12px; }
.expertise-content > small { color: #b2744b; letter-spacing: 1px; }
#capabilities #cap-title { color: #a83b00; font-size: 25px; font-weight: 600; letter-spacing: -.9px; }
#capabilities #cap-description { color: #7b817b; }
.cap-console { background: #a83b00; border: 1px solid #a83b00; border-left: 3px solid #e8a275; border-radius: 8px; padding: 10px; box-shadow: 0 4px 9px #a83b0012; }
.cap-console code { color: #fff1e8; }.cap-line-number { color: #92a699; }
.cap-node { background: #faf9f6; border: 1px solid #e4e2da; border-radius: 9px; color: #4e5e53; box-shadow: 0 3px 0 #eeeae2; padding: 9px 4px; }
.cap-node:last-child { background: #fff0e5; border-color: #efd2bb; color: #9d572c; }
.cap-node small { color: #a2927e; }.cap-port { border-color: #bc9671; }
.cap-connections > i::before { background: #d7beaa; }.cap-connections > i::after { background: #d97536; box-shadow: none; }
.expertise-tools { gap: 8px; }.expertise-tools span { color: #7e887f; background: none; padding: 2px 0; font-size: 8px; }
.expertise-tools span + span::before { content: '/'; margin-right: 8px; color: #c6c8bd; }
.expertise-footer { display: flex; justify-content: flex-end; padding: 0 18px 15px; }
.expertise-footer .button { color: #b65e2a; font-size: 10px; }
@media (max-width: 760px) { #capabilities .cap-tab.active { transform: none; } #capabilities .expertise-board { margin-right: 7px; } #capabilities #cap-title { font-size: 23px; } }

/* ONEPIXEL palette: black section, white technical window, orange accents. */
#capabilities { background: #101112; color: #fff; border-color: #262729; }
#capabilities > div:first-child > p:not(.eyebrow) { color: #afb0b3; }
#capabilities .cap-tab { color: #bfc0c3; }
#capabilities .cap-tab.active { color: #fff; background: var(--orange); border-color: var(--orange); }
#capabilities .cap-tab:hover { background: #28211d; color: #ff9b64; }
#capabilities .cap-tab.active:hover { background: var(--orange); color: #fff; }
#capabilities .cap-tab:focus-visible { outline-color: var(--orange); }
#capabilities .expertise-board { background: #fff; color: #262729; border-color: #fff; box-shadow: 7px 7px 0 #ff5a0024, 0 18px 35px #0003; }
#capabilities .expertise-board::after { background: var(--orange); }
.expertise-window-bar { background: #fafafa; color: #858589; border-bottom-color: #ededed; }
.expertise-window-bar > span:first-child, .expertise-content > small { color: var(--orange); }
.expertise-content { background: #fff; }
#capabilities #cap-title { color: #242426; }
#capabilities #cap-description { color: #737378; }
.cap-console { background: #fff7f2; border-color: #ffddc9; border-left-color: var(--orange); box-shadow: none; }
.cap-console code { color: #75482e; }
.cap-line-number { color: #b59b8a; border-right-color: #ebd6c8; }
.cap-prompt, .expertise-footer .button { color: var(--orange); }
.cap-console-dot { background: var(--orange); }
.cap-node { background: #fafafa; border-color: #e6e6e6; color: #505055; box-shadow: 0 3px 0 #f0f0f0; }
.cap-node:last-child { background: #fff2e9; border-color: #ffc49f; color: #c74700; }
.cap-node small { color: #a28473; }
.cap-port { border-color: var(--orange); }
.cap-connections > i::before { background: #ffd3b8; }
.cap-connections > i::after { background: var(--orange); }
.expertise-tools span { color: #85858a; }
.expertise-tools span + span::before { color: #ffac7e; }

/* Hero-inspired connected devices, scaled to the service selector. */
.cap-ecosystem { position: relative; height: 200px; margin: 10px 0; border-radius: 10px; background: radial-gradient(ellipse at center,#fff0e4,transparent 65%), radial-gradient(#dadada 1px,transparent 1px); background-size: auto,14px 14px; }
.cap-wires { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #ffb584; stroke-width: 1; }
.cap-wire-signal { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 5 90; animation: cap-wire-flow 5s linear infinite; }
@keyframes cap-wire-flow { to { stroke-dashoffset: -285; } }
.cap-core { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); z-index: 2; padding: 13px 14px; background: linear-gradient(135deg,#373737,#101010); border: 1px solid #4a4a4a; border-radius: 7px; box-shadow: 5px 6px 0 #bdb6ae; color: white; }
.cap-core::before { content: ''; position: absolute; left: 3px; right: -3px; top: -5px; height: 5px; background: #666; transform: skewX(-35deg); border-radius: 3px 3px 0 0; }
.cap-core b { font-size: 13px; letter-spacing: -.4px; }.cap-core b span { color: var(--orange); }.cap-core small { display: block; text-align: center; font: 5px monospace; letter-spacing: 2px; margin-top: 4px; }
.cap-core .cap-brand { display: block; width: 94px; height: 54px; object-fit: contain; filter: drop-shadow(0 3px 6px #0008); }
.cap-ecosystem .cap-connections { position: absolute; inset: 0; margin: 0; display: block; }
.cap-ecosystem .cap-node { position: absolute; width: 35%; padding: 9px 5px; background: #fff; border: 1px solid #e4dfd9; border-radius: 9px; box-shadow: 4px 5px 0 #e8e2db; color: #424247; font-size: 9px; }
.cap-ecosystem .cap-node:nth-of-type(1) { top: 10px; left: 4%; }
.cap-ecosystem .cap-node:nth-of-type(2) { top: 10px; right: 4%; }
.cap-ecosystem .cap-node:nth-of-type(3) { bottom: 10px; right: 4%; }
.cap-ecosystem .cap-connections > i { display: none; }
.cap-device { display: block; width: 29px; height: 22px; margin: 0 auto 7px; border: 2px solid #4f5151; border-radius: 3px; color: var(--orange); background: #fff6ef; font: bold 12px/18px monospace; box-shadow: 2px 3px 0 #d9d5ce; }
.cap-device-1 { border-radius: 50% / 20%; }.cap-device-2 { border-color: #ffa36d; border-radius: 7px; }
.cap-map-caption { position: absolute; bottom: 22px; left: 5%; width: 35%; font: 7px/1.8 monospace; letter-spacing: 1px; color: #aa8b77; }
#capabilities #cap-title { font-size: 21px; }
#capabilities #cap-description { font-size: 10px; line-height: 1.5; }
#capabilities .expertise-content { padding-top: 13px; }
#capabilities .cap-console { padding: 6px 9px; }
@media (prefers-reduced-motion: reduce) { .cap-wire-signal { animation: none; } }
.motion-paused .cap-wire-signal { animation-play-state: paused; }

/* Code-to-product: a release console replaces the generic website-preview card. */
#engineering .release-console { display: block; position: relative; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #2d3544; border-radius: 18px; background: radial-gradient(ellipse at 82% 0%, #ff66351c, transparent 40%), linear-gradient(135deg, #121720, #191f2b 65%, #131820); color: #edf1f7; box-shadow: 0 24px 60px #11182724, inset 0 1px #ffffff0a; }
.release-console::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.release-topbar, .release-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; padding: 15px 20px; border-bottom: 1px solid #ffffff14; color: #a8b1c0; font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; }
.release-topbar > span:first-child { color: #dbe1eb; }.release-topbar > span:first-child i, .release-footer > span:first-child i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #ff5a00; box-shadow: 0 0 0 4px #ff5a0018; }
.release-topbar > span:nth-child(2) { margin-left: auto; }.release-topbar b { color: #ffb18c; font-weight: 600; }.release-live { color: #ffb184; }
.release-overview { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 24px 10px; }.release-overview small, .release-stage span { display: block; color: #8d98a9; font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.1px; }
.release-overview h3 { margin: 8px 0 7px; color: #fff; font-size: clamp(21px, 2.1vw, 31px); letter-spacing: -1px; }.release-overview p { max-width: 285px; color: #a9b3c2; font-size: 11px; line-height: 1.65; }
.release-score { flex: 0 0 auto; padding: 10px 0 0; text-align: right; }.release-score strong { display: inline-block; margin-top: 5px; color: #ff8c5a; font-size: 39px; line-height: 1; letter-spacing: -2px; }.release-score > span { color: #7e8998; font: 9px monospace; }
.release-graph { position: relative; z-index: 1; height: 96px; margin: 0 20px; border-bottom: 1px solid #ffffff12; overflow: hidden; }.release-graph > span { position: absolute; bottom: 0; width: 1px; height: 100%; background: #ffffff0c; }.release-graph > span:nth-child(1) { left: 20%; }.release-graph > span:nth-child(2) { left: 40%; }.release-graph > span:nth-child(3) { left: 60%; }.release-graph > span:nth-child(4) { left: 80%; }.release-graph > span:nth-child(5) { left: 100%; }
.release-graph svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: #ff7542; stroke-width: 2.2; filter: drop-shadow(0 4px 5px #ff5a0066); }.release-graph path { stroke-dasharray: 760; animation: release-draw 3.5s ease-in-out infinite alternate; }
.release-pipeline { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 25px 1fr 25px 1fr 25px 1fr; align-items: center; gap: 0; padding: 22px 24px; }.release-stage { min-width: 0; padding: 12px 9px; border: 1px solid #ffffff14; border-radius: 10px; background: #ffffff06; transition: transform .25s ease, border-color .25s ease, background .25s ease; }.release-stage:hover { transform: translateY(-3px); border-color: #ff8d5a88; }.release-stage i { display: grid; place-items: center; width: 25px; height: 25px; margin: 9px 0; border-radius: 7px; background: #ffffff0c; color: #8e9aaa; font-style: normal; }.release-stage b { display: block; overflow: hidden; color: #eef2f6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.release-stage small { display: block; margin-top: 5px; overflow: hidden; color: #8994a3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.release-stage.is-done i { color: #ffb184; background: #ffb18415; }.release-stage.is-active { border-color: #ff7d4b85; background: #ff5a0010; box-shadow: 0 0 0 3px #ff5a000b; }.release-stage.is-active i { color: #ffba99; background: #ff5a0022; }
.release-pipeline > em { position: relative; height: 1px; background: #ffffff20; }.release-pipeline > em::after { content: ''; position: absolute; top: -2px; left: 0; width: 6px; height: 5px; border-radius: 5px; background: #ff9164; box-shadow: 0 0 8px #ff5a00; animation: release-packet 2.4s linear infinite; }.release-pipeline > em:nth-of-type(2)::after { animation-delay: .8s; }.release-pipeline > em:nth-of-type(3)::after { animation-delay: 1.6s; }
.release-footer { justify-content: space-between; border-top: 1px solid #ffffff14; border-bottom: 0; color: #8390a1; }.release-footer b { color: #cfd7e2; font-weight: 500; }.release-pulse { display: inline-flex; gap: 4px; }.release-pulse i { width: 4px; height: 4px; border-radius: 50%; background: #ff8554; animation: release-pulse 1.5s ease-in-out infinite; }.release-pulse i:nth-child(2) { animation-delay: .2s; }.release-pulse i:nth-child(3) { animation-delay: .4s; }
@keyframes release-draw { from { stroke-dashoffset: 75; } to { stroke-dashoffset: 0; } } @keyframes release-packet { from { transform: translateX(0); opacity: 0; } 18%,82% { opacity: 1; } to { transform: translateX(21px); opacity: 0; } } @keyframes release-pulse { 50% { opacity: .25; transform: translateY(-3px); } }
@media (max-width: 600px) { #engineering .release-topbar { padding: 13px 14px; font-size: 7px; }.release-topbar > span:nth-child(2) { display: none; }.release-overview { padding: 20px 15px 8px; }.release-overview h3 { font-size: 23px; }.release-overview p { max-width: 190px; font-size: 10px; }.release-score strong { font-size: 30px; }.release-graph { height: 74px; margin: 0 14px; }.release-pipeline { grid-template-columns: 1fr 14px 1fr 14px 1fr 14px 1fr; padding: 16px 14px; }.release-stage { padding: 9px 6px; }.release-stage i { width: 22px; height: 22px; margin: 7px 0; }.release-stage b { font-size: 9px; }.release-stage small { font-size: 7px; }.release-pipeline > em::after { width: 4px; }.release-footer { padding: 13px 14px; font-size: 7px; }.release-footer #release-meta { display: none; } }
@media (prefers-reduced-motion: reduce) { .release-graph path, .release-pipeline > em::after, .release-pulse i { animation: none; } }

/* Cloud origin: Thoothukudi is the visible operating hub, not a generic overseas route. */
#infrastructure .world-map { isolation: isolate; }
#infrastructure .world-map::before { content: 'THOOTHUKUDI EDGE'; position: absolute; top: 15px; left: 20px; z-index: 2; color: #ffab7b; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.5px; }
#infrastructure .cloud-routes { stroke-dasharray: 7 8; animation-duration: 7s; }
#infrastructure .thoothukudi-point { fill: #ffbd93; stroke: #ff5a00; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: thoothukudi-beacon 1.8s ease-out infinite; }
.map-origin { position: absolute; z-index: 3; left: 75%; top: 43%; padding: 8px 10px; border: 1px solid #ff8b5b88; border-radius: 6px; background: #17191feb; color: #ffb28c; font: 8px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; box-shadow: 0 0 0 4px #ff5a0012, 0 8px 20px #0005; }
.map-origin::before { content: ''; position: absolute; right: 100%; top: 50%; width: 24px; height: 1px; background: #ff8b5b; transform: rotate(-22deg); transform-origin: right; }.map-origin small { color: #aeb8c5; font-size: 7px; letter-spacing: .7px; }
#infrastructure .map-label { left: 54%; top: 62%; color: #fff4ed; border-color: #ff7f4d; background: #2a211e; }.route-traced .map-origin { border-color: #ff5a00; color: #ffb184; }.route-traced .map-origin::before { background: #ff5a00; }
@media (max-width: 760px) {
  #infrastructure .world-map { min-height: 250px; padding: 14px 14px 62px; position: relative; display: flex; align-items: center; justify-content: center; }
  #infrastructure .world-map svg { width: 100%; height: auto; max-height: 160px; }
  #infrastructure .world-map::before { left: 14px; top: 12px; font-size: 8px; }
  .map-origin { position: absolute; left: auto; right: 14px; top: 12px; padding: 5px 8px; font-size: 7.5px; line-height: 1.35; border-radius: 5px; box-shadow: 0 0 0 3px #ff5a0015, 0 4px 12px #0006; }
  .map-origin::before { display: none; }
  .map-origin small { font-size: 6.5px; }
  #infrastructure .map-label { position: absolute; left: 14px; right: 14px; bottom: 12px; top: auto; width: auto; margin: 0; padding: 8px 12px; font-size: 10px; line-height: 1.4; border-radius: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; background: #241d1aee; border: 1px solid #754323; box-shadow: 0 4px 16px #0008; z-index: 3; text-align: left; }
  #infrastructure .map-label small { font-size: 8.5px; margin-top: 0; color: #aeb8c5; }
}
@media (prefers-reduced-motion: reduce) { #infrastructure .thoothukudi-point { animation: none; } }

/* Each product mode carries its own console identity, instead of only swapping labels. */
#engineering .release-console.view-1 { background: radial-gradient(ellipse at 82% 0%, #2a8dff25, transparent 42%), linear-gradient(135deg, #101a27, #142638 65%, #101923); border-color: #315a7d; }
#engineering .release-console.view-1 .release-score strong, #engineering .release-console.view-1 .release-graph svg { color: #65b9ff; stroke: #65b9ff; }
#engineering .release-console.view-1 .release-stage.is-active { border-color: #65b9ff88; background: #329cff13; }
#engineering .release-console.view-2 { background: radial-gradient(ellipse at 82% 0%, #a47aff24, transparent 42%), linear-gradient(135deg, #181425, #251d37 65%, #171321); border-color: #5a477d; }
#engineering .release-console.view-2 .release-score strong, #engineering .release-console.view-2 .release-graph svg { color: #c0a1ff; stroke: #c0a1ff; }
#engineering .release-console.view-2 .release-stage.is-active { border-color: #c0a1ff88; background: #a47aff14; }

/* CodeSpring-inspired CTA treatment: compact rounded blocks with a moving arrow capsule. */
:root { --cta-dark: #111827; --cta-cream: #fff7f1; }
main .primary, header .primary, .minimal-footer .primary, main .button, #cloud-check, #build-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 38px;
  padding: 4px 5px 4px 12px;
  border: 1px solid transparent;
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: -.1px;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease !important;
}
main .primary, header .primary, .minimal-footer .primary {
  background: linear-gradient(135deg, #ff6c22, #f04d08);
  color: #fff;
  box-shadow: 0 9px 20px #ff5a0029;
}
main .primary b, header .primary b, .minimal-footer .primary b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #fff;
  color: #e94e0c;
  font-size: 15px;
  line-height: 1;
  transition: transform .22s ease, background .22s ease;
}
main .primary:hover, header .primary:hover, .minimal-footer .primary:hover { transform: translateY(-2px); box-shadow: 0 14px 26px #ff5a0035; }
main .primary:hover b, header .primary:hover b, .minimal-footer .primary:hover b { transform: translate(2px, -2px); background: #fff6ef; }
main .button, #cloud-check, #build-demo {
  border-color: #dce1e7;
  background: #fff;
  color: var(--cta-dark);
  box-shadow: 0 7px 16px #1520330c;
}
main .button b, #cloud-check b, #build-demo b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--cta-dark);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  transition: transform .22s ease, background .22s ease;
}
main .button:hover, #cloud-check:hover, #build-demo:hover { transform: translateY(-2px); border-color: #ff8b5e; background: #fffaf7; box-shadow: 0 13px 25px #15203314; }
main .button:hover b, #cloud-check:hover b, #build-demo:hover b { transform: translate(2px, -2px); background: var(--orange); }
@media (max-width: 760px) { main .primary, header .primary, .minimal-footer .primary, main .button, #cloud-check, #build-demo { min-height: 36px; padding: 4px 5px 4px 10px; gap: 7px; border-radius: 9px !important; } main .primary b, header .primary b, .minimal-footer .primary b, main .button b, #cloud-check b, #build-demo b { width: 24px; height: 24px; border-radius: 6px; } }
@media (prefers-reduced-motion: reduce) { main .primary, header .primary, .minimal-footer .primary, main .button, #cloud-check, #build-demo, main .primary b, main .button b { transition: none !important; } }

/* Keep CTAs clean and text-led: no arrow/icon capsule inside buttons. */
main .primary b, header .primary b, .minimal-footer .primary b,
main .button b, #cloud-check b, #build-demo b { display: none; }
main .primary, header .primary, .minimal-footer .primary, main .button, #cloud-check, #build-demo { gap: 0; padding-right: 12px; }
@media (max-width: 760px) { main .primary, header .primary, .minimal-footer .primary, main .button, #cloud-check, #build-demo { padding-right: 10px; } }

/* Engineering the everyday: an office topology replaces the old radar view. */
.operations .ops-console { overflow: hidden; border-color: #3b4941; background: #a83b00; }
.topology-board { position: relative; height: 330px; overflow: hidden; background: radial-gradient(circle at 50% 48%, #ff5a0018, transparent 23%), linear-gradient(#8b9a8d0b 1px, transparent 1px), linear-gradient(90deg, #8b9a8d0b 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; }
.topology-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #627168; stroke-width: 1.1; }.topology-signal { stroke: #ff8250; stroke-width: 2; stroke-dasharray: 7 170; animation: topology-flow 6s linear infinite; filter: drop-shadow(0 0 5px #ff5a00); }
.topology-node, .topology-core { position: absolute; z-index: 1; display: flex; flex-direction: column; min-width: 104px; padding: 10px; border: 1px solid #405047; border-radius: 9px; background: #a83b00; box-shadow: 0 8px 22px #0004; color: #fff1e8; }.topology-node i { display: grid; place-items: center; width: 25px; height: 25px; margin-bottom: 8px; border-radius: 6px; background: #ffffff0b; color: #ffae84; font: 14px/1 monospace; font-style: normal; }.topology-node b { font-size: 11px; }.topology-node small { margin-top: 4px; color: #a7b5aa; font: 8px/1.4 monospace; }
.node-people { top: 30px; left: 7%; }.node-devices { top: 32px; right: 7%; }.node-security { bottom: 48px; left: 5%; }.node-cloud { bottom: 50px; right: 5%; }.node-support { bottom: 20px; left: 50%; transform: translateX(-50%); min-width: 128px; flex-direction: row; align-items: center; gap: 8px; }.node-support i { margin: 0; }
.topology-core { top: 50%; left: 50%; min-width: 128px; padding: 16px 12px; transform: translate(-50%, -50%); align-items: center; border-color: #ff8b5c; background: linear-gradient(145deg, #3d281f, #1d1b18); box-shadow: 0 0 0 5px #ff5a000e, 0 15px 35px #0007; text-align: center; }.topology-core i { margin-bottom: 8px; color: #ff9e70; font-size: 21px; font-style: normal; }.topology-core b { font-size: 16px; letter-spacing: -.7px; }.topology-core b span { color: #ff7d40; }.topology-core small { margin-top: 5px; color: #c4b5ad; font: 7px monospace; letter-spacing: 1px; }
.topology-core .topology-brand { display: block; width: 76px; height: 48px; object-fit: contain; filter: drop-shadow(0 4px 9px #0008); }
.topology-status { position: absolute; top: 14px; left: 50%; z-index: 2; transform: translateX(-50%); color: #aebbae; font: 8px monospace; letter-spacing: 1px; white-space: nowrap; }.topology-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #ff5a00; box-shadow: 0 0 10px #ff5a00; animation: topology-status 1.7s ease-in-out infinite; }
.topology-footer { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 16px; border-top: 1px solid #a83b00; color: #9dab9e; font: 8px monospace; letter-spacing: .7px; }.topology-footer b { color: #ff966a; }.topology-footer em { margin-left: 8px; color: #ff5a00; font-style: normal; }
@keyframes topology-flow { to { stroke-dashoffset: -420; } } @keyframes topology-status { 50% { opacity: .35; transform: scale(.65); } }
@media (max-width: 600px) { .topology-board { height: 290px; }.topology-node { min-width: 84px; padding: 8px; }.topology-node b { font-size: 9px; }.topology-node small { font-size: 7px; }.node-people { left: 3%; }.node-devices { right: 3%; }.node-security { left: 2%; }.node-cloud { right: 2%; }.node-support { min-width: 112px; }.topology-core { min-width: 110px; }.topology-footer { gap: 6px; padding: 13px 8px; font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { .topology-signal, .topology-status i { animation: none; } }

/* Connected-workspace configurator: make the planning tool read like a technical control surface. */
#setup-lab { position: relative; overflow: hidden; background: #f8f7f4; }
#setup-lab::before { content: 'CONFIG / PLAN / CONNECT'; position: absolute; top: 28px; right: 5%; color: #ff5a000d; font: 700 clamp(24px, 4vw, 56px)/1 ui-monospace, monospace; letter-spacing: 4px; pointer-events: none; }
#setup-lab .lab-workspace { position: relative; border: 1px solid #333b41; border-radius: 16px; background: #11161a; box-shadow: 0 28px 60px #12171c1c; }
#setup-lab .lab-controls { position: relative; padding: 30px; background: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px), #151b20; background-size: 24px 24px; color: #eef1f3; }
#setup-lab .lab-controls::after { content: 'INPUT'; position: absolute; right: 20px; top: 19px; color: #ff9c70; font: 8px monospace; letter-spacing: 1.5px; }
#setup-lab .technical-label { display: inline-flex; padding: 7px 9px; border: 1px solid #ff824d44; border-radius: 5px; background: #ff5a0012; color: #ffad84; font-size: 8px; letter-spacing: 1.3px; }
#setup-lab .lab-controls > label { margin: 24px 0 16px; color: #e9edf0; font-size: 17px; line-height: 1.45; }
#setup-lab .lab-controls output { color: #ff9a68; font-size: 29px; }
#setup-lab .lab-controls input[type=range] { height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--orange), #f1a071) 0/var(--range, 25%) 100% no-repeat, #3c464d; appearance: none; }
#setup-lab .lab-controls input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; border: 3px solid #151b20; border-radius: 50%; background: #ff9a68; box-shadow: 0 0 0 2px #ff9a6866; appearance: none; }
#setup-lab .range-ends { color: #89949c; font-size: 8px; }
#setup-lab .lab-controls fieldset { padding: 16px; border: 1px solid #343f46; border-radius: 9px; background: #0e1317c9; }
#setup-lab .lab-controls legend { padding: 0 7px; color: #bdc7ce; font: 9px monospace; letter-spacing: 1px; }
#setup-lab .lab-controls fieldset label { padding: 9px 0; margin: 0; border-bottom: 1px solid #ffffff0c; color: #abb6bf; font-size: 11px; }.lab-controls fieldset label:last-child { border: 0; }
#setup-lab .lab-controls input[type=checkbox] { width: 14px; height: 14px; accent-color: #ff7b42; }
#setup-lab .lab-preview { position: relative; background: radial-gradient(ellipse at 50% 30%, #ff5a0015, transparent 55%), #0d1216; }
#setup-lab .lab-preview .console-bar { padding: 17px 20px; border-bottom-color: #ffffff16; color: #bcc6ce; }
#setup-lab .topology { flex: 1; padding: 35px 20px 24px; background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px); background-size: 22px 22px; }
#setup-lab .topology-root { position: relative; width: 175px; border-color: #ff8a5b; border-radius: 10px; background: linear-gradient(145deg, #36241d, #1b1d1d); color: #ffb08a; box-shadow: 0 0 0 5px #ff5a000b, 0 16px 32px #0007; }
#setup-lab .topology-root::before { content: 'CORE'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; background: #ff7440; color: #1b1513; font: 7px monospace; letter-spacing: 1px; }
#setup-lab .topology-nodes { gap: 8px; }.topology-nodes > div { padding: 14px 5px 9px; border: 1px solid #334049; border-radius: 8px; background: #151d23; }.topology-nodes > div::before { height: 14px; top: -15px; }.topology-nodes span { font-size: 19px; }.topology-nodes strong { color: #f2f5f6; font-size: 25px; }.topology-nodes small { color: #9eabb4; font-size: 7px; }
#setup-lab .plan-summary { display: flex; flex-wrap: wrap; gap: 6px; padding: 15px 20px; border-top: 1px solid #ffffff13; background: #10161a; }.plan-summary span { padding: 5px 7px; border: 1px solid #ff8c5a3d; border-radius: 4px; color: #ffad82; background: #ff5a000e; font: 7px monospace; letter-spacing: .5px; }
#setup-lab .estimate-note { margin: 0; padding: 0 20px 18px; background: #10161a; color: #78858e; font-size: 9px; line-height: 1.55; }
@media (max-width: 700px) { #setup-lab .lab-controls { padding: 22px 16px; } #setup-lab .topology { padding: 32px 12px 20px; } #setup-lab .topology-nodes { grid-template-columns: repeat(2, 1fr); gap: 20px 8px; }.topology-nodes > div::before { height: 18px; top: -19px; } #setup-lab::before { font-size: 24px; top: 16px; right: -70px; } }

/* AI automation becomes a compact runtime console rather than a light card grid. */
#automation.automation-studio { position: relative; overflow: hidden; background: radial-gradient(ellipse at 90% 10%, #ff5a001c, transparent 35%), linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px), #10151b; background-size: auto, 30px 30px, 30px 30px; color: #eef2f5; }
#automation.automation-studio::after { content: 'AI.RUNTIME'; position: absolute; right: -10px; bottom: 16px; color: #ffffff06; font: 700 clamp(40px, 8vw, 110px)/1 monospace; letter-spacing: -5px; pointer-events: none; }
#automation h2 { color: #fff; }.automation-studio h2 span, #automation .eyebrow { color: #ff9564; }#automation > div:first-child > p:not(.eyebrow) { color: #aab5c0; }
#automation .automation-flow { position: relative; z-index: 1; padding: 18px; border: 1px solid #3a4652; border-radius: 14px; background: #121a22e8; box-shadow: 0 24px 60px #0004, inset 0 1px #ffffff08; }
#automation .automation-caption { padding: 0 0 14px; color: #bdc7d1; border-bottom: 1px solid #ffffff12; }.automation-caption i { background: #ffb184; box-shadow: 0 0 10px #ffb184; }.automation-caption small { color: #ffad84; }
#automation .flow-card { min-height: 148px; border-color: #35414d; border-radius: 9px; background: #18222c; box-shadow: inset 0 1px #ffffff05; transition: transform .22s ease, border-color .22s ease, background .22s ease; }.automation-studio .flow-card:hover { transform: translateY(-3px); border-color: #ff8d5c; background: #1c2934; }
#automation .flow-card::before { color: #7e8e9f; }.automation-studio .flow-icon { width: 32px; height: 32px; border-color: #ff8d5b55; border-radius: 7px; background: #ff5a0012; color: #ffad83; font-size: 17px; }.automation-studio .flow-card > b { color: #f1f4f6; font-size: 12px; }.automation-studio .flow-card p { color: #a9b5c0; font-size: 11px; line-height: 1.65; }.automation-studio .flow-card strong { color: #ffbc9d; font-weight: 600; }
#automation .flow-card.active { border-color: #ff7d4a; background: linear-gradient(135deg, #30211d, #1c252d); box-shadow: 0 0 0 3px #ff5a0012; }.automation-studio .automation-flow > output { border: 1px solid #38434d; border-left: 3px solid #ffb184; border-radius: 6px; background: #0d1217; color: #ffb184; font-size: 10px; }

/* The 2026 platform index gets a denser architecture-console identity. */
#stack { position: relative; overflow: hidden; background: #f6f4f0; }#stack > div:first-child { position: relative; z-index: 1; }#stack .eyebrow { display: inline-flex; padding: 7px 9px; border: 1px solid #ff5a0033; border-radius: 5px; background: #ff5a0009; color: #d84c06; font: 9px monospace; letter-spacing: 1.1px; }#stack .micro-path { display: inline-flex; gap: 8px; padding: 9px 10px; border: 1px solid #d9d4cd; border-radius: 6px; background: #fff; color: #65707a; font: 8px monospace; letter-spacing: .8px; }#stack .micro-path i { color: var(--orange); font-style: normal; }
#stack .layer-index { position: relative; z-index: 1; padding: 14px; border: 1px solid #dedbd4; border-radius: 12px; background: #fff; box-shadow: 8px 8px 0 #e6e1d8; }#stack .layer-index > button { border-bottom-color: #ebe8e3; }#stack .layer-index > button.active { border-left: 2px solid var(--orange); background: #fff4ec; }#stack .layer-index > button > b { color: var(--orange); font-family: monospace; }
/* Remove the decorative hover gradients requested for cards and buttons. */
.service-card::after, .primary::before { display: none !important; }
@media (max-width: 700px) { #automation.automation-studio { padding-top: 48px; padding-bottom: 48px; } #automation .automation-flow { padding: 13px; } #automation .flow-card { min-height: 130px; padding: 15px; } #stack::before { top: 15px; right: -40px; font-size: 22px; } }

/* Final CTA: replace the decorative globe with a coding terminal for the next project. */
.final-cta { display: grid; grid-template-columns: minmax(240px, 1.05fr) auto auto minmax(300px, .95fr); align-items: center; gap: 14px; min-height: 270px; padding-top: 38px; padding-bottom: 38px; background: radial-gradient(ellipse at 100% 50%, #ff5a0018, transparent 48%), linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px), #11151b; background-size: auto, 26px 26px, 26px 26px; }
.final-cta > div:first-child { width: auto; }.final-cta h2 { position: relative; z-index: 1; color: #fff; }.final-cta p { position: relative; z-index: 1; color: #acb5c1; max-width: 340px; font-size: 12px; margin-bottom: 0; }.final-cta > small { right: 3%; top: 18px; color: #ff9b6c; font: 8px/1.5 monospace; }
.cta-code-window { position: relative; z-index: 2; min-width: 0; border: 1px solid #414b59; border-radius: 11px; overflow: hidden; background: #0c1117; box-shadow: 12px 14px 0 #0003, 0 20px 45px #0004; transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); }
.cta-code-bar { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #ffffff12; background: #151c25; color: #8d9aaa; font: 8px monospace; }.cta-code-bar > span { color: #ff8c5b; letter-spacing: 2px; }.cta-code-bar b { overflow: hidden; color: #c4ced9; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }.cta-code-bar em { margin-left: auto; color: #ff5a00; font-size: 7px; font-style: normal; letter-spacing: .6px; }
.cta-code-body { display: grid; grid-template-columns: 48px 1fr; min-height: 152px; }.cta-code-body aside { display: flex; flex-direction: column; gap: 13px; padding: 16px 9px; border-right: 1px solid #ffffff0d; color: #6f7d8c; font: 7px monospace; text-align: center; }.cta-code-body aside span:first-child { color: #ff986d; }.cta-code-body pre { margin: 0; padding: 16px; color: #c6d1dd; font: 10px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }.cta-code-body pre i { color: #758291; font-style: normal; }.cta-code-body pre b { color: #c59eff; font-weight: 400; }.cta-code-body pre strong { color: #ff5a00; font-weight: 400; }.cta-code-body pre u { color: #eabf91; text-decoration: none; }
.cta-code-status { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-top: 1px solid #ffffff12; background: #10161d; color: #aab6c2; font: 8px monospace; letter-spacing: .5px; }.cta-code-status > i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a00; box-shadow: 0 0 8px #ff5a00; animation: cta-code-pulse 1.7s ease-in-out infinite; }.cta-code-status small { margin-left: auto; color: #738191; font: inherit; }
@keyframes cta-code-pulse { 50% { opacity: .35; transform: scale(.7); } }
@media (max-width: 1000px) { .final-cta { grid-template-columns: minmax(0, 1fr) auto auto; }.cta-code-window { grid-column: 1 / -1; max-width: 540px; width: 100%; justify-self: end; transform: none; }.final-cta > small { display: none; } }
@media (max-width: 600px) { .final-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; padding: 36px 18px; }.final-cta > div:first-child, .cta-code-window { grid-column: 1 / -1; }.final-cta h2 { font-size: 34px; }.final-cta p { font-size: 11px; }.final-cta > button { justify-self: start; }.cta-code-body { min-height: 137px; }.cta-code-body pre { padding: 13px; font-size: 9px; }.cta-code-window { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .cta-code-status > i { animation: none; } }

/* AI orchestration layer: visualise an input-to-action agent runtime above the workflow steps. */
#automation .ai-runtime { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-column: 1 / -1; align-items: center; min-height: 120px; margin: 2px 0 4px; overflow: hidden; border: 1px solid #34404d; border-radius: 10px; background: radial-gradient(circle at 50% 50%, #ff5a0019, transparent 32%), #0e151c; }
.ai-runtime > svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; fill: none; stroke: #5a6672; stroke-width: 1.2; }.ai-runtime .ai-packet { stroke: #ff9365; stroke-width: 2.2; stroke-dasharray: 8 135; animation: ai-runtime-flow 4s linear infinite; filter: drop-shadow(0 0 4px #ff5a00); }
.runtime-port, .ai-engine { position: relative; z-index: 1; justify-self: center; text-align: center; }.runtime-port { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid #495766; border-radius: 9px; background: #17212b; box-shadow: 0 7px 16px #0004; }.runtime-port i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #ffffff0c; color: #a9b7c5; font-style: normal; }.runtime-port span { margin-top: 5px; color: #8998a7; font: 7px monospace; letter-spacing: 1px; }.runtime-port b { color: #dce4eb; font-size: 9px; letter-spacing: .4px; }.runtime-output { border-color: #ff835655; }.runtime-output i { color: #ffae88; background: #ff5a0014; }
.ai-engine { display: grid; place-items: center; width: 110px; height: 110px; border: 1px solid #ff865777; border-radius: 50%; background: radial-gradient(circle, #3c261f, #191a1d 70%); box-shadow: 0 0 0 7px #ff5a000b, 0 0 35px #ff5a0022; }.ai-engine small { color: #f0a47e; font: 7px monospace; letter-spacing: 1.2px; }.ai-engine strong { margin: 2px 0; color: #ffb08a; font-size: 29px; line-height: 1; }.ai-engine b { color: #f5e8e2; font-size: 8px; letter-spacing: .9px; }.ai-engine em { display: flex; gap: 3px; margin-top: 5px; }.ai-engine em i { width: 3px; height: 3px; border-radius: 50%; background: #ffb184; animation: ai-engine-pulse 1.4s ease-in-out infinite; }.ai-engine em i:nth-child(2) { animation-delay: .15s; }.ai-engine em i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-runtime-flow { to { stroke-dashoffset: -286; } } @keyframes ai-engine-pulse { 50% { opacity: .25; transform: translateY(-3px); } }
@media (max-width: 520px) { #automation .ai-runtime { min-height: 100px; }.runtime-port { width: 66px; height: 66px; }.runtime-port i { width: 21px; height: 21px; }.runtime-port b { font-size: 8px; }.ai-engine { width: 88px; height: 88px; }.ai-engine strong { font-size: 24px; }.ai-engine small, .ai-engine b { font-size: 6px; } }
@media (prefers-reduced-motion: reduce) { .ai-runtime .ai-packet, .ai-engine em i { animation: none; } }

/* Alternate AI visual: a live agent execution trace, deliberately unlike a node diagram. */
#automation .agent-console { grid-column: 1 / -1; overflow: hidden; border: 1px solid #3a4652; border-radius: 10px; background: #0d1319; box-shadow: inset 0 1px #ffffff09; }
.agent-console-head, .agent-console-foot { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #ffffff11; background: #151e27; color: #9eabb8; font: 8px/1 monospace; letter-spacing: .65px; }.agent-console-head > span:first-child { color: #dce5ec; }.agent-console-head > span:first-child i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #ff5a00; box-shadow: 0 0 8px #ff5a00; }.agent-console-head > span:nth-child(2) { margin-left: auto; }.agent-console-head b { color: #ffad85; font-weight: 500; }.agent-console-head em { color: #ff5a00; font-size: 7px; font-style: normal; }
.agent-prompt { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 15px; padding: 11px; border: 1px solid #34404b; border-left: 3px solid #ff8757; border-radius: 6px; background: #121a21; }.agent-prompt small { color: #ffad84; font: 7px monospace; letter-spacing: .8px; }.agent-prompt code { overflow: hidden; color: #c9d4dd; font: 10px/1.4 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }.agent-prompt > span { color: #7f8e9d; font: 7px monospace; }
#automation .agent-trace { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 15px 15px; border: 1px solid #2e3944; border-radius: 7px; overflow: hidden; background: #111921; }#automation .agent-trace .flow-card { min-height: 105px; margin: 0; padding: 14px; border: 0; border-right: 1px solid #2e3944; border-bottom: 1px solid #2e3944; border-radius: 0; background: #111921; box-shadow: none; }#automation .agent-trace .flow-card:nth-child(2n) { border-right: 0; }#automation .agent-trace .flow-card:nth-last-child(-n+2) { border-bottom: 0; }#automation .agent-trace .flow-card::before { display: none; }#automation .agent-trace .flow-card:hover { transform: none; background: #17232d; border-color: #2e3944; }#automation .agent-trace .flow-card.active { background: #221c1b; box-shadow: inset 3px 0 #ff8050; }
#automation .agent-trace .flow-icon { display: inline-flex; width: auto; height: auto; margin: 0 8px 0 0; padding: 3px 5px; border: 1px solid #ff8b5b55; border-radius: 4px; background: #ff5a0012; color: #ffad84; font: 8px monospace; vertical-align: middle; }#automation .agent-trace .flow-card > b { display: inline; color: #eef3f7; font-size: 10px; }#automation .agent-trace .flow-card p { margin: 12px 0 0; color: #9eacb9; font: 9px/1.75 ui-monospace, monospace; }#automation .agent-trace .flow-card strong { color: #ffb184; }
.agent-console-foot { justify-content: space-between; border-top: 1px solid #ffffff11; border-bottom: 0; color: #7e8d9b; }.agent-console-foot i { width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #ff5a00 70%, #ffffff15 70%); }.automation-studio .automation-flow > #ai-status { grid-column: 1 / -1; margin: 0; padding: 9px 12px; border: 1px solid #33404b; border-left: 3px solid #ff5a00; border-radius: 5px; background: #0b1015; color: #ffb184; font: 9px monospace; }
@media (max-width: 520px) { .agent-console-head { padding: 10px; }.agent-console-head > span:nth-child(2) { display: none; }.agent-prompt { grid-template-columns: auto 1fr; margin: 10px; }.agent-prompt > span { display: none; }#automation .agent-trace { margin: 0 10px 10px; }.agent-console-foot { padding: 10px; font-size: 7px; }#automation .agent-trace .flow-card { min-height: 95px; padding: 11px; } }

/* Integration workspace: a two-pane source-to-plan experience inspired by modern agent products. */
#automation .integration-workbench { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(235px, .88fr); grid-column: 1 / -1; overflow: hidden; border: 1px solid #3b4652; border-radius: 12px; background: #111820; box-shadow: 0 18px 40px #0004; }
.workbench-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #ffffff12; color: #97a4b1; font: 8px monospace; }.workbench-bar > span { color: #ff8c5b; letter-spacing: 2px; }.workbench-bar b { color: #dbe2e9; font-weight: 400; }.workbench-bar em { margin-left: auto; color: #ff5a00; font-size: 7px; font-style: normal; letter-spacing: .7px; }
.source-canvas { position: relative; min-height: 270px; overflow: hidden; border-right: 1px solid #ffffff12; background: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px), #10151d; background-size: 18px 18px; }.canvas-label { position: absolute; z-index: 2; top: 15px; left: 16px; color: #a4afba; font: 8px monospace; letter-spacing: 1px; }.source-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #845995; stroke-width: 1.6; stroke-dasharray: 1 8; stroke-linecap: round; }.source-packets { stroke: #ff9a70; stroke-width: 3; stroke-dasharray: 2 116; stroke-linecap: round; animation: source-flow 5s linear infinite; filter: drop-shadow(0 0 4px #ff5a00); }
.source-stack { position: absolute; z-index: 2; top: 48px; left: 16px; display: grid; gap: 9px; }.source-stack > span { display: flex; align-items: center; gap: 8px; width: 112px; padding: 7px; border: 1px solid #3b4653; border-radius: 7px; background: #1b2530; color: #dce4eb; font: 8px monospace; box-shadow: 0 5px 12px #0003; }.source-stack i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #fff; color: #222c36; font-style: normal; }
.ai-plan { position: absolute; z-index: 3; top: 50%; left: 64%; width: 124px; padding: 12px; transform: translate(-50%, -50%); border: 1px solid #ff8b5d66; border-radius: 9px; background: #202027; box-shadow: 0 12px 26px #0005; color: #f1f4f7; }.ai-plan i { display: grid; place-items: center; width: 25px; height: 25px; margin-bottom: 9px; border-radius: 6px; background: #ff5a001f; color: #ffad82; font-size: 15px; font-style: normal; }.ai-plan b { font-size: 10px; line-height: 1.35; }.ai-plan span { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: #ffffff24; }.ai-plan span:last-child { width: 68%; margin-top: 5px; }
.integration-list { background: #171c24; }.integration-list-head { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-bottom: 1px solid #ffffff12; color: #e2e8ed; font-size: 11px; }.integration-list-head span { padding: 6px 8px; border: 1px solid #ff8b5a66; border-radius: 5px; background: #ff5a0015; color: #ffad82; font: 7px monospace; }.integration-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; padding: 12px 15px; border-bottom: 1px solid #ffffff0e; transition: background .2s ease; }.integration-row:last-child { border-bottom: 0; }.integration-row > i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 6px; background: #f4f6f8; color: #26303b; font-style: normal; }.integration-row p { min-width: 0; }.integration-row p b, .integration-row p small { display: block; }.integration-row p b { color: #e8edf1; font-size: 9px; }.integration-row p small { overflow: hidden; margin-top: 4px; color: #8f9ca8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.integration-row em { width: 25px; height: 14px; border: 1px solid #955ab4; border-radius: 99px; background: #9b00d5; box-shadow: inset 10px 0 0 #c65cff; }.integration-row.is-syncing { background: #ff5a0012; }.integration-row.is-syncing > i { animation: integration-pop .45s ease; }.integration-row.is-syncing em { box-shadow: inset -10px 0 0 #ffffff; }
@keyframes source-flow { to { stroke-dashoffset: -190; } } @keyframes integration-pop { 50% { transform: scale(1.16); } }
@media (max-width: 620px) { #automation .integration-workbench { grid-template-columns: 1fr; }.source-canvas { min-height: 248px; border-right: 0; border-bottom: 1px solid #ffffff12; }.ai-plan { left: 67%; }.integration-row { padding: 11px 13px; } }
@media (prefers-reduced-motion: reduce) { .source-packets, .integration-row.is-syncing > i { animation: none; } }

/* Keep Engineering in the core ONEPIXEL graphite/orange palette, without the old green wash. */
.operations { background: radial-gradient(ellipse at 88% 45%, #ff5a0018, transparent 55%), linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px), #15171d; background-size: auto, 28px 28px, 28px 28px; }.operations > div > p:not(.eyebrow), .ops-points p { color: #aab3bf; }.ops-points > div { border-color: #ffffff1a; }.ops-points > div b { color: #ffad82; }.operations .ops-console { border-color: #39424d; background: #10151b; }.topology-node { border-color: #3c4651; background: #18212a; }.topology-node small { color: #aab5c0; }.topology-core { border-color: #ff8b5d; background: linear-gradient(145deg, #3a251e, #1a1d21); }.topology-lines { stroke: #596572; }.topology-signal { stroke: #ff8b5d; }.topology-status i, .topology-footer em { background: #ff8b5d; color: #ffad82; }

/* A product blueprint replaces the final CTA terminal, creating a different technical right side. */
.cta-blueprint { position: relative; z-index: 2; overflow: hidden; border: 1px solid #414c59; border-radius: 10px; background: #10161d; box-shadow: 10px 12px 0 #0003, 0 20px 42px #0004; transform: perspective(900px) rotateY(-4deg); }.blueprint-bar, .blueprint-foot { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid #ffffff12; color: #aeb9c4; font: 8px monospace; letter-spacing: .8px; }.blueprint-bar i { color: #ffae84; font-style: normal; }.blueprint-canvas { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 34px 14px; background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px); background-size: 16px 16px; }.blueprint-canvas article { position: relative; z-index: 1; padding: 12px 8px; border: 1px solid #3d4854; border-radius: 7px; background: #17212a; text-align: center; }.blueprint-canvas article i { display: grid; place-items: center; width: 27px; height: 27px; margin: 0 auto 8px; border-radius: 6px; background: #ff5a0018; color: #ffae84; font: 12px monospace; font-style: normal; }.blueprint-canvas article b, .blueprint-canvas article small { display: block; }.blueprint-canvas article b { color: #eef2f5; font-size: 10px; }.blueprint-canvas article small { margin-top: 5px; color: #9aa7b3; font: 7px monospace; }.blueprint-line { position: absolute; top: 50%; z-index: 0; height: 1px; background: repeating-linear-gradient(90deg, #ff8b5d 0 4px, transparent 4px 9px); }.line-one { left: 29%; width: 16%; }.line-two { left: 56%; width: 16%; }.blueprint-foot { border-top: 1px solid #ffffff12; border-bottom: 0; color: #9aa7b3; }.blueprint-foot b { color: #ff9a6d; }
@media (max-width: 900px) { .cta-blueprint { grid-column: 1 / -1; width: 100%; max-width: 540px; justify-self: end; transform: none; } }
@media (max-width: 600px) { .cta-blueprint { margin-top: 8px; }.blueprint-canvas { gap: 6px; padding: 27px 9px; }.blueprint-canvas article { padding: 9px 4px; }.blueprint-canvas article b { font-size: 9px; } }

/* A deliberately minimal footer: brand, a short route list and one contact line. */
.site-footer { padding: 28px max(22px, 5vw) 16px; background: #111318; }.site-footer .footer-main { display: flex; align-items: center; gap: 34px; padding: 0 0 22px; border-bottom: 1px solid #ffffff14; }.site-footer .footer-brand { display: flex; align-items: center; gap: 14px; margin-right: auto; }.site-footer .footer-brand .logo { margin: 0; }.site-footer .footer-brand .logo-mark, .site-footer .footer-brand .brand-logo { width: 88px !important; height: 68px !important; }.site-footer .footer-brand p { max-width: 260px; margin: 0; color: #8f9aa7; font-size: 11px; line-height: 1.55; }.footer-minimal-nav { display: flex; flex-wrap: wrap; gap: 17px; }.footer-minimal-nav a { color: #b7c0ca; font-size: 11px; }.footer-minimal-nav a:hover { color: #ff9363; }.footer-minimal-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-style: normal; }.footer-minimal-contact a { color: #ffad83; font: 10px monospace; }.site-footer .footer-bottom { padding-top: 14px; color: #6f7b88; font-size: 9px; }.site-footer .footer-legal a { color: #9da8b4; font-size: 10px; }
@media (max-width: 760px) { .site-footer .footer-main { flex-wrap: wrap; gap: 16px; }.site-footer .footer-brand { width: 100%; }.footer-minimal-nav { order: 3; width: 100%; }.footer-minimal-contact { align-items: flex-start; }.site-footer .footer-brand .logo-mark, .site-footer .footer-brand .brand-logo { width: 76px !important; height: 58px !important; } }

/* Keep the hardware switches above decorative panels and entrance layers on every device. */
.system-mode, #software-services .service-category-tabs { position: relative; z-index: 0; pointer-events: auto; isolation: isolate; }
.system-mode button, #software-services .service-category-tabs button { position: relative; z-index: auto; pointer-events: auto; touch-action: manipulation; }
.system-mode button[data-system-mode="hardware"], #services-tab-hardware { border-color: #ff8b5c88; }
.system-mode button[data-system-mode="hardware"]:hover, #services-tab-hardware:hover { border-color: var(--orange); box-shadow: 0 5px 14px #ff5a001c; }

/* Shared section reveals are disabled: keep page content visible and stable on load/scroll. */

@media (prefers-reduced-motion: no-preference) {
  .motion-stage .motion-piece { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); filter: blur(4px); }
  .motion-stage.motion-entered .motion-piece { animation: interface-enter 720ms cubic-bezier(.16,.8,.22,1) var(--stage-delay, 0ms) both; }
  .motion-stage.motion-entered .technical-board,
  .motion-stage.motion-entered .release-console,
  .motion-stage.motion-entered .cloud-panel,
  .motion-stage.motion-entered .ops-console,
  .motion-stage.motion-entered .lab-workspace,
  .motion-stage.motion-entered .automation-flow { animation-name: interface-panel-enter; }
  .motion-stage.motion-entered .service-grid > *,
  .motion-stage.motion-entered .career-grid > *,
  .motion-stage.motion-entered .support-grid > * { animation: interface-card-enter 620ms cubic-bezier(.16,.8,.22,1) both; }
  .motion-stage.motion-entered .service-grid > *:nth-child(2),
  .motion-stage.motion-entered .career-grid > *:nth-child(2),
  .motion-stage.motion-entered .support-grid > *:nth-child(2) { animation-delay: 90ms; }
  .motion-stage.motion-entered .service-grid > *:nth-child(3),
  .motion-stage.motion-entered .support-grid > *:nth-child(3) { animation-delay: 180ms; }
  .motion-stage.motion-entered .service-grid > *:nth-child(4),
  .motion-stage.motion-entered .support-grid > *:nth-child(4) { animation-delay: 270ms; }
}
@keyframes interface-enter { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes interface-panel-enter { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.97); filter: blur(6px); } 65% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes interface-card-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body.motion-paused .motion-stage.motion-entered .motion-piece,
body.motion-paused .motion-stage.motion-entered .service-grid > *,
body.motion-paused .motion-stage.motion-entered .career-grid > *,
body.motion-paused .motion-stage.motion-entered .support-grid > * { animation: none !important; opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .motion-stage .motion-piece { opacity: 1; transform: none; filter: none; } }

/* Separate software and hardware service marquees move in opposite directions. */
.service-ribbon { display: grid; gap: 12px; padding: 16px 0 18px; overflow: hidden; background: #fff; border-block: 1px solid var(--line); }
.ribbon-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 5vw 2px; color: var(--muted); font: 10px/1.5 monospace; letter-spacing: 1.5px; }
.ribbon-heading i, .footer-signoff i { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: #ff6b21; }
.ribbon-toggle { flex-shrink: 0; padding: 7px 10px; border: 1px solid #ff5a0033; border-radius: 5px; background: #fff5ee; color: #a83b00; font: 10px Inter, sans-serif; cursor: pointer; }
.ribbon-lanes { display: grid; gap: 7px; }
.ribbon-lane { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 14px; padding: 0 5vw; }
.ribbon-lane-label { color: #727b86; font: 8px/1.4 monospace; letter-spacing: 1px; white-space: nowrap; }
.ribbon-lane-hardware .ribbon-lane-label { color: #9b5534; }
.ribbon-window { min-width: 0; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); cursor: grab; user-select: none; -webkit-user-select: none; }
.ribbon-window::-webkit-scrollbar { display: none; }
.ribbon-track { display: flex; width: max-content; will-change: transform; animation: none !important; user-select: none; -webkit-user-select: none; }
.ribbon-track-reverse { animation: none !important; }
.ribbon-group { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding-right: 10px; }
.ribbon-group > span { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid #ff5a0030; border-radius: 6px; background: #fff7f1; color: var(--ink); font-size: 12px; line-height: 20px; font-weight: 550; white-space: nowrap; }
.ribbon-lane-hardware .ribbon-group > span { border-color: #d8dfe6; background: #f5f7f9; }
.ribbon-group i { display: grid; place-items: center; width: 18px; height: 20px; color: var(--orange); font: 15px monospace; }
.ribbon-window.is-grabbing { cursor: grabbing !important; }
.service-ribbon:hover .ribbon-track, .service-ribbon:focus-within .ribbon-track, .service-ribbon.is-paused .ribbon-track, body.motion-paused .ribbon-track { animation: none !important; }
@media (max-width: 760px) { .ribbon-lane { grid-template-columns: 1fr; gap: 3px; padding: 0 18px; }.ribbon-lane-label { font-size: 7px; }.ribbon-group > span { padding: 7px 11px; font-size: 11px; } }
/* A spacious, editorial closing section in the ONEPIXEL brand palette. */
.signature-footer.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: 36px 5vw 16px; background: radial-gradient(ellipse at 95% 0%, #ff5a0017, transparent 45%), #111318; }
.signature-footer .footer-invitation { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid #ffffff20; }
.signature-footer .footer-invitation .eyebrow { color: #a6abb5; font-size: 10px; letter-spacing: 2px; }
.signature-footer h2 { margin: 18px 0 0; color: #f6f4ef; font-size: clamp(32px, 4.8vw, 70px); line-height: 1.08; letter-spacing: -.05em; font-weight: 550; }
.signature-footer h2 span { color: #ff8b52; }
.footer-project { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 19px 22px; border: 1px solid #ff8b52; border-radius: 6px; background: #ff6b21; color: #111318; cursor: pointer; transition: background .2s, transform .2s; }
.footer-project span { font: 11px monospace; letter-spacing: 1px; }.footer-project b { font-size: 30px; font-weight: 400; }.footer-project:hover { background: #ff9b68; transform: translateY(-3px); }
.signature-footer .footer-main { display: grid; grid-template-columns: 1.3fr .7fr .9fr 1.3fr; gap: 32px; align-items: start; padding: 26px 0 0; border: 0; }
.signature-footer .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; width: auto; }
.signature-footer .footer-brand .logo { margin: 0; }.signature-footer .logo-mark { display: block; }.signature-footer .footer-brand .brand-logo { object-fit: contain; }
.signature-footer .footer-brand p { max-width: 290px; color: #a9aeb9; font-size: 15px; line-height: 1.8; }
.footer-signoff { margin-top: 5px; color: #c5c9d1; font: 11px monospace; letter-spacing: 1.5px; }
.signature-footer .footer-links { display: flex; flex-direction: column; gap: 13px; }
.signature-footer h3 { margin: 8px 0 9px; color: #f2f3f5; font-size: 18px; font-weight: 550; }
.signature-footer .footer-main a:not(.logo) { color: #b2b8c3; font-size: 15px; line-height: 1.7; text-decoration: none; }
.signature-footer .footer-main a:hover { color: #ff9b68; }
.signature-footer .footer-contact { display: flex; flex-direction: column; gap: 12px; min-width: 0; font-style: normal; }
.signature-footer .footer-contact a { overflow-wrap: anywhere; }.signature-footer .footer-contact .footer-phone { color: #ff9b68; font-size: clamp(17px, 1.7vw, 24px); letter-spacing: -.6px; }.footer-phone span { margin-left: 12px; }
.footer-contact p { margin: 0; color: #939ca9; font-size: 14px; line-height: 1.7; }
.signature-footer > .footer-invitation,
.signature-footer > .footer-main,
.signature-footer > .footer-bottom { position: relative; z-index: 1; }
.footer-wordmark { position: absolute; z-index: 0; left: 50%; top: 20px; bottom: auto; transform: translateX(-50%); width: max-content; max-width: 100%; padding: 0; color: #f4f0e8; opacity: .055; font-size: clamp(50px, 16.2vw, 270px); font-weight: 800; line-height: 1; letter-spacing: -.065em; white-space: nowrap; border: 0; pointer-events: none; user-select: none; }
.footer-wordmark > span { display: inline-block; color: #ff7b36; font-size: .15em; vertical-align: top; margin: .6em 0 0 .4em; letter-spacing: 0; }
.signature-footer .footer-bottom { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0; padding-top: 0; color: #a0a8b4; font-size: 12px; }
.signature-footer .footer-copyright { grid-column: 1 / -1; grid-row: 2; width: 100%; text-align: center; padding-top: 18px; line-height: 1; }
.signature-footer .footer-legal { display: flex; gap: 20px; }.signature-footer .footer-bottom a { color: #b5bdc8; font-size: 12px; letter-spacing: 0; }.signature-footer .footer-top { margin-left: auto; }
.signature-footer a:focus-visible, .footer-project:focus-visible, .ribbon-toggle:focus-visible { outline: 2px solid #ff9b68; outline-offset: 5px; }
@media (max-width: 1000px) { .signature-footer .footer-main { grid-template-columns: 1.2fr 1fr; gap: 30px; } }
@media (max-width: 600px) { .ribbon-heading { align-items: flex-start; font-size: 8px; letter-spacing: .8px; }.ribbon-group > span { padding: 7px 11px; font-size: 11px; }.signature-footer.site-footer { padding: 26px 22px 14px; }.signature-footer .footer-invitation { align-items: flex-start; flex-direction: column; padding-bottom: 20px; }.signature-footer .footer-invitation .eyebrow { font-size: 8px; letter-spacing: 1px; }.footer-project { padding: 12px 18px; }.signature-footer .footer-main { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 20px 0; }.signature-footer .footer-brand, .signature-footer .footer-contact { grid-column: 1 / -1; }.signature-footer .footer-bottom { align-items: flex-start; gap: 16px; }.signature-footer .footer-copyright { font-size: 12px; }.footer-wordmark { top: 16px; font-size: 15.5vw; } }
@media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; }.ribbon-window { overflow-x: auto; mask-image: none; }.ribbon-group[aria-hidden="true"] { display: none; }.footer-project { transition: none; } }

.signature-footer .footer-brand .logo-mark { overflow: visible; }.signature-footer .footer-brand .brand-logo { position: static; display: block; transform: none; }

/* Keep the footer dark; give its logo the same light lockup background as the header. */
.signature-footer .footer-brand .logo-mark {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 112px !important;
  height: 66px !important;
  flex: 0 0 112px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e7e3d9;
  box-shadow: 2px 3px 0 #bdb8ac, 0 5px 14px #0003;
}
@media (max-width: 760px) {
  #owned-websites .ref-platform-card:not([hidden]) { border: 1px dashed #ff7b36; }
}
/* Fade only the platform name text; keep the supplied logos crisp. */
#owned-websites .ref-platform-title h3 > span { opacity: 1 !important; color: rgb(241 244 245 / 9%) !important; }
#owned-websites .ref-platform-title h3 > img { opacity: 1 !important; }

/* Reference-matched product and platform sections; all rules stay scoped here. */
.ref-products,.ref-platforms { --ref-accent:#ff5a00; padding:38px 3.8%; display:grid; grid-template-columns:minmax(255px,.8fr) minmax(0,2fr); gap:32px; }
.ref-products { background:linear-gradient(#e7e2dc55 1px,transparent 1px),linear-gradient(90deg,#e7e2dc55 1px,transparent 1px),#fdfcfb; background-size:28px 28px; align-items:center; }
.ref-intro { min-width:0; }.ref-eyebrow { display:flex; align-items:center; gap:12px; color:var(--ref-accent); font:10px/1.5 monospace; letter-spacing:1px; margin:0 0 23px; }.ref-eyebrow i { width:80px; height:1px; background:var(--ref-accent); opacity:.6; }.ref-intro h2 { font-size:clamp(26px,2.45vw,40px); line-height:1.1; letter-spacing:-1.5px; margin:0 0 18px; }.ref-intro h2 span { color:var(--ref-accent); }.ref-intro > p:not(.ref-eyebrow) { color:#717684; font:11px/1.8 monospace; margin:0; }.ref-steps { list-style:none; margin:26px 0; padding:0; }.ref-steps li { display:flex; gap:22px; position:relative; padding-bottom:22px; }.ref-steps li:last-child { padding-bottom:0; }.ref-steps li:not(:last-child)::before { content:''; position:absolute; left:15px; top:32px; bottom:0; border-left:1px dashed #ff8c57; }.ref-steps li > span { flex-shrink:0; display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--ref-accent); border-radius:50%; color:var(--ref-accent); font:12px monospace; background:#fff; }.ref-steps b { display:block; font-size:13px; letter-spacing:.3px; margin:2px 0 4px; }.ref-steps p { max-width:185px; margin:0; color:#717684; font-size:11px; line-height:1.5; }.ref-actions { display:flex; flex-wrap:wrap; gap:10px; }.ref-actions .primary,.ref-actions .button { padding:12px 16px; font-size:11px; min-height:38px; border-radius:5px; }
.ref-console { min-width:0; overflow:hidden; border:1px solid #293139; border-radius:7px; background:radial-gradient(ellipse at 50% 30%,#202020,#0d0d0d 70%); color:#e7ecef; box-shadow:0 12px 30px #111a2325; font-family:Inter,Arial,sans-serif; }.ref-console-top { min-height:45px; display:flex; align-items:center; gap:23px; padding:12px 16px; border-bottom:1px solid #283038; font:9px monospace; }.ref-console-top > b { font-size:12px; white-space:nowrap; }.ref-console-top i { color:var(--ref-accent); font-size:21px; font-style:normal; vertical-align:middle; }.ref-console-top small { margin-left:auto; color:#85919b; font-size:6px; letter-spacing:.5px; }.ref-console-layout { display:grid; grid-template-columns:105px minmax(0,1fr); min-height:440px; }.ref-sidebar { border-right:1px solid #283038; padding:12px 8px; display:flex; flex-direction:column; gap:5px; background:#ffffff02; }.ref-sidebar span { padding:9px 6px; font-size:8px; color:#aeb9c3; white-space:nowrap; }.ref-sidebar .active { color:#fff; background:linear-gradient(110deg,#d94b00,#9d3200); border:1px solid #ff6200; border-radius:4px; }.ref-sidebar .ref-settings { margin-top:auto; border-top:1px solid #ffffff0a; }.ref-console-content { min-width:0; padding:14px; }.ref-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; margin-bottom:14px; }.ref-flow-node { position:relative; background:linear-gradient(120deg,#252525,#171717); padding:12px 9px; border:1px solid #2b353d; border-radius:5px; min-width:0; }.ref-flow-node:not(:last-child)::after { content:''; position:absolute; top:50%; left:100%; width:26px; height:4px; background:radial-gradient(circle,#ff5a00 1px,transparent 1.5px) 0 0/5px 4px; }.ref-flow-node small { display:flex; gap:5px; align-items:center; font:7px monospace; }.ref-flow-node small i { color:var(--ref-accent); font-size:13px; font-style:normal; }.ref-flow-node em { margin-left:auto; color:#6f7f8d; font-size:7px; font-style:normal; }.ref-flow-node > b { display:block; margin:8px 0; font-size:8px; font-weight:400; color:#bcc8d2; }.ref-flow-node > p { margin:0; border-top:1px solid #ffffff0b; padding-top:10px; color:#83949f; font-size:7px; line-height:1.7; }
.ref-dashboard-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:10px; }.ref-panel { min-width:0; border:1px solid #27323a; border-radius:5px; background:#08080838; overflow:hidden; }.ref-panel h3 { display:flex; align-items:center; gap:6px; font-size:8px; font-weight:550; margin:0; padding:10px; }.ref-panel h3 > i,.ref-platform-title h3 > i { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--ref-accent); box-shadow:0 0 7px #ff5a0040; }.ref-panel h3 > span { margin-left:auto; border:1px solid #29343c; border-radius:3px; padding:4px 5px; color:#95a1aa; font:6px monospace; white-space:nowrap; }.ref-garment { grid-row:span 2; }.ref-garment-body { display:flex; align-items:center; padding:4px 10px 12px; min-height:172px; }.ref-garment dl { flex:0 0 70px; margin:0; }.ref-garment dl div { display:flex; justify-content:space-between; gap:4px; padding:8px 0; font-size:7px; }.ref-garment dt { color:#96a3ae; }.ref-garment dd { margin:0; color:#d1d9df; }.ref-garment svg { display:block; width:calc(100% - 70px); height:auto; }.ref-progress-track { display:flex; margin:13px 10px 18px; }.ref-progress-track > span { flex:1; min-width:0; position:relative; border-top:2px solid #52606b; padding-top:15px; text-align:center; font-size:6px; color:#aab7c0; }.ref-progress-track > span::before { content:''; position:absolute; top:-6px; left:calc(50% - 5px); width:9px; height:9px; border:1px solid #798995; border-radius:50%; background:#161616; }.ref-progress-track > .done { border-color:#cd4900; }.ref-progress-track > .done::before { border:3px solid var(--ref-accent); background:#fff; box-shadow:0 0 0 3px #ff5a0020; }.ref-bars { height:69px; display:flex; align-items:end; gap:3px; margin:3px 15px 0 23px; border-left:1px solid #903900; border-bottom:1px solid #65707b; background:repeating-linear-gradient(to top,transparent 0 19px,#ffffff08 19px 20px); }.ref-bars > i { display:block; flex:1; height:var(--bar); background:linear-gradient(#ff6b14,#c54400); transform-origin:bottom; }.ref-bars > i:nth-child(n+22) { background:#303030; }.ref-chart-axis { display:flex; justify-content:space-between; margin:5px 15px 9px 23px; font:6px monospace; color:#a8b3bd; }.ref-orders { margin-top:10px; }.ref-orders h3 { padding-block:7px; }.ref-table { padding:0 9px 8px; }.ref-table > div { display:grid; grid-template-columns:.5fr 1.2fr 1fr 1fr .9fr; align-items:center; gap:6px; padding:6px; border-bottom:1px solid #ffffff08; font-size:7px; }.ref-table > .ref-table-head { background:#262626; color:#a5b3bf; font:6px monospace; padding-block:7px; }.ref-table em { display:inline-block; background:#a63a08; padding:3px 5px; border-radius:3px; font-size:6px; font-style:normal; }.ref-table em.complete { background:#a83b00; }.ref-table i { display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--ref-accent); margin-right:5px; }
.ref-platforms { padding-block:35px 34px; grid-template-columns:minmax(240px,.65fr) minmax(0,2fr); background:radial-gradient(ellipse at 54% 15%,#ff5a0016,transparent 45%),linear-gradient(#ffffff02 1px,transparent 1px),linear-gradient(90deg,#ffffff02 1px,transparent 1px),#0c0c0c; background-size:auto,12px 12px,12px 12px,auto; color:#f1f4f5; align-items:start; }.ref-platforms .ref-intro { padding-top:6px; }.ref-platforms .ref-intro h2 { margin-top:28px; }.ref-platforms .ref-intro > p:not(.ref-eyebrow) { color:#aab3bb; font-size:10px; }.ref-ecosystem { min-width:0; }.ref-platform-connection { height:54px; display:flex; justify-content:center; align-items:start; gap:70px; position:relative; }.ref-platform-connection::before { content:''; position:absolute; top:23px; left:24%; right:24%; height:30px; border:1px solid var(--ref-accent); border-bottom:0; border-radius:20px 20px 0 0; }.ref-platform-connection > div { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:130px; height:47px; border:1px solid var(--ref-accent); border-radius:5px; background:#101010; box-shadow:0 0 24px #ff5a0012; }.ref-platform-connection i { font-style:normal; font-size:22px; line-height:1; color:var(--ref-accent); }.ref-platform-connection b { font:9px monospace; }.ref-platform-connection > span { padding-top:9px; font:6px monospace; color:#b2b9bc; letter-spacing:.6px; }.ref-platform-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.ref-platform-card { min-width:0; overflow:hidden; border:1px solid #d34b05; border-radius:6px; background:#101010; box-shadow:0 0 20px #ff5a0008; }.ref-platform-title { display:flex; justify-content:space-between; align-items:center; padding:10px; gap:6px; }.ref-platform-title h3 { display:flex; gap:9px; align-items:center; margin:0; font-size:12px; letter-spacing:-.3px; }.ref-platform-title > span { font:6px monospace; color:#aab2b9; }.ref-site-preview { margin:0 5px; border-radius:3px; background:#fcfdff; color:#0a1929; overflow:hidden; min-height:227px; }.ref-site-nav { display:flex; align-items:center; gap:12px; padding:11px 9px; border-bottom:1px solid #e3e8ed; white-space:nowrap; }.ref-site-nav b { font-size:6px; letter-spacing:-.2px; }.ref-site-nav b i { font-size:13px; color:var(--ref-accent); font-style:normal; vertical-align:middle; }.ref-site-nav > span { font-size:5px; }.ref-site-nav > small { margin-left:auto; border:1px solid #e3e7ed; padding:5px 8px; border-radius:3px; font-size:5px; color:#8792a0; }.ref-academy-layout { display:grid; grid-template-columns:72px minmax(0,1fr); }.ref-academy-layout > aside { display:flex; flex-direction:column; gap:11px; padding:13px 6px; font-size:5px; color:#83909f; border-right:1px solid #eef0f3; }.ref-academy-layout > aside > span:first-child { color:var(--ref-accent); background:#fff2e9; padding:5px; border-radius:3px; }.ref-academy-main { padding:15px 10px 10px; }.ref-academy-hero { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.ref-academy-hero h4 { font-size:14px; line-height:1.1; letter-spacing:-.6px; margin:4px 0 8px; }.ref-academy-hero p { font:5px/1.7 monospace; color:#67788b; margin-bottom:9px; }.ref-mini-cta { display:inline-block; padding:6px; color:#fff; background:var(--ref-accent); border-radius:3px; font-size:5px; }.ref-code-preview { position:relative; background:linear-gradient(135deg,#252525,#111111); color:#c8d2da; padding:7px; border-radius:4px; box-shadow:0 5px 10px #13263826; }.ref-code-preview small { display:block; border-bottom:1px solid #ffffff20; padding-bottom:7px; font:5px monospace; }.ref-code-preview code { display:block; font:4.5px/1.8 monospace; padding-top:10px; color:#e9a782; }.ref-code-preview em { color:#ff5a00; }.ref-code-preview b { display:grid; place-items:center; position:absolute; bottom:8px; right:8px; border-radius:50%; background:#fff; color:#15212b; width:22px; height:22px; font-size:9px; }.ref-academy-main h5 { margin:13px 0 7px; font-size:7px; }.ref-course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.ref-course-grid i { display:grid; place-items:center; height:36px; background:repeating-linear-gradient(135deg,transparent 0 9px,#ffffff08 9px 10px),#152e3f; color:#5badc8; border-radius:3px; font:22px monospace; }.ref-course-grid > div:nth-child(2) i { background-color:#302245; color:#b890db; }.ref-course-grid > div:nth-child(3) i { background-color:#183a3b; color:#6ebab4; }.ref-course-grid b { display:block; font-size:5px; margin-top:5px; }.ref-course-grid small { display:block; font-size:4px; color:#7b8996; margin-top:3px; }.ref-news-content { padding:10px; }.ref-news-hero { display:grid; grid-template-columns:1.9fr 1fr; gap:10px; }.ref-news-feature { position:relative; isolation:isolate; overflow:hidden; border-radius:4px; padding:30px 10px 12px; background:radial-gradient(ellipse at 90% 70%,#9c340a55,transparent 70%),#111111; color:#fff; min-height:137px; }.ref-news-feature > small { position:relative; font-size:5px; color:#ff782e; }.ref-news-feature h4 { position:relative; margin:7px 0; font-size:13px; letter-spacing:-.3px; line-height:1.1; }.ref-news-feature p { position:relative; font:5px/1.7 monospace; color:#9fabb7; }.ref-news-feature > span { position:relative; display:block; font-size:5px; margin-top:10px; color:#ff782e; }.ref-city { position:absolute; inset:0; opacity:.7; transform:rotate(-25deg) translate(45%,-10%); display:flex; gap:8px; align-items:center; }.ref-city i { width:28px; height:65px; background:linear-gradient(110deg,#233d4b,#182730 65%,#bf4b16 66%,#652b13); border-top:6px solid #446071; box-shadow:9px 9px 0 #0005; transform:skewY(25deg); }.ref-city i:nth-child(even) { height:40px; }.ref-news-latest > b { font-size:7px; }.ref-news-latest > div { display:flex; align-items:center; gap:5px; padding:10px 0; border-bottom:1px solid #e8ebef; font-size:6px; }.ref-news-latest i { flex-shrink:0; display:grid; place-items:center; width:26px; height:26px; border-radius:3px; background:#203440; color:#c17746; font-size:16px; font-style:normal; }.ref-news-latest small { display:block; color:#82909c; font-size:4px; margin-top:4px; }.ref-news-topics { display:flex; gap:6px; margin-top:12px; }.ref-news-topics > span { flex:1; border:1px solid #edf0f3; border-radius:3px; padding:8px 5px; font-size:5px; white-space:nowrap; }.ref-news-topics i { font-style:normal; color:var(--ref-accent); margin-right:4px; }.ref-platform-footer { display:flex; align-items:center; gap:16px; padding:13px 12px; }.ref-platform-footer > span { position:relative; font-size:7px; padding-left:20px; }.ref-platform-footer i { position:absolute; left:0; top:2px; font-style:normal; font-size:16px; color:var(--ref-accent); }.ref-platform-footer small { display:block; color:#7f929f; font-size:5px; margin-top:4px; }.ref-platform-footer a { margin-left:auto; font-size:7px; color:#ff701e; white-space:nowrap; }.ref-platform-footer a:focus-visible,.ref-actions button:focus-visible { outline:2px solid #ff782e; outline-offset:4px; }
@media(prefers-reduced-motion:no-preference) { .ref-flow-node:not(:last-child)::after { animation:ref-packets 1.1s linear infinite; }.ref-progress-track .done::before { animation:ref-signal 2.6s ease-in-out infinite; }.ref-progress-track .done:nth-child(2)::before { animation-delay:.4s; }.ref-progress-track .done:nth-child(3)::before { animation-delay:.8s; }.ref-progress-track .done:nth-child(4)::before { animation-delay:1.2s; }.ref-bars i { animation:ref-chart 1.2s ease-out var(--bar-delay) both; }.ref-products.motion-stage:not(.motion-entered) .ref-bars i { animation-play-state:paused; }.ref-platform-connection > div { animation:ref-hub 3s ease-in-out infinite; }.ref-platform-card { transition:box-shadow .3s,border-color .3s; }.ref-platform-card:hover { border-color:#ff8b45; box-shadow:0 0 25px #ff5a0025; }.ref-city i { animation:ref-city-rise 4s ease-in-out infinite alternate; }.ref-city i:nth-child(even) { animation-delay:1s; } }
@keyframes ref-packets { to { background-position:10px 0; } }@keyframes ref-signal { 50% { box-shadow:0 0 0 4px #ff5a0035,0 0 10px #ff5a0050; } }@keyframes ref-chart { from { transform:scaleY(.1); opacity:.3; }to { transform:scaleY(1); opacity:1; } }@keyframes ref-hub { 50% { box-shadow:0 0 22px #ff5a0038; } }@keyframes ref-city-rise { to { transform:skewY(25deg) translateY(-7px); } }
body.motion-paused .ref-flow-node::after,body.motion-paused .ref-progress-track .done::before,body.motion-paused .ref-bars i,body.motion-paused .ref-platform-connection > div,body.motion-paused .ref-city i { animation:none; }
@media(min-width:1600px) { .ref-console-layout { min-height:485px; }.ref-garment-body { min-height:205px; }.ref-site-preview { min-height:260px; }.ref-academy-hero h4 { font-size:18px; }.ref-news-feature { min-height:170px; }.ref-academy-main { padding:20px 14px; }.ref-course-grid i { height:48px; } }
@media(max-width:1150px) { .ref-products { grid-template-columns:260px minmax(0,1fr); gap:24px; padding-inline:3%; }.ref-console-layout { grid-template-columns:75px minmax(0,1fr); }.ref-sidebar span { font-size:6px; padding-inline:2px; }.ref-console-content { padding:10px; }.ref-flow { gap:13px; }.ref-flow-node { padding:10px 6px; }.ref-flow-node:not(:last-child)::after { width:14px; }.ref-flow-node em { display:none; }.ref-flow-node small { font-size:6px; }.ref-garment dl { flex-basis:53px; }.ref-garment dl div { font-size:6px; }.ref-garment svg { width:calc(100% - 53px); }.ref-panel h3 > span { font-size:5px; }.ref-platforms { grid-template-columns:1fr; gap:14px; }.ref-platforms .ref-intro { display:block; }.ref-platforms .ref-intro h2 { margin-top:0; }.ref-platforms .ref-intro h2 br { display:none; }.ref-platforms .ref-eyebrow { margin-bottom:14px; }.ref-platform-connection { margin-top:0; }.ref-site-preview { min-height:245px; }.ref-academy-main { padding:18px 12px; }.ref-news-feature { min-height:158px; }.ref-course-grid i { height:42px; } }
@media(max-width:900px) { .ref-products { grid-template-columns:1fr; padding:35px 24px; }.ref-intro h2 { font-size:34px; }.ref-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.ref-steps li { padding:0; gap:10px; }.ref-steps li:not(:last-child)::before { display:none; }.ref-steps li > span { width:26px; height:26px; font-size:10px; }.ref-steps p { font-size:10px; }.ref-console-layout { grid-template-columns:90px minmax(0,1fr); min-height:420px; }.ref-sidebar span { font-size:7px; }.ref-garment-body { min-height:168px; }.ref-platforms { padding-inline:24px; }.ref-platform-title h3 { font-size:10px; }.ref-platform-title > span { font-size:5px; }.ref-site-nav { gap:6px; }.ref-site-nav > small { display:none; }.ref-platform-footer { gap:10px; padding-inline:8px; }.ref-platform-footer > span { font-size:6px; padding-left:16px; }.ref-platform-footer a { font-size:6px; }.ref-academy-layout { grid-template-columns:56px minmax(0,1fr); }.ref-academy-layout > aside { font-size:4px; }.ref-academy-hero h4 { font-size:12px; }.ref-site-preview { min-height:235px; }.ref-news-feature h4 { font-size:12px; } }
@media(max-width:600px) { .ref-products,.ref-platforms { padding-inline:20px; }.ref-intro h2 { font-size:30px; }.ref-intro > p:not(.ref-eyebrow) { font-size:10px; }.ref-steps { grid-template-columns:1fr 1fr; gap:20px; }.ref-steps p { max-width:130px; }.ref-console-top { padding:12px 10px; gap:10px; font-size:7px; flex-wrap:wrap; }.ref-console-top small { font-size:5px; }.ref-console-layout { display:block; }.ref-sidebar { display:none; }.ref-console-content { padding:9px; }.ref-flow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }.ref-flow-node { padding:10px; }.ref-flow-node small { font-size:8px; }.ref-flow-node > b { font-size:9px; }.ref-flow-node > p { font-size:7px; }.ref-flow-node:nth-child(2)::after { display:none; }.ref-flow-node:not(:last-child)::after { width:19px; }.ref-dashboard-grid { grid-template-columns:1fr; gap:9px; }.ref-garment { grid-row:auto; }.ref-garment-body { min-height:190px; }.ref-garment dl { flex-basis:72px; }.ref-garment dl div { font-size:8px; }.ref-garment svg { width:calc(100% - 72px); max-height:220px; }.ref-panel h3 { font-size:9px; }.ref-panel h3 > span { font-size:6px; }.ref-progress-track > span { font-size:7px; }.ref-bars { height:78px; }.ref-table > div { font-size:6px; gap:4px; padding-inline:3px; }.ref-table > .ref-table-head { font-size:5px; }.ref-table em { font-size:5px; padding:3px; }.ref-platform-grid { grid-template-columns:1fr; gap:18px; }.ref-platform-connection { gap:25px; }.ref-platform-connection > span { font-size:5px; }.ref-platform-connection::before { left:18%; right:18%; }.ref-platforms .ref-intro h2 br { display:block; }.ref-platform-title h3 { font-size:12px; }.ref-platform-title > span { font-size:5px; }.ref-academy-layout { grid-template-columns:62px minmax(0,1fr); }.ref-academy-hero h4 { font-size:13px; }.ref-academy-main { padding:16px 9px; }.ref-site-nav b { font-size:7px; }.ref-site-preview { min-height:230px; }.ref-platform-footer { padding:13px 10px; }.ref-platform-footer a { font-size:7px; }.ref-news-feature { min-height:152px; } }

/* Interactive tours, scoped to the two product sections and their own dialog. */
#products .ref-console-layout { grid-template-columns:145px minmax(0,1fr); height:600px; min-height:0; }
#products .ref-sidebar { overflow-y:auto; gap:3px; padding:10px 7px; }
#products .ref-sidebar button { display:flex; align-items:center; gap:7px; text-align:left; border:1px solid transparent; background:transparent; color:#acbbc7; font-size:9px; padding:9px 6px; border-radius:4px; cursor:pointer; flex-shrink:0; }
#products .ref-sidebar button i { color:#ff853c; font-style:normal; font-size:13px; }
#products .ref-sidebar button.active { background:#a53908; border-color:#ff5a00; color:white; }
#products .ref-sidebar button:hover { background:#ffffff0e; }
#products .ref-sidebar .demo-nav-group { color:#728695; font:7px monospace; letter-spacing:.8px; padding:10px 5px 5px; }
#products .ref-console-content { overflow:auto; scroll-behavior:smooth; }
#products .demo-view-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
#products .demo-view-heading small { font:6px monospace; color:#ff985f; letter-spacing:1px; }
#products .demo-view-heading h3 { font-size:17px; margin:7px 0; }
#products .demo-view-heading p { margin:0; color:#8b9ca8; font-size:8px; }
#products .demo-view-heading > div:last-child { display:flex; gap:5px; }
#products .ref-console-content button,.product-demo-dialog button:not([data-close]) { background:#292929; color:#edf3f7; border:1px solid #3d4b56; border-radius:4px; padding:7px 9px; cursor:pointer; font-size:9px; }
#products .ref-console-content button:hover { border-color:#ff7020; color:#ff9b66; }
#products .demo-view-heading button:last-child,.product-demo-dialog button[type="submit"] { background:#d84b06; border-color:#ff7020; color:white; }
#products .demo-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:14px; }
#products .demo-stat-grid button { text-align:left; padding:12px 9px; background:linear-gradient(135deg,#222222,#151515); }
#products .demo-stat-grid small { display:block; font-size:7px; color:#9aacba; }
#products .demo-stat-grid strong { display:block; font-size:20px; color:#ff8a49; margin:8px 0; letter-spacing:-.5px; }
#products .demo-stat-grid span { font-size:6px; color:#ff5a00; }
#products .demo-ai-banner { padding:13px; border:1px solid #8f4a20; border-radius:5px; background:linear-gradient(90deg,#482817,#2a231b); display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
#products .demo-ai-banner small { color:#ff9b67; font:6px monospace; }
#products .demo-ai-banner b { display:block; font-size:11px; margin-top:6px; }
#products .demo-ai-banner p { color:#bcaea0; font-size:8px; margin-bottom:0; }
#products .demo-panel { padding:14px; border:1px solid #2b3944; border-radius:5px; background:#141414; margin:12px 0; }
#products .demo-panel h4 { font-size:12px; margin:0 0 12px; color:#e4edf4; }
#products .demo-panel p,#products .ref-console-content > p,#products .demo-panel li { color:#9bafbf; font-size:10px; line-height:1.8; }
#products .demo-table-wrap { overflow:auto; }
#products .demo-table,.product-demo-dialog .demo-table { width:100%; border-collapse:collapse; text-align:left; }
#products .demo-table th,#products .demo-table td,.product-demo-dialog .demo-table th,.product-demo-dialog .demo-table td { padding:10px 7px; border-bottom:1px solid #ffffff12; font-size:8px; white-space:nowrap; }
#products .demo-table th { color:#819cad; font-size:7px; }
#products .demo-table button { font-size:7px; padding:5px; }
#products .demo-badge { padding:4px 6px; background:#643212; color:#ffb58b; border-radius:4px; }
#products .demo-kanban { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#products .demo-kanban .demo-panel { margin:0; padding:10px; }
#products .demo-kanban-card { background:#262626; border:1px solid #344651; border-left:2px solid #ff5a00; padding:9px; border-radius:4px; margin-bottom:7px; font-size:9px; }
#products .demo-kanban-card p { font-size:8px; }
#products .demo-workload { display:flex; align-items:center; gap:12px; margin:10px 0; font-size:9px; color:#9aafbd; }
#products .demo-workload span { width:80px; }
#products .demo-workload meter { flex:1; height:8px; accent-color:#ff5a00; }
#products .demo-live-status { min-height:29px; margin:0; padding:9px 12px; border-top:1px solid #27333d; color:#a1b3c0; font:8px/1.5 monospace; }
#products .demo-measurement-illustration { margin-top:18px; }
#products label,.product-demo-dialog label { display:block; margin:12px 0; font-size:10px; color:#a4b7c6; }
#products input,#products select,.product-demo-dialog input,.product-demo-dialog select { display:block; width:100%; border:1px solid #3b4b59; background:#1c1c1c; color:#eff5f8; padding:10px; border-radius:4px; margin-top:7px; font:11px Inter,Arial,sans-serif; }
#products .demo-insight { padding:15px; margin-top:15px; border-left:2px solid #ff5a00; color:#bccbd6; font-size:11px; line-height:1.8; background:#ffffff04; }
#products [role="button"] { cursor:pointer; }
#products button:focus-visible,#products [role="button"]:focus-visible,#products input:focus-visible,#products select:focus-visible { outline:2px solid #ff985f; outline-offset:2px; }
.product-demo-dialog { width:min(540px,calc(100vw - 32px)); max-height:85vh; overflow:auto; padding:24px; background:#141414; border:1px solid #54616a; border-radius:12px; color:#e4edf4; box-shadow:0 25px 80px #0008; }
.product-demo-dialog::backdrop { background:#060d13b8; backdrop-filter:blur(4px); }
.product-demo-dialog .demo-dialog-top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.product-demo-dialog h3 { margin:0; font-size:20px; }
.product-demo-dialog [data-close] { position:static; border:1px solid #526674; color:white; background:#292929; border-radius:5px; padding:5px 11px; font-size:23px; cursor:pointer; }
.product-demo-dialog p,.product-demo-dialog li { font-size:13px; line-height:1.8; color:#b0c2ce; }
.product-demo-dialog .demo-disclaimer { font:10px/1.7 monospace; color:#fb9a60; }
.product-demo-dialog .button { color:#ff9a60; border-color:#a45e30; }
.product-demo-dialog button:focus-visible,.product-demo-dialog a:focus-visible { outline:2px solid #ff985f; outline-offset:3px; }
#owned-websites .ref-site-preview { min-height:285px; }
#owned-websites .demo-platform-nav { display:flex; gap:4px; flex-wrap:wrap; padding:9px; border-bottom:1px solid #dbe3ea; background:#f2f5f8; }
#owned-websites .demo-platform-nav button,#owned-websites .demo-platform-body button { color:#334859; background:white; border:1px solid #d8e1e8; border-radius:4px; padding:7px 8px; font-size:8px; cursor:pointer; }
#owned-websites .demo-platform-nav button[aria-pressed="true"] { color:#b74105; background:#fff0e4; border-color:#ffae7d; }
#owned-websites .demo-platform-body { padding:12px; min-height:245px; }
#owned-websites .demo-platform-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
#owned-websites .demo-platform-heading h4 { font-size:12px; margin:0; }
#owned-websites .demo-platform-heading small { font:5px monospace; color:#8b9aa6; }
#owned-websites .demo-platform-status { font-size:7px; margin:0; padding:8px 12px; color:#9db1be; border-bottom:1px solid #ffffff0a; }
#owned-websites .demo-no-sidebar { display:block; }
#owned-websites .demo-original-platform .ref-academy-main,#owned-websites .demo-original-platform .ref-news-content { padding:0; }
#owned-websites .demo-platform-items { display:grid; grid-template-columns:1fr; gap:8px; }
#owned-websites .demo-platform-items button { text-align:left; padding:12px; background:#f7fafc; }
#owned-websites .demo-platform-items small { display:block; font:6px monospace; color:#c8581b; }
#owned-websites .demo-platform-items b { display:block; font-size:12px; margin:6px 0; }
#owned-websites .demo-platform-items span { display:block; font-size:9px; line-height:1.7; color:#7d8c99; }
#owned-websites .demo-platform-items em { display:block; font-style:normal; color:#c94f0e; margin-top:9px; }
#owned-websites .demo-platform-search { display:block; font-size:9px; color:#657788; margin-bottom:12px; }
#owned-websites .demo-platform-search input { display:block; width:100%; padding:8px; margin-top:6px; border:1px solid #cbd8e2; background:white; color:#1d3445; border-radius:4px; font-size:10px; }
#owned-websites .demo-platform-body p,#owned-websites .demo-platform-body li { font-size:10px; color:#647b8b; line-height:1.8; }
#owned-websites .demo-platform-body h5 { font-size:12px; }
#owned-websites .demo-certificate { text-align:center; border:3px double #d39764; background:#fffbf3; padding:22px 10px; }
#owned-websites .demo-certificate small { font:7px monospace; letter-spacing:2px; color:#ab743c; }
#owned-websites .ref-platform-footer > button { position:relative; text-align:left; padding:4px 0 4px 20px; border:0; background:transparent; color:#e0e9ef; cursor:pointer; font-size:8px; }
#owned-websites [role="button"] { cursor:pointer; }
#owned-websites button:focus-visible,#owned-websites [role="button"]:focus-visible,#owned-websites input:focus-visible { outline:2px solid #ff7020; outline-offset:2px; }
#owned-websites .demo-platform-items button:hover { border-color:#fb8c49; }
@media(max-width:1150px) { #products .ref-console-layout { grid-template-columns:120px minmax(0,1fr); } #products .ref-sidebar button { font-size:8px; } #products .demo-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #products .demo-kanban { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { #products .ref-console-layout { display:flex; flex-direction:column; height:650px; } #products .ref-sidebar { display:flex; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:5px; border-right:0; border-bottom:1px solid #33414c; flex-shrink:0; max-width:100%; } #products .ref-sidebar .demo-nav-group { display:none; } #products .ref-sidebar button { padding:10px; font-size:10px; white-space:nowrap; } #products .ref-console-content { flex:1; min-height:0; } #products .demo-view-heading { align-items:flex-start; } #products .demo-view-heading h3 { font-size:15px; } #products .demo-view-heading > div:last-child { flex-wrap:wrap; justify-content:flex-end; } #products .demo-stat-grid strong { font-size:23px; } #products .demo-ai-banner { align-items:flex-start; flex-direction:column; } #products .demo-table td { font-size:9px; } #owned-websites .demo-platform-nav button { padding:9px 8px; font-size:9px; } #owned-websites .ref-platform-footer > button { font-size:8px; } }
#products .demo-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#products .demo-chart-grid svg { width:100%; height:auto; display:block; }
#products .demo-revenue-bars { height:100px; margin:20px 5px 25px; border-bottom:1px solid #4b606f; display:flex; gap:12px; align-items:flex-end; }
#products .demo-revenue-bars > i { position:relative; flex:1; background:linear-gradient(#ff874b,#b34c1a); border-radius:4px 4px 0 0; }
#products .demo-revenue-bars span { position:absolute; top:100%; margin-top:6px; font:7px monospace; color:#90a6b5; }
@media(max-width:600px) { #products .demo-chart-grid { grid-template-columns:1fr; } }

/* Keep interactive previews independent of the site's global pill-button rule. */
#products button, #products [role="button"],
#owned-websites button, #owned-websites [role="button"],
.product-demo-dialog button { border-radius: 5px !important; }
#products .demo-stat-grid button { border-radius: 8px !important; min-width: 0; min-height: 95px; padding: 14px 12px; }
#owned-websites .ref-news-feature[role="button"] { border-radius: 5px !important; }
#owned-websites .ref-code-preview > b[role="button"] { border-radius: 50% !important; }
#products .ref-console-layout { grid-template-columns: 155px minmax(0,1fr); height: 660px; }
#products .ref-sidebar, #products .ref-console-content { scrollbar-width: thin; scrollbar-color: #505050 #141414; color-scheme: dark; }
#products .ref-sidebar::-webkit-scrollbar, #products .ref-console-content::-webkit-scrollbar { width: 6px; height: 6px; }
#products .ref-sidebar::-webkit-scrollbar-track, #products .ref-console-content::-webkit-scrollbar-track { background: #141414; }
#products .ref-sidebar::-webkit-scrollbar-thumb, #products .ref-console-content::-webkit-scrollbar-thumb { background: #505050; border-radius: 8px; }
#products .ref-sidebar::-webkit-scrollbar-button, #products .ref-console-content::-webkit-scrollbar-button { display: none; }
#products .ref-sidebar button { font-size: 10px; padding: 9px 7px; line-height: 1.4; }
#products .ref-console-content { padding: 18px; min-width: 0; }
#products .demo-stat-grid { gap: 10px; }
#products .demo-stat-grid small { font-size: 9px; line-height: 1.5; }
#products .demo-stat-grid strong { font-size: 23px; overflow-wrap: anywhere; }
#products .demo-stat-grid span { font-size: 8px; }
#products .demo-view-heading h3 { font-size: 20px; }
#products .demo-view-heading small { font-size: 8px; }
#products .demo-view-heading p { font-size: 10px; }
#products .demo-chart-grid { align-items: stretch; }
#products .demo-chart-grid .demo-panel { margin: 0 0 14px; min-width: 0; border-radius: 8px; }
#products .demo-ai-banner { padding: 16px; border-radius: 8px; }
#products .demo-ai-banner small { font-size: 8px; }
#products .demo-ai-banner b { font-size: 13px; }
#products .demo-ai-banner p { font-size: 10px; }
#owned-websites .ref-platform-grid { align-items: stretch; }
#owned-websites .ref-platform-card { display: flex; flex-direction: column; }
#owned-websites .ref-site-preview { flex: 1; min-width: 0; }
#owned-websites .ref-platform-footer { min-height: 56px; margin-top: auto; flex-wrap: wrap; }
#owned-websites .demo-platform-heading { align-items: flex-start; }
#owned-websites .demo-platform-heading h4 { font-size: 14px; line-height: 1.3; }
#owned-websites .demo-platform-heading small { font-size: 6px; flex-shrink: 0; padding-top: 3px; }
#owned-websites .demo-platform-body { padding: 14px; }
#owned-websites .ref-academy-hero { grid-template-columns: 1fr 1.1fr; gap: 12px; }
#owned-websites .ref-academy-hero h4 { font-size: 17px; line-height: 1.2; }
#owned-websites .ref-academy-hero p { font-size: 8px; }
#owned-websites .ref-mini-cta { font-size: 8px; padding: 8px; }
#owned-websites .ref-code-preview { min-width: 0; padding: 10px; }
#owned-websites .ref-code-preview code { font-size: 6px; overflow-wrap: anywhere; }
#owned-websites .ref-course-grid { gap: 9px; }
#owned-websites .ref-course-grid > div { min-width: 0; padding: 0 0 7px; border: 1px solid #e3e9ee; overflow: hidden; background: white; }
#owned-websites .ref-course-grid i { height: 50px; border-radius: 0; }
#owned-websites .ref-course-grid b { font-size: 8px; padding-inline: 5px; line-height: 1.4; }
#owned-websites .ref-course-grid small { font-size: 6px; padding-inline: 5px; line-height: 1.5; }
#owned-websites .ref-academy-main h5 { font-size: 10px; margin-top: 18px; }
#owned-websites .ref-news-hero { grid-template-columns: minmax(0,1.7fr) minmax(85px,1fr); gap: 10px; }
#owned-websites .ref-news-feature { min-height: 174px; padding: 24px 12px 14px; }
#owned-websites .ref-news-feature h4 { font-size: 17px; line-height: 1.2; }
#owned-websites .ref-news-feature > small, #owned-websites .ref-news-feature > span { font-size: 7px; }
#owned-websites .ref-news-feature p { font-size: 7px; color: #b6c4ce; line-height: 1.7; }
#owned-websites .ref-news-latest > b { font-size: 9px; }
#owned-websites .ref-news-latest > div { font-size: 8px; border-radius: 0 !important; }
#owned-websites .ref-news-latest small { font-size: 6px; line-height: 1.4; }
#owned-websites .ref-news-topics { flex-wrap: wrap; }
#owned-websites .ref-news-topics > span { font-size: 7px; padding: 9px 6px; }
#owned-websites .demo-platform-nav button { font-size: 9px; line-height: 1.4; }
@media (min-width:1151px) and (max-width:1450px) {
  #products.ref-products { grid-template-columns: minmax(260px,.7fr) minmax(0,2fr); gap: 26px; }
  #owned-websites.ref-platforms { grid-template-columns: minmax(225px,.55fr) minmax(0,2fr); gap: 24px; }
  #products .demo-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:1150px) {
  #products .ref-console-layout { grid-template-columns: 128px minmax(0,1fr); }
  #products .ref-console-content { padding: 12px; }
  #products .ref-sidebar button { font-size: 9px; }
}
@media (max-width:760px) {
  #owned-websites .ref-platform-grid { grid-template-columns: 1fr; }
  #owned-websites .ref-site-preview { min-height: 300px; }
}
@media (max-width:600px) {
  #products .ref-console-layout { height: 680px; }
  #products .ref-sidebar button { font-size: 10px; padding: 10px; }
  #products .demo-stat-grid button { min-height: 90px; padding: 12px 10px; }
  #products .demo-view-heading h3 { font-size: 17px; }
  #owned-websites .demo-platform-heading { flex-wrap: wrap; gap: 5px; }
  #owned-websites .ref-academy-hero h4, #owned-websites .ref-news-feature h4 { font-size: 15px; }
}

/* Brand logo in the connected platforms hub. */
#owned-websites .ref-platform-connection .ref-platform-logo { display: block; width: 94px; height: 41px; object-fit: contain; }

#owned-websites .ref-platform-connection > div { background: #000; }

/* Neutral black workspace surfaces and compact row actions. */
#products .ref-console, #owned-websites.ref-platforms { background-color:#0b0b0b; }
#products .ref-console { background-image:radial-gradient(ellipse at 50% 30%,#202020,#0d0d0d 70%); }
#products .ref-console-top, #products .ref-sidebar { background:#111; border-color:#303030; }
#products .ref-panel, #products .demo-panel { background:#141414; border-color:#333; }
#products .demo-stat-grid button { background:linear-gradient(135deg,#242424,#161616); border-color:#3a3a3a; }
#products .demo-row-actions { display:flex; align-items:center; gap:6px; }
#products .demo-row-actions button { display:inline-grid; place-items:center; width:29px; height:29px; padding:0; background:#222; border-color:#444; font-size:11px; color:#ff995f; }
#products .demo-row-actions button[data-demo-action="delete"] { color:#ff8585; }
#products .demo-row-actions button:hover { background:#353535; }
#products .demo-inline-detail { max-width:650px; }
#products .demo-inline-detail form { display:grid; gap:5px; }
#products .demo-inline-detail button[type="submit"] { justify-self:start; padding:11px 17px; background:#d84b06; }
#owned-websites .ref-platform-card, #owned-websites .ref-platform-title, #owned-websites .ref-platform-footer { background:#111; }
#owned-websites .ref-code-preview { background:linear-gradient(135deg,#252525,#101010); }
#owned-websites .ref-course-grid i, #owned-websites .ref-course-grid > div:nth-child(2) i, #owned-websites .ref-course-grid > div:nth-child(3) i, #owned-websites .ref-news-latest i { background-color:#242424; color:#ff9759; }
#owned-websites .ref-city i { background:linear-gradient(110deg,#383838,#222 65%,#bf4b16 66%,#652b13); border-top-color:#555; }

/* Interactive Academy preview (rendered by academy-preview.js). */
#owned-websites .ref-academy-preview { container-type:inline-size; background:#faf8f5; color:#25221f; }
.academy-showcase button { font-family:inherit; cursor:pointer; }
.academy-showcase button:focus-visible, .academy-showcase a:focus-visible { outline:2px solid #d65313; outline-offset:3px; }
.academy-brandbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 14px; border-bottom:1px solid #e8e1d9; }
.academy-brandbar > b { font-size:12px; letter-spacing:-.4px; }
.academy-brandbar b span { color:#e85b16; font-size:20px; vertical-align:middle; margin-right:4px; }
.academy-brandbar em { font-style:normal; font-weight:400; }
.academy-brandbar > small { font:6px monospace; letter-spacing:1px; color:#82776d; }
.academy-tabs { display:flex; gap:4px; padding:7px 10px; border-bottom:1px solid #e8e1d9; }
.academy-tabs button { flex:1; min-width:0; padding:9px 3px; border:0; border-radius:4px; background:transparent; color:#74695f; font-size:9px; }
.academy-tabs button[aria-pressed="true"] { background:#25221f; color:#fff; }
.academy-tabs button:hover { background:#f0e3d7; color:#84380d; }
.academy-content { padding:16px 13px; }
.academy-feature { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:12px; padding-bottom:20px; }
.academy-feature > div { min-width:0; }
.academy-kicker, .academy-page-title > small { display:block; color:#b54a12; font:7px monospace; letter-spacing:.8px; line-height:1.6; }
.academy-kicker > i { display:inline-block; width:5px; height:5px; margin-right:3px; border-radius:50%; background:#e16a29; }
.academy-content h4 { font-size:22px; line-height:1.15; letter-spacing:-.8px; margin:11px 0; color:#26211d; }
.academy-content h4 em { color:#ce5319; font-style:normal; }
.academy-content p { font-size:10px; line-height:1.7; color:#766a60; margin:10px 0 15px; }
.academy-content .academy-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; background:#de5819; color:#fff; border:1px solid #de5819; border-radius:4px; padding:10px 12px; font-size:9px; font-weight:600; text-decoration:none; }
.academy-content .academy-cta:hover { background:#b94009; }
.academy-editor { overflow:hidden; border:1px solid #3c3934; border-radius:7px; background:#242320; box-shadow:0 10px 20px #33220e15; transform:rotate(2deg); }
.academy-editor > div { display:flex; align-items:center; gap:4px; padding:10px 8px; background:#302e2a; }
.academy-editor > div i { width:4px; height:4px; background:#be7857; border-radius:50%; }
.academy-editor > div i:nth-child(2) { background:#c1a76a; }
.academy-editor > div i:nth-child(3) { background:#ff5a00; }
.academy-editor > div span { margin-left:auto; font:6px monospace; color:#beb7ab; }
.academy-editor code { display:block; padding:12px 9px; color:#e1d9cb; font:8px/1.9 monospace; white-space:nowrap; }
.academy-editor code span { color:#ecab7e; }
.academy-editor code b { color:#ffb184; font-weight:400; }
.academy-editor code em { color:#ffb184; font-style:normal; }
.academy-editor > small { display:block; padding:8px; border-top:1px solid #ffffff12; color:#b8ae9e; font:5px monospace; }
.academy-caret { display:inline-block; height:9px; width:4px; margin-left:3px; background:#f39153; vertical-align:middle; }
.academy-section-label { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:9px; font-size:10px; }
.academy-section-label button, .academy-back { background:none; border:0; padding:5px 0; font-size:8px; color:#b34a14; }
.academy-programs { display:grid; gap:7px; }
.academy-program { display:flex; align-items:center; gap:10px; width:100%; padding:10px; text-align:left; border:1px solid #e6ded4; border-radius:6px; background:#fffdfa; color:#322b24; }
.academy-program:hover { border-color:#df945e; background:#fff4e9; }
.academy-program-icon, .academy-internship-icon { display:grid; place-items:center; flex:0 0 30px; height:32px; background:#f7e8da; border-radius:5px; color:#bd571d; font:15px monospace; }
.academy-program > span:nth-child(2) { min-width:0; }
.academy-program small, .academy-internship-banner small { display:block; font:6px/1.5 monospace; letter-spacing:.5px; color:#947351; }
.academy-program b, .academy-internship-banner b { display:block; font-size:11px; line-height:1.4; margin:3px 0; }
.academy-program em { display:block; color:#817469; font-size:8px; line-height:1.5; font-style:normal; }
.academy-program em i { font-style:normal; padding:0 3px; }
.academy-program > strong, .academy-internship-banner > strong { margin-left:auto; color:#c96528; }
.academy-internship-banner { display:flex; align-items:center; gap:9px; width:100%; margin-top:12px; padding:11px 9px; border:1px solid #e9d7bf; border-radius:5px; background:#f2e9db; text-align:left; color:#493825; }
.academy-internship-banner b { font-size:10px; }
.academy-internship-banner:hover { background:#ecdfcd; }
.academy-page-title { margin-bottom:18px; }
.academy-method { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; color:#c15b22; font:8px/1.8 monospace; }
.academy-method b { display:block; font:9px/1.5 sans-serif; color:#766a60; }
.academy-interest-list { display:grid; gap:8px; margin:18px 0; }
.academy-interest-list > span { padding:12px; border:1px solid #e6ded4; border-radius:5px; background:#fffdfa; color:#ba5b26; font:10px/1.6 monospace; }
.academy-interest-list b { margin-left:10px; color:#4c4036; font:600 10px/1.5 sans-serif; }
.academy-interest-list small { display:block; margin:4px 0 0 23px; color:#817469; font:9px/1.6 sans-serif; }
.academy-duration { font-size:10px; color:#ae551f; }
.academy-content .academy-note { font-size:8px; margin-bottom:0; }
.academy-learning-grid { display:grid; gap:9px; margin-bottom:18px; }
.academy-learning-grid article { padding:13px; border:1px solid #e6ded4; border-radius:6px; background:#fffdfa; }
.academy-learning-grid i { float:left; margin-right:10px; color:#c5632c; font-style:normal; font-size:20px; }
.academy-learning-grid h5 { font-size:11px; margin:0 0 5px; color:#493b30; }
.academy-learning-grid p { margin:0; font-size:9px; }
.academy-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@container (max-width:340px) {
  .academy-brandbar > small { display:none; }
  .academy-content h4 { font-size:19px; }
  .academy-feature { grid-template-columns:1fr; }
  .academy-editor { transform:none; }
  .academy-editor code { font-size:10px; }
  .academy-editor > small { font-size:6px; }
}

/* Rich platform showcases: a learning studio and a Tamil publication. */
#owned-websites.ref-platforms { grid-template-columns:1fr; gap:18px; padding:38px 3.8% 42px; }
#owned-websites .ref-intro { display:block; width:min(100%,900px); max-width:none; margin-inline:auto; text-align:center; }
#owned-websites .ref-intro h2 { margin:14px 0 10px; font-size:clamp(30px,3.1vw,44px); }
#owned-websites .ref-intro h2 br { display:none; }
#owned-websites .ref-intro > p:not(.ref-eyebrow) { margin:0; font-size:13px; }
#owned-websites .ref-platform-connection { height:64px; }
#owned-websites .ref-platform-connection::before { top:24px; height:40px; }
#owned-websites .ref-platform-connection > div { width:180px; height:70px; }
#owned-websites .ref-platform-connection .ref-platform-logo { width:112px; height:55px; }
#owned-websites .ref-platform-grid { gap:24px; align-items:start; }
#owned-websites .ref-platform-card { border-radius:13px; }
#owned-websites .ref-platform-title { min-height:88px; padding:14px 22px; }
#owned-websites .ref-platform-title h3 { font-size:15px; gap:14px; }
#owned-websites .ref-platform-title .platform-brand-logo { width:74px; height:68px; object-fit:contain; }
#owned-websites .ref-platform-title > span { font-size:8px; }
#owned-websites .ref-site-preview { margin:0; border-radius:0; }
#owned-websites .platform-addressbar { min-height:36px; }
#owned-websites .platform-workspace-body { min-height:390px; }
#owned-websites .platform-panel { height:390px; padding:30px 24px; }
#owned-websites .platform-panel h4 { font-size:clamp(23px,2vw,31px); }
#owned-websites .platform-panel p { font-size:12px; }
#owned-websites .platform-code-window { min-height:155px; }
#owned-websites .platform-publication { min-height:155px; }
#owned-websites .platform-compact .ref-platform-footer { min-height:62px; padding:14px 22px; }
#owned-websites .platform-compact .ref-platform-footer > small,
#owned-websites .platform-compact .platform-external { font-size:10px; }
.academy-content { padding:24px 20px; }
.academy-feature { gap:20px; padding:10px 0 26px; }
.academy-content h4 { font-size:clamp(23px,2.3vw,36px); }
.academy-feature p { font-size:12px; }
.academy-brandbar { padding:18px 20px; }
.academy-brandbar > b { font-size:15px; }
.academy-tabs button { font-size:11px; padding-block:12px; }
.academy-editor code { font-size:10px; padding:18px 12px; }
.academy-program { padding:13px; }
.academy-program b { font-size:13px; }
.academy-program small { font-size:7px; }
.academy-program em { font-size:10px; }
.academy-lab { margin-top:24px; padding-top:20px; border-top:1px solid #e5dacf; }
.academy-section-label > span { color:#987d68; font:7px monospace; }
.academy-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.academy-project-grid button { min-width:0; text-align:left; padding:14px 10px; background:#f0e9dd; border:1px solid #e1d4c1; border-radius:7px; color:#493c2e; }
.academy-project-grid button:nth-child(2) { background:#fff1e8; border-color:#ffb184; }
.academy-project-grid button:nth-child(3) { background:#ece7f0; border-color:#dcd2e5; }
.academy-project-grid i { display:grid; place-items:center; height:52px; font:30px monospace; margin-bottom:13px; border:1px dashed #8e78574a; border-radius:5px; }
.academy-project-grid small { font:7px monospace; }
.academy-project-grid b { display:block; margin:8px 0; font-size:12px; }
.academy-project-grid button > span { font-size:9px; line-height:1.6; display:block; }
.academy-project-grid button:hover { border-color:#c15b22; }
.academy-roadmap { margin-top:20px; background:#292a25; color:#f3ecd9; padding:22px; border-radius:8px; }
.academy-roadmap > small, .academy-skill-picker > small { font:8px/1.6 monospace; letter-spacing:1px; color:#dca779; }
.academy-roadmap h5 { font-size:22px; line-height:1.3; margin:10px 0 20px; }
.academy-roadmap ol { list-style:none; margin:0 0 15px; padding:0; }
.academy-roadmap li { display:flex; gap:12px; padding-bottom:15px; }
.academy-roadmap li > span { flex:0 0 28px; height:28px; border:1px solid #70694f; border-radius:50%; display:grid; place-items:center; font:9px monospace; color:#e9b17e; }
.academy-roadmap li b { font-size:12px; }
.academy-roadmap li p { color:#bcb9a9; margin:3px 0 0; }
.academy-skill-picker { margin-top:20px; }
.academy-skill-picker > small { color:#9b633f; }
.academy-skill-picker > div { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.academy-skill-picker button { border:1px solid #ded2c5; background:#fffaf3; border-radius:20px; padding:9px 12px; font-size:10px; color:#805132; }
#owned-websites .ref-media-preview { background:#f6f5f1; color:#24272a; container-type:inline-size; }
.media-showcase a { color:inherit; text-decoration:none; }
.media-showcase button, .media-showcase input { font:inherit; }
.media-showcase a:focus-visible, .media-showcase button:focus-visible, .media-showcase input:focus-visible { outline:2px solid #c84629; outline-offset:3px; }
.media-masthead { padding:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid #dcd9d1; }
.media-masthead > div { display:flex; gap:9px; align-items:center; }
.media-mark { font:bold 20px/1 monospace; letter-spacing:-3px; background:#e34c2a; color:#fff; padding:12px 8px; border-radius:3px; }
.media-mark > span { font-size:11px; vertical-align:top; }
.media-masthead b { font-size:15px; letter-spacing:1px; }
.media-masthead b small { display:block; font-size:8px; letter-spacing:2px; margin-top:4px; }
.media-edition { font:7px/1.8 monospace; color:#7b776d; text-align:right; }
.media-edition b { font:8px/1.8 sans-serif; letter-spacing:0; color:#504d47; }
.media-strip { display:flex; align-items:center; gap:12px; padding:10px 15px; background:#252a2b; color:#f5eee1; font-size:9px; }
.media-strip b { color:#ff997c; font:8px monospace; }
.media-strip i { margin-left:auto; font-style:normal; }
.media-content { padding:20px; }
.media-cover { position:relative; isolation:isolate; overflow:hidden; padding:25px 22px 43px; background:#eae4d6; border:1px solid #d9cfbc; border-radius:6px; }
.media-overline { position:relative; z-index:1; font:8px/1.6 monospace; color:#8e523d; letter-spacing:1px; }
.media-cover h4 { position:relative; z-index:1; font-size:clamp(23px,2.2vw,34px); line-height:1.6; letter-spacing:-1px; color:#282f30; margin:17px 0 10px; }
.media-cover h4 em { color:#b23f25; font-style:normal; }
.media-cover p { position:relative; z-index:1; color:#6e695e; font-size:11px; line-height:1.8; margin:0 0 18px; }
.media-cover .media-visit { display:inline-flex; position:relative; z-index:1; gap:22px; padding:12px 14px; background:#b84026; color:white; border-radius:4px; font-size:10px; }
.media-orbit { position:absolute; z-index:-1; width:200px; height:200px; right:-75px; top:22px; border:1px solid #b593644a; border-radius:50%; box-shadow:0 0 0 20px #b5936410,0 0 0 40px #b5936410; transform:rotate(-15deg); }
.media-orbit > span { display:block; font-size:130px; color:#b593642b; line-height:1.5; }
.media-orbit i { position:absolute; top:0; left:10px; color:#c36342; font-style:normal; font-size:35px; }
.media-cover-label { position:absolute; bottom:0; left:0; right:0; padding:8px 22px; border-top:1px solid #d9cfbc; font:6px monospace; letter-spacing:2px; color:#86745b; }
.media-section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:25px 0 15px; }
.media-section-title small { font:7px monospace; color:#a45239; letter-spacing:.7px; }
.media-section-title h5 { font-size:22px; margin:6px 0 0; letter-spacing:-.6px; }
.media-section-title > span { font:7px monospace; color:#888174; }
.media-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px; }
.media-filters button { border:1px solid #d9d5cc; border-radius:20px; background:transparent; color:#70695d; padding:8px 12px; font-size:10px; cursor:pointer; }
.media-filters button[aria-pressed="true"] { background:#282f30; border-color:#282f30; color:white; }
.media-search { display:flex; align-items:center; gap:10px; padding:0 11px; background:#fffefa; border:1px solid #ded8cd; border-radius:5px; margin-bottom:12px; }
.media-search > span { color:#a34b31; font-size:22px; }
.media-search input { min-width:0; width:100%; border:0; background:transparent; color:#32302b; padding:12px 0; font-size:10px; }
.media-topics { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.media-topic { display:block; position:relative; padding:14px; border:1px solid #ddd7cc; border-radius:5px; background:#fffefa; transition:border-color .2s,background .2s; }
.media-topic:hover { border-color:#bd7656; background:#f9ecde; }
.media-topic-icon { float:right; font-size:22px; color:#ab5b3c; }
.media-topic > small { display:block; font:7px monospace; text-transform:uppercase; letter-spacing:1px; color:#978574; padding-top:5px; }
.media-topic > b { display:block; font-size:13px; line-height:1.7; margin:12px 0 5px; }
.media-topic p { font-size:10px; line-height:1.7; color:#7b7368; margin:0 0 14px; }
.media-topic-arrow { font-size:8px; color:#a34b31; }
.media-result-status { font:8px monospace; color:#8d8170; margin:10px 0 18px; }
.media-empty { grid-column:1/-1; padding:20px; font-size:12px; line-height:1.8; }
.media-editorial { padding:22px; border-left:3px solid #c85635; background:#eaece7; }
.media-editorial > span { font:7px monospace; letter-spacing:1.3px; color:#767b6d; }
.media-editorial h5 { font:italic 25px/1.25 Georgia,serif; color:#354039; margin:12px 0; }
.media-editorial p { font-size:11px; line-height:1.8; color:#72796d; }
.media-editorial a { display:inline-block; margin-top:5px; font-size:10px; color:#a24329; }
.media-bottom-note { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-top:22px; }
.media-bottom-note > span { font-size:10px; color:#605d52; }
.media-bottom-note b { color:#c15333; margin-inline:5px; }
.media-bottom-note small { font-size:8px; color:#8d8170; }
@container (max-width:400px) {
  .academy-project-grid { grid-template-columns:1fr; }
  .academy-project-grid i { float:left; width:45px; height:65px; margin:0 12px 0 0; }
  .academy-content, .media-content { padding:16px 12px; }
  .media-edition { display:none; }
  .media-topic { padding:11px; }
  .media-topic > b { font-size:11px; overflow-wrap:anywhere; }
  .media-cover { padding-inline:16px; }
  .media-bottom-note { align-items:flex-start; flex-direction:column; gap:8px; }
}
@media(max-width:760px) {
  #owned-websites .ref-platform-grid { grid-template-columns:1fr; }
  #owned-websites .ref-platform-title h3 { font-size:12px; }
  #owned-websites .ref-platform-title > span { font-size:6px; }
}

/* Compact, matching platform cards with independently selectable sections. */
#owned-websites .ref-platform-grid { align-items:stretch; }
#owned-websites .platform-compact { border:1px solid #ffffff20; border-radius:16px; background:#111; box-shadow:0 16px 40px #0003; }
#owned-websites .platform-compact .ref-platform-title { padding:20px; min-height:70px; gap:12px; flex-wrap:wrap; background:linear-gradient(120deg,#ff5a0010,transparent); }
#owned-websites .platform-compact .ref-platform-title > span { font-size:8px; letter-spacing:1px; color:#a5a5a5; }
#owned-websites .platform-compact .ref-site-preview { flex:none; min-height:0; margin:0; border-radius:0; background:#121212; color:#f5f5f5; }
.platform-nav { display:flex; align-items:center; gap:5px; padding:0 20px; border-block:1px solid #ffffff12; }
.platform-nav button { position:relative; padding:16px 12px; border:0; background:transparent; color:#999; font:500 12px/1.4 sans-serif; font-family:inherit; cursor:pointer; }
.platform-nav button[aria-selected="true"] { color:#ff792f; }
.platform-nav button[aria-selected="true"]::after { content:''; position:absolute; bottom:-1px; left:12px; right:12px; height:2px; background:#ff6a16; box-shadow:0 0 12px #ff5a0060; }
.platform-nav button:hover { color:#fff; }
.platform-nav > span { margin-left:auto; color:#ff792f; font-size:22px; }
.platform-panel { box-sizing:border-box; height:360px; overflow:auto; padding:26px; scrollbar-width:thin; scrollbar-color:#713715 #171717; }
.platform-panel[hidden] { display:none; }
.platform-panel h4 { position:relative; z-index:1; margin:17px 0 12px; font-size:clamp(24px,2.5vw,36px); line-height:1.22; letter-spacing:-1px; color:#f6f6f6; }
.platform-panel h4 em { font-style:normal; color:#ff792f; }
.platform-panel p { position:relative; z-index:1; max-width:340px; margin:0 0 22px; font-size:12px; line-height:1.8; color:#aaa; }
.platform-kicker { color:#c99577; font:9px/1.6 monospace; letter-spacing:1.7px; }
.platform-hero { position:relative; isolation:isolate; }
.platform-action { display:inline-flex; align-items:center; gap:24px; padding:12px 16px; border:1px solid #ff7424; border-radius:7px; background:#ff6514; color:#111; text-decoration:none; font:600 12px/1.4 sans-serif; cursor:pointer; }
.platform-action:hover { background:#ff853f; }
.platform-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; }
.platform-tags span { border:1px solid #ffffff15; border-radius:20px; padding:7px 9px; font-size:9px; color:#aaa; background:#181818; }
.platform-watermark { position:absolute; z-index:-1; right:0; top:35px; color:#ff702409; font:160px/1 monospace; transform:rotate(-12deg); }
.platform-rows { display:grid; gap:8px; }
.platform-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #ffffff12; border-radius:9px; background:#191919; color:#eee; text-decoration:none; }
.platform-row:hover { border-color:#ff792f80; background:#211a16; }
.platform-row > i { display:grid; place-items:center; flex:0 0 32px; height:32px; border-radius:7px; background:#ff651412; color:#ff792f; font:16px monospace; }
.platform-row > span:nth-child(2) { min-width:0; }
.platform-row b { display:block; font-size:12px; line-height:1.5; }
.platform-row small { display:block; margin-top:3px; font-size:10px; line-height:1.5; color:#999; }
.platform-row > span:last-child { margin-left:auto; color:#ff792f; }
.platform-steps { padding-left:20px; margin:0 0 20px; color:#bbb; font-size:12px; line-height:2.1; }
.platform-steps li::marker { color:#ff792f; }
#owned-websites .platform-compact .ref-platform-footer { min-height:66px; box-sizing:border-box; margin:0; padding:16px 20px; border-top:1px solid #ffffff12; display:flex; align-items:center; justify-content:space-between; gap:10px; }
#owned-websites .platform-compact .ref-platform-footer > small { font-size:10px; color:#888; }
#owned-websites .platform-compact .platform-external { margin:0; font-size:11px; color:#ff792f; white-space:nowrap; text-decoration:none; }
.platform-compact :is(a,button,[role="tabpanel"]):focus-visible { outline:2px solid #ff792f; outline-offset:-3px; }
@media(max-width:1000px) and (min-width:761px) {
  #owned-websites .platform-compact .ref-platform-title { align-content:center; min-height:90px; }
  .platform-panel { padding:20px; height:380px; }
  #owned-websites .platform-compact .ref-platform-footer > small { max-width:100px; line-height:1.6; }
}
@media(max-width:760px) {
  .platform-panel { height:360px; padding:22px 18px; }
  .platform-panel h4 { font-size:28px; }
  .platform-nav { padding-inline:10px; }
  .platform-nav button { font-size:11px; }
  #owned-websites .platform-compact .ref-platform-title { padding:18px; min-height:85px; align-content:center; }
  #owned-websites .platform-compact .ref-platform-footer { padding-inline:18px; }
}

/* Technical workspaces: dotted canvases and connected signal paths. */
#owned-websites .platform-compact { border-radius:10px; border-color:#3a332e; box-shadow:0 18px 45px #0004; }
#owned-websites .platform-compact .ref-platform-title { background:#171615; }
#owned-websites .platform-compact .ref-site-preview { background:radial-gradient(circle,#ffffff17 .8px,transparent 1px) 0 0 / 14px 14px,#111; }
.platform-nav { background:#141414; }
.platform-panel { background:radial-gradient(ellipse at 100% 0,#ff5a000a,transparent 60%); }
.platform-kicker { font-size:9px; color:#b6a399; }
.platform-panel h4 { font-size:clamp(24px,2.2vw,32px); }
.platform-tags { margin-top:18px; }
.platform-tags span { border-radius:4px; background:#171717; }
.platform-signal { display:flex; align-items:center; gap:8px; margin-top:20px; height:42px; }
.platform-signal > span { font:8px monospace; letter-spacing:1px; color:#aaa; padding:9px; border:1px solid #ffffff20; border-radius:4px; background:#191919; }
.platform-signal svg { flex:1; min-width:0; height:42px; fill:none; stroke:#76533d; stroke-width:2; stroke-dasharray:1 8; stroke-linecap:round; }
.platform-signal .platform-packets { stroke:#ff843d; stroke-width:3; stroke-dasharray:2 55; animation:platform-signal-flow 5s linear infinite; }
.platform-signal > b { display:grid; place-items:center; flex:0 0 40px; height:40px; color:#ff843d; border:1px solid #ff792f70; border-radius:8px; background:#241a14; box-shadow:0 0 22px #ff5a0018; font-size:23px; }
@keyframes platform-signal-flow { to { stroke-dashoffset:-114; } }
body.motion-paused .platform-packets { animation-play-state:paused; }
#products.ref-products { padding-block:32px; align-items:center; }
#products .ref-console { border:1px solid #39312b; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px #0005; }
#products .ref-console-layout { height:500px; min-height:0; }
#products .ref-console-top { padding:14px 18px; background:linear-gradient(90deg,#241a14,#141414 65%); }
#products .ref-console-content { background:radial-gradient(circle,#ffffff12 .7px,transparent 1px) 0 0 / 14px 14px,#111; padding:16px; }
#products .ref-sidebar { background:#141414; }
#products .ref-sidebar button { border:1px solid transparent; border-radius:6px; margin-bottom:3px; }
#products .ref-sidebar button.active { border-color:#ff782e40; background:linear-gradient(90deg,#ff5a0024,#ff5a0009); box-shadow:inset 2px 0 #ff792f; color:#ff9a60; }
#products .demo-view-heading { margin-bottom:14px; }
#products .demo-view-heading h3 { font-size:20px; letter-spacing:-.6px; }
#products .demo-view-heading small { font:7px monospace; letter-spacing:1px; color:#c28a67; }
#products .demo-overview-stats .demo-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
#products .demo-overview-stats .demo-stat-grid button { min-height:86px; padding:12px 10px; background:linear-gradient(140deg,#25201c,#181818); border:1px solid #ffffff15; }
#products .demo-overview-stats .demo-stat-grid button:hover { border-color:#ff792f70; }
#products .demo-overview-stats .demo-stat-grid small { font-size:8px; color:#b1a79f; }
#products .demo-overview-stats .demo-stat-grid strong { font:500 23px/1.2 monospace; margin:7px 0; color:#f5e9df; }
#products .demo-overview-stats .demo-stat-grid button:first-child strong { color:#ff843d; }
#products .demo-overview-stats .demo-stat-grid span { font-size:7px; color:#b98767; }
#products .demo-workshop-pulse { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:10px 12px; border:1px solid #ff792f26; border-radius:7px; background:#211a15; margin-bottom:12px; }
#products .demo-workshop-pulse > span { font:7px monospace; letter-spacing:.8px; color:#e09b72; }
#products .demo-workshop-pulse i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#ff792f; box-shadow:0 0 9px #ff792f90; margin-right:4px; }
#products .demo-workshop-pulse b { font-size:9px; font-weight:400; color:#c2b5ab; }
#products .demo-workshop-pulse em { font-style:normal; color:#7f5b43; padding:0 6px; }
#products .demo-workshop-pulse button { margin-left:auto; font-size:8px; padding:5px 8px; }
#products .demo-chart-grid { gap:10px; }
#products .demo-chart-grid .demo-panel { background:linear-gradient(160deg,#1b1b1bf5,#151515f5); border:1px solid #ffffff14; padding:12px; margin-bottom:12px; }
#products .demo-chart-grid h4 { font-size:10px; color:#c8bcb3; margin-bottom:10px; }
#products .demo-chart-grid svg { height:105px; }
#products .demo-revenue-bars { height:90px; }
#products .demo-revenue-bars i { border-radius:4px 4px 0 0; background:linear-gradient(#ff8b45,#a3400e); box-shadow:0 0 15px #ff5a0008; }
#products .demo-panel { background:#191919f5; border-color:#ffffff14; }
#products .demo-table th { background:#211c18; color:#c29c83; font-size:8px; letter-spacing:.5px; }
#products .demo-table td { border-color:#ffffff0c; }
#products .demo-badge { border:1px solid #ff792f30; background:#ff792f0c; color:#eaa377; }
#products .demo-quick-tools { display:flex; gap:7px; align-items:center; flex-wrap:wrap; padding-block:5px; }
#products .demo-quick-tools > span { font:7px monospace; color:#9d8473; margin-right:auto; }
#products .demo-quick-tools button { padding:8px; font-size:9px; }
#products .ref-steps { margin-block:22px; }
#products .ref-steps li { padding-bottom:15px; }
@media(max-width:1150px) and (min-width:901px) {
  #products .demo-overview-stats .demo-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  #products .ref-console-layout { height:520px; }
  #products .ref-console-content { padding:12px; }
  #products .demo-overview-stats .demo-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #products .demo-overview-stats .demo-stat-grid button { min-height:80px; }
  #products .demo-chart-grid { grid-template-columns:1fr; }
  .platform-panel h4 { font-size:26px; }
  .platform-panel p { margin-bottom:16px; }
  .platform-signal { margin-top:15px; }
}
@media(prefers-reduced-motion:reduce) { .platform-signal .platform-packets { animation:none; } }

/* ONEPIXEL contact dock and project console. */
.site-tools { position:fixed; right:max(10px,env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom)); z-index:50; display:grid; gap:8px; opacity:0; visibility:hidden; pointer-events:none; }
.site-tools.is-visible { opacity:1; visibility:visible; pointer-events:auto; }
.site-tool { position:relative; display:grid; place-items:center; width:36px; height:36px; color:#ff7a32; text-decoration:none; border-radius:8px; transition:background .2s, color .2s; }
.site-tool svg { width:18px; height:18px; }
.site-tool i { font-size:15px; }
.whatsapp-tool { color:#fff; background:#a83b00; border:1px solid #ff5a00; box-shadow:0 6px 20px #a83b0033; }
.whatsapp-tool:hover { background:#a83b00; }
.call-tool { color:#ff985c; background:#151719; border:1px solid #45413b; }
.call-tool:hover { background:#30231b; color:#fff; }
.page-jump { padding:3px; background:#151719; border:1px solid #45413b; border-radius:12px; box-shadow:0 8px 24px #0003; }
.page-jump .site-tool { width:30px; height:30px; }
.page-jump .site-tool:hover { background:#30231b; color:#fff; }
.page-jump-meter { display:block; height:2px; margin:2px 8px; background:#414141; }
.page-jump-meter i { display:block; height:100%; width:var(--scroll-progress,0%); background:var(--orange); }
.tool-tooltip { position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); padding:9px 12px; border:1px solid #444; border-radius:6px; background:#17191c; color:#fff; font:11px/1.4 Inter,Arial,sans-serif; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; }
.site-tool:hover .tool-tooltip,.site-tool:focus-visible .tool-tooltip { opacity:1; }
.site-tool:focus-visible { outline:2px solid #ff8e50; outline-offset:4px; }
body.mobile-nav-open .site-tools { visibility:hidden; }
#project-dialog { width:min(560px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:30px; overflow:auto; color:#edf0f3; color-scheme:dark; border:1px solid #514235; border-radius:16px; background-color:#151719; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:24px 24px; box-shadow:0 30px 100px #0008; }
#project-dialog::backdrop { background:#080b10cc; backdrop-filter:blur(8px); }
.enquiry-console-bar { display:flex; align-items:center; gap:12px; margin:-30px -30px 25px; padding:16px 60px 16px 22px; border-bottom:1px solid #ffffff16; background:#202225; color:#a8adb4; font:11px/1.4 monospace; }
.enquiry-console-bar>span { display:flex; gap:5px; }
.enquiry-console-bar i { width:6px; height:6px; background:#62666c; border-radius:50%; }
.enquiry-console-bar i:first-child { background:var(--orange); }
.enquiry-console-mark { display:flex; align-items:center; gap:12px; color:var(--orange); font:700 26px/1.4 monospace; margin-bottom:20px; }
.enquiry-console-mark span { color:#a2a8ae; font:10px/1.5 monospace; letter-spacing:1.5px; }
#project-dialog .close-dialog { top:8px; right:10px; width:36px; height:36px; color:#c9cdd1; border:1px solid #ffffff20; border-radius:6px; }
#project-dialog h2 { font-size:clamp(28px,6vw,37px); line-height:1.15; letter-spacing:-1px; }
#project-dialog h2 span { color:var(--orange); }
#project-dialog #dialog-description { color:#b6bdc5; line-height:1.7; margin:14px 0 22px; }
#project-dialog form { gap:16px; }
#project-dialog label { color:#d4d9df; font-size:12px; gap:8px; }
#project-dialog input,#project-dialog select,#project-dialog textarea { background:#101214; border:1px solid #3c4146; color:#eef1f4; border-radius:6px; padding:12px; }
#project-dialog textarea { resize:vertical; min-height:90px; }
#project-dialog input::placeholder,#project-dialog textarea::placeholder { color:#929aa4; }
#project-dialog :is(input,select,textarea,button):focus-visible { outline:2px solid #ff813b; outline-offset:3px; }
#project-dialog .primary { width:fit-content; max-width:100%; justify-self:center; margin-inline:auto; justify-content:center; gap:8px; font-size:13px; }
#project-dialog #form-status { color:#ffb184; line-height:1.6; }
#project-dialog #form-status:empty { display:none; }
@media(max-width:600px) {
  .site-tools { right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); gap:8px; }
  #project-dialog { padding:22px; }
  .enquiry-console-bar { margin:-22px -22px 22px; }
  #project-dialog input,#project-dialog select,#project-dialog textarea { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .site-tool,.tool-tooltip { transition:none; } }

/* Keep selected-work text sharp and the cover hover subtle. */
#work .project, #work .project:hover { transform: none; transform-style: flat; will-change: auto; }
#work .project:hover .photo-art img { transform: none; filter: none; }
#work .project-carousel.motion-piece { animation: none; opacity: 1; transform: none; filter: none; }
.integration-toggle { position: relative; appearance: none; flex-shrink: 0; width: 44px; height: 26px; padding: 0; border: 1px solid #68717c; border-radius: 99px; background: #343a42; transition: background .2s; }
.integration-toggle::before { content: ''; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .2s; }
.integration-toggle[aria-checked="true"] { background: var(--orange); border-color: var(--orange); }
.integration-toggle[aria-checked="true"]::before { transform: translateX(18px); }
.integration-toggle::after { content: ''; position: absolute; inset: -12px -6px; }
.integration-toggle:disabled { cursor: wait; }
.integration-row.is-disabled > i, .integration-row.is-disabled p { opacity: .5; }
.faq-group + .faq-group { margin-top: 0; }
.faq-group h3 { margin: 0 0 16px; color: #a83b00; font-size: 17px; }
.faq-group details:first-of-type { border-top: 1px solid var(--line); }

.faq-tabs { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 26px; border: 1px solid #ff5a0033; border-radius: 12px; background: #fff5ee; }
.faq-tabs button { min-height: 44px; padding: 10px 24px; border: 0; border-radius: 8px; background: transparent; color: #74330e; font-weight: 650; }
.faq-tabs button[aria-selected="true"] { background: var(--orange); color: #fff; box-shadow: 0 3px 9px #ff5a0026; }
.faq-group[hidden] { display: none; }
#automation .integration-toggle[aria-checked="true"] { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 3px #ff5a0018; }
#automation .integration-toggle:focus-visible { outline: 2px solid #ffb184; outline-offset: 5px; }
#automation .automation-flow > #ai-status { color: var(--orange); border-left-color: var(--orange); }
#infrastructure #cloud-health, #infrastructure .metric em, #infrastructure .map-label em, #infrastructure .cloud-overview strong span, #infrastructure .route-traced .map-origin { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .integration-toggle, .integration-toggle::before { transition: none; } }

/* Separate portfolio actions keep navigation and case studies easy to find. */
#work .project { display: flex; flex-direction: column; cursor: default; }
#work .project .photo-art { flex-shrink: 0; }
#work .project-copy { display: flex; flex-direction: column; flex: 1; }
#work .project-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 5px 0 12px; }
#work .project-title-row h3 { min-width: 0; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
#work .project-actions { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
#work .project-actions > * { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 7px; border: 1px solid #ff5a002b; border-radius: 50%; color: #c44705; background: #fff8f3; transition: background .18s, color .18s, border-color .18s; }
#work .project-actions svg { width: 17px; height: 17px; }
#work .project-actions .project-case-link { background: #fff8f3; }
#work .project-quick-link[aria-disabled="true"] { cursor: default; }
#work .project-actions > a:hover { color: #fff; background: var(--orange); border-color: var(--orange); }
@media (pointer: coarse) { #work .project-actions > * { width: 36px; height: 36px; } }

/* Match the header logo to the dark About-section brand card. */
header, header.is-scrolled { min-height: 108px; }
header .logo-mark {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 92px;
  flex: 0 0 150px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #30332f, #111410);
  border: 1px solid #45483f;
  border-radius: 10px;
  box-shadow: 3px 4px 0 #bdb8ac;
}
header .logo-mark .brand-logo {
  width: 100% !important;
  height: 68px !important;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px #0008);
}
header .logo-mark .logo-tagline {
  display: block;
  margin: 0;
  color: #fff;
  font: 7px/1.2 monospace;
  letter-spacing: 1px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  header, header.is-scrolled { min-height: 96px; }
  header .logo-mark { width: 120px; height: 72px; flex-basis: 120px; padding: 2px 6px; border-radius: 8px; gap: 3px; }
  header .logo-mark .brand-logo { height: 52px !important; }
  header .logo-mark .logo-tagline { font-size: 6px; letter-spacing: .7px; }
}

/* Project enquiry: a branded architecture panel and a focused brief form. */
#project-dialog { width:min(940px,calc(100% - 32px)); padding:0; border-color:#565049; border-radius:18px; background:#faf9f6; color:#17191d; color-scheme:light; }
#project-dialog .enquiry-console-bar { margin:0; padding:17px 62px 17px 25px; background:#1b1e1c; color:#bfc3bc; font-size:10px; letter-spacing:1px; }
#project-dialog .close-dialog { top:9px; background:#292d29; }
#project-dialog .close-dialog:hover { color:#fff; border-color:var(--orange); }
.enquiry-layout { display:grid; grid-template-columns:1fr 1.12fr; }
.enquiry-intro { padding:32px; background-color:#1b1e1b; background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px); background-size:26px 26px; color:#fff; }
#project-dialog .enquiry-console-mark { margin-bottom:24px; }
#project-dialog h2 { margin:12px 0; font-size:clamp(30px,3.4vw,42px); line-height:1.12; letter-spacing:-1.6px; }
#project-dialog #dialog-description { font-size:13px; line-height:1.8; color:#b8bdb7; margin:18px 0 26px; }
.enquiry-blueprint { border:1px solid #ffffff1c; border-radius:10px; padding:18px 14px; background:#12151299; }
.blueprint-caption { display:block; color:#929a90; font:8px/1.6 monospace; letter-spacing:1px; }
.blueprint-core { position:relative; width:150px; margin:20px auto 24px; padding:12px; text-align:center; border:1px solid #a66b40; border-radius:8px; background:linear-gradient(135deg,#30332f,#111410); box-shadow:3px 4px 0 #ffffff12; }
.blueprint-core img { display:block; width:96px; height:58px; object-fit:contain; margin:auto; }
.blueprint-core span { display:block; margin-top:8px; color:#efc5a9; font:7px monospace; letter-spacing:1px; }
.blueprint-core::after { content:''; position:absolute; width:1px; height:25px; background:#d76b33; top:100%; left:50%; }
.blueprint-branches { display:flex; gap:10px; }
.blueprint-branches span { flex:1; padding:10px 4px; text-align:center; border:1px solid #735039; border-radius:5px; color:#ffb58e; font:9px monospace; background:#242620; }
.blueprint-route { display:flex; justify-content:space-between; gap:5px; margin-top:20px; padding-top:14px; border-top:1px solid #ffffff13; color:#9fa79b; font:7px monospace; }
#project-dialog .enquiry-note { color:#979f95; font-size:11px; margin:18px 0 0; }
.enquiry-form-panel { padding:32px; min-width:0; }
.enquiry-form-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-bottom:20px; margin-bottom:23px; border-bottom:1px solid #ddd9d2; color:#be421b; font:10px monospace; letter-spacing:1px; }
.enquiry-form-heading small { color:#7f817d; font-size:8px; }
#project-dialog label { color:#424640; font-size:12px; }
#project-dialog input,#project-dialog select,#project-dialog textarea { color:#1e2420; background:#fff; border:1px solid #d9dbd3; border-radius:7px; padding:12px 13px; font-family:inherit; box-shadow:0 2px 3px #20282003; }
#project-dialog input::placeholder,#project-dialog textarea::placeholder { color:#858c85; }
#project-dialog textarea { min-height:108px; }
#project-dialog .primary { display:flex; align-items:center; min-height:32px; padding:5px 12px; margin-top:4px; border-radius:8px; background:linear-gradient(115deg,#ff541f,#f12706); color:#fff; box-shadow:0 6px 16px #f4481926; }
#project-dialog .enquiry-download-note { font-size:10px; line-height:1.7; color:#72786f; margin:14px 0 0; }
#project-dialog #form-status { color:#9d3b14; }
@media(max-width:700px) {
  #project-dialog { width:calc(100% - 24px); }
  .enquiry-layout { grid-template-columns:1fr; }
  .enquiry-intro,.enquiry-form-panel { padding:24px; }
  #project-dialog .enquiry-console-mark { margin-bottom:14px; }
  #project-dialog #dialog-description { margin-bottom:0; }
  .enquiry-blueprint,.enquiry-note { display:none; }
  #project-dialog input,#project-dialog select,#project-dialog textarea { font-size:16px; }
}

/* Compact animated trigger and a three-quarter-width mobile drawer. */
.menu-close-glyph { display:none; align-items:center; justify-content:center; width:100%; height:100%; font:500 27px/1 Inter,Arial,sans-serif; }
@media (max-width:760px) {
  header .menu { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid #45483f; border-radius:12px !important; background:linear-gradient(135deg,#30332f,#111410); box-shadow:3px 3px 0 #bdb8ac; cursor:pointer; }
  .menu-lines { position:relative; display:block; width:22px; height:18px; }
.menu-close-glyph { display:none; align-items:center; justify-content:center; width:100%; height:100%; font:500 27px/1 Inter,Arial,sans-serif; }
  .menu-lines i { position:absolute; right:0; display:block; height:2px; border-radius:2px; background:#ff783e; transition:transform .25s ease,width .25s ease,opacity .2s ease; }
  .menu-lines i:nth-child(1) { top:0; width:22px; }
  .menu-lines i:nth-child(2) { top:8px; width:15px; }
  .menu-lines i:nth-child(3) { top:16px; width:19px; }
  .menu[aria-expanded="true"] .menu-lines i:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .menu[aria-expanded="true"] .menu-lines i:nth-child(2) { opacity:0; transform:translateX(5px); }
  .menu[aria-expanded="true"] .menu-lines i:nth-child(3) { width:22px; transform:translateY(-8px) rotate(-45deg); }
  header .menu:focus-visible { outline:2px solid #ff783e; outline-offset:5px; }
  header nav {
    position: fixed;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 75vw !important;
    max-width: 75vw !important;
    min-width: 0;
    height: 100dvh;
    padding: 24px 16px 40px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #171b17;
    background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px);
    background-size: 28px 28px;
    border: 0;
    border-right: 1px solid #555246;
    box-shadow: 20px 0 60px #0004;
    transform: translateX(-105%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10002;
    transition: transform .32s cubic-bezier(.22, .8, .25, 1), opacity .25s ease, visibility 0s linear .32s;
  }
  header nav.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .32s cubic-bezier(.22, .8, .25, 1), opacity .25s ease;
  }
  header nav::before { display: none; }
  header nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 11px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
  }
  header nav a:last-of-type { border-bottom: none; }
  header nav a:hover, header nav a:focus-visible { color: var(--orange); background: rgba(255, 90, 0, 0.08); border-radius: 6px; }
  header nav a::before { display: none; }
  header .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: #080c0ab3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 10000;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  header nav.open + .menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease;
  }
  body.mobile-nav-open,
  html:has(body.mobile-nav-open) {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body.mobile-nav-open main,
  body.mobile-nav-open footer,
  body.mobile-nav-open .announcement-bar {
    pointer-events: none;
  }
  header:has(nav.open) .header-actions,
  body.mobile-nav-open header .header-actions {
    position: relative;
    z-index: 10005;
  }
  header:has(nav.open) .menu,
  body.mobile-nav-open header .menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    position: fixed !important;
    top: 12px;
    right: 16px;
    z-index: 10010;
  }
  body.mobile-nav-open header .menu {
    position: fixed !important;
    top: 12px;
    right: 16px;
    z-index: 10020;
  }
  header:has(nav.open) .logo,
  body.mobile-nav-open header .logo {
    opacity: 0;
    pointer-events: none;
  }
  body.mobile-nav-open header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
@media(max-width:1050px){header .menu[aria-expanded="true"] .menu-lines{display:none!important}header .menu[aria-expanded="true"] .menu-close-glyph{display:flex}}
@media (prefers-reduced-motion:reduce) { .menu-lines i { transition:none; } }

/* Mobile navigation branding, readable content and persistent contact actions. */
.mobile-menu-header { display:none; }
.mobile-menu-brand { display:none; }
#company[hidden] { display:none; }
.tech-node { touch-action:pan-y pinch-zoom; }
@media(max-width:760px) {
  header nav { padding-top:20px; padding-bottom:40px; }
  header nav::before { display:none; }
  .mobile-menu-header { display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.1); }
  .mobile-menu-brand { display:flex; align-items:center; gap:6px; width:auto; padding:8px 12px; margin:0; background:linear-gradient(135deg,#30332f,#111410); border:1px solid #555246; border-radius:10px; }
  .mobile-menu-brand img { width:85px; height:46px; object-fit:contain; }
  .mobile-menu-brand small { color:#fff; font:7px/1.5 monospace; letter-spacing:.8px; white-space:nowrap; }
  .mobile-menu-close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border:1px solid #555246; border-radius:10px; background:linear-gradient(135deg,#30332f,#111410); color:#ff783e; font-size:18px; font-weight:700; line-height:1; cursor:pointer; box-shadow:2px 2px 0 #bdb8ac22; transition:transform .2s ease,background .2s ease,color .2s ease; }
  .mobile-menu-close:hover, .mobile-menu-close:active { background:var(--orange); color:#fff; border-color:var(--orange); transform:scale(0.95); }
  .mobile-menu-close:focus-visible { outline:2px solid #ff783e; outline-offset:2px; }
  main p,main li,main details { font-size:15px; line-height:1.75; }
  main .eyebrow { font-size:11px; line-height:1.6; }
  main :is(.primary,.button),header .primary { font-size:14px; min-height:44px; padding:10px 14px; }
  main :is(.carousel-arrow,.project-actions > a) { min-width:44px; min-height:44px; }
  main .tags span { font-size:12px; }
  main .stat-card small { font-size:12px; line-height:1.5; }
  .tech-node { cursor:pointer; }

}
#work .photo-art { position:relative; }
#work .project-media-label { position:absolute; left:10px; right:10px; bottom:10px; width:fit-content; max-width:calc(100% - 20px); padding:6px 9px; border-radius:5px; background:#151a17ed; color:#fff; font:11px/1.5 Inter,Arial,sans-serif; }
#work .website-capture { background:#eaece6; }
@media(max-width:760px) { #work .project-media-label { font-size:10px; padding:4px 8px; bottom:8px; left:8px; } }

/* Shared contact icons sit above the page navigation on every screen. */
.enquiry-tool { background:linear-gradient(135deg,#30332f,#111410); color:#ff8a50; border:1px solid #555246; box-shadow:0 6px 20px #0002; cursor:pointer; padding:0; }
.enquiry-tool:hover { background:#34392f; color:#fff; }
/* The homepage enquiry control uses the same compact dark finish as the call control. */
.site-tool.enquiry-tool { background:#151719; color:#ff985c; border:1px solid #45413b; box-shadow:none; cursor:pointer; padding:0; }
.site-tool.enquiry-tool:hover { background:#30231b; color:#fff; }
.site-tool.enquiry-tool:focus-visible { outline:2px solid #ff8e50; outline-offset:4px; }
body.modal-open .site-tools { visibility:hidden; }
.site-tools { justify-items:center; }
@media(max-width:760px) {
  .site-tools { right:max(12px,env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); gap:8px; }
  .page-jump .site-tool { width:30px; height:30px; }
}

/* Restore the original OnePixel orange theme; keep the logo's own colors in the image only. */
:root {
    --orange: #ff5a00;
    --brand-gold: #ff9564;
    --brand-gradient: var(--orange);
}
h2 span, .orange, .logo strong {
    color: var(--orange);
    background: none;
    -webkit-text-fill-color: currentColor;
}
:is(.primary, #engineering #build-demo, #cloud-check, #process #run-process, #automation #run-ai) {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
:is(.primary, #engineering #build-demo, #cloud-check, #process #run-process, #automation #run-ai) b {
    color: #fff;
}
:is(#process.delivery-studio .step.active, .service-category-tabs button[aria-selected="true"], #capabilities .cap-tab.active,
        .faq-tabs button[aria-selected="true"], .integration-toggle[aria-checked="true"],
        #work .project-actions > a:hover, #process.delivery-studio .carousel-arrow:hover) {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
#process.delivery-studio .step.active :is(.step-icon, small, b, p) { color: #fff; }
#automation .automation-flow :is(.flow-card.active, .flow-card:hover) { border-color: var(--orange); }
#automation .automation-flow output { border-left-color: var(--orange); }
.enquiry-tool { color: var(--orange); }

/* Keep the delivery demo's play control prominent on the right-side carousel. */
#process .delivery-caption-actions { display: flex; align-items: center; gap: 12px; }
#process :is(.process-play-button, #run-process) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--orange);
    border-radius: 6px;
    background: var(--orange);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
#process .process-play-button { font: 700 9px/1 monospace; letter-spacing: .5px; }
#process .process-play-button span { font-size: 8px; }
#process #run-process { font-size: 12px; }
#process #run-process b { color: #fff; }
#process :is(#run-process, #process-play):disabled { cursor: wait; opacity: .65; }
@media (max-width: 520px) {
    #process .delivery-caption-actions { gap: 8px; }
    #process .delivery-caption-actions > span { font-size: 8px; }
    #process :is(.process-play-button, #run-process) { padding: 8px 9px; }
}

/* Keep the product playback action in the release console on the right. */
#engineering .product-demo-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
#engineering #build-demo { margin-top: 0; }
#engineering .release-play-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: 0;
    padding: 8px 10px;
    border: 1px solid var(--orange);
    border-radius: 6px;
    background: var(--orange);
    color: #fff;
    font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .4px;
    white-space: nowrap;
    cursor: pointer;
}
#engineering .release-play-button > span { font-size: 7px; }
#engineering .release-play-button:disabled, #engineering #build-demo:disabled { cursor: wait; opacity: .65; }
#engineering .release-play-button:hover { filter: brightness(1.06); }
@media (max-width: 760px) {
    #engineering .release-topbar { gap: 8px; }
    #engineering .release-topbar > span:nth-child(2) { display: none; }
    #engineering .release-topbar .release-play-button { margin-left: auto; }
    #engineering .release-play-button { padding: 8px; font-size: 7px; }
}

/* FAQ knowledge base on the left, with a technical support route on the right. */
.service-faq {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 92% 45%, #ff74200d, transparent 42%), linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px), #15181e;
    background-size: auto, 30px 30px, 30px 30px, auto;
    color: #f1f3f5;
}
.service-faq .faq-knowledge-panel {
    min-width: 0;
    padding: 0 20px 20px;
    overflow: hidden;
    border: 1px solid #39424d;
    border-radius: 14px;
    background: linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px), #10161d;
    background-size: 22px 22px;
    box-shadow: 0 22px 54px #0003;
}
.faq-console-bar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -20px 18px;
    padding: 14px 17px;
    border-bottom: 1px solid #ffffff12;
    background: #0c1117;
    color: #aab5c0;
    font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .8px;
}
.faq-console-bar > span:first-child { color: #e4e9ee; }
.faq-console-bar i, .faq-support-footer > span i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--brand-gold, #fca615); box-shadow: 0 0 8px #fca61580; }
.service-faq .faq-tabs { display: flex; width: fit-content; max-width: 100%; gap: 5px; margin: 0 0 16px; padding: 4px; border: 1px solid #39434d; border-radius: 7px; background: #0b1117; }
.service-faq .faq-tabs button { min-height: 36px; padding: 8px 13px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #aeb9c4; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .25px; }
.service-faq .faq-tabs button > span { margin-right: 5px; color: var(--brand-gold, #fca615); }
.service-faq .faq-tabs button[aria-selected="true"] { border-color: #fd742455; background: linear-gradient(110deg, #fca61522, #fd742411); color: #ffd0a3; box-shadow: inset 2px 0 var(--orange); }
.service-faq .faq-group { padding: 17px; border: 1px solid #303a44; border-radius: 8px; background: #111820ed; }
.service-faq .faq-group[hidden] { display: none; }
.service-faq .faq-group h3 { margin: 0 0 5px; color: #f2c08d; font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.service-faq .faq-group-intro { margin: 0 0 12px; color: #788795; font: 8px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.service-faq .faq-group details { counter-increment: faq-row; padding: 12px 0; border-bottom: 1px solid #ffffff12; }
.service-faq .faq-group details:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.service-faq .faq-group details:first-of-type { border-top: 1px solid #ffffff12; padding-top: 12px; }
.service-faq .faq-group summary { color: #e1e7ec; font-size: 11px; font-weight: 550; line-height: 1.55; }
.service-faq .faq-group summary::before { content: '0' counter(faq-row) ' /'; display: inline-block; width: 35px; color: #ffad72; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.service-faq .faq-group summary::after { top: 0; color: var(--brand-gold, #fca615); font: 16px/1 ui-monospace, monospace; }
.service-faq .faq-group details[open] summary { color: #ffd0a3; }
.service-faq .faq-group details p { margin: 9px 27px 0 35px; color: #aab6c1; font-size: 10px; line-height: 1.75; }
.faq-support-panel { position: relative; min-width: 0; padding: 25px 22px 20px; border: 1px solid #ffffff17; border-radius: 12px; background: linear-gradient(145deg, #1d222a, #11161c); box-shadow: 9px 10px 0 #0002, 0 20px 44px #0002; }
.faq-support-panel::before { content: 'FAQ / ROUTE'; position: absolute; top: 15px; right: 16px; color: #ffffff2b; font: 7px ui-monospace, monospace; letter-spacing: 1px; }
.faq-support-panel .eyebrow { color: #ffb16f; font: 9px ui-monospace, monospace; letter-spacing: 1.1px; }
.faq-support-panel h2 { margin-top: 19px; color: #fff; font-size: clamp(28px, 2.8vw, 39px); line-height: 1.08; letter-spacing: -1.3px; }
.faq-support-panel h2 span { color: #ffb16f; }
.faq-support-intro { margin: 13px 0 20px !important; color: #abb5c0; font-size: 12px !important; line-height: 1.7 !important; }
.faq-response-route { position: relative; display: grid; gap: 0; margin: 0 0 20px; }
.faq-response-route::before { content: ''; position: absolute; top: 23px; bottom: 23px; left: 17px; width: 1px; background: linear-gradient(var(--brand-gold, #fca615), #fd742455); }
.faq-response-route article { position: relative; display: grid; grid-template-columns: 35px 32px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 67px; border-bottom: 1px solid #ffffff10; }
.faq-response-route article:last-child { border-bottom: 0; }
.faq-response-route article > span { color: #f2ae6b; font: 8px ui-monospace, monospace; }
.faq-response-route article > i { z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #fd9a5744; border-radius: 7px; background: #1c232b; color: #ffc080; font: normal 13px ui-monospace, monospace; }
.faq-response-route article b, .faq-response-route article small { display: block; }
.faq-response-route article b { color: #edf1f4; font-size: 11px; font-weight: 550; }
.faq-response-route article small { margin-top: 5px; color: #7f8c98; font: 7px ui-monospace, monospace; letter-spacing: .5px; }
.faq-support-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid #ffffff14; }
.faq-support-footer > span { color: #aab4be; font: 7px ui-monospace, monospace; letter-spacing: .55px; }
.faq-support-footer .button { min-height: 38px; margin: 0; padding: 8px 11px; border-color: #fd8b47; background: linear-gradient(110deg, #fca615, #fd7424); color: #20160f; font-size: 10px; }
@media (max-width: 900px) {
    .service-faq { grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr); gap: 24px; }
    .faq-support-panel { padding: 22px 17px 17px; }
    .faq-response-route article { grid-template-columns: 28px 30px minmax(0, 1fr); gap: 7px; }
}
@media (max-width: 760px) {
    .service-faq { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .service-faq .faq-knowledge-panel { grid-row: 1; padding: 0 14px 14px; }
    .faq-support-panel { grid-row: 2; }
    .faq-console-bar { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
    .service-faq .faq-group { padding: 13px; }
    .service-faq .faq-tabs button { padding: 8px 10px; }
    .service-faq .faq-group details p { margin-left: 0; }
}

/* Final FAQ polish: clearer hierarchy, readable answers and FAQ-first mobile order. */
.service-faq { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
.service-faq .faq-knowledge-panel { background-color: #10161d; }
.service-faq .faq-console-bar { min-height: 43px; align-items: center; }
.service-faq .faq-console-bar > span:last-child { color: #8795a1; white-space: nowrap; }
.service-faq .faq-tabs button { min-height: 40px; font: 550 11px/1.2 Inter, Arial, sans-serif; }
.service-faq .faq-group { padding: 20px; }
.service-faq .faq-group h3 { font: 650 16px/1.35 Inter, Arial, sans-serif; }
.service-faq .faq-group-intro { margin-bottom: 16px; font-size: 9px; }
.service-faq .faq-group { counter-reset: faq-row; }
.service-faq .faq-group details { padding: 15px 0; }
.service-faq .faq-group details:first-of-type { padding-top: 15px; }
.service-faq .faq-group summary {
    position: relative;
    padding-left: 36px;
    padding-right: 34px;
    text-indent: -36px;
    color: #edf1f4;
    font-size: 13px;
    line-height: 1.55;
    cursor: pointer;
}
.service-faq .faq-group summary::before {
    display: inline-block;
    width: 36px;
    font-size: 9px;
    text-indent: 0;
}
.service-faq .faq-group summary::after { top: 1px; font-size: 19px; }
.service-faq .faq-group details p { margin: 10px 30px 0 36px; color: #b7c1ca; font-size: 12px; line-height: 1.7; }
.faq-support-panel { padding: 27px 24px 22px; }
.faq-support-panel h2 { margin-top: 22px; }
.faq-support-intro { max-width: 390px; font-size: 13px !important; }
.faq-response-route article { min-height: 73px; }
.faq-response-route article b { font-size: 12px; }
.faq-response-route article small { font-size: 8px; }
.faq-support-footer > span { font-size: 8px; }
@media (max-width: 900px) {
    .service-faq { grid-template-columns: minmax(0, 1fr) minmax(270px, .85fr); }
}
@media (max-width: 760px) {
    .service-faq { grid-template-columns: minmax(0, 1fr); }
    .service-faq .faq-knowledge-panel { grid-row: 1; }
    .faq-support-panel { grid-row: 2; }
    .service-faq .faq-group { padding: 15px; }
    .service-faq .faq-group summary {
        padding-left: 36px !important;
        padding-right: 34px !important;
        text-indent: -36px !important;
    }
    .service-faq .faq-group summary::before {
        display: inline-block !important;
        width: 36px !important;
        text-indent: 0 !important;
    }
    .service-faq .faq-group details p { margin-left: 36px !important; }
    .faq-support-panel { padding: 23px 18px 18px; }
}

/* White FAQ reading surface, balanced by a distinct dark support panel. */
.service-faq {
    background-color: #f5f3ef;
    background-image: radial-gradient(ellipse at 90% 45%, #ff9a4d12, transparent 45%), linear-gradient(#dedbd408 1px, transparent 1px), linear-gradient(90deg, #dedbd408 1px, transparent 1px);
    color: #171a20;
}
.service-faq .faq-knowledge-panel {
    border-color: #e2ded7;
    background: #fff;
    box-shadow: 0 18px 42px #29241d12;
}
.service-faq .faq-console-bar {
    border-bottom-color: #292e3514;
    background: #f4f2ee;
    color: #727b85;
}
.service-faq .faq-console-bar > span:first-child { color: #333b44; }
.service-faq .faq-console-bar > span:last-child { color: #8d765f; }
.service-faq .faq-group {
    border-color: #e8e4dd;
    background: #fff;
}
.service-faq .faq-group h3 { color: #222832; }
.service-faq .faq-group-intro { color: #858c94; }
.service-faq .faq-group details,
.service-faq .faq-group details:first-of-type { border-color: #e8e6e1; }
.service-faq .faq-group summary { color: #252b33; }
.service-faq .faq-group summary::before { color: #bd6527; }
.service-faq .faq-group summary::after { color: #d96b20; }
.service-faq .faq-group details[open] summary { color: #a34b14; }
.service-faq .faq-group details p { color: #626d78; }
.service-faq .faq-tabs { border-color: #e5dfd6; background: #f6f4f0; }
.service-faq .faq-tabs button { color: #5d6670; }
.service-faq .faq-tabs button > span { color: #c66a2b; }
.service-faq .faq-tabs button[aria-selected="true"] {
    border-color: #f1c79e;
    background: linear-gradient(110deg, #fff0dc, #fff7ed);
    color: #8d481c;
    box-shadow: inset 2px 0 #e8792b;
}
.service-faq .faq-tabs { padding: 5px; gap: 6px; border-color: #4b443c; background: #25221f; }
.service-faq .faq-tabs button { min-height: 38px; padding: 8px 15px; border-color: #5a5048; background: #302b26; color: #ded6ce; }
.service-faq .faq-tabs button > span { color: #ffad72; }
.service-faq .faq-tabs button[aria-selected="true"] { border-color: #ff9a5c; background: linear-gradient(135deg, #ff8b3d, #e85a18); color: #fff; box-shadow: 0 3px 12px #e85a1845, inset 0 1px #ffffff35; }
.service-faq .faq-tabs button[aria-selected="true"] > span { color: #fff; }
.faq-support-panel {
    border-color: #414650;
    background: radial-gradient(ellipse at 100% 0%, #fd742420, transparent 45%), linear-gradient(145deg, #20242c, #11161d 78%);
    box-shadow: 9px 10px 0 #d8d2c8, 0 20px 44px #25211b20;
}

/* FAQ companion visual: map common question types to the right service team. */
.faq-support-panel { padding: 22px; }
.faq-support-panel::before { content: 'SUPPORT / ROUTING'; color: #ffffff47; }
.faq-card-heading .eyebrow { margin: 0 0 14px; color: #ffb16f; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.1px; }
.faq-card-heading h2 { margin: 0; color: #fff; font-size: clamp(27px, 2.5vw, 36px); line-height: 1.06; letter-spacing: -1.1px; }
.faq-card-heading h2 span { color: #ffb16f; }
.faq-card-heading .faq-support-intro { margin: 11px 0 18px !important; color: #aeb8c2; font-size: 11px !important; line-height: 1.65 !important; }
.faq-map-console { overflow: hidden; border: 1px solid #3a444e; border-radius: 10px; background: #10161d; box-shadow: 0 12px 28px #0003; }
.faq-map-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 12px; border-bottom: 1px solid #ffffff13; background: #0b1117; color: #dce3e9; font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .65px; }
.faq-map-bar i, .faq-map-footer > span i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #fca615; box-shadow: 0 0 8px #fca61588; }
.faq-map-bar small { color: #8895a0; font: inherit; }
.faq-map-board { position: relative; min-height: 245px; overflow: hidden; background: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px), radial-gradient(ellipse at center, #fd742414, transparent 56%), #121922; background-size: 18px 18px, 18px 18px, auto, auto; }
.faq-map-board > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #65727f; stroke-width: 1.3; stroke-dasharray: 3 5; }
.faq-map-board > svg .faq-map-signal { stroke: #f2a261; stroke-width: 2; stroke-dasharray: 5 48; animation: faq-route-signal 3.8s linear infinite; filter: drop-shadow(0 0 3px #ff9b5e); }
.faq-map-node { position: absolute; z-index: 1; display: flex; align-items: center; gap: 7px; width: 39%; min-height: 55px; padding: 7px; border: 1px solid #3c4855; border-radius: 7px; background: #1a232d; box-shadow: 0 6px 14px #0004; }
.faq-map-node > i { display: grid; flex: 0 0 26px; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: #ffffff0d; color: #ffc083; font: normal 11px ui-monospace, monospace; }
.faq-map-node b, .faq-map-node small { display: block; }
.faq-map-node b { color: #eff3f6; font-size: 9px; line-height: 1.35; }
.faq-map-node small { margin-top: 4px; color: #8997a4; font: 6px/1.3 ui-monospace, monospace; letter-spacing: .35px; }
.faq-map-software { top: 9%; left: 3%; }
.faq-map-digital { top: 9%; right: 3%; }
.faq-map-hardware { bottom: 9%; left: 3%; }
.faq-map-support { right: 3%; bottom: 9%; }
.faq-map-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 78px; transform: translate(-50%, -50%); border: 1px solid #ff9863; border-radius: 9px; background: linear-gradient(145deg, #36251f, #1c2027); box-shadow: 0 0 0 5px #fd742410, 0 10px 23px #0006; text-align: center; }
.faq-map-core > span { display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 4px; border-radius: 6px; background: #fd742427; color: #ffc083; font: 700 15px/1 ui-monospace, monospace; }
.faq-map-core b { color: #fff1e6; font: 700 7px ui-monospace, monospace; letter-spacing: .7px; }
.faq-map-core small { margin-top: 4px; color: #c08e70; font: 6px ui-monospace, monospace; letter-spacing: .7px; }
.faq-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border-top: 1px solid #ffffff12; background: #0e141a; }
.faq-map-footer > span { color: #9ca8b3; font: 6px ui-monospace, monospace; letter-spacing: .4px; }
.faq-map-footer .button { min-height: 30px; margin: 0; padding: 6px 9px; border-color: #fd8b47; border-radius: 5px; background: linear-gradient(110deg, #fca615, #fd7424); color: #21170e; font-size: 8px; }
.faq-map-footer .button b { font-size: 12px; }
@keyframes faq-route-signal { to { stroke-dashoffset: -212; } }
@media (max-width: 900px) {
    .faq-support-panel { padding: 18px; }
    .faq-map-board { min-height: 230px; }
    .faq-map-node { width: 42%; }
}
@media (max-width: 760px) {
    .faq-support-panel { padding: 20px 16px; }
    .faq-card-heading h2 { font-size: 30px; }
    .faq-map-board { min-height: 250px; }
    .faq-map-node { width: 40%; }
}
@media (prefers-reduced-motion: reduce) { .faq-map-board > svg .faq-map-signal { animation: none; } }

/* Tie the FAQ route map to the selected service and the OnePixel gold-orange brand. */
.faq-card-heading h2 span { color: #fca615; background: var(--brand-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.faq-map-bar > span:first-child i, .faq-map-footer > span i { background: var(--brand-gradient); box-shadow: 0 0 9px #fd8a3380; }
.faq-map-core { border-color: #fd8a4b; background: linear-gradient(145deg, #472b1b, #1e2024); box-shadow: 0 0 0 5px #fca61514, 0 10px 23px #0006; }
.faq-map-core > span { background: var(--brand-gradient); color: #25170e; }
.faq-map-board.is-software .faq-map-signal { stroke: #ffc05d; }
.faq-map-board.is-hardware .faq-map-signal { stroke: #ff8240; }
.faq-map-node[data-faq-route] { opacity: .42; filter: saturate(.55); transition: opacity .25s ease, border-color .25s ease, background .25s ease, filter .25s ease, transform .25s ease; }
.faq-map-node[data-faq-route].is-relevant { opacity: 1; filter: none; transform: translateY(-2px); border-color: #f6a450; background: linear-gradient(135deg, #30271f, #1a232d); box-shadow: 0 0 0 2px #fca61512, 0 8px 16px #0004; }
.faq-map-node.is-relevant > i { background: #fca6151c; color: #ffd185; }
.faq-map-board.is-hardware .faq-map-node.is-relevant > i { background: #fd742420; color: #ffad7b; }

/* Keep the FAQ route map on the original solid-orange theme, not the logo gradient. */
.faq-card-heading h2 span { color: var(--orange); background: none; -webkit-text-fill-color: currentColor; }
.service-faq .faq-tabs button[aria-selected="true"] { border-color: var(--orange); background: var(--orange); color: #fff; box-shadow: inset 2px 0 #d84300; }
.faq-map-board > svg .faq-map-signal,
.faq-map-board.is-software > svg .faq-map-signal,
.faq-map-board.is-hardware > svg .faq-map-signal { stroke: #ff7a2f; }
.faq-map-core { border-color: var(--orange); box-shadow: 0 0 0 5px #ff5a0014, 0 10px 23px #0006; }
.faq-map-core > span { background: var(--orange); color: #fff; }
.faq-map-node[data-faq-route].is-relevant { border-color: var(--orange); box-shadow: 0 0 0 2px #ff5a0014, 0 8px 16px #0004; }
.faq-map-node.is-relevant > i, .faq-map-board.is-hardware .faq-map-node.is-relevant > i { background: #ff5a001c; color: #ff8a50; }
.faq-map-footer .button { border-color: var(--orange); background: var(--orange); color: #fff; }
.faq-support-panel { background: radial-gradient(ellipse at 100% 0%, #ff5a0018, transparent 45%), linear-gradient(145deg, #20242c, #11161d 78%); }

/* Compact career / journal ticker with social sharing above the site header. */
.announcement-bar { position: relative; z-index: 21; min-height: 42px; padding: 0 max(4.8vw, 24px); border-bottom: 1px solid #ffffff12; background: #15171d; color: #d5dbe2; }
.announcement-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; max-width: 1440px; min-height: 42px; margin: 0 auto; }
.announcement-carousel { display: flex; min-width: 0; align-items: center; gap: 14px; }
.announcement-label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; color: #ff9a62; font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.announcement-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px #ff5a0080; }
.announcement-window { height: 28px; overflow: hidden; }
.announcement-track { display: flex; flex-direction: column; animation: announcement-cycle 21s ease-in-out infinite; }
.announcement-item { display: flex; flex: 0 0 28px; align-items: center; gap: 9px; height: 28px; color: #bac2cc; font-size: 11px; white-space: nowrap; }
.announcement-item strong { color: #fff; font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .6px; }
.announcement-item b { color: #ff9a62; font-size: 14px; font-weight: 500; }
.announcement-item:hover strong, .announcement-item:hover span { color: #ff9a62; }
.announcement-carousel:hover .announcement-track, .announcement-carousel:focus-within .announcement-track { animation-play-state: paused; }
.announcement-midline { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 14px; min-width: 0; color: #b2bbc5; font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .75px; white-space: nowrap; }
.announcement-midline span:last-child { color: #e0e4e8; font-weight: 700; }
.announcement-midline i { width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: var(--orange); }
.announcement-social { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.announcement-social > span { margin-right: 4px; color: #9aa4af; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .8px; }
.announcement-social a { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #ffffff21; border-radius: 50%; background: #fff; color: #0a66c2; font-size: 14px; transition: color .18s, border-color .18s, background .18s, transform .18s; }
.announcement-social [data-social-share="linkedin"] { color: #0a66c2; }
.announcement-social [data-social-share="facebook"] { color: #1877f2; }
.announcement-social [data-social-share="whatsapp"] { color: #25d366; }
.announcement-social [data-social-share="linkedin"]:hover { border-color: #0a66c2; background: #0a66c2; color: #fff; }
.announcement-social [data-social-share="facebook"]:hover { border-color: #1877f2; background: #1877f2; color: #fff; }
.announcement-social [data-social-share="whatsapp"]:hover { border-color: #25d366; background: #25d366; color: #fff; }
.announcement-social a:hover { transform: translateY(-1px); }
@keyframes announcement-cycle {
    0%, 13.5% { transform: translateY(0); }
    16.7%, 30.2% { transform: translateY(-28px); }
    33.4%, 46.9% { transform: translateY(-56px); }
    50.1%, 63.6% { transform: translateY(-84px); }
    66.8%, 80.3% { transform: translateY(-112px); }
    83.5%, 97% { transform: translateY(-140px); }
    100% { transform: translateY(-168px); }
}
@media (prefers-reduced-motion: reduce) {
    .announcement-window { height: auto; overflow-x: auto; }
    .announcement-track { flex-direction: row; width: max-content; animation: none; }
    .announcement-item[aria-hidden="true"] { display: none; }
}

/* Reduce the header lockup while preserving the supplied logo artwork. */
header, header.is-scrolled { min-height: 82px; }
header .logo-mark { width: 112px !important; height: 66px !important; flex-basis: 112px !important; gap: 0; padding: 2px 7px; border-radius: 8px; box-shadow: 2px 3px 0 #bdb8ac; }
header .logo-mark .brand-logo { width: 100% !important; height: 58px !important; filter: none; }
header .logo-mark .logo-tagline { display: none; }
@media (max-width: 900px) {
    .announcement-bar { padding-right: 24px; padding-left: 24px; }
    .announcement-inner { gap: 12px; }
    .announcement-midline { gap: 7px; font-size: 8px; letter-spacing: .3px; }
    header .logo-mark { width: 96px !important; flex-basis: 96px !important; }
    header .logo-mark .brand-logo { height: 54px !important; }
}
@media (max-width: 760px) {
    .announcement-bar { min-height: 38px; padding: 0 14px; }
    .announcement-inner { min-height: 38px; gap: 8px; }
    .announcement-carousel { gap: 8px; }
    .announcement-midline { display: none; }
    .announcement-label { font-size: 8px; }
    .announcement-item { gap: 6px; font-size: 9px; }
    .announcement-item strong { font-size: 8px; }
    .announcement-social { gap: 4px; }
    .announcement-social > span { display: none; }
    .announcement-social a { width: 25px; height: 25px; font-size: 12px; }
    header, header.is-scrolled { min-height: 72px; }
    header .logo-mark { width: 82px !important; height: 56px !important; flex-basis: 82px !important; padding: 2px 4px; }
    header .logo-mark .brand-logo { height: 49px !important; }
}
@media (max-width: 420px) {
    .announcement-label { display: none; }
    .announcement-inner { gap: 5px; }
    .announcement-carousel { flex: 1 1 auto; }
    .announcement-item span { max-width: none; overflow: visible; text-overflow: clip; }
    .announcement-social a { width: 23px; height: 23px; font-size: 11px; }
}
.faq-map-board { background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px), radial-gradient(ellipse at center, #ff5a0014, transparent 56%); }
@media (prefers-reduced-motion: reduce) { .faq-map-node[data-faq-route] { transition: none; } }

/* Quick service switch inside the FAQ companion card mirrors the main FAQ tabs. */
.faq-map-bar { min-height: 46px; }
.faq-map-controls { display: flex; align-items: center; gap: 4px; }
.faq-map-controls button {
  min-height: 27px;
  padding: 5px 8px;
  border: 1px solid #49515b;
  border-radius: 5px;
  background: #20262e;
  color: #c5cbd2;
  font: 600 8px/1.2 Inter, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.faq-map-controls button[aria-pressed="true"] {
  border-color: #ff9a5c;
  background: linear-gradient(135deg, #ff8b3d, #e85a18);
  color: #fff;
  box-shadow: 0 2px 8px #e85a1845;
}
.faq-map-controls button:focus-visible { outline: 2px solid #ffc083; outline-offset: 2px; }
.service-faq .faq-knowledge-panel > .faq-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  box-sizing: border-box;
  gap: 5px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.service-faq .faq-knowledge-panel > .faq-tabs button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #f0e8df;
  border-radius: 2px;
  background: #fff;
  color: #67717c;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.service-faq .faq-knowledge-panel > .faq-tabs button[aria-selected="true"] {
  border-color: #ffe0d1;
  background: #fff;
  color: #a6441e;
  box-shadow: inset 3px 0 #ff5a28, 0 2px 8px #24180c0a;
}
.service-faq .faq-knowledge-panel > .faq-tabs button .faq-tab-index { color: #a0a5aa; font: 8px ui-monospace, monospace; }
.service-faq .faq-knowledge-panel > .faq-tabs button[aria-selected="true"] .faq-tab-index { color: #d96b36; }
.service-faq .faq-knowledge-panel > .faq-tabs button .faq-tab-chevron { color: #f05b27; font: 700 19px/1 Inter, Arial, sans-serif; }
.service-faq .faq-knowledge-panel > .faq-tabs button code { overflow: hidden; color: inherit; font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.service-faq .faq-knowledge-panel > .faq-tabs button:focus-visible { outline: 2px solid #ff765c; outline-offset: 3px; }
.service-faq .faq-knowledge-panel > .faq-tabs button {
  min-height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid #f1d8c9 !important;
  border-radius: 6px !important;
  background: #fff8f3 !important;
  color: #9a4926 !important;
  box-shadow: none !important;
}
.service-faq .faq-knowledge-panel > .faq-tabs button[aria-selected="true"] {
  border-color: #ffcbb3 !important;
  background: #fff8f3 !important;
  color: #a94720 !important;
  box-shadow: inset 3px 0 #ff321c !important;
}
.service-faq .faq-knowledge-panel > .faq-tabs button .faq-tab-index { color: #b28b7a !important; }
.service-faq .faq-knowledge-panel > .faq-tabs button .faq-tab-chevron { color: #ff321c !important; }
.service-faq .faq-knowledge-panel > .faq-tabs button code { color: #9a4926 !important; font-size: 10px !important; }
@media(max-width:480px) {
  .service-faq .faq-knowledge-panel > .faq-tabs { grid-template-columns: 1fr; }
  .faq-map-bar { gap: 5px; padding-inline: 8px; }
  .faq-map-bar > span:first-child { font-size: 6px; }
  .faq-map-controls { gap: 3px; }
  .faq-map-controls button { min-height: 25px; padding-inline: 6px; font-size: 7px; }
}

/* Mobile expertise navigation: show the complete numbered service list. */
@media(max-width:760px) {
  #capabilities .cap-tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 7px;
    overflow: visible;
    padding: 0;
    margin: 18px 0;
  }
  #capabilities .cap-tab {
    display: flex;
    align-items: center;
    flex: none !important;
    width: 100%;
    min-width: 0 !important;
    height: auto !important;
    min-height: 44px;
    padding: 9px 14px !important;
    gap: 12px;
    border: 1px solid #3a4148;
    border-radius: 24px;
    background: #171c21;
    color: #c2c8ce;
    font: 550 12px/1.25 Inter, Arial, sans-serif;
    text-align: left;
    white-space: normal;
  }
  #capabilities .cap-tab > span {
    flex: 0 0 22px;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    color: #9ca5ad;
    font: 9px ui-monospace, monospace;
  }
  #capabilities .cap-tab.active {
    border-color: #ff2b1b;
    background: #ff2b1b;
    color: #fff;
    box-shadow: 0 5px 14px #ff2b1b38;
  }
  #capabilities .cap-tab.active > span { background: transparent; color: #fff; }
}

/* Technology modules and the connected client network. */
.technology-section, .client-section { padding:80px max(24px,5vw); }
.technology-heading, .client-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:32px; }
.technology-heading h2, .client-heading h2 { margin:0; font-size:clamp(30px,3.6vw,50px); line-height:1.12; letter-spacing:-1.8px; }
.technology-heading h2 span, .client-heading h2 span { color:var(--orange); }
.technology-heading>p { max-width:350px; margin:0; color:#626773; line-height:1.8; }
.technology-console { border:1px solid #393b39; border-radius:14px; overflow:hidden; background:#161916; color:#f5f5ef; box-shadow:0 20px 55px #18201414; }
.technology-console-bar, .client-console-bar { display:flex; justify-content:space-between; gap:16px; padding:18px 22px; font:10px/1.5 monospace; letter-spacing:1.2px; border-bottom:1px solid #ffffff15; color:#b7bdb4; }
.technology-console-bar i, .client-console-bar i { display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 12px #ff5a0050; }
.technology-modules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#383c35; }
.technology-module { padding:28px; background-color:#1b1e1b; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:22px 22px; }
.technology-module-top { display:flex; align-items:center; justify-content:space-between; color:#c0c5b9; font:10px monospace; letter-spacing:1px; }
.technology-module-top i { width:7px; height:7px; border:1px solid #ff8543; transform:rotate(45deg); }
.technology-module h3 { margin:20px 0 24px; color:#fff; font-size:20px; letter-spacing:-.5px; }
.technology-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.technology-list li { display:flex; align-items:center; gap:10px; min-width:0; padding:15px 10px; background:#111410; border:1px solid #3b4036; border-radius:6px; font-size:12px; }
.technology-list i { width:24px; text-align:center; font-size:23px; color:#ff8a50; }
.technology-console-footer { display:flex; justify-content:space-between; gap:16px; padding:18px 22px; color:#b7bdb4; font:9px/1.6 monospace; letter-spacing:.7px; }
.technology-console-footer b { color:#ff8a50; margin:0 7px; }
.client-section { background:#f8f9f6; border-block:1px solid #e2e5de; }
.client-heading p:not(.eyebrow) { color:#626773; line-height:1.7; margin-bottom:0; }
.client-motion-toggle { flex-shrink:0; padding:11px 15px; border:1px solid #d7dcd1; border-radius:6px; background:#fff; color:#30372b; font:11px monospace; }
.client-console-bar { padding-inline:0; color:#626b59; border-color:#dce1d5; }
.client-logo-window { overflow:hidden; padding:24px 0; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; user-select:none; -webkit-user-select:none; }
.client-logo-window::-webkit-scrollbar { display:none; }
.client-logo-track { display:flex; width:max-content; will-change:transform; animation:none !important; user-select:none; -webkit-user-select:none; }
.client-logo-window.is-grabbing { cursor:grabbing !important; }
.client-logo-group { display:flex; align-items:center; gap:16px; list-style:none; padding:0 16px 0 0; margin:0; flex-shrink:0; }
.client-logo-card { display:grid; place-items:center; width:200px; height:120px; padding:20px; border:1px solid #e0e4da; border-radius:8px; background:#fff; }
.client-logo-card img { width:100%; height:80px; object-fit:contain; }
.client-logo-card:hover { border-color:#ff8a50; }
.client-footer { display:flex; justify-content:space-between; gap:20px; padding-top:18px; color:#6b7363; font:10px/1.5 monospace; letter-spacing:.8px; }
.client-footer a { color:#a83b00; text-decoration:none; }
.client-motion-toggle:focus-visible, .client-logo-window:focus-visible, .client-footer a:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
@media(max-width:900px) {
  .technology-module { padding:20px 16px; }
  .technology-list { grid-template-columns:1fr; }
  .technology-heading { align-items:flex-start; flex-direction:column; gap:20px; }
  .technology-heading>p { max-width:560px; }
}
@media(max-width:600px) {
  .technology-section, .client-section { padding:52px 22px; }
  .technology-heading h2, .client-heading h2 { letter-spacing:-1px; }
  .technology-modules { grid-template-columns:1fr; }
  .technology-list { grid-template-columns:1fr 1fr; }
  .technology-module { padding:24px 18px; }
  .technology-console-bar, .technology-console-footer { flex-wrap:wrap; padding:15px 18px; font-size:8px; }
  .client-heading { align-items:flex-start; flex-direction:column; gap:22px; }
  .client-console-bar, .client-footer { font-size:8px; flex-wrap:wrap; }
  .client-logo-card { width:160px; height:104px; padding:14px; }
  .client-logo-card img { height:72px; }
}

/* A circuit-board architecture connects the engine to its technology layers. */
#technologies .technology-console { background:#101310; border-radius:12px; border-color:#41473c; }
#technologies .technology-console-bar { background:#20251f; }
.technology-circuit { position:relative; display:grid; grid-template-columns:1fr 220px 1fr; align-items:center; gap:36px; padding:42px 36px 100px; background-image:radial-gradient(ellipse at 50% 35%,#ff5a0012,transparent 52%),radial-gradient(#66705b50 1px,transparent 1px); background-size:auto,18px 18px; }
.technology-readout { justify-self:start; }
.technology-readout>span, .technology-terminal>span { display:block; color:#a9b39e; font:9px/1.6 monospace; letter-spacing:1.2px; }
.technology-readout strong { display:block; margin:14px 0; color:#f1f3eb; font-size:clamp(20px,2.5vw,32px); line-height:1.2; letter-spacing:-1px; font-weight:550; }
.technology-readout small { color:#a9b39e; font-size:11px; line-height:1.7; }
.technology-processor { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:184px; height:160px; justify-self:center; border:1px solid #ff8240; border-radius:8px; background:linear-gradient(140deg,#34392c,#171b15); box-shadow:0 0 0 7px #101310,0 0 0 8px #5c634c,0 0 0 16px #171d15,0 0 38px #ff5a001c,inset 0 0 30px #ff5a000a; }
.technology-processor::before,.technology-processor::after { content:""; position:absolute; top:12px; bottom:12px; width:13px; background:repeating-linear-gradient(to bottom,#8b9278 0 3px,transparent 3px 11px); }
.technology-processor::before { right:calc(100% + 9px); }
.technology-processor::after { left:calc(100% + 9px); }
.processor-caption { color:#c4cbb9; font:8px monospace; letter-spacing:1.2px; }
.processor-symbol { padding:12px 0; color:#ff8a50; font:600 47px/1.2 monospace; text-shadow:0 0 22px #ff5a0044; }
.technology-terminal { justify-self:end; padding:18px; border:1px solid #3b4335; border-left:2px solid #ff8543; border-radius:4px; background:#11160feb; }
.technology-terminal>span { padding-bottom:10px; border-bottom:1px solid #ffffff12; }
.technology-terminal code { display:block; padding:12px 0; color:#d1d7c7; font:11px/2 monospace; white-space:nowrap; }
.technology-terminal code b { color:#ff8a50; margin-right:10px; font-weight:400; }
.technology-terminal small { color:#a9b39e; font:8px monospace; letter-spacing:.7px; }
.technology-terminal small i { display:inline-block; width:5px; height:5px; background:#ff8543; margin-right:6px; border-radius:50%; }
.technology-traces { position:absolute; bottom:0; left:0; width:100%; height:84px; stroke:#626e50; stroke-width:1; }
.technology-traces circle { fill:#ff8a50; stroke:#ff8a50; }
.technology-trace-glow { stroke:#ff8a50; stroke-width:2; stroke-dasharray:6 12; opacity:.7; }
#technologies .technology-modules { gap:20px; padding:0 24px 24px; background:transparent; }
#technologies .technology-module { position:relative; padding:24px 20px; border:1px solid #49513f; border-top:2px solid #ff8543; border-radius:6px; background-color:#1b2118; }
#technologies .technology-module::after { content:"+"; position:absolute; right:9px; bottom:6px; color:#82906d; font:13px monospace; }
#technologies .technology-module h3 { font-size:18px; }
#technologies .technology-list li { background:#11160f; border-color:#35402d; border-radius:4px; transition:border-color .2s,background .2s; }
#technologies .technology-list li:hover { border-color:#ff8543; background:#26291d; }
#technologies .technology-console-footer { border-top:1px solid #35402d; background:#191e16; }
@media(max-width:900px) {
  .technology-circuit { grid-template-columns:1fr 180px; gap:30px; padding:32px 28px 80px; }
  .technology-processor { grid-column:2; grid-row:1 / 3; width:144px; height:144px; }
  .technology-terminal { justify-self:start; grid-column:1; }
  .technology-traces { height:60px; }
    #technologies .technology-modules { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 16px 16px; }
  #technologies .technology-module { padding:20px 12px; }
    #technologies .technology-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .technology-circuit { grid-template-columns:1fr; text-align:center; gap:30px; padding:28px 20px 40px; }
  .technology-readout { justify-self:center; }
  .technology-processor { grid-column:1; grid-row:auto; margin:10px 0; }
  .technology-terminal { grid-column:1; justify-self:center; text-align:left; max-width:100%; }
  .technology-traces { display:none; }
  #technologies .technology-modules { position:relative; gap:24px; }
  #technologies .technology-module { padding:24px 18px; }
  #technologies .technology-module::before { content:""; position:absolute; left:50%; top:-26px; width:1px; height:24px; background:#ff8543; }
  #technologies .technology-module:first-child::before { height:40px; top:-42px; }
}
@media(prefers-reduced-motion:reduce) { #technologies .technology-list li { transition:none; } }

/* The engine sends a repeating signal through each technology layer. */
.technology-motion-toggle { border:1px solid #66705b; border-radius:4px; padding:7px 10px; background:#141a11; color:#e0e6d7; font:10px monospace; }
.technology-motion-toggle:focus-visible { outline:2px solid #ff8a50; outline-offset:4px; }
.technology-motion-toggle:disabled { cursor:default; color:#a9b39e; }
#technologies .technology-trace-glow { animation:technology-signal 2s linear infinite; }
#technologies .processor-symbol { animation:technology-core 3s ease-in-out infinite; }
#technologies .technology-module { animation:technology-module-signal 6s ease-in-out infinite; }
#technologies .technology-module:nth-child(2) { animation-delay:2s; }
#technologies .technology-module:nth-child(3) { animation-delay:4s; }
#technologies .technology-terminal code::after { content:"_"; display:inline-block; color:#ff8a50; animation:technology-cursor 1.2s steps(2,end) infinite; }
#technologies .technology-circuit::after { content:""; position:absolute; pointer-events:none; inset:0; background:linear-gradient(transparent 0%,#ff854300 40%,#ff85430c 50%,transparent 60%); background-size:100% 200%; animation:technology-scan 5s linear infinite; }
@keyframes technology-signal { to { stroke-dashoffset:-72; } }
@keyframes technology-core { 0%,100% { transform:scale(1); opacity:.75; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes technology-module-signal { 0%,32%,100% { border-color:#49513f; border-top-color:#ff8543; box-shadow:0 0 0 transparent; } 10%,22% { border-color:#ff8543; box-shadow:0 0 20px #ff5a001c,inset 0 0 18px #ff5a000a; } }
@keyframes technology-cursor { to { opacity:0; } }
@keyframes technology-scan { from { background-position:0 100%; } to { background-position:0 -100%; } }
#technologies.is-paused *, #technologies.is-paused *::after,
#technologies.is-offscreen *, #technologies.is-offscreen *::after { animation-play-state:paused !important; }
@media(prefers-reduced-motion:reduce) {
  #technologies *, #technologies *::after { animation:none !important; }
}

/* Technology engine uses the AI & Automation midnight-blue palette. */
#technologies.technology-section { background:radial-gradient(ellipse at 90% 10%,#ff5a001c,transparent 35%),linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px),#10151b; background-size:auto,30px 30px,30px 30px; color:#eef2f5; }
#technologies .technology-heading h2 { color:#fff; }
#technologies .technology-heading h2 span, #technologies .eyebrow { color:#ff9564; }
#technologies .technology-heading>p { color:#aab5c0; }
#technologies .technology-console { background:#121a22; color:#eef2f5; border-color:#3a4652; box-shadow:0 16px 40px #0004; }
#technologies .technology-console-bar { background:#121a22; color:#bdc7d1; border-bottom-color:#3a4652; }
#technologies .technology-circuit { background-color:#18222c; background-image:radial-gradient(ellipse at 50% 35%,#ff5a0019,transparent 52%),radial-gradient(#ffffff10 1px,transparent 1px); }
#technologies .technology-readout>span, #technologies .technology-terminal>span { color:#aab5c0; }
#technologies .technology-readout strong { color:#eef2f5; }
#technologies .technology-readout small { color:#aab5c0; }
#technologies .technology-processor { border-color:var(--orange); background:linear-gradient(140deg,#30211d,#1c252d); box-shadow:0 0 0 7px #10151b,0 0 0 8px #3a4652,0 0 0 16px #121a22,0 8px 30px #ff5a0014; }
#technologies .technology-processor::before, #technologies .technology-processor::after { background:repeating-linear-gradient(to bottom,#7e8e9f 0 3px,transparent 3px 11px); }
#technologies .processor-caption { color:#a9b5c0; }
#technologies .processor-symbol { color:var(--orange); text-shadow:0 0 22px #ff5a0018; }
#technologies .technology-terminal { background:#121a22; border-color:#35414d; border-left-color:var(--orange); box-shadow:0 8px 24px #0004; }
#technologies .technology-terminal>span { border-bottom-color:#ffffff12; }
#technologies .technology-terminal code { color:#d1dbe4; }
#technologies .technology-terminal code b, #technologies .technology-terminal code::after { color:#ffb184; }
#technologies .technology-terminal small { color:#a9b5c0; }
#technologies .technology-traces { stroke:#3a4652; }
#technologies .technology-trace-glow { stroke:var(--orange); }
#technologies .technology-traces circle { fill:var(--orange); stroke:var(--orange); }
#technologies .technology-module { background-color:#18222c; background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px); border-color:#35414d; border-top-color:var(--orange); animation-name:technology-module-runtime; }
#technologies .technology-module-top { color:#bdc7d1; }
#technologies .technology-module h3 { color:#eef2f5; }
#technologies .technology-module::after { color:#7e8e9f; }
#technologies .technology-list li { color:#eef3f7; background:#111921; border-color:#2e3944; }
#technologies .technology-list i { color:#ffad84; }
#technologies .technology-list li:hover { border-color:var(--orange); background:#17232d; }
#technologies .technology-console-footer { background:#121a22; border-top-color:#3a4652; color:#a9b5c0; }
#technologies .technology-console-footer b { color:#ffb184; }
#technologies .technology-motion-toggle { background:#121a22; border-color:#3a4652; color:#ffad84; }
#technologies .technology-motion-toggle:disabled { color:#7e8e9f; }
@keyframes technology-module-runtime { 0%,32%,100% { border-color:#35414d; border-top-color:var(--orange); box-shadow:0 0 0 transparent; } 10%,22% { border-color:var(--orange); box-shadow:0 5px 22px #ff5a0014,inset 0 0 18px #ff5a0005; } }

/* Technology marks retain their familiar vendor colors inside the dark stack cards. */
#technologies .technology-list .fa-react { color:#61dafb; }
#technologies .technology-list .fa-html5 { color:#e34f26; }
#technologies .technology-list .fa-css3-alt { color:#1572b6; }
#technologies .technology-list .fa-js { color:#f7df1e; }
#technologies .technology-list .fa-figma { color:#f24e1e; }
#technologies .technology-list .fa-sass { color:#cc6699; }
#technologies .technology-list .fa-laravel { color:#ff2d20; }
#technologies .technology-list .fa-php { color:#777bb4; }
#technologies .technology-list .fa-node-js { color:#5fa04e; }
#technologies .technology-list .fa-python { color:#3776ab; }
#technologies .technology-list .fa-database { color:#4479a1; }
#technologies .technology-list .fa-code { color:#8bc34a; }
#technologies .technology-list .fa-mobile-screen-button { color:#54c5f8; }
#technologies .technology-list .fa-android { color:#3ddc84; }
#technologies .technology-list .fa-apple { color:#f5f5f7; }
#technologies .technology-list .fa-google-play { color:#34a853; }
#technologies .technology-list .fa-google { color:#4285f4; }
#technologies .technology-list .fa-hexagon-nodes { color:#74aa9c; }
#technologies .technology-list .technology-lightroom-icon { border-radius:4px; }
#technologies .technology-list .fa-chart-line { color:#34a853; }
#technologies .technology-list .fa-magnifying-glass { color:#4285f4; }
#technologies .technology-list .fa-bullhorn { color:#ff9800; }
#technologies .technology-list .fa-instagram { color:#e4405f; }
#technologies .technology-list .fa-pen-nib { color:#ffc107; }
#technologies .technology-list .fa-youtube { color:#ff0000; }
#technologies .technology-list .fa-film { color:#ffc107; }
#technologies .technology-list .fa-adobe { color:#ff0000; }
#technologies .technology-list .fa-camera { color:#c7d2df; }
#technologies .technology-list .fa-git-alt { color:#f05032; }
#technologies .technology-list .fa-github { color:#f5f5f7; }
#technologies .technology-list .fa-aws { color:#ff9900; }
#technologies .technology-list .fa-cloud { color:#29b6f6; }
#technologies .technology-module:nth-child(4) { animation-delay:1s; }
#technologies .technology-module:nth-child(5) { animation-delay:3s; }
#technologies .technology-module:nth-child(6) { animation-delay:5s; }

/* Client network: white blueprint surface with copper connection traces. */
#clients.client-section { background-color:#fff; background-image:linear-gradient(#d8d4ca30 1px,transparent 1px),linear-gradient(90deg,#d8d4ca30 1px,transparent 1px); background-size:28px 28px; border-block:1px solid #e8e3da; }
#clients .client-heading { align-items:center; margin-bottom:36px; }
.client-network-stamp { position:relative; flex-shrink:0; border:1px solid #d8cabb; border-left:3px solid var(--orange); padding:18px 24px; transform:none; background:#fff; box-shadow:5px 5px 0 #eef1f4; }
.client-network-stamp>span, .client-network-stamp small { display:block; color:#826f5c; font:8px/1.6 monospace; letter-spacing:1.8px; }
.client-network-stamp strong { display:block; margin:7px 0; font:700 22px/1.05 monospace; letter-spacing:-1px; color:#30352e; }
.client-network-console { overflow:hidden; border:1px solid #e0e5eb; border-radius:14px; background:#fff; box-shadow:0 18px 45px #1925300a; }
.client-network-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 24px; border-bottom:1px solid #e7ebef; background:#f8fafc; }
.client-network-file { display:flex; align-items:center; gap:12px; color:#536170; font:11px monospace; }
.client-network-file>i { color:#c4480b; font-style:normal; font-size:20px; }
#clients .client-motion-toggle { color:#aa3e09; background:#fff7f1; border-color:#dce3e9; font-size:10px; }
#clients .client-console-bar { padding:18px 24px 0; border:0; color:#647180; font-size:9px; }
.client-network-bus { display:flex; align-items:center; gap:0; padding:28px 24px 8px; color:#aa3e09; font:9px monospace; letter-spacing:1px; }
.client-network-bus>span { padding:10px 14px; border:1px solid #ff8d5b66; border-radius:5px; background:#ff5a000c; }
.client-network-bus>i { flex:1; height:1px; background:linear-gradient(90deg,#ff8d5c,#e0e5eb); position:relative; }
.client-network-bus>i::after { content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border:1px solid #c4480b; background:#fff; transform:rotate(45deg); }
.client-network-bus>b { margin-left:16px; font-weight:400; color:#647180; font-size:8px; }
#clients .client-logo-window { overflow:hidden; padding:20px 24px 26px; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; background-image:radial-gradient(#dce3ea 1px,transparent 1px); background-size:14px 14px; user-select:none; -webkit-user-select:none; }
#clients .client-logo-window::-webkit-scrollbar { display:none; }
#clients .client-logo-group { gap:18px; padding-right:18px; }
#clients .client-logo-card { position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:stretch; width:214px; height:170px; padding:0; border:1px solid #dce3e9; border-radius:8px; background:#fff; overflow:visible; transition:border-color .2s,box-shadow .2s; }
#clients .client-logo-card::before { content:""; position:absolute; width:1px; height:20px; left:50%; top:-21px; background:#e8b697; }
.client-slot { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:7px 7px 0 0; border-bottom:1px solid #e9ecef; color:#6c7883; background:#f3f5f6; font:8px monospace; letter-spacing:1px; }
.client-slot i { width:5px; height:5px; border-radius:50%; background:#e67a41; }
#clients .client-logo-card img { height:78px; width:calc(100% - 36px); align-self:center; object-fit:contain; }
.client-brand-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:10px 12px; border-top:1px solid #eef0f2; color:#58616b; font:9px/1.5 monospace; text-align:center; }
#clients .client-logo-card:hover { border-color:#ff9564; box-shadow:0 0 0 3px #ff5a001c; }
#clients .client-footer { align-items:center; margin:0; padding:18px 24px; border-top:1px solid #e7ebef; background:#fafbfc; color:#647180; font-size:9px; }
#clients .client-footer i { color:#c4480b; margin-right:8px; font-style:normal; }
#clients .client-footer a { color:#aa3e09; white-space:nowrap; }
@media(max-width:600px) {
  #clients .client-heading { align-items:flex-start; }
  .client-network-stamp { display:none; }
  .client-network-toolbar { padding:14px; gap:10px; }
  .client-network-file { font-size:9px; gap:7px; }
  #clients .client-motion-toggle { font-size:9px; padding:9px; }
  #clients .client-console-bar { padding:16px 14px 0; font-size:8px; }
  .client-network-bus { padding:22px 14px 8px; }
  .client-network-bus>b { font-size:7px; letter-spacing:0; }
  #clients .client-logo-window { padding:20px 14px; }
  #clients .client-logo-card { width:178px; height:156px; }
  #clients .client-logo-card img { height:68px; }
  #clients .client-footer { padding:16px 14px; font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { #clients .client-logo-card { transition:none; } }

/* Unframed client logos retain their original colours and carousel spacing. */
#clients .client-logo-card { justify-content:center; align-items:center; height:112px; padding:12px 18px; border:0; border-radius:0; background:transparent; box-shadow:none; transition:none; }
#clients .client-logo-card::before { content:none; }
#clients .client-logo-card:hover { border:0; box-shadow:none; }
#clients .client-logo-card img { width:100%; height:80px; object-fit:contain; }
@media(max-width:600px) {
  #clients .client-logo-card { height:96px; padding:10px 16px; }
  #clients .client-logo-card img { height:68px; }
}

/* Compact client strip. */
#clients.client-section { padding:34px max(24px,5vw); }
#clients .client-heading { margin-bottom:18px; }
#clients .client-heading .eyebrow { margin:0 0 9px; font-size:10px; }
#clients .client-heading h2 { font-size:clamp(23px,2.5vw,32px); line-height:1.2; letter-spacing:-.8px; }
#clients .client-network-toolbar { padding:9px 16px; }
#clients .client-motion-toggle { padding:6px 9px; }
#clients .client-logo-window { padding:10px 16px; }
#clients .client-logo-card { height:90px; }
#clients .client-logo-card img { height:64px; }
@media(max-width:600px) {
  #clients.client-section { padding:28px 22px; }
  #clients .client-heading { margin-bottom:14px; }
  #clients .client-logo-card { height:80px; }
  #clients .client-logo-card img { height:58px; }
}

/* Always-visible social sharing colours, including touch screens. */
.announcement-social a { opacity:1; visibility:visible; color:#fff; background:var(--social-colour,#384857); border-color:var(--social-colour,#384857); }
.announcement-social [data-social-share="linkedin"] { --social-colour:#0a66c2; color:#fff; }
.announcement-social [data-social-share="facebook"] { --social-colour:#1877f2; color:#fff; }
.announcement-social [data-social-share="whatsapp"] { --social-colour:#168844; color:#fff; }
.announcement-social [data-social-share="x"] { --social-colour:#30343a; }
.announcement-social [data-social-share="telegram"] { --social-colour:#087eae; }
.announcement-social [data-social-share="email"] { --social-colour:#b74610; }
.announcement-social a:focus-visible { outline:2px solid #ffb184; outline-offset:3px; }
@media(max-width:1100px) { .announcement-midline { display:none; } }
@media(max-width:600px) {
  .announcement-inner { flex-wrap:wrap; justify-content:center; gap:4px; padding:6px 0; }
  .announcement-carousel { flex:1 1 100%; justify-content:center; overflow:hidden; }
  .announcement-social { justify-content:center; gap:9px; padding:3px 0; }
  .announcement-social a { width:27px; height:27px; font-size:12px; }
}

.announcement-social .instagram-link { color:#fff; border-color:#c13584; background:linear-gradient(135deg,#833ab4,#c13584,#e1306c,#f77737); }

/* Full-width career buttons for both tracks. */
.career-bottom .button { width:100%; min-height:54px; padding:16px 20px; justify-content:space-between; gap:14px; background:#fff; color:#17191f; border:1px solid #fff; border-radius:9px; font-size:14px; box-shadow:none; }
.career-bottom .button:hover { background:#fff1e8; color:#17191f; border-color:#fff1e8; text-decoration:none; }
.career-bottom .button:focus-visible { outline:2px solid #ff792f; outline-offset:5px; }
#career-opportunity[hidden] { display:none; }
.blueprint-core > span { overflow-wrap:anywhere; text-align:center; }

/* Keep native enquiry dropdowns within the form on desktop and mobile. */
#project-dialog form, #project-dialog form label { min-width:0; }
#project-dialog select {
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:44px;
  padding:10px 36px 10px 12px;
  appearance:none;
  -webkit-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23545c54' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:#1e2420;
  font-size:14px;
  line-height:1.5;
  text-overflow:ellipsis;
  cursor:pointer;
  color-scheme:light;
}
#project-dialog select option { background:#fff; color:#1e2420; }
@media(max-width:700px) {
  #project-dialog select { font-size:16px; }
  #project-dialog .primary { padding:5px 10px; }
}

/* Gentle movement for the closing invitation. */
.final-cta .cta-moving-title > span {
  display:inline-block;
  animation:cta-title-float 4s ease-in-out infinite;
}
.final-cta .cta-moving-title > span:last-child {
  position:relative;
  color:var(--orange);
  animation-delay:-2s;
}
.final-cta .cta-moving-title > span:last-child::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transform-origin:left;
  animation:cta-title-underline 4s ease-in-out infinite;
}
@keyframes cta-title-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}
@keyframes cta-title-underline {
  0%,100% { transform:scaleX(.3); opacity:.45; }
  50% { transform:scaleX(1); opacity:1; }
}
@media(prefers-reduced-motion:reduce) {
  .final-cta .cta-moving-title > span,
  .final-cta .cta-moving-title > span:last-child::after { animation:none; }
}

/* Mobile technology cards must override the tablet's two-column grid. */
@media(max-width:600px) {
  #technologies .technology-modules { grid-template-columns:minmax(0,1fr); padding:0 12px 18px; gap:24px; }
  #technologies .technology-module { min-width:0; padding:20px 14px; }
  #technologies .technology-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  #technologies .technology-list li { min-width:0; padding:10px 8px; gap:7px; }
  #technologies .technology-list li span { overflow-wrap:anywhere; }
  #technologies .technology-circuit { grid-template-columns:minmax(0,1fr); padding-inline:14px; }
  #technologies .technology-terminal { min-width:0; width:100%; padding:14px; }
  #technologies .technology-terminal code { font-size:10px; white-space:normal; overflow-wrap:anywhere; }
  #technologies .technology-console-bar { gap:12px; padding:14px; }
  #technologies .technology-console-footer { gap:10px; line-height:1.8; padding:14px; }
  #technologies .technology-heading h2 { font-size:clamp(27px,8vw,38px); }
}
@media(max-width:760px) {
  header, body > header, header.is-scrolled, body > header.is-scrolled {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: 72px;
    min-height: 72px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fffffff8;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 4px 18px #1011160a;
  }
  header .logo { flex: 0 0 auto; margin: 0; display: inline-flex; align-items: center; }
  header .header-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; }
  header .menu { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; }
  .announcement-inner { flex-wrap:nowrap; justify-content:center; gap:4px; padding:4px 0; min-height:36px; }
  .announcement-carousel { flex:1 1 100%; min-width:0; max-width:100%; justify-content:center; }
  .announcement-window { min-width:0; max-width:100%; }
  .announcement-item { min-width:0; justify-content:center; gap:8px; font-size:clamp(9px,2.6vw,11px); }
  .announcement-item strong { font-size:clamp(8.5px,2.4vw,9.5px); flex-shrink:0; }
  .announcement-item span { min-width:0; max-width:none !important; overflow:visible !important; text-overflow:clip !important; white-space:nowrap; font-size:inherit; }
  .announcement-item b { flex-shrink:0; font-size:12px; }
  .announcement-social { display:none; }
}
/* Travelling dots connect Experience, Connect and Launch. */
.cta-blueprint .blueprint-line { z-index:2; width:12px; }
.cta-blueprint .line-one { left:calc((100% - 28px - 24px) / 3 + 14px); }
.cta-blueprint .line-two { left:calc((100% - 28px - 24px) / 3 * 2 + 26px); }
.cta-blueprint .blueprint-line::after { content:''; position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:50%; background:#ffad70; box-shadow:0 0 8px #ff792f; animation:cta-blueprint-dot 1.8s linear infinite; }
.cta-blueprint .line-two::after { animation-delay:-.9s; }
@keyframes cta-blueprint-dot { from { left:0; opacity:0; } 20%,80% { opacity:1; } to { left:calc(100% - 3px); opacity:0; } }
@media(max-width:600px) {
  .cta-blueprint .blueprint-line { width:6px; }
  .cta-blueprint .line-one { left:calc((100% - 18px - 12px) / 3 + 9px); }
  .cta-blueprint .line-two { left:calc((100% - 18px - 12px) / 3 * 2 + 15px); }
}
@media(prefers-reduced-motion:reduce) { .cta-blueprint .blueprint-line::after { animation:none; } }

/* Social links stay in the desktop header; completely hidden on mobile footer. */
.mobile-footer-social,
.site-footer .mobile-footer-social { display:none !important; }
@media(max-width:760px) {
  .announcement-bar .announcement-social { display:none; }
  .mobile-footer-social,
  .site-footer .mobile-footer-social { display:none !important; }
}

/* Expanded navigation stays readable across desktop and mobile layouts. */
@media(min-width:761px) {
  header nav { min-width:0; flex-wrap:nowrap; justify-content:center; gap:clamp(7px,.9vw,14px); }
  header nav a { font-size:14px; }
  header .logo, header .header-actions { flex-shrink:0; }
}
@media(min-width:761px) and (max-width:1100px) {
  header nav { flex:1; row-gap:8px; }
  header nav a { font-size:11px; }
}
@media(max-width:760px) {
  header nav { counter-reset:menu-item; }
  header nav a { counter-increment:menu-item; flex-shrink:0; }
  header nav a:nth-of-type(n)::before { content:counter(menu-item,decimal-leading-zero); }
}

/* Career CTAs: modern, clearly defined white buttons with proper padding and hover states. */
#careers .career-card { padding-bottom: 28px; }
#careers .career-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
#careers .career-bottom .button {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  min-height: 48px;
  padding: 13px 20px;
  border: 1px solid #ffffff44;
  border-radius: 10px !important;
  background: #ffffff;
  color: #11141a;
  font-size: 13px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 14px #00000028;
  transition: all .25s ease;
  cursor: pointer;
}
#careers .career-bottom .button:hover {
  background: #fff4ec;
  border-color: var(--orange);
  color: #11141a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #ff5a0026;
}

/* Technical navigation and a compact software catalogue. */
header nav a { display:inline-flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:5px; white-space:nowrap; text-transform:uppercase; }
header nav a .nav-icon { flex-shrink:0; color:var(--orange); font-size:12px; }
@media(min-width:761px) {
  header nav a { flex:0 0 auto; font-size:14px; line-height:1.3; letter-spacing:0; }
}
@media(max-width:760px) {
  header nav a:nth-of-type(n)::before { content:none; }
  header nav a .nav-icon { width:28px; font-size:16px; text-align:center; }
}
:is(#software-service-panel, #services, #software-services, #hw-services) .service-grid { gap:12px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-card { padding:20px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-top { margin-bottom:14px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .software-service-icon { font-size:26px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-tagline { margin:0 0 7px; font-size:11px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-card h3 { margin:0 0 10px; font-size:20px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-card > p:not(.service-tagline) { margin:0; font-size:13px; line-height:1.55; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-card ul { padding:14px 0; gap:6px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-card li { font-size:12px; line-height:1.5; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-bottom { padding-top:12px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-bottom > span { font-size:8px; letter-spacing:.5px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-grid:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
@media(max-width:760px) {
  :is(#software-service-panel, #services, #software-services, #hw-services) .service-grid {
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(85%, 290px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:2px;
    padding:6px 2px 14px;
    scrollbar-width:thin;
    scrollbar-color:var(--orange) #eee5df;
  }
  :is(#software-service-panel, #services, #software-services, #hw-services) .service-card { min-width:0; padding:16px; scroll-snap-align:start; }
  :is(#software-service-panel, #services, #software-services, #hw-services) .service-card h3 { font-size:18px; }
  :is(#software-service-panel, #services, #software-services, #hw-services) .service-top { margin-bottom:10px; }
}
/* Keep the client logos close together, including the carousel loop seam. */
#clients .client-logo-group { gap:4px; padding-right:4px; }
#clients .client-logo-card { width:144px; padding:8px 4px; }
@media(max-width:760px) {
  #clients .client-logo-card { width:120px; padding:6px 3px; }
}

/* Reserve a single desktop row for every menu icon and label. */
@media(min-width:761px) {
  header { gap:14px; padding-inline:clamp(16px,2.4vw,38px); }
  header #main-navigation { flex:1; flex-direction:row; flex-wrap:nowrap; }
  header #main-navigation .nav-icon { width:12px; font-size:11px; text-align:center; }
}
@media(min-width:761px) and (max-width:1100px) {
  header { gap:10px; padding-inline:16px; }
  header .logo-mark { width:100px; flex-basis:100px; }
  header #main-navigation { gap:8px; }
  header #main-navigation a { gap:4px; font-size:14px; }
  header .header-actions .primary { display:none; }
}
@media(max-width:760px) {
  header #main-navigation a { font-size:14px; gap:8px; }
  header #main-navigation .nav-icon { font-size:13px; width:20px; }
}

/* Compact service footers and approach cards. */
:is(#software-service-panel, #services, #software-services, #hw-services) .service-bottom { padding-top:6px; gap:6px; }
:is(#software-service-panel, #services, #software-services, #hw-services) .service-bottom button { width:30px; height:30px; font-size:17px; }
@media(max-width:760px) {
#company .testimonial-card { flex-basis:260px; min-height:0; padding:13px; }
#company .testimonial-card p { margin:10px 0; font-size:11px; line-height:1.5; }
#company .testimonial-card > div { gap:8px; }
#company .testimonial-card > div b { font-size:10px; }
#company .testimonial-card small { font-size:9px; }
}
.why-onepixel { padding:60px max(24px,5vw); border-top:1px solid var(--line); background-color:#fffaf7; }
.why-onepixel h2 span { color:var(--orange); }
.why-onepixel-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:26px; }
.why-onepixel-grid article { padding:22px; border:1px solid var(--line); border-top:2px solid var(--orange); border-radius:8px; background:#fff; }
.why-onepixel-grid article > i { color:var(--orange); font-size:22px; }
.why-onepixel-grid h3 { font-size:17px; margin:16px 0 10px; }
.why-onepixel-grid p { font-size:13px; line-height:1.65; margin:0; color:#626b77; }
@media(max-width:1000px) { .why-onepixel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  #company .testimonial-card { flex-basis:230px; padding:12px; }
  #technologies .technology-list[hidden] { display:none; }
  #technologies .technology-disclosure { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; }
  #technologies .technology-disclosure::after { content:'+'; color:var(--orange); font:22px monospace; }
  #technologies .technology-disclosure[aria-expanded="true"]::after { content:'−'; }
  #technologies .technology-disclosure:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
  #technologies .technology-module::after { content:''; position:absolute; top:-24px; left:calc(50% - 3px); width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px #ff8543; animation:technology-mobile-dot 1.6s linear infinite; pointer-events:none; }
  #technologies .technology-module:nth-child(even)::after { animation-delay:-.8s; }
  .why-onepixel { padding:36px 22px; }
  .why-onepixel-grid { grid-template-columns:1fr; gap:12px; margin-top:20px; }
  .why-onepixel-grid article { padding:18px; }
}
@keyframes technology-mobile-dot { from { transform:translateY(0); opacity:0; } 20%,80% { opacity:1; } to { transform:translateY(22px); opacity:0; } }

/* Mobile platforms expose one selected preview at a time. */
.platform-mobile-tabs { display:none; }
#owned-websites .ref-platform-card[hidden] { display:none; }
.service-faq .faq-group summary::before { content:counter(faq-row, decimal-leading-zero) ' /'; }
@media(max-width:760px) {
  .platform-mobile-tabs:not([hidden]) { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:44px; }
  .platform-mobile-tabs button { position:relative; padding:12px 8px; border:1px solid #57534f; border-radius:6px; background:#1a1c1e; color:#eee; font:600 12px/1.5 Inter,Arial,sans-serif; }
  .platform-mobile-tabs button[aria-selected="true"] { background:var(--orange); border-color:var(--orange); color:white; }
  .platform-mobile-tabs::after { content:''; position:absolute; z-index:2; top:100%; left:calc(25% - 1px); width:2px; height:44px; background:radial-gradient(circle,#ff985c 1px,transparent 1.5px) 0 0 / 2px 7px repeat-y; filter:drop-shadow(0 0 3px #ff5a00); animation:platform-tab-dots 1.2s linear infinite; }
  .platform-mobile-tabs:has(button:nth-child(2)[aria-selected="true"])::after { left:calc(75% - 1px); }
  #owned-websites .ref-platform-card[role="tabpanel"] { position:relative; }
  .platform-mobile-tabs button:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
}
@keyframes platform-tab-dots { to { background-position:0 7px; } }

/* Theme social buttons: square silhouettes with softly rounded corners. */
.announcement-bar .announcement-social a { border-radius:7px; background:#ff5a001a; border:1px solid #ff854366; color:#ff985c; }
.announcement-bar .announcement-social a:hover { background:var(--orange); border-color:var(--orange); color:#fff; }
.footer-wordmark small { display:none; text-align:center; font-size:.19em; letter-spacing:.35em; line-height:1.6; }
.mobile-contact-bar { display:none; }
@media(max-width:760px) { .footer-wordmark small { display:block; } }
@media(max-width:760px) {
  .announcement-bar .announcement-social { display:none !important; }
  .signature-footer.site-footer {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 180px;
    padding: 24px 20px 66px !important;
  }
  .signature-footer .footer-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto !important;
    border: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
  }
  .signature-footer .footer-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px;
    margin: 0 auto !important;
    width: 100%;
  }
  .signature-footer .footer-brand .logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .signature-footer .footer-brand .logo-mark,
  .signature-footer .footer-brand .brand-logo {
    display: block !important;
    width: 86px !important;
    height: 68px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
  .signature-footer .footer-brand p {
    display: block !important;
    text-align: center !important;
    max-width: 320px;
    margin: 0 auto !important;
    color: #b5bbc7;
    font-size: 15px;
    line-height: 1.6;
  }
  .signature-footer .footer-signoff {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 6px auto 0 !important;
    text-align: center !important;
    color: #d1d5dd;
    font: 11.5px monospace;
    letter-spacing: 2px;
  }
  .signature-footer .footer-links,
  .site-footer .footer-links,
  .signature-footer .footer-contact,
  .site-footer .footer-contact,
  .mobile-footer-social,
  .site-footer .mobile-footer-social,
  .signature-footer .footer-bottom,
  .site-footer .footer-bottom,
  .signature-footer .footer-copyright,
  .site-footer .footer-copyright {
    display: none !important;
  }
  .signature-footer .footer-wordmark {
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    top: 36% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    color: #f4f0e8 !important;
    opacity: 0.09 !important;
    font-size: clamp(42px, 13.5vw, 72px) !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    user-select: none !important;
  }
  .signature-footer .footer-wordmark > span {
    display: inline-block;
    color: #ff7b36;
    font-size: 0.16em;
    vertical-align: top;
    margin: 0.55em 0 0 0.25em;
    letter-spacing: 0;
  }
  .signature-footer .footer-wordmark small {
    display: block !important;
    text-align: center !important;
    font-size: 0.24em !important;
    letter-spacing: 0.4em !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
    font-weight: 700 !important;
  }
  .mobile-contact-bar { position:fixed; z-index:51; left:50%; bottom:calc(10px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:grid; grid-template-columns:repeat(4,1fr); width:min(280px,calc(100% - 56px)); padding:4px; gap:2px; border:1px solid #ff85434d; border-radius:15px; background:#191c20f5; backdrop-filter:blur(16px); box-shadow:0 8px 32px #0004; }
  .mobile-contact-bar > a,.mobile-contact-bar > button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:40px; padding:4px 2px; border:0; border-radius:10px; background:transparent; color:#eee; font:9px/1.2 Inter,Arial,sans-serif; text-decoration:none; }
  .mobile-contact-bar i { color:#ff985c; font-size:15px; }
  .mobile-contact-bar > :hover { background:#ff5a0024; }
  .mobile-contact-bar > :focus-visible { outline:2px solid var(--orange); outline-offset:1px; }
  .site-tools { bottom:calc(92px + env(safe-area-inset-bottom)); }
  .site-tools > .site-tool { display:none; }
  body.modal-open .mobile-contact-bar,body.mobile-nav-open .mobile-contact-bar { visibility:hidden; }
  html { scroll-padding-bottom:120px; }
}

/* Brand colours appear on social hover and keyboard focus. */
.announcement-bar .announcement-social a:is(:hover,:focus-visible) { background:var(--social-colour,#30343a); border-color:var(--social-colour,#30343a); color:#fff; }
.announcement-bar .announcement-social .instagram-link:is(:hover,:focus-visible) { background:linear-gradient(135deg,#833ab4,#c13584,#e1306c,#f77737); border-color:#c13584; }
.whatsapp-tool:is(:hover,:focus-visible) { background:#25d366; border-color:#25d366; color:#fff; }
.mobile-contact-bar a[href*="wa.me"]:is(:hover,:focus-visible) { background:#25d366; color:#102317; }
.mobile-contact-bar a[href*="wa.me"]:is(:hover,:focus-visible) i { color:#102317; }

/* Footer branding and navigation remain minimal on mobile. */
@media(min-width:761px) {
  .signature-footer .footer-wordmark small { display:none; }
}
@media(max-width:760px) {
  .signature-footer .footer-wordmark small { display:block; }
  .signature-footer .footer-links, .site-footer .footer-links,
  .signature-footer .footer-contact, .site-footer .footer-contact { display:none !important; }
  .announcement-bar .announcement-social { display:none; }
}
/* Expanded tool names wrap within their card instead of widening the page. */
#technologies .technology-list li { min-width:0; }
#technologies .technology-list li span { min-width:0; overflow-wrap:anywhere; }
#technologies .technology-list i { flex-shrink:0; }

/* Per-tool colours distinguish products that share the same icon glyph. */
#technologies .technology-list i[style*="--tool-colour"] { color:var(--tool-colour); }

/* Navigation and responsive service refinements. */
header #main-navigation a { font-size:11px; }
header .menu { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; }
.mobile-menu-close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border:1px solid #555246; border-radius:10px; background:linear-gradient(135deg,#30332f,#111410); color:#ff783e; font-size:18px; cursor:pointer; }
header .mobile-menu-brand.logo-mark { display:flex; align-items:center; justify-content:center; margin:0; }
.mobile-menu-brand img { position:static; width:100%; height:100%; object-fit:contain; transform:none; }
body.mobile-nav-open { overflow:hidden; }
body.mobile-nav-open header { backdrop-filter:none; -webkit-backdrop-filter:none; }
:is(#software-service-panel,#services,#software-services,#hw-services) .service-top svg { width:26px; height:26px; }
:is(#software-service-panel,#services,#software-services,#hw-services) .service-card { display:flex; flex-direction:column; }
:is(#software-service-panel,#services,#software-services,#hw-services) .service-bottom { margin-top:auto; align-items:center; }
#technologies .technology-brand-icon { width:22px; height:22px; object-fit:contain; flex-shrink:0; }
#technologies .technology-list .fa-google-play { color:#34a853; }
#technologies .technology-list .fa-apple { color:#fff; }
#technologies .technology-list .fa-app-store-ios { color:#0d96f6; }
#technologies .technology-list .fa-linkedin { color:#0a66c2; }
#technologies .technology-list .fa-meta { color:#0081fb; }
#technologies .technology-list .fa-google { color:#4285f4; }
#technologies .technology-list .fa-pen-nib { color:#ff9a00; }
@media(min-width:761px) {
  #capabilities h2 { font-size:29px; line-height:1.15; }
  #process h2 { font-size:clamp(27px,2.8vw,40px); line-height:1.15; }
}
@media(max-width:760px) {
  #capabilities .cap-tabs { display:grid !important; grid-template-columns:1fr; gap:7px; margin:20px 0; }
  #capabilities .cap-tab { display:flex; align-items:center; white-space:normal; min-width:0; min-height:46px; margin:0; padding:10px 12px; border:1px solid #e9d9cd; border-radius:8px !important; background:#fffaf6; color:#9a6549; font:600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align:left; }
  #capabilities .cap-tab span { flex:0 0 25px; color:#bc9b89; font:10px ui-monospace, SFMono-Regular, Menlo, monospace; }
  #capabilities .cap-tab::before { content:'›'; margin-right:12px; color:#e35a26; font-size:20px; line-height:1; }
  #capabilities .cap-tab.active { border-color:#f1c9b6; border-left:4px solid #df4d22; background:#fff6f0; color:#80513b; }
  #capabilities .cap-tab.active span { color:#a8755a; }
  #process.delivery-studio .process-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #process.delivery-studio .step { min-width:0; height:100%; padding:14px 10px; display:flex; flex-direction:column; align-items:flex-start; }
  #process.delivery-studio .step b { font-size:15px; overflow-wrap:anywhere; }
  #process.delivery-studio .step p { font-size:12px; line-height:1.55; }
  #process.delivery-studio .step-progress { margin-top:auto; width:100%; }
  #process.delivery-studio .carousel-controls { display:flex; align-items:center; justify-content:space-between; width:100%; box-sizing:border-box; margin-top:18px; }
  #process.delivery-studio .carousel-controls .carousel-arrow { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border-radius:50% !important; line-height:1; }
  #technologies .technology-module { overflow:visible; }
  #technologies .technology-circuit { padding-bottom:0; margin-bottom:48px; }
  #technologies .technology-traces { display:none; }
  #technologies .technology-circuit::after { content:''; position:absolute; z-index:2; left:50%; bottom:-48px; height:48px; border-left:1px solid #ff8543; filter:drop-shadow(0 0 3px #ff5a00); }
  #technologies .technology-modules { gap:24px; }
  #technologies .technology-module::before { height:26px; top:-24px; }
  #technologies .technology-module:first-child::before { height:48px; top:-54px; }
}

@media(min-width:761px) {
  header .menu { padding:0; border:1px solid #45483f; border-radius:10px; background:linear-gradient(135deg,#30332f,#111410); }
  .menu-lines { position:relative; display:block; width:22px; height:18px; }
  .menu-lines i { position:absolute; right:0; display:block; height:2px; border-radius:2px; background:#ff783e; }
  .menu-lines i:nth-child(1) { top:0; width:22px; }
  .menu-lines i:nth-child(2) { top:8px; width:15px; }
  .menu-lines i:nth-child(3) { top:16px; width:19px; }
}
.menu-close-glyph { display:none; align-items:center; justify-content:center; width:100%; height:100%; font:500 27px/1 Inter,Arial,sans-serif; }
header .menu:focus-visible, .mobile-menu-close:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }

/* Desktop keeps full navigation; phones retain the original left-side drawer. */
@media(min-width:1351px) {
  header .menu { display:none; }
  header #main-navigation { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; }
  header #main-navigation > a { display:inline-flex; font-size:11px; }
}
@media(min-width:761px) and (max-width:1350px) {
  header #main-navigation:not(.open) { display:flex; }
}
@media(max-width:760px) {
  header #main-navigation { left:0; right:auto; background-color:#171b17; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:28px 28px; }
  header #main-navigation:not(.open) { transform: translateX(-105%) !important; }
  header #main-navigation.open { left:0 !important; right:auto !important; margin:0 !important; transform:translateX(0) !important; }
  header #main-navigation.open > a { align-self:stretch; justify-content:flex-start; text-align:left; }
  header #main-navigation a { font-size:12px; }
  #technologies .technology-circuit { grid-template-columns:minmax(0,1fr); gap:0; }
  #technologies .technology-readout { grid-column:1; grid-row:1; justify-self:center; text-align:center; margin-bottom:30px; }
  #technologies .technology-processor { grid-column:1; grid-row:2; margin:16px 0; }
  #technologies .technology-terminal { grid-column:1; grid-row:4; }
}
.technology-code-link { display:none; }
@media(max-width:760px) {
  .technology-code-link { position:relative; grid-column:1; grid-row:3; display:block; justify-self:center; width:70px; height:64px; }
  .technology-code-link::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#ff854366; }
  .technology-code-link span { position:absolute; top:0; left:calc(50% - 16px); width:32px; text-align:center; background:#18222c; color:#ff985c; font:700 15px/22px monospace; animation:technology-code-transfer 2s linear infinite; }
}
@keyframes technology-code-transfer {
  0% { transform:translateY(0); opacity:0; }
  15%,80% { opacity:1; }
  100% { transform:translateY(42px); opacity:0; }
}
#technologies.is-paused .technology-code-link span,
#technologies.is-offscreen .technology-code-link span { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { #technologies .technology-code-link span { animation:none; top:20px; } }

/* A consistent image frame and compact text rows for every selected project. */
#work .projects { align-items:stretch; }
#work .project { min-height:0; justify-content:flex-start; gap:0; }
#work .project .photo-art { width:100%; height:auto; aspect-ratio:16 / 9; margin:0 0 12px; flex-shrink:0; }
#work .project .photo-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
#work .project-copy { flex:0 0 auto; justify-content:flex-start; gap:0; }
#work .project-copy > small { margin:0 0 6px; line-height:1.4; }
#work .project-title-row { align-items:flex-start; min-height:48px; margin:0 0 10px; }
#work .project-title-row h3 { font-size:17px; line-height:1.35; margin:0; }
#work .tags { margin:0; padding:0; gap:6px; }
#work .project-actions { align-self:flex-start; }
#work .project-title-row { min-height:0 !important; margin:0 0 3px !important; }
#work .project-actions { gap:3px !important; }
#work .project-actions > * { width:26px !important; height:26px !important; min-width:26px !important; min-height:26px !important; padding:5px !important; }
#work .project-actions svg { width:12px !important; height:12px !important; }
/* Keep selected-work descriptions readable and show the full artwork on phones. */
#work .project-summary { margin: 0 0 12px; color: #68717d; font-size: 12px; line-height: 1.55; }
#work .tags::before { content: "TECH STACK"; flex: 0 0 100%; color: #8a9099; font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .7px; }
@media (max-width: 760px) {
  #work .project .photo-art { background: #f5f5f4; }
  #work .project .photo-art img { object-fit: contain; object-position: center; }
  #work .project-summary { font-size: 12px; margin-bottom: 10px; }
}

@media(max-width:760px) {
  #work .project-title-row { min-height:0 !important; margin:0 0 3px !important; }
  #work .project-title-row h3 { font-size:15px; }
}

@media (max-width: 760px) {
  /* Keep the mobile menu close control visible and consistently shaped. */
  .mobile-menu-close,
  .mobile-menu-close:hover,
  .mobile-menu-close:active {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    transform: none;
  }

  /* Keep quick actions visually uniform during hover and press. */
  .mobile-contact-bar > a:hover,
  .mobile-contact-bar > a:active,
  .mobile-contact-bar > button:hover,
  .mobile-contact-bar > button:active {
    border-radius: 11px;
    background: transparent;
    color: #eee;
    transform: none;
    box-shadow: none;
  }
  .mobile-contact-bar > :focus-visible { outline-offset: 2px; }

  /* Mobile footer keeps only the soft wordmark and brand signoff. */
  .signature-footer .footer-brand > .logo,
  .signature-footer .footer-brand > p,
  .signature-footer .footer-wordmark > span { display: none !important; }
  .signature-footer .footer-brand { gap: 0 !important; }
  .signature-footer .footer-signoff { margin: 0 auto !important; }
  .signature-footer .footer-wordmark { top: 31% !important; }
  .signature-footer .footer-wordmark small {
    display: block !important;
    margin-top: 15px !important;
    font-size: .95em !important;
    letter-spacing: -.065em !important;
    line-height: 1 !important;
    color: #f4f0e8 !important;
    opacity: 1 !important;
  }
  .mobile-contact-bar a[href*="wa.me"]:is(:hover,:active,:focus-visible) {
    background: transparent !important;
    color: #eee !important;
    box-shadow: none !important;
  }
  .mobile-contact-bar a[href*="wa.me"]:is(:hover,:active,:focus-visible) i {
    color: #ff985c !important;
  }
}

/* Remove the oversized mobile footer gap behind the fixed quick-action bar. */
@media (max-width: 760px) {
  .signature-footer.site-footer {
    min-height: 190px !important;
    padding: 14px 16px calc(62px + env(safe-area-inset-bottom)) !important;
  }
  .signature-footer .footer-wordmark {
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    top: 35% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.1 !important;
    opacity: .09 !important;
  }
}

/* Keep each platform lockup in logo-then-name order. */
#owned-websites .ref-platform-title h3 {
  justify-content: flex-start;
  gap: 12px;
}
#owned-websites .ref-platform-title h3 > img {
  order: 0;
  opacity: 1 !important;
}
#owned-websites .ref-platform-title h3 > span {
  order: 1;
  margin-left: 0 !important;
  opacity: .16 !important;
  color: #f1f4f5 !important;
  white-space: nowrap !important;
  font-size: clamp(16px, 6vw, 32px) !important;
  line-height: 1 !important;
}

/* Use the same compact UI scale as other section headings. */
.support-section h2,
section.support-section h2 {
  font-size: clamp(25px, 2.4vw, 32px) !important;
  line-height: 1.12;
  letter-spacing: -1px;
}

section.support-section > div > p:not(.eyebrow) { font-size: 14px; }
section.support-section .support-grid h3 { font-size: 16px; }
section.support-section .support-grid p { font-size: 12px; }

/* Make the Software and Hardware selectors read as clear, pill-like controls. */
#capabilities .cap-tabs { gap: 8px; }
#capabilities .cap-tab {
  align-items: center;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c6ccd2;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
#capabilities .cap-tab:hover {
  background: transparent;
  color: #ffb083;
}
#capabilities .cap-tab.active {
  border: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  transform: translateX(0);
}
#capabilities .cap-tab.active span,
#capabilities .cap-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Mobile capability selector: two quote-style code cards per row. */
#capabilities .cap-tab-label-mobile { display: none !important; }
#capabilities .cap-play { display: none; }
@media (min-width: 1001px) {
  #capabilities { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr) minmax(0, 1.15fr); align-items: center; gap: clamp(22px, 3vw, 42px); }
  #capabilities > div:first-child { grid-column: 1; }
  #capabilities > div:first-child .eyebrow { font: 700 11px/1.4 Inter, Arial, sans-serif; letter-spacing: 1.5px; }
  #capabilities > div:first-child h2 { font: 700 clamp(27px, 2.2vw, 32px)/1.08 Inter, Arial, sans-serif; letter-spacing: -1.4px; }
  #capabilities > div:first-child > p:not(.eyebrow) { font: 400 14px/1.7 Inter, Arial, sans-serif; }
  #capabilities .cap-tabs { grid-column: 2; display: flex; flex-direction: column; align-self: center; }
  #capabilities .cap-tab { font-family: Inter, Arial, sans-serif; font-size: 14px; line-height: 1.4; }
  #capabilities .cap-tab-label-full { display: inline !important; flex: 1 1 auto; justify-content: flex-start !important; font: 14px/1.4 Inter, Arial, sans-serif !important; }
  #capabilities .expertise-board { grid-column: 3; width: 100%; min-width: 0; }
}
@media (max-width: 760px) {
  .service-faq .faq-group summary::after { top: 50%; right: 0; transform: translateY(-50%); }
  #capabilities { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  #capabilities > div:first-child { margin-bottom: 0; }
  #capabilities .cap-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 0; }
  #capabilities .capability-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
  #capabilities .capability-actions .primary { margin: 0; }
  #capabilities .cap-play { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 78px; min-height: 34px; padding: 7px 13px; border: 1px solid #5b321f; border-radius: 999px !important; background: #1d1713; color: #ff8a4c; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
  #capabilities .cap-play[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
  #capabilities .cap-tab {
    display: flex; align-items: center; min-width: 0; min-height: 44px; margin: 0; padding: 6px 7px;
    border: 1px solid #4a3329; border-radius: 8px !important; background: #171717; color: #d7b5a2;
    font: 600 9px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; white-space: normal;
  }
  #capabilities .cap-tab::before { content: '›'; flex: 0 0 auto; margin-right: 5px; color: var(--orange); font-size: 15px; line-height: 1; }
  #capabilities .cap-tab span { flex: 0 0 18px; color: #a98c7d; font-size: 7px; }
  #capabilities .cap-tab.active { border-color: #71452f; border-left: 3px solid var(--orange); background: #201914; color: #f2d3c1; }
  #capabilities .cap-tab.active span { color: #d3a88e; }
  #capabilities .cap-tab-label-full { display: none !important; }
  #capabilities .cap-tab-label-mobile { display: inline !important; flex: 1 1 auto !important; min-width: 0; color: inherit !important; font: inherit !important; overflow-wrap: anywhere; }
  #capabilities .expertise-board { margin: 0; }
}


/* Compact navigation: use the same accessible drawer before the desktop menu fits. */
@media (min-width:761px) and (max-width:1350px) {
  header { min-height:72px; height:72px; padding:8px 16px; gap:12px; }
  header .logo, header .header-actions { position:relative; z-index:10005; }
  header .header-actions { margin-left:auto; }
  header .header-actions .primary { display:none !important; }
  header .menu { display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid #45483f; border-radius:12px !important; background:linear-gradient(135deg,#30332f,#111410); box-shadow:3px 3px 0 #bdb8ac; cursor:pointer; }
  header .menu-lines { position:relative; display:block; width:22px; height:18px; }
  header .menu-lines i { position:absolute; right:0; display:block; height:2px; border-radius:2px; background:#ff783e; transition:transform .25s ease,width .25s ease,opacity .2s ease; }
  header .menu-lines i:nth-child(1) { top:0; width:22px; }
  header .menu-lines i:nth-child(2) { top:8px; width:15px; }
  header .menu-lines i:nth-child(3) { top:16px; width:19px; }
  header .menu[aria-expanded="true"] .menu-lines i:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  header .menu[aria-expanded="true"] .menu-lines i:nth-child(2) { opacity:0; }
  header .menu[aria-expanded="true"] .menu-lines i:nth-child(3) { width:22px; transform:translateY(-8px) rotate(-45deg); }
  header nav#main-navigation {
    position:fixed; inset:0 auto 0 0; z-index:10002; display:flex; flex-direction:column; align-items:stretch;
    width:min(420px,75vw) !important; max-width:75vw !important; min-width:0; height:100dvh; padding:24px 20px 40px;
    overflow-y:auto; background-color:#171b17; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);
    background-size:28px 28px; border:0; border-right:1px solid #555246; box-shadow:20px 0 60px #0004;
    transform:translateX(-105%); opacity:0; visibility:hidden; pointer-events:none;
  }
  header nav#main-navigation.open { transform:translateX(0) !important; opacity:1; visibility:visible; pointer-events:auto; }
  header nav#main-navigation > a { display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:48px; padding:11px 8px; border-bottom:1px solid #ffffff14; color:#fff; font-size:13px; white-space:normal; }
  header nav#main-navigation > a .nav-icon { width:20px; flex:0 0 20px; font-size:14px; text-align:center; }
  header .menu-backdrop { display:block; position:fixed; inset:0; z-index:10000; width:100vw; height:100dvh; border:0; background:#080c0ab3; opacity:0; visibility:hidden; pointer-events:none; }
  header nav#main-navigation.open + .menu-backdrop { opacity:1; visibility:visible; pointer-events:auto; }
  body.mobile-nav-open, html:has(body.mobile-nav-open) { overflow:hidden !important; overscroll-behavior:none; }
  body.mobile-nav-open main, body.mobile-nav-open footer, body.mobile-nav-open .announcement-bar { pointer-events:none; }
  body.mobile-nav-open header { background:transparent !important; box-shadow:none !important; border-bottom-color:transparent !important; backdrop-filter:none !important; }
  body.mobile-nav-open header .logo { opacity:0; pointer-events:none; }
  body.mobile-nav-open header .menu { position:fixed; top:12px; right:16px; z-index:10020; }
  header nav#main-navigation .mobile-menu-header { display:flex; align-items:center; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #ffffff1c; }
  header nav#main-navigation .mobile-menu-brand { display:flex; align-items:center; justify-content:center; width:100px; height:64px; padding:4px 8px; border:1px solid #555246; border-radius:10px; background:linear-gradient(135deg,#30332f,#111410); }
  header nav#main-navigation .mobile-menu-brand img { width:100%; height:100%; object-fit:contain; }
}

/* Blog and testimonial links are available in the mobile navigation drawer only. */
header #main-navigation > a.mobile-nav-only { display: none !important; }
@media (max-width: 760px) {
  header #main-navigation > a.mobile-nav-only { display: flex !important; }
}

/* Blog and testimonial footer links are for desktop web view only. */
@media (max-width: 760px) {
  .footer-web-only { display: none !important; }
}

/* Keep the shared mobile drawer above page-specific header overrides. */
@media (max-width: 760px) {
  body > header .menu { display:grid !important; visibility:visible !important; opacity:1 !important; position:relative; z-index:10020; }
  body > header nav#main-navigation { position:fixed !important; inset:0 auto 0 0 !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; width:min(420px,88vw) !important; max-width:88vw !important; height:100dvh !important; padding:24px 20px 40px !important; overflow-y:auto !important; background:#171b17 !important; transform:translateX(-105%) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; z-index:10002 !important; }
  body > header nav#main-navigation.open { transform:translateX(0) !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
  body > header nav#main-navigation > a { display:flex !important; align-items:center; min-height:48px; width:100%; padding:11px 8px; color:#fff; border-bottom:1px solid #ffffff14; }
  body > header nav#main-navigation > a:is(.active, [aria-current="page"]) { color:#ff8b52 !important; background:#ff5a0024 !important; border-left:3px solid #ff8b52 !important; padding-left:10px !important; font-weight:700 !important; }
  body > header nav#main-navigation > a:is(.active, [aria-current="page"]) .nav-icon { color:#ff8b52 !important; }
  body > header nav#main-navigation .mobile-menu-header { display:flex !important; }
  body > header .menu-backdrop { display:block !important; position:fixed !important; inset:0 !important; width:100vw; height:100dvh; z-index:10000; opacity:0; visibility:hidden; pointer-events:none; }
  body > header nav#main-navigation.open + .menu-backdrop { opacity:1; visibility:visible; pointer-events:auto; }
  body.mobile-nav-open { overflow:hidden !important; }
}

/* Keep the shared header pinned consistently across every mobile page. */
@media (max-width: 760px) {
  body > header#header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    align-self: start;
  }
}

/* Prevent page-level horizontal clipping from creating a scroll container that breaks sticky headers. */
body.technology-page,
body.career-page,
body.antialiased.overflow-x-hidden {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Shared footer: keep its navigation and contact details visible on small screens. */
@media (max-width: 760px) {
  .signature-footer.site-footer {
    min-height: 0 !important;
    padding: 30px 20px 86px !important;
    text-align: left !important;
  }
  .signature-footer .footer-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 22px 16px !important;
    max-width: 560px !important;
    padding: 0 0 22px !important;
    text-align: left !important;
  }
  .signature-footer .footer-brand,
  .signature-footer .footer-contact {
    display: flex !important;
    grid-column: 1 / -1 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .signature-footer .footer-brand { align-items: flex-start !important; }
  .signature-footer .footer-brand .logo,
  .signature-footer .footer-brand p,
  .signature-footer .footer-contact,
  .signature-footer .footer-links,
  .signature-footer .footer-bottom,
  .signature-footer .footer-copyright {
    display: block !important;
  }
  .signature-footer .footer-brand .logo { margin: 0 !important; }
  .signature-footer .footer-brand p { max-width: 320px !important; margin: 0 !important; }
  .signature-footer .footer-links { grid-column: auto !important; }
  .signature-footer .footer-links h3,
  .signature-footer .footer-contact h3 { margin: 0 0 8px !important; }
  .signature-footer .footer-main a:not(.logo) { padding: 3px 0 !important; }
  .signature-footer .footer-contact { gap: 7px !important; }
  .signature-footer .footer-bottom { padding-top: 14px !important; text-align: center !important; }
  .signature-footer .footer-copyright { padding-top: 0 !important; }
  .signature-footer .footer-wordmark { top: 48% !important; }
}

/* Slightly reduce the shared footer logo on every page and screen size. */
.signature-footer .footer-brand .logo-mark { width:106px!important; height:64px!important; flex-basis:106px!important; }
.signature-footer .footer-brand .brand-logo { width:92px!important; height:54px!important; }
@media(max-width:760px) {
  .signature-footer .footer-brand .logo-mark { width:86px!important; height:60px!important; flex-basis:86px!important; }
  .signature-footer .footer-brand .brand-logo { width:74px!important; height:50px!important; }
}

/* Keep mobile navigation responsive: animate one composited drawer layer, not every link. */
@media (max-width: 760px) {
  body > header nav#main-navigation {
    opacity: 1 !important;
    transition: transform .22s cubic-bezier(.2,.75,.25,1), visibility 0s linear .22s !important;
    will-change: transform;
    contain: paint;
    backface-visibility: hidden;
  }
  body > header nav#main-navigation.open {
    transition: transform .22s cubic-bezier(.2,.75,.25,1), visibility 0s !important;
  }
  body > header nav#main-navigation > a,
  body > header nav#main-navigation.open > a {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  body > header .menu-backdrop {
    transition: opacity .14s ease, visibility 0s linear .14s !important;
    will-change: opacity;
  }
  body > header nav#main-navigation.open + .menu-backdrop {
    transition: opacity .14s ease, visibility 0s !important;
  }

  /* Preserve the compact mobile footer while the desktop footer stays full. */
  .signature-footer.site-footer {
    min-height: 190px !important;
    padding: 14px 16px calc(62px + env(safe-area-inset-bottom)) !important;
    text-align: center !important;
  }
  .signature-footer .footer-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .signature-footer .footer-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  .signature-footer .footer-brand > .logo,
  .signature-footer .footer-brand > p,
  .signature-footer .footer-links,
  .signature-footer .footer-contact,
  .signature-footer .footer-bottom,
  .signature-footer .footer-copyright {
    display: none !important;
  }
  .signature-footer .footer-signoff { margin: 0 auto !important; }
  .signature-footer .footer-wordmark {
    top: 35% !important;
    font-size: clamp(34px, 10vw, 44px) !important;
  }
}

/* Desktop only: nested service navigation. The mobile drawer keeps its original flat links. */
@media (min-width:761px) {
  body > header nav#main-navigation { overflow:visible; }
  #main-navigation .mobile-menu-header,
  #main-navigation .mobile-nav-links { display:none !important; }
  #main-navigation .desktop-nav-links { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; gap:clamp(5px,.55vw,9px); }
  #main-navigation .desktop-nav-links > a { flex:0 0 auto; }
  #main-navigation .desktop-nav-links > .service-nav-dropdown { margin:0; padding:0; }
  #main-navigation .desktop-nav-links > a.mobile-nav-only[href="/client-testimonials-thoothukudi/"] { display:inline-flex !important; }
  #main-navigation .desktop-nav-links > a.mobile-nav-only[href="/technology-blog/"] { display:none !important; }
  #main-navigation .service-nav-dropdown { position:relative; flex:0 0 auto; }
  #main-navigation .service-nav-trigger { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; min-height:38px; padding:8px 0; border:1px solid transparent; border-radius:9px; background:transparent; color:inherit; font-family:Inter,Arial,sans-serif; font-size:11px; font-weight:400; line-height:1.3; letter-spacing:0; white-space:nowrap; text-transform:uppercase; cursor:pointer; transition:color .18s ease; }
  #main-navigation .service-nav-parent { margin:0 !important; padding:0 !important; }
  #main-navigation .service-nav-trigger:hover,
  #main-navigation .service-nav-dropdown.is-open > .service-nav-trigger,
  #main-navigation .service-nav-branch.is-open > .service-nav-trigger { color:#c94a14; background:transparent; border-color:transparent; }
  #main-navigation .service-nav-menu .service-nav-branch > .service-nav-trigger,
  #main-navigation .service-nav-menu .service-nav-branch > .service-nav-trigger:hover,
  #main-navigation .service-nav-menu .service-nav-branch.is-open > .service-nav-trigger,
  #main-navigation .service-nav-menu .service-nav-branch.is-active > .service-nav-trigger { color:#111 !important; }
  #main-navigation .service-nav-parent { font-weight:700; }
  #main-navigation .service-nav-parent:hover,
  #main-navigation .service-nav-dropdown.is-open > .service-nav-parent { color:#111; background:transparent; border-color:transparent; font-family:Inter,Arial,sans-serif; font-size:11px; font-weight:700; line-height:1.3; letter-spacing:0; }
  #main-navigation .service-nav-trigger .nav-icon { width:12px; flex:0 0 12px; color:var(--orange); font-size:11px; text-align:center; }
  #main-navigation .service-nav-chevron { margin-left:auto; color:#ff8b52; font-size:9px; transition:transform .2s ease; }
  #main-navigation .service-nav-dropdown.is-open > .service-nav-trigger .service-nav-chevron { transform:rotate(180deg); }
  #main-navigation .service-nav-menu,
  #main-navigation .service-nav-submenu { position:absolute; z-index:10030; display:grid; gap:4px; min-width:245px; padding:8px; border:1px solid #e8e8e8; border-radius:14px; background:#fff; box-shadow:0 18px 44px #0002; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(0); transition:opacity .16s ease,visibility .16s; }
  #main-navigation .service-nav-menu { color:#111; }
  #main-navigation .service-nav-menu { top:100%; left:50%; transform:translate(-50%,0); }
  #main-navigation .service-nav-dropdown:hover > .service-nav-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
  #main-navigation .service-nav-branch { position:relative; }
  #main-navigation .service-nav-branch > .service-nav-trigger { display:flex; width:100%; min-height:44px; color:#111 !important; font-family:Inter,Arial,sans-serif; font-size:11px; font-weight:700; line-height:1.3; letter-spacing:0; text-transform:uppercase; }
  #main-navigation .service-nav-branch:hover > .service-nav-trigger,
  #main-navigation .service-nav-branch.is-active > .service-nav-trigger { color:#111 !important; }
  #main-navigation .service-nav-submenu { top:0; left:calc(100% - 1px); min-width:255px; }
  #main-navigation .service-nav-branch:hover > .service-nav-submenu { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
  #main-navigation .service-nav-menu a,
  #main-navigation .service-nav-submenu a { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:38px; padding:9px 11px; border-radius:8px; color:#111; font-family:Inter,Arial,sans-serif; font-size:11px; font-weight:700; line-height:1.3; letter-spacing:0; text-transform:uppercase; white-space:normal; }
  #main-navigation .service-nav-menu a:hover,
  #main-navigation .service-nav-submenu a:hover { color:#c94a14; background:#fff3ed; }
  #main-navigation .service-nav-menu .service-nav-branch > a.service-nav-trigger,
  #main-navigation .service-nav-menu .service-nav-branch:hover > a.service-nav-trigger,
  #main-navigation .service-nav-menu .service-nav-branch.is-active > a.service-nav-trigger,
  #main-navigation .service-nav-menu .service-nav-branch.is-open > a.service-nav-trigger { color:#111 !important; }
  #main-navigation .service-nav-menu .service-nav-branch > a.service-nav-trigger > span { color:#111 !important; }
  #main-navigation .service-nav-menu .service-nav-branch:is(:hover,.is-active) > .service-nav-trigger { color:#111 !important; }
  #main-navigation .service-nav-menu .service-nav-all,
  #main-navigation .service-nav-submenu .service-nav-all { margin-bottom:3px; border-bottom:1px solid #e8e8e8; border-radius:8px 8px 4px 4px; color:#c94a14; font-weight:700; }
  #main-navigation .service-nav-menu a span,
  #main-navigation .service-nav-submenu a span { color:#ff8b52; }
  #main-navigation .service-nav-menu .service-nav-branch > a.service-nav-trigger > span,
  #main-navigation .service-nav-menu .service-nav-branch:hover > a.service-nav-trigger > span,
  #main-navigation .service-nav-menu .service-nav-branch.is-active > a.service-nav-trigger > span,
  #main-navigation .service-nav-menu .service-nav-branch.is-open > a.service-nav-trigger > span { color:#111 !important; }
}
@media (min-width:761px) and (max-width:1100px) {
  #main-navigation .desktop-nav-links { gap:4px; }
  #main-navigation .desktop-nav-links > a { gap:3px; font-size:10px !important; letter-spacing:-.02em; }
  #main-navigation .desktop-nav-links > a .nav-icon { width:10px; font-size:9px; }
  #main-navigation .service-nav-trigger { gap:4px; padding:8px 0 !important; font-size:10px !important; }
  #main-navigation .service-nav-trigger .nav-icon { width:10px; flex-basis:10px; font-size:9px; }
}
@media (max-width:760px) {
  body > header nav#main-navigation { width:70vw !important; max-width:70vw !important; }
  #main-navigation .desktop-nav-links { display:none !important; }
  #main-navigation .mobile-nav-links { display:flex !important; flex-direction:column; align-items:stretch; width:100%; }
  body > header nav#main-navigation > .mobile-nav-links > a { display:flex !important; align-items:center; justify-content:flex-start !important; min-height:48px; width:100%; padding:11px 8px; color:#fff; border-bottom:1px solid #ffffff14; text-align:left !important; }
  body > header nav#main-navigation > .mobile-nav-links > a:is(.active,[aria-current="page"]) { color:#ff8b52 !important; background:#ff5a0024 !important; border-left:3px solid #ff8b52 !important; padding-left:10px !important; font-weight:700 !important; }
  body > header nav#main-navigation > .mobile-nav-links > a:is(.active,[aria-current="page"]) .nav-icon { color:#ff8b52 !important; }
  body > header nav#main-navigation .mobile-service-group { width:100%; border-bottom:1px solid #ffffff14; }
  body > header nav#main-navigation .mobile-service-parent { display:flex; align-items:center; justify-content:flex-start; gap:12px; min-height:48px; width:100%; padding:11px 8px; border:0; background:transparent; color:#fff; font:inherit; text-align:left; cursor:pointer; }
  body > header nav#main-navigation .mobile-service-parent .nav-icon { width:16px; color:var(--orange); text-align:center; }
  body > header nav#main-navigation .mobile-service-parent .service-nav-chevron { margin-left:auto; transition:transform .2s ease; }
  body > header nav#main-navigation .mobile-service-group.is-open > .mobile-service-parent .service-nav-chevron { transform:rotate(180deg); }
  body > header nav#main-navigation .mobile-service-group.is-active > .mobile-service-parent { color:#ff8b52; }
  body > header nav#main-navigation .mobile-service-submenu { display:none; padding:0 0 8px 28px; }
  body > header nav#main-navigation .mobile-service-group.is-open > .mobile-service-submenu { display:grid; }
  body > header nav#main-navigation .mobile-service-submenu a { display:flex; justify-content:space-between; align-items:center; min-height:36px; padding:7px 10px; color:#d6d8dd; font-size:10px; border-left:1px solid #ffffff20; }
  body > header nav#main-navigation .mobile-service-submenu a span { color:#ff8b52; }
}

/* Shared Contact hover hint, matching the Contact page's eyebrow label. */
header nav a[href="/contact-onepixel-technologies-thoothukudi/"] { position: relative; }
header nav a[href="/contact-onepixel-technologies-thoothukudi/"]::after {
    content: "Contact / Let's connect";
    position: absolute;
    z-index: 10010;
    top: calc(100% + 12px);
    left: 50%;
    padding: 8px 12px;
    border: 1px solid #ff8b5266;
    border-radius: 7px;
    background: #17191f;
    box-shadow: 0 10px 24px #0003;
    color: #fff;
    font: 10px/1.2 "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .04em;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -5px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
header nav a[href="/contact-onepixel-technologies-thoothukudi/"]:is(:hover, :focus-visible, :focus-within)::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.site-tools a.call-tool { position: relative; }
.site-tools a.call-tool::after,
.mobile-contact-bar a[href="/start-a-project-thoothukudi/"]::after {
    content: "Contact / Let's connect";
    position: absolute;
    z-index: 10010;
    padding: 8px 12px;
    border: 1px solid #ff8b5266;
    border-radius: 7px;
    background: #17191f;
    box-shadow: 0 10px 24px #0003;
    color: #fff;
    font: 10px/1.2 "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.site-tools a.call-tool::after { top: 50%; right: calc(100% + 10px); transform: translate(5px, -50%); }
.mobile-contact-bar a[href="/start-a-project-thoothukudi/"] { position: relative; }
.mobile-contact-bar a[href="/start-a-project-thoothukudi/"]::after { right: 0; bottom: calc(100% + 10px); transform: translateY(5px); }
.site-tools a.call-tool:is(:hover, :focus-visible, :focus-within)::after,
.mobile-contact-bar a[href="/start-a-project-thoothukudi/"]:is(:hover, :focus-visible, :focus-within, :active)::after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}
.mobile-contact-bar a[href="/start-a-project-thoothukudi/"]:is(:hover, :focus-visible, :focus-within, :active)::after { transform: translateY(0); }

/* Final index carousel overrides: legacy mobile rules above switch these to grids. */
#process.delivery-studio .process-steps {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 4px 2px 12px;
}
#process.delivery-studio .process-steps > .step {
  flex: 0 0 calc((100% - 20px) / 3);
  width: auto;
  min-width: 0;
  scroll-snap-align: start;
}
#work .project-carousel { min-width: 0; max-width: 100%; overflow: hidden; }
#work .projects {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
@media (max-width: 760px) {
  #process.delivery-studio .process-steps > .step { flex-basis: 82%; }
  #work .project { flex: 0 0 100%; width: 100%; }
}
@media (max-width: 520px) {
  #process.delivery-studio .process-steps { display: flex !important; grid-template-columns: none !important; }
  #process.delivery-studio .process-steps > .step { flex-basis: 88%; width: auto; min-height: 166px; }
}

/* Keep desktop service category labels black in every state. */
@media (min-width:761px) {
  body > header nav#main-navigation .desktop-nav-links .service-nav-menu .service-nav-branch > a.service-nav-trigger,
  body > header nav#main-navigation .desktop-nav-links .service-nav-menu .service-nav-branch > a.service-nav-trigger:hover,
  body > header nav#main-navigation .desktop-nav-links .service-nav-menu .service-nav-branch.is-active > a.service-nav-trigger,
  body > header nav#main-navigation .desktop-nav-links .service-nav-menu .service-nav-branch.is-open > a.service-nav-trigger {
    color:#111 !important;
  }
}

/* Shared project spotlight cards: rating, project, description, related work. */
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  min-height: 0;
  padding: 14px;
  border: 1px solid #303641;
  border-radius: 12px;
  background: #1a1d25;
  color: #eef0f4;
}
.testimonial-card .testimonial-card-rating {
  display: block;
  margin: 0 0 10px;
  color: #ff8a50;
  font: 700 14px/1 Inter, Arial, sans-serif;
  letter-spacing: 2px;
}
.testimonial-card p {
  flex: 0 1 auto;
  margin: 0;
  color: #c3c9d1;
  font: 400 11px/1.5 Inter, Arial, sans-serif;
}
.testimonial-card .testimonial-card-related {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ffffff14;
}
#company .testimonial-card,
#contact-testimonials .testimonial-card { min-height: 0; padding: 14px; }
#company .testimonial-card .testimonial-card-rating,
#contact-testimonials .testimonial-card .testimonial-card-rating { margin-bottom: 10px; }
#company .testimonial-card p,
#contact-testimonials .testimonial-card p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; flex: 0 1 auto; margin: 0; font-size: 13px; line-height: 1.5; }
#company .testimonial-card .testimonial-card-related,
#contact-testimonials .testimonial-card .testimonial-card-related { gap: 3px; margin-top: 10px; padding-top: 8px; }
#company .testimonial-card .testimonial-card-related,
#contact-testimonials .testimonial-card .testimonial-card-related { width:100%; justify-items:start; margin:0 0 0 0; padding:8px 0 0 !important; text-align:left !important; }
#company .testimonial-card .testimonial-card-rating,
#contact-testimonials .testimonial-card .testimonial-card-rating { align-self:flex-start; margin-left:0; text-align:left !important; }
#company .testimonial-card p,
#contact-testimonials .testimonial-card p { align-self:flex-start; width:100%; margin-left:0; text-align:left !important; }
.testimonial-card .testimonial-card-related > span {
  color: #8993a0;
  font: 700 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .9px;
}
.testimonial-card .testimonial-card-related > small {
  color: #ffad81;
  font: 500 9px/1.5 Inter, Arial, sans-serif;
}
.testimonial-card .testimonial-card-related > a,
#company .testimonial-card .testimonial-card-related > a,
#contact-testimonials .testimonial-card .testimonial-card-related > a { width:fit-content; color:#ffad81; font:500 9px/1.5 Inter,Arial,sans-serif; text-decoration:none; }
#company .testimonial-card .testimonial-card-related > a,
#contact-testimonials .testimonial-card .testimonial-card-related > a { color:#ffad81 !important; font-size:9px !important; }
.testimonial-card .testimonial-card-related > a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
#company .testimonial-card { flex-basis: 315px; }
@media (max-width: 760px) {
  #company .testimonial-card { flex-basis: 278px; }
}