/* ── TOKENS ── */
:root {
    --c-bg: #EDE7C7;
    /* Vanilla Cream */
    --c-surface: #ffffff;
    --c-card: rgba(255, 255, 255, .9);
    --c-card-h: rgba(204, 0, 0, .05);
    --c-border: rgba(20, 9, 1, .1);
    --c-border-v: rgba(91, 2, 2, .15);
    --brick-ember: #CC0000;
    /* Brick Ember */
    --c-green: #00a86b;
    --black-cherry: #5B0202;
    /* Black Cherry */
    --c-amber: #f59e0b;
    --c-pink: #ec4899;
    --c-text: #140901;
    --c-cyan: #479A91;
    --c-violet: #2B1DAF;
    /* Pitch Black */
    --c-muted: #3D3830;
    --c-head: #140901;
    --ff-title: 'Orbitron', sans-serif;
    --ff-body: 'Inter', sans-serif;
    --ff-mono: 'Share Tech Mono', monospace;
    --glow-cyan: 0 0 18px rgba(204, 0, 0, .28), 0 14px 40px rgba(204, 0, 0, .14);
    --glow-violet: 0 0 18px rgba(91, 2, 2, .24), 0 14px 40px rgba(91, 2, 2, .12);
    --glow-green: 0 0 12px rgba(0, 168, 107, .28);
    --glow-amber: 0 0 12px rgba(245, 158, 11, .24);
}

/* ── BASE ── */
body {
    background: var(--c-bg) !important;
    color: var(--c-text) !important;
    font-family: var(--ff-body) !important;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── ANIMATED GRID ── */
.gt-page-wrap {
    position: relative;
    overflow: hidden;
}

.gt-page-wrap::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(204, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204, 0, 0, .03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
    animation: gridPulse 8s ease-in-out infinite;
}

.gt-page-wrap::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 90% 55% at 50% -5%, rgba(204, 0, 0, .12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: .7
    }

    50% {
        opacity: 1
    }
}

.container {
    position: relative;
    z-index: 1;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ── HERO ── */
.hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(237, 231, 199, .82) 45%, rgba(250, 250, 247, .9) 100%),
        url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1920&q=70') center/cover no-repeat !important;
    padding: 110px 0 90px !important;
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -80px;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(91, 2, 2, .12) 0%, transparent 70%);
    pointer-events: none;
    animation: orb2 14s ease-in-out infinite alternate;
}

@keyframes orb1 {
    0% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(60px, 40px)
    }
}

@keyframes orb2 {
    0% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(-50px, -30px)
    }
}

.hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 3.5rem !important;
    align-items: center !important;
}

.hero-grid>div,
.two-col>div {
    min-width: 0;
    max-width: 100%;
}

/* eyebrow */
.eyebrow {
    font-family: var(--ff-mono) !important;
    font-size: .78rem !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    color: var(--brick-ember) !important;
    margin-bottom: 1rem !important;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.eyebrow::before {
    content: '//';
    opacity: .6;
}

.eyebrow.center {
    justify-content: center !important;
}

.eyebrow.no-slash::before {
    display: none !important;
}

.hero h1 {
    font-family: var(--ff-title) !important;
    font-size: clamp(1.85rem, 3.5vw, 2.9rem) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: 0;
    color: var(--c-head) !important;
    text-shadow: 0 0 40px rgba(204, 0, 0, .25), 0 2px 4px rgba(204, 0, 0, .14) !important;
    margin-bottom: 1.3rem !important;
}


.hero-subtext {
    font-size: 1.08rem !important;
    color: #39506c !important;
    line-height: 1.85 !important;
    margin-bottom: 2rem !important;
    font-weight: 500 !important;
    max-width: 520px;
}

.company-tagline {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 620px;
    margin: -.45rem 0 1.6rem !important;
    padding: .72rem 1rem;
    border: 1px solid rgba(204, 0, 0, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    color: var(--c-text) !important;
    font-family: var(--ff-mono) !important;
    font-size: .78rem !important;
    letter-spacing: .05em;
    line-height: 1.5 !important;
    box-shadow: 0 12px 30px rgba(0, 82, 204, .1);
}

.company-tagline i {
    color: var(--brick-ember);
    filter: drop-shadow(0 0 8px rgba(204, 0, 0, .35));
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
}

.btn-primary {
    font-family: var(--ff-title) !important;
    font-size: .72rem !important;
    letter-spacing: .1em !important;
    background: rgba(204, 0, 0, .1) !important;
    color: var(--brick-ember) !important;
    border: 1px solid rgba(204, 0, 0, .45) !important;
    padding: .82rem 1.65rem !important;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
    box-shadow: var(--glow-cyan) !important;
    transition: background .25s, box-shadow .25s, color .25s !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.btn-primary:hover {
    background: rgba(204, 0, 0, .2) !important;
    box-shadow: 0 0 24px rgba(204, 0, 0, .75), 0 0 55px rgba(204, 0, 0, .3) !important;
    color: #fff !important;
}

.btn-outline {
    font-family: var(--ff-title) !important;
    font-size: .72rem !important;
    letter-spacing: .1em !important;
    background: rgba(91, 2, 2, .07) !important;
    color: var(--black-cherry) !important;
    border: 1px solid rgba(91, 2, 2, .4) !important;
    padding: .82rem 1.65rem !important;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
    box-shadow: var(--glow-violet) !important;
    transition: background .25s, box-shadow .25s, color .25s !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.btn-outline:hover {
    background: rgba(91, 2, 2, .15) !important;
    box-shadow: 0 0 24px rgba(91, 2, 2, .75), 0 0 55px rgba(91, 2, 2, .3) !important;
    color: #fff !important;
}

.btn-dark {
    font-family: var(--ff-title) !important;
    font-size: .7rem !important;
    letter-spacing: .1em !important;
    padding: .82rem 1.65rem !important;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none !important;
    background: var(--brick-ember) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: var(--glow-cyan) !important;
    font-weight: 700;
    transition: background .25s, box-shadow .25s !important;
}

.btn-dark:hover {
    background: var(--black-cherry) !important;
    box-shadow: 0 0 24px rgba(204, 0, 0, .9), 0 0 55px rgba(204, 0, 0, .35) !important;
}

.btn-ghost {
    font-family: var(--ff-title) !important;
    font-size: .7rem !important;
    letter-spacing: .1em !important;
    padding: .82rem 1.65rem !important;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none !important;
    background: rgba(91, 2, 2, .08) !important;
    color: var(--black-cherry) !important;
    border: 1px solid rgba(91, 2, 2, .35) !important;
    box-shadow: var(--glow-violet) !important;
    transition: background .25s, box-shadow .25s, color .25s !important;
}

.btn-ghost:hover {
    background: rgba(91, 2, 2, .15) !important;
    box-shadow: 0 0 24px rgba(91, 2, 2, .8) !important;
    color: #fff !important;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.hero-badge {
    font-family: var(--ff-mono) !important;
    font-size: .73rem !important;
    background: rgba(204, 0, 0, .06) !important;
    border: 1px solid rgba(204, 0, 0, .2) !important;
    color: var(--brick-ember) !important;
    padding: .38rem .85rem !important;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

.hero-badge .dot {
    width: 6px;
    height: 6px;
    background: var(--c-green);
    border-radius: 50%;
    box-shadow: var(--glow-green);
    animation: blink 1.6s ease-in-out infinite;
    display: inline-block;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .2
    }
}

/* hero image */
.image-card {
    position: relative;
    border: 1px solid rgba(204, 0, 0, .25) !important;
    background: var(--c-card) !important;
    overflow: hidden !important;
    box-shadow: var(--glow-cyan), inset 0 0 60px rgba(204, 0, 0, .04) !important;
    border-radius: 2px;
}

.image-card::before,
.image-card::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--brick-ember);
    border-style: solid;
    z-index: 2;
}

.image-card::before {
    top: 8px;
    left: 8px;
    border-width: 2px 0 0 2px;
}

.image-card::after {
    bottom: 8px;
    right: 8px;
    border-width: 0 2px 2px 0;
}

.image-card img {
    width: 100%;
    display: block;
    filter: none !important;
    mix-blend-mode: normal;
    opacity: 1;
    transition: transform .4s;
}

.image-card:hover img {
    transform: scale(1.02);
}

.image-card .scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent, transparent 3px, rgba(71, 154, 145, .035) 3px, rgba(71, 154, 145, .035) 4px);
    pointer-events: none;
    z-index: 3;
}

/* ── MONITOR SCENE ── */
.monitor-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 26px 36px rgba(20, 9, 1, .2));
    animation: monFloat 4s ease-in-out infinite;
    width: 100%;
    min-width: 0;
}

@keyframes monFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

/* monitor body */
.monitor-body {
    width: min(420px, 100%);
    max-width: 100%;
    background: linear-gradient(160deg, #EDE7C7 0%, #d8d2b2 100%);
    border-radius: 12px;
    border: 2px solid rgba(71, 154, 145, .35);
    box-shadow: 0 0 0 1px rgba(71, 154, 145, .08), inset 0 0 40px rgba(71, 154, 145, .04);
    overflow: hidden;
    position: relative;
}

/* top bar */
.monitor-bar {
    height: 28px;
    background: linear-gradient(90deg, #d8d2b2, #EDE7C7);
    border-bottom: 1px solid rgba(71, 154, 145, .15);
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
}

.monitor-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.monitor-dot:nth-child(1) {
    background: #ff5f57;
}

.monitor-dot:nth-child(2) {
    background: #ffbd2e;
}

.monitor-dot:nth-child(3) {
    background: #28c840;
}

.monitor-tab {
    margin-left: auto;
    font-family: var(--ff-mono);
    font-size: .52rem;
    letter-spacing: .14em;
    color: rgba(71, 154, 145, .5);
    padding: 2px 8px;
    border: 1px solid rgba(71, 154, 145, .15);
    border-radius: 3px;
    transition: color .3s;
}

/* screen area */
.monitor-screen {
    height: 280px;
    position: relative;
    overflow: hidden;
}

/* individual panels */
.mon-panel {
    position: absolute;
    inset: 0;
    padding: 14px 16px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .55s ease, transform .55s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.mon-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ── PANEL 1: Dashboard ── */
.mon-dash-header {
    font-family: var(--ff-mono);
    font-size: .58rem;
    letter-spacing: .18em;
    color: rgba(71, 154, 145, .6);
    text-transform: uppercase;
}

.mon-stat-row {
    display: flex;
    gap: 10px;
}

.mon-stat {
    flex: 1;
    background: rgba(71, 154, 145, .05);
    border: 1px solid rgba(71, 154, 145, .12);
    border-radius: 6px;
    padding: 8px 10px;
}

.mon-stat-val {
    font-family: var(--ff-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: #479A91;
}

.mon-stat-lbl {
    font-size: .55rem;
    color: rgba(33, 49, 73, .55);
    margin-top: 2px;
}

.mon-bar-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mon-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mon-bar-lbl {
    font-family: var(--ff-mono);
    font-size: .52rem;
    color: rgba(33, 49, 73, .58);
    width: 60px;
    flex-shrink: 0;
}

.mon-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(71, 154, 145, .1);
    border-radius: 3px;
    overflow: hidden;
}

.mon-bar-fill {
    height: 100%;
    border-radius: 3px;
    animation: monBarGrow 1.2s ease forwards;
    transform-origin: left;
}

@keyframes monBarGrow {
    from {
        width: 0
    }
}

/* ── KPI card row ── */
.mon-kpi-row {
    display: flex;
    gap: 8px;
}

.mon-kpi {
    flex: 1;
    border-radius: 7px;
    padding: 9px 10px;
    background: linear-gradient(135deg, rgba(71, 154, 145, .07), rgba(43, 29, 175, .04));
    border: 1px solid rgba(71, 154, 145, .14);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mon-kpi-val {
    font-family: var(--ff-mono);
    font-size: 1.15rem;
    font-weight: 700;
}

.mon-kpi-lbl {
    font-size: .52rem;
    color: rgba(33, 49, 73, .55);
}

.mon-kpi-delta {
    font-family: var(--ff-mono);
    font-size: .5rem;
    margin-top: 2px;
}

/* ── donut ring ── */
.mon-donut-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.mon-donut {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
}

.mon-donut-labels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.mon-donut-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ff-mono);
    font-size: .54rem;
    color: rgba(33, 49, 73, .68);
}

.mon-donut-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mon-donut-pct {
    margin-left: auto;
    font-weight: 700;
}

/* ── geo map ── */
.mon-geo {
    flex: 1;
    position: relative;
}

.mon-geo svg {
    width: 100%;
    height: 100%;
}

.mon-geo-dot {
    fill: #479A91;
    filter: drop-shadow(0 0 4px #479A91);
    animation: geoPulse 2s ease-in-out infinite;
}

.mon-geo-dot:nth-child(2) {
    animation-delay: .5s;
    fill: #2B1DAF;
    filter: drop-shadow(0 0 4px #2B1DAF)
}

.mon-geo-dot:nth-child(3) {
    animation-delay: 1s;
    fill: #c084fc;
    filter: drop-shadow(0 0 4px #c084fc)
}

.mon-geo-dot:nth-child(4) {
    animation-delay: 1.5s
}

@keyframes geoPulse {

    0%,
    100% {
        r: 4;
        opacity: 1
    }

    50% {
        r: 7;
        opacity: .5
    }
}

/* ── sprint board ── */
.mon-sprint-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mon-sprint-name {
    font-family: var(--ff-mono);
    font-size: .56rem;
    color: rgba(33, 49, 73, .68);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mon-sprint-track {
    width: 80px;
    height: 5px;
    background: rgba(71, 154, 145, .1);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.mon-sprint-fill {
    height: 100%;
    border-radius: 3px;
}

.mon-sprint-pct {
    font-family: var(--ff-mono);
    font-size: .5rem;
    color: rgba(33, 49, 73, .48);
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.mon-sprint-tag {
    font-family: var(--ff-mono);
    font-size: .44rem;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── PANEL 3: Analytics chart ── */
.mon-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.mon-chart-title {
    font-family: var(--ff-mono);
    font-size: .56rem;
    letter-spacing: .16em;
    color: rgba(71, 154, 145, .6);
}

.mon-chart-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.mon-chart-area svg {
    width: 100%;
    height: 100%;
}

.mon-chart-line {
    fill: none;
    stroke: #479A91;
    stroke-width: 2;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawLine 2s ease forwards;
}

.mon-chart-line2 {
    fill: none;
    stroke: #2B1DAF;
    stroke-width: 1.5;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawLine 2.4s .3s ease forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.mon-chart-fill {
    fill: url(#chartGrad);
    opacity: .18;
}

.mon-legend {
    display: flex;
    gap: 14px;
}

.mon-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ff-mono);
    font-size: .52rem;
    color: rgba(33, 49, 73, .58);
}

.mon-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ── PANEL 4: Network map ── */
.mon-net {
    position: relative;
    width: 100%;
    flex: 1;
}

.mon-net svg {
    width: 100%;
    height: 100%;
}

.net-node {
    animation: netPulse 2.4s ease-in-out infinite;
}

.net-node:nth-child(2) {
    animation-delay: .4s
}

.net-node:nth-child(3) {
    animation-delay: .8s
}

.net-node:nth-child(4) {
    animation-delay: 1.2s
}

.net-node:nth-child(5) {
    animation-delay: 1.6s
}

@keyframes netPulse {

    0%,
    100% {
        opacity: .5
    }

    50% {
        opacity: 1
    }
}

.net-link {
    stroke: rgba(71, 154, 145, .25);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    animation: netDash 3s linear infinite;
}

@keyframes netDash {
    to {
        stroke-dashoffset: -24;
    }
}

.mon-net-title {
    font-family: var(--ff-mono);
    font-size: .56rem;
    letter-spacing: .16em;
    color: rgba(71, 154, 145, .5);
    margin-bottom: 6px;
}

/* status bar */
.monitor-status {
    height: 22px;
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid rgba(71, 154, 145, .1);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 14px;
    font-family: var(--ff-mono);
    font-size: .52rem;
    color: rgba(71, 154, 145, .45);
}

#monStatusTxt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.mon-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
    animation: monStatusBlink 1.4s ease-in-out infinite;
}

@keyframes monStatusBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

/* stand */
.monitor-stand {
    width: 60px;
    height: 22px;
    background: linear-gradient(180deg, #EDE7C7, #d8d2b2);
    border: 2px solid rgba(71, 154, 145, .2);
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin: 0 auto;
}

.monitor-base {
    width: 140px;
    height: 10px;
    background: linear-gradient(180deg, #EDE7C7, #d8d2b2);
    border: 1px solid rgba(71, 154, 145, .15);
    border-radius: 4px;
    margin: 0 auto;
}

.floating-chip {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    font-family: var(--ff-mono) !important;
    font-size: .72rem !important;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(71, 154, 145, .25);
    color: #479A91 !important;
    padding: .55rem 1rem;
    backdrop-filter: blur(8px);
    animation: chipFloat 3s ease-in-out infinite;
    z-index: 4;
}

@keyframes chipFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}

/* ── extra panel components ── */
.mon-pipe {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.mon-pipe-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mon-pipe-stage {
    font-family: var(--ff-mono);
    font-size: .58rem;
    padding: 3px 10px;
    border: 1px solid rgba(71, 154, 145, .2);
    border-radius: 4px;
    color: rgba(33, 49, 73, .48);
    white-space: nowrap;
}

.mon-pipe-active {
    background: rgba(251, 191, 36, .12) !important;
    border-color: rgba(251, 191, 36, .4) !important;
    color: #fbbf24 !important;
    animation: pipePulse 1.2s ease-in-out infinite;
}

@keyframes pipePulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .55
    }
}

.mon-pipe-time {
    font-family: var(--ff-mono);
    font-size: .52rem;
    color: rgba(33, 49, 73, .36);
    margin-left: auto;
}

.mon-api-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mon-api-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-mono);
    font-size: .57rem;
}

.mon-api-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mon-api-name {
    flex: 1;
    color: rgba(33, 49, 73, .68);
}

.mon-api-ms {
    color: rgba(33, 49, 73, .42);
    width: 52px;
    text-align: right;
}

.mon-api-code {
    width: 34px;
    text-align: right;
    font-weight: 700;
}

.mon-uptime-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.mon-uptime-block {
    width: 10px;
    height: 18px;
    border-radius: 2px;
    opacity: .85;
}

.mon-log {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mon-log-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ff-mono);
    font-size: .54rem;
}

.mon-log-time {
    color: rgba(33, 49, 73, .36);
    flex-shrink: 0;
}

.mon-log-badge {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: .5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mon-log-msg {
    color: rgba(33, 49, 73, .62);
}

.mon-log-blink {
    animation: logBlink 1.4s ease-in-out infinite;
}

@keyframes logBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .4
    }
}

/* ── STATS BAND ── */
.stats {
    background: rgba(255, 255, 255, .86);
    border-top: 1px solid rgba(204, 0, 0, .08);
    border-bottom: 1px solid rgba(204, 0, 0, .08);
    padding: 48px 0 !important;
    backdrop-filter: blur(8px);
}

.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}

.stat-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brick-ember), transparent);
    transform: scaleX(0);
    transition: transform .4s;
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(204, 0, 0, .4);
    box-shadow: var(--glow-cyan), 0 16px 40px rgba(20, 9, 1, .14);
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--brick-ember);
    margin-bottom: .75rem;
    text-shadow: var(--glow-cyan);
}

.stat-value {
    font-family: var(--ff-title) !important;
    font-size: 2.6rem !important;
    font-weight: 900 !important;
    color: var(--c-head) !important;
    line-height: 1.1;
    margin-bottom: .4rem;
    background: linear-gradient(135deg, #CC0000, #5B0202);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-card p {
    font-size: .9rem !important;
    color: var(--c-muted) !important;
    font-weight: 500;
    margin: 0;
}

/* ── SECTION BACKGROUNDS ── */
.section-bg {
    background:
        linear-gradient(180deg, rgba(237, 231, 199, .9) 0%, rgba(216, 210, 178, .92) 100%),
        url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1920&q=65') center/cover no-repeat fixed !important;
    padding: 90px 0 !important;
    border-top: 1px solid rgba(204, 0, 0, .07);
    border-bottom: 1px solid rgba(204, 0, 0, .07);
}

/* ── SECTION HEADERS ── */
.section-head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 3.5rem;
}

.section-head h2 {
    font-family: var(--ff-title) !important;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    color: var(--c-head) !important;
    text-shadow: 0 0 28px rgba(204, 0, 0, .2) !important;
    margin: .85rem 0 1.1rem !important;
}

.section-head p {
    color: #465c78 !important;
    font-size: 1.08rem !important;
    line-height: 1.85 !important;
}

/* ── INFO CARDS GRID ── */
.cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px)) !important;
    justify-content: center !important;
    gap: 1.5rem !important;
}

.info-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    padding: 2rem 1.75rem;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s, background .3s;
}

.info-card::before,
.info-card::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--brick-ember);
    border-style: solid;
    z-index: 2;
    transition: width .3s, height .3s;
}

.info-card::before {
    top: 6px;
    left: 6px;
    border-width: 1.5px 0 0 1.5px;
}

.info-card::after {
    bottom: 6px;
    right: 6px;
    border-width: 0 1.5px 1.5px 0;
}

.info-card:hover {
    transform: translateY(-5px);
    background: var(--c-card-h);
    border-color: rgba(204, 0, 0, .45);
    box-shadow: var(--glow-cyan), 0 20px 40px rgba(20, 9, 1, .16);
}

.info-card:hover::before,
.info-card:hover::after {
    width: 18px;
    height: 18px;
}

.info-card .scan-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brick-ember), transparent);
    transform: scaleX(0);
    transition: transform .4s;
}

.info-card:hover .scan-top {
    transform: scaleX(1);
}

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    position: relative;
}

.card-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid currentColor;
    opacity: .3;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.card-icon-blue {
    color: var(--brick-ember);
    background: rgba(204, 0, 0, .07);
}

.card-icon-sky {
    color: var(--black-cherry);
    background: rgba(56, 189, 248, .07);
}

.card-icon-violet {
    color: var(--black-cherry);
    background: rgba(192, 132, 252, .07);
}

.card-icon-emerald {
    color: var(--c-green);
    background: rgba(74, 222, 128, .07);
}

.info-card h3 {
    font-family: var(--ff-title) !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    color: var(--c-head) !important;
    letter-spacing: .04em !important;
    margin-bottom: .75rem !important;
}

.info-card p {
    font-size: .96rem !important;
    color: #b8ccdf !important;
    line-height: 1.78 !important;
    margin: 0 !important;
}

/* ── TWO-COL PROCESS ── */
.two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3.5rem !important;
    align-items: center !important;
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.two-col h2 {
    font-family: var(--ff-title) !important;
    font-size: clamp(1.45rem, 2.5vw, 2rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    color: var(--c-head) !important;
    text-shadow: 0 0 24px rgba(204, 0, 0, .2) !important;
    margin: .7rem 0 1rem !important;
}

.two-col>div>p {
    color: #465c78 !important;
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.5rem !important;
}

/* timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-left: 8px;
}

.timeline-item {
    font-size: .97rem;
    color: var(--c-text);
    padding: .9rem 1.1rem .9rem 1.3rem;
    border-left: 2px solid rgba(204, 0, 0, .3);
    background: rgba(204, 0, 0, .04);
    position: relative;
    transition: border-color .25s, background .25s, transform .25s;
    cursor: default;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -5px;
    width: 8px;
    height: 8px;
    background: var(--brick-ember);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: var(--glow-cyan);
    transition: transform .25s;
}

.timeline-item:hover {
    border-color: var(--brick-ember);
    background: rgba(204, 0, 0, .08);
    transform: translateX(4px);
}

.timeline-item:hover::before {
    transform: translateY(-50%) scale(1.4);
}

.timeline-item strong {
    color: var(--brick-ember);
}

/* ── CTA BAND ── */
.cta-band {
    background:
        linear-gradient(90deg, rgba(237, 231, 199, .9) 0%, rgba(216, 210, 178, .92) 50%, rgba(237, 231, 199, .94) 100%),
        url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1920&q=65') center/cover no-repeat !important;
    border-top: 1px solid rgba(204, 0, 0, .1) !important;
    border-bottom: 1px solid rgba(204, 0, 0, .1) !important;
    padding: 70px 0 !important;
    position: relative;
    overflow: hidden;
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 100% at 50% 110%, rgba(204, 0, 0, .05) 0%, transparent 70%);
    pointer-events: none;
}

.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.cta-band h2 {
    font-family: var(--ff-title) !important;
    font-size: clamp(1.25rem, 2.5vw, 1.8rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    color: var(--c-head) !important;
    margin-bottom: .45rem !important;
    text-shadow: 0 0 24px rgba(204, 0, 0, .2) !important;
}

.cta-band p {
    color: #465c78 !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

/* ── REVEAL ANIMATIONS ── */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity .7s ease, transform .7s ease;
}

.reveal {
    transform: translateY(30px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1 !important;
    transform: none !important;
}

.delay-1 {
    transition-delay: .1s !important;
}

.delay-2 {
    transition-delay: .2s !important;
}

.delay-3 {
    transition-delay: .3s !important;
}

.delay-4 {
    transition-delay: .4s !important;
}

/* ── LIGHT GAMING THEME OVERRIDES ── */
.gt-page-wrap {
    background:
        linear-gradient(rgba(204, 0, 0, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 2, 2, .06) 1px, transparent 1px),
        linear-gradient(180deg, #EDE7C7 0%, #dcd6b6 54%, #EDE7C7 100%);
    background-size: 54px 54px, 54px 54px, auto;
}

.gt-page-wrap::before {
    background-image:
        linear-gradient(rgba(204, 0, 0, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 2, 2, .09) 1px, transparent 1px);
}

.gt-page-wrap::after {
    background:
        linear-gradient(120deg, rgba(204, 0, 0, .15), transparent 34%),
        linear-gradient(300deg, rgba(91, 2, 2, .15), transparent 42%);
}

.hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .8) 0%, rgba(237, 231, 199, .72) 48%, rgba(255, 255, 255, .8) 100%),
        url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=75') center/cover no-repeat !important;
    border-bottom: 1px solid rgba(20, 9, 1, .14);
}

.hero h1,
.section-head h2,
.two-col h2,
.cta-band h2,
.info-card h3 {
    color: var(--c-head) !important;
    text-shadow: 0 0 22px rgba(204, 0, 0, .18) !important;
}

.hero-subtext,
.section-head p,
.two-col>div>p,
.cta-band p,
.info-card p {
    color: #465c78 !important;
}

.hero-subtext {
    color: #213149 !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .65) !important;
}

.btn-primary,
.btn-dark {
    background: linear-gradient(135deg, #CC0000, #5B0202) !important;
    color: #fff !important;
    border-color: rgba(204, 0, 0, .32) !important;
}

.btn-primary:hover,
.btn-dark:hover {
    background: linear-gradient(135deg, #5B0202, #CC0000) !important;
    color: #fff !important;
}

.btn-outline,
.btn-ghost {
    background: rgba(255, 255, 255, .78) !important;
    color: var(--c-text) !important;
    border-color: var(--c-border) !important;
}

.btn-outline:hover,
.btn-ghost:hover {
    background: var(--c-text) !important;
    color: var(--c-bg) !important;
}

.hero-badge,
.floating-chip {
    background: rgba(255, 255, 255, .82) !important;
    border-color: rgba(204, 0, 0, .2) !important;
    color: var(--brick-ember) !important;
    box-shadow: 0 10px 28px rgba(20, 9, 1, .12);
}

.monitor-wrap {
    filter: drop-shadow(0 26px 36px rgba(20, 9, 1, .2));
}

.monitor-body {
    background: linear-gradient(160deg, #140901, #0a0400) !important;
    border-color: rgba(71, 154, 145, .35) !important;
    box-shadow: 0 0 0 1px rgba(71, 154, 145, .2), 0 22px 60px rgba(0, 0, 0, .4), inset 0 0 36px rgba(71, 154, 145, .1) !important;
}

.monitor-bar,
.monitor-status,
.monitor-stand,
.monitor-base {
    background: linear-gradient(90deg, #1a0b01, #0a0400) !important;
    border-color: rgba(71, 154, 145, .2) !important;
    color: rgba(148, 163, 184, .8) !important;
}

.monitor-tab,
.mon-dash-header,
.mon-chart-title,
.mon-net-title {
    color: rgba(71, 154, 145, .8) !important;
}

.monitor-screen {
    background: #0a0400 !important;
}

.image-card .scanline {
    background: repeating-linear-gradient(to bottom, transparent, transparent 4px, rgba(204, 0, 0, .035) 4px, rgba(204, 0, 0, .035) 5px);
}

.mon-stat,
.mon-kpi {
    background: rgba(15, 23, 42, .6) !important;
    border-color: rgba(71, 154, 145, .2) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
}

.mon-stat-lbl,
.mon-bar-lbl,
.mon-kpi-lbl,
.mon-donut-item,
.mon-sprint-name,
.mon-sprint-pct,
.mon-legend-item,
.mon-pipe-stage,
.mon-pipe-time,
.mon-api-name,
.mon-api-ms,
.mon-log-time,
.mon-log-msg {
    color: rgba(148, 163, 184, .9) !important;
}

.mon-bar-track,
.mon-sprint-track {
    background: rgba(71, 154, 145, .1) !important;
}

.stats,
.section-bg,
.cta-band {
    background:
        linear-gradient(180deg, rgba(237, 231, 199, .78) 0%, rgba(216, 210, 178, .82) 100%),
        url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?auto=format&fit=crop&w=1920&q=70') center/cover no-repeat fixed !important;
    border-color: rgba(20, 9, 1, .14) !important;
}

.stat-card,
.info-card,
.timeline-item,
.image-card {
    background: rgba(237, 231, 199, .86) !important;
    border-color: rgba(20, 9, 1, .16) !important;
    box-shadow: 0 16px 40px rgba(20, 9, 1, .08);
    backdrop-filter: blur(12px);
}

.stat-card:hover,
.info-card:hover {
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: var(--glow-cyan), 0 20px 42px rgba(20, 9, 1, .14);
}

.timeline-item {
    color: var(--c-text);
}

.stat-value {
    background: linear-gradient(135deg, #CC0000, #5B0202);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {

    .hero-grid,
    .two-col {
        grid-template-columns: 1fr !important;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .stats-grid>.stat-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .container {
        padding-left: clamp(.75rem, 4vw, 1.25rem);
        padding-right: clamp(.75rem, 4vw, 1.25rem);
    }

    .hero-grid,
    .two-col {
        gap: 2rem !important;
    }

    .hero {
        padding: 66px 0 44px !important;
    }

    .eyebrow {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .35rem .5rem;
        font-size: clamp(.58rem, 2.8vw, .72rem) !important;
        letter-spacing: .12em !important;
        line-height: 1.45;
        margin-bottom: .8rem !important;
    }

    .hero h1 {
        font-size: clamp(1.55rem, 9vw, 2.15rem) !important;
        line-height: 1.16 !important;
        margin-bottom: 1rem !important;
    }

    .hero-subtext {
        font-size: clamp(.9rem, 4vw, 1rem) !important;
        line-height: 1.65 !important;
        margin-bottom: 1.35rem !important;
    }

    .btn-row {
        margin-bottom: 1.35rem;
    }

    .btn-primary,
    .btn-outline,
    .btn-dark,
    .btn-ghost {
        min-height: 44px;
        padding: .74rem 1.1rem !important;
        line-height: 1.25;
    }

    .section-bg,
    .two-col,
    .stats,
    .cta-band {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .stats-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    .cta-band-inner {
        flex-direction: column;
        text-align: center;
    }

    .company-tagline {
        display: flex;
        border-radius: 12px;
        align-items: flex-start;
        text-align: left;
        height: auto;
        margin: -.15rem 0 1.2rem !important;
        padding: .62rem .78rem !important;
        font-size: clamp(.66rem, 3.2vw, .76rem) !important;
        letter-spacing: .02em;
    }

    .company-tagline i {
        flex-shrink: 0;
        margin-top: 3px;
    }

    .mon-kpi-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .mon-kpi {
        min-width: 0;
        padding: 7px 6px;
    }

    .monitor-body {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero h1,
    .two-col h2,
    .section-head h2 {
        font-size: clamp(1.38rem, 8vw, 1.7rem) !important;
    }

    .hero-subtext,
    .two-col>div>p,
    .section-head p {
        font-size: 0.9rem !important;
    }

    .hero-grid,
    .two-col {
        gap: 1.35rem !important;
    }

    .hero {
        padding: 58px 0 38px !important;
    }

    .company-tagline {
        font-size: 0.66rem !important;
        padding: 0.5rem 0.62rem !important;
    }

    .btn-row {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .btn-primary,
    .btn-outline,
    .btn-dark,
    .btn-ghost {
        width: 100%;
        justify-content: center;
        font-size: .66rem !important;
        letter-spacing: .06em !important;
        padding: .68rem .8rem !important;
        text-align: center;
    }

    .hero-badges {
        flex-direction: column;
        gap: 0.4rem;
    }

    .hero-badge {
        width: 100%;
        justify-content: flex-start;
    }

    .timeline-item {
        padding: 0.7rem 0.7rem 0.7rem 1.1rem;
        font-size: 0.85rem;
    }

    .mon-panel {
        padding: 8px;
        gap: 7px;
    }

    .mon-kpi {
        padding: 6px 5px;
    }

    .mon-kpi-val {
        font-size: .78rem;
    }

    .mon-kpi-lbl,
    .mon-kpi-delta {
        font-size: .42rem;
        line-height: 1.25;
    }

    .mon-bar-lbl {
        width: 45px;
        font-size: 0.45rem;
    }

    .mon-stat-val {
        font-size: 0.9rem;
    }

    .mon-stat {
        padding: 6px;
    }

    .mon-sprint-track,
    .mon-sprint-tag {
        display: none;
    }

    .mon-sprint-name {
        min-width: 0;
    }

    .mon-donut-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .mon-donut {
        margin: 0 auto;
        width: 60px;
        height: 60px;
    }

    .mon-donut-labels {
        width: 100%;
        gap: 4px;
    }

    .monitor-wrap {
        max-width: 100%;
        animation: none;
        filter: drop-shadow(0 16px 24px rgba(23, 58, 110, .16));
    }

    .monitor-body {
        width: 100%;
        border-radius: 8px;
    }

    .monitor-bar {
        height: 24px;
        padding: 0 8px;
    }

    .monitor-dot {
        width: 7px;
        height: 7px;
    }

    .monitor-tab {
        font-size: .44rem;
        letter-spacing: .08em;
        padding: 1px 5px;
    }

    .monitor-screen {
        height: clamp(176px, 65vw, 220px);
    }

    .monitor-status {
        padding: 0 8px;
        gap: 6px;
        font-size: .45rem;
        overflow: hidden;
    }

    #monStatusTxt {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .eyebrow {
        flex-wrap: wrap;
        letter-spacing: 0.1em !important;
    }

    .mon-legend {
        flex-wrap: wrap;
        gap: 6px;
    }

    .mon-dash-header {
        font-size: 0.48rem;
        letter-spacing: 0.08em;
    }

    .mon-chart-title,
    .mon-net-title {
        font-size: 0.48rem;
        letter-spacing: 0.08em;
        white-space: normal;
    }

    .hero-badge {
        font-size: 0.63rem !important;
        padding: 0.35rem 0.55rem !important;
        white-space: normal;
        height: auto;
    }
}

@media (max-width: 320px) {
    .container {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .hero h1 {
        font-size: 1.32rem !important;
    }

    .hero-subtext {
        font-size: .86rem !important;
        line-height: 1.55 !important;
    }

    .btn-primary,
    .btn-outline,
    .btn-dark,
    .btn-ghost {
        font-size: .62rem !important;
        padding-left: .62rem !important;
        padding-right: .62rem !important;
    }

    .hero-badge {
        font-size: .6rem !important;
    }

    .monitor-screen {
        height: 168px;
    }

    .mon-panel {
        padding: 7px;
        gap: 5px;
    }

    .mon-kpi-row {
        gap: 4px;
    }

    .mon-kpi {
        padding: 5px 4px;
    }

    .mon-kpi-val {
        font-size: .7rem;
    }

    .mon-kpi-lbl,
    .mon-kpi-delta,
    .mon-bar-lbl,
    .mon-sprint-name,
    .mon-sprint-pct,
    .mon-donut-item,
    .mon-legend-item {
        font-size: .4rem;
    }

    .mon-bar-lbl {
        width: 38px;
    }

    .mon-donut {
        width: 52px;
        height: 52px;
    }

    .monitor-stand {
        height: 16px;
    }

    .monitor-base {
        width: 108px;
        height: 8px;
    }
}

/* Light theme depth pass: restores visible tech texture after the dark-to-light conversion. */
.gt-page-wrap {
    background:
        radial-gradient(circle at 8% 12%, rgba(204, 0, 0, .18) 0 120px, transparent 280px),
        radial-gradient(circle at 88% 8%, rgba(91, 2, 2, .16) 0 110px, transparent 300px),
        radial-gradient(circle at 72% 74%, rgba(0, 168, 107, .13) 0 120px, transparent 320px),
        linear-gradient(rgba(204, 0, 0, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 2, 2, .055) 1px, transparent 1px),
        linear-gradient(180deg, #EDE7C7 0%, #dcd6b6 46%, #EDE7C7 100%) !important;
    background-size: auto, auto, auto, 54px 54px, 54px 54px, auto;
}

.gt-page-wrap::before {
    background-image:
        linear-gradient(rgba(204, 0, 0, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 72, 153, .09) 1px, transparent 1px) !important;
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(circle at 50% 16%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 16%, #000 0%, transparent 72%);
    opacity: .75;
}

.gt-page-wrap::after {
    background:
        linear-gradient(120deg, rgba(204, 0, 0, .18), transparent 34%),
        linear-gradient(300deg, rgba(0, 168, 107, .15), transparent 42%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .45), transparent 34%) !important;
    opacity: .95;
}

.hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .68) 0%, rgba(237, 231, 199, .62) 48%, rgba(255, 255, 255, .7) 100%),
        radial-gradient(circle at 72% 35%, rgba(204, 0, 0, .18), transparent 33%),
        radial-gradient(circle at 18% 78%, rgba(91, 2, 2, .14), transparent 31%),
        url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1920&q=75') center/cover no-repeat !important;
}

.hero::before {
    background:
        radial-gradient(circle, rgba(204, 0, 0, .24) 0%, transparent 68%),
        conic-gradient(from 130deg, rgba(204, 0, 0, .08), rgba(91, 2, 2, .08), rgba(0, 168, 107, .06), rgba(204, 0, 0, .08));
    opacity: .95;
}

.hero::after {
    background:
        radial-gradient(circle, rgba(91, 2, 2, .2) 0%, transparent 68%),
        linear-gradient(135deg, transparent 0 46%, rgba(204, 0, 0, .13) 46% 47%, transparent 47% 100%);
    opacity: .95;
}

.hero-grid {
    position: relative;
    z-index: 1;
}

.hero-grid>* {
    position: relative;
    z-index: 1;
}

.hero-badge,
.floating-chip {
    background: rgba(255, 255, 255, .9) !important;
    border-color: rgba(204, 0, 0, .28) !important;
    box-shadow: 0 10px 28px rgba(20, 9, 1, .14), inset 0 0 18px rgba(204, 0, 0, .05) !important;
}

.monitor-wrap {
    filter: drop-shadow(0 28px 38px rgba(20, 9, 1, .24));
}

.image-card .scanline {
    background: repeating-linear-gradient(to bottom, transparent, transparent 4px, rgba(204, 0, 0, .06) 4px, rgba(204, 0, 0, .06) 5px) !important;
}

.stats,
.section-bg,
.cta-band {
    background:
        linear-gradient(180deg, rgba(237, 231, 199, .72) 0%, rgba(216, 210, 178, .78) 100%),
        radial-gradient(circle at 20% 0%, rgba(204, 0, 0, .15), transparent 34%),
        radial-gradient(circle at 88% 86%, rgba(0, 168, 107, .12), transparent 32%),
        url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?auto=format&fit=crop&w=1920&q=70') center/cover no-repeat fixed !important;
}

.stats,
.section-bg,
.cta-band,
.gt-page-wrap>section:nth-of-type(3) {
    position: relative;
    overflow: hidden;
}

.stats::before,
.section-bg::before,
.cta-band::after,
.gt-page-wrap>section:nth-of-type(3)::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0 18%, rgba(204, 0, 0, .08) 18% 18.4%, transparent 18.4% 64%, rgba(91, 2, 2, .08) 64% 64.35%, transparent 64.35%),
        radial-gradient(circle at 12% 22%, rgba(204, 0, 0, .12), transparent 18%),
        radial-gradient(circle at 92% 82%, rgba(236, 72, 153, .09), transparent 20%);
    pointer-events: none;
    z-index: 0;
}

.stats>.container,
.section-bg>.container,
.cta-band>.container,
.gt-page-wrap>section:nth-of-type(3)>.container {
    position: relative;
    z-index: 1;
}

.gt-page-wrap>section:nth-of-type(3) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(237, 231, 199, .72)),
        linear-gradient(rgba(204, 0, 0, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 2, 2, .045) 1px, transparent 1px);
    background-size: auto, 42px 42px, 42px 42px;
}

.stat-card,
.info-card,
.timeline-item,
.image-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(237, 231, 199, .82)) !important;
    border-color: rgba(204, 0, 0, .24) !important;
    box-shadow: 0 16px 40px rgba(20, 9, 1, .12), inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
}

.stat-card:hover,
.info-card:hover {
    border-color: rgba(204, 0, 0, .42) !important;
    box-shadow: var(--glow-cyan), 0 20px 42px rgba(20, 9, 1, .18) !important;
}

.stat-icon,
.card-icon {
    filter: drop-shadow(0 10px 18px rgba(204, 0, 0, .18));
}

.card-icon-blue,
.card-icon-sky,
.card-icon-violet,
.card-icon-emerald {
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 0 18px currentColor;
}

.timeline-item {
    background: linear-gradient(90deg, rgba(204, 0, 0, .1), rgba(255, 255, 255, .78)) !important;
    box-shadow: 0 10px 28px rgba(20, 9, 1, .08) !important;
}

@media (max-width: 600px) {
    .gt-page-wrap {
        background:
            radial-gradient(circle at 0% 8%, rgba(204, 0, 0, .16) 0 90px, transparent 230px),
            radial-gradient(circle at 100% 42%, rgba(91, 2, 2, .12) 0 80px, transparent 240px),
            linear-gradient(rgba(204, 0, 0, .06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(91, 2, 2, .045) 1px, transparent 1px),
            linear-gradient(180deg, #EDE7C7 0%, #dcd6b6 48%, #EDE7C7 100%) !important;
        background-size: auto, auto, 42px 42px, 42px 42px, auto;
    }

    .hero-grid::before {
        inset: -18px -10px auto auto;
        width: 190px;
        height: 190px;
        opacity: .18;
    }

    .stats,
    .section-bg,
    .cta-band {
        background-attachment: scroll !important;
    }
}