/* =========================================================
   RLOOP PUBLIC TECHNOLOGY PAGES
   ========================================================= */

.tech-page {
    --navy: #071a33;
    --deep: #041225;
    --blue: #1769e0;
    --blue-hover: #1254b8;
    --cyan: #38bdf8;
    --green: #10b86c;
    --red: #dc4c64;
    --amber: #f59e0b;
    --purple: #8b5cf6;
    --light: #f5f8fc;
    --muted: #60738a;
    --border: #d9e4f1;
    --shadow: 0 28px 75px rgba(7, 26, 51, .12);
    overflow: hidden;
    color: var(--navy);
    background: #fff;
}

.tech-page *,
.tech-page *::before,
.tech-page *::after {
    box-sizing: border-box;
}

.tech-page h1,
.tech-page h2,
.tech-page h3,
.tech-page h4,
.tech-page h5 {
    letter-spacing: -.035em;
}

.tech-page p {
    line-height: 1.7;
}

.tech-section {
    padding: 94px 0;
}

.tech-section-soft {
    background:
        radial-gradient(circle at 92% 2%, rgba(23,105,224,.09), transparent 30rem),
        #f5f8fc;
}

.tech-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--blue);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.tech-heading {
    color: var(--navy);
    font-size: clamp(2.15rem, 4.7vw, 4.3rem);
    font-weight: 850;
    line-height: 1.04;
}

.tech-lead {
    color: var(--muted);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.tech-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 104px 0 112px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(56,189,248,.22), transparent 28rem),
        linear-gradient(135deg, #041225 0%, #071a33 54%, #0d2a4d 100%);
}

.tech-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 50px 50px;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.tech-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.5rem;
    padding: .62rem .9rem;
    color: #8bd3ff;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.32);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.tech-hero h1 {
    max-width: 900px;
    margin-bottom: 1.5rem;
    color: #fff;
    font-size: clamp(3rem, 7vw, 6.1rem);
    font-weight: 850;
    line-height: .96;
}

.tech-hero h1 span {
    display: block;
    color: var(--cyan);
}

.tech-hero-copy {
    max-width: 760px;
    margin-bottom: 2rem;
    color: rgba(255,255,255,.7);
    font-size: clamp(1.04rem, 1.55vw, 1.24rem);
}

.tech-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.tech-btn {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .85rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.tech-btn:hover { transform: translateY(-2px); }

.tech-btn-primary {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 14px 32px rgba(23,105,224,.28);
}

.tech-btn-primary:hover {
    color: #fff;
    background: var(--blue-hover);
}

.tech-btn-outline {
    color: #fff;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.28);
}

.tech-btn-outline:hover {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.5);
}

.tech-hero-panel {
    padding: 1.5rem;
    color: var(--navy);
    background: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 1.35rem;
    box-shadow: 0 32px 90px rgba(0,0,0,.3);
}

.tech-hero-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tech-hero-panel-label {
    color: var(--blue);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tech-hero-panel h2 {
    margin: .2rem 0 0;
    font-size: 1.35rem;
    font-weight: 850;
}

.tech-live-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .65rem;
    color: #137a4d;
    background: #e7f8ef;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
}

.tech-live-pill::before {
    width: .48rem;
    height: .48rem;
    background: #22c77a;
    border-radius: 50%;
    content: "";
}

.tech-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .65rem;
}

.tech-hero-metric {
    padding: .9rem;
    background: #f7f9fc;
    border: 1px solid #dce5f0;
    border-radius: .75rem;
}

.tech-hero-metric i { color: var(--blue); }
.tech-hero-metric strong {
    display: block;
    margin-top: .55rem;
    color: #10243e;
    font-size: .93rem;
}
.tech-hero-metric span {
    display: block;
    margin-top: .1rem;
    color: #718399;
    font-size: .65rem;
}

.tech-capability-card {
    height: 100%;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(7,26,51,.055);
}

.tech-capability-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    background: #e8f1ff;
    border-radius: .85rem;
    font-size: 1.05rem;
}

.tech-capability-card h3 {
    margin: 1rem 0 .45rem;
    color: #10243e;
    font-size: 1rem;
    font-weight: 850;
}

.tech-capability-card p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
}

/* Browser and workspace preview */

.workspace-shell {
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfdced;
    border-radius: 1.35rem;
    box-shadow: var(--shadow);
}

.workspace-browser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 46px;
    padding: .75rem 1rem;
    background: #f7f9fc;
    border-bottom: 1px solid #dfe7f1;
}

.workspace-dots { display: flex; gap: .4rem; }
.workspace-dots span {
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    background: #c8d2df;
}
.workspace-address {
    min-width: 0;
    color: #75869b;
    font-size: .67rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workspace-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #137a4d;
    font-size: .64rem;
    font-weight: 800;
    white-space: nowrap;
}
.workspace-status::before {
    width: .5rem;
    height: .5rem;
    background: #22c77a;
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 4px rgba(34,199,122,.12);
}

.workspace {
    display: grid;
    grid-template-columns: 190px minmax(0,1fr);
    min-height: 680px;
    background: #f4f7fb;
}

.workspace-sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1rem .85rem;
    background: #fff;
    border-right: 1px solid #dfe7f1;
}

.workspace-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .25rem .35rem 1rem;
    border-bottom: 1px solid #e7edf5;
}
.workspace-logo {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg,#1d7df2,#0b55c3);
    border-radius: .7rem;
}
.workspace-brand strong {
    display: block;
    color: var(--blue);
    font-size: .85rem;
}
.workspace-brand small {
    display: block;
    margin-top: .18rem;
    color: #8393a8;
    font-size: .48rem;
    font-weight: 800;
    text-transform: uppercase;
}
.workspace-org {
    display: flex;
    gap: .55rem;
    margin: .85rem 0 .5rem;
    padding: .7rem;
    background: #eaf3ff;
    border: 1px solid #c8ddfa;
    border-radius: .7rem;
}
.workspace-org-icon {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 1.8rem;
    place-items: center;
    color: #fff;
    background: var(--blue);
    border-radius: .5rem;
    font-size: .7rem;
}
.workspace-org span {
    display: block;
    color: #6b7f98;
    font-size: .42rem;
    font-weight: 800;
    text-transform: uppercase;
}
.workspace-org strong {
    display: block;
    margin-top: .15rem;
    color: #153b6b;
    font-size: .58rem;
}
.workspace-label {
    margin: .85rem .45rem .35rem;
    color: #9aa8ba;
    font-size: .43rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.workspace-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 32px;
    padding: .45rem .55rem;
    color: #53677f;
    border-radius: .55rem;
    font-size: .58rem;
    font-weight: 750;
}
.workspace-link i {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    color: #8293a7;
    background: #f0f4f8;
    border-radius: .38rem;
    font-size: .58rem;
}
.workspace-link.active {
    color: var(--blue);
    background: #e8f1ff;
    box-shadow: inset 3px 0 0 var(--blue);
}
.workspace-link.active i {
    color: var(--blue);
    background: #d8e9ff;
}
.workspace-user {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding: .65rem;
    background: #f8fafc;
    border: 1px solid #dfe7f1;
    border-radius: .7rem;
}

.workspace-user > .workspace-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    color: #ffffff;
    background: #1769e0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 42px;
    text-align: center;
}

.workspace-user-copy {
    min-width: 0;
}

.workspace-user-copy strong {
    display: block;
    color: #13243d;
    font-size: 12px;
    line-height: 1.3;
}

.workspace-user-copy span {
    display: block;
    margin-top: 3px;
    color: #7d8fa5;
    font-size: 9px;
    line-height: 1.3;
}
.workspace-user strong {
    display: block;
    color: #1d2f48;
    font-size: .56rem;
}
.workspace-user span {
    display: block;
    color: #8898aa;
    font-size: .44rem;
}

.workspace-main { min-width: 0; }
.workspace-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    padding: .8rem 1.15rem;
    background: #fff;
    border-bottom: 1px solid #dfe7f1;
}
.workspace-topbar-eyebrow {
    color: var(--blue);
    font-size: .48rem;
    font-weight: 850;
    text-transform: uppercase;
}
.workspace-topbar h3 {
    margin: .2rem 0 0;
    color: #132239;
    font-size: 1rem;
    font-weight: 850;
}
.workspace-topbar-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.workspace-chip {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .6rem;
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: .65rem;
}
.workspace-chip span {
    display: block;
    color: #8a99ab;
    font-size: .4rem;
}
.workspace-chip strong {
    display: block;
    color: #1e3048;
    font-size: .52rem;
}
.workspace-dot {
    width: .5rem;
    height: .5rem;
    background: #22c77a;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34,199,122,.12);
}
.workspace-content { padding: 1.15rem; }

.workspace-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem;
    background:
        radial-gradient(circle at 0 0, rgba(23,105,224,.1), transparent 23rem),
        #fff;
    border: 1px solid #cfdced;
    border-radius: .9rem;
    box-shadow: 0 9px 26px rgba(7,26,51,.05);
}
.workspace-hero h4 {
    margin: .35rem 0;
    color: #12233c;
    font-size: 1.2rem;
    font-weight: 850;
}
.workspace-hero p {
    max-width: 620px;
    margin: 0;
    color: #728399;
    font-size: .58rem;
}
.workspace-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}
.workspace-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 30px;
    padding: .45rem .65rem;
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
    border-radius: .55rem;
    font-size: .52rem;
    font-weight: 800;
}
.workspace-mini-btn.outline {
    color: var(--blue);
    background: #fff;
}

.workspace-kpis {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: .65rem;
    margin-top: .8rem;
}
.workspace-kpi {
    min-width: 0;
    padding: .8rem;
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: .72rem;
    box-shadow: 0 7px 20px rgba(7,26,51,.045);
}
.workspace-kpi-icon {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    color: var(--blue);
    background: #eaf3ff;
    border-radius: .5rem;
    font-size: .65rem;
}
.workspace-kpi-label {
    display: block;
    margin-top: .65rem;
    color: #7f90a4;
    font-size: .42rem;
    font-weight: 850;
    text-transform: uppercase;
}
.workspace-kpi-value {
    display: block;
    margin-top: .15rem;
    color: #0e213b;
    font-size: .92rem;
    font-weight: 850;
}
.workspace-kpi-note {
    display: block;
    margin-top: .18rem;
    color: #8c9bad;
    font-size: .4rem;
}

.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(280px,.95fr);
    gap: .8rem;
    margin-top: .8rem;
}
.workspace-panel {
    min-width: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: .82rem;
    box-shadow: 0 8px 22px rgba(7,26,51,.045);
}
.workspace-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .8rem;
}
.workspace-panel-eyebrow {
    color: var(--blue);
    font-size: .42rem;
    font-weight: 850;
    text-transform: uppercase;
}
.workspace-panel h5 {
    margin: .2rem 0 0;
    color: #13243d;
    font-size: .72rem;
    font-weight: 850;
}
.workspace-panel-subtitle {
    margin-top: .2rem;
    color: #8796a8;
    font-size: .45rem;
}

.workspace-list {
    display: grid;
    gap: .55rem;
}
.workspace-list-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 48px;
    padding: .62rem;
    background: #f8fbff;
    border: 1px solid #d4e1f1;
    border-radius: .62rem;
}
.workspace-list-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    place-items: center;
    color: var(--blue);
    background: #e8f1ff;
    border-radius: .48rem;
    font-size: .62rem;
}
.workspace-list-copy { min-width: 0; }
.workspace-list-copy strong {
    display: block;
    color: #1b2d45;
    font-size: .54rem;
}
.workspace-list-copy span {
    display: block;
    margin-top: .12rem;
    color: #8190a2;
    font-size: .42rem;
}
.workspace-list-value {
    margin-left: auto;
    color: var(--blue);
    font-size: .52rem;
    font-weight: 850;
    white-space: nowrap;
}

.workspace-summary {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .55rem;
}
.workspace-summary-box {
    padding: .65rem;
    background: #f7f9fc;
    border: 1px solid #dce5f0;
    border-radius: .6rem;
}
.workspace-summary-box span {
    display: block;
    color: #8494a8;
    font-size: .42rem;
}
.workspace-summary-box strong {
    display: block;
    margin-top: .15rem;
    color: #11243e;
    font-size: .78rem;
}

.workspace-bars {
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    align-items: end;
    gap: .38rem;
    height: 125px;
    margin-top: .75rem;
}
.workspace-bar-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .25rem;
    height: 100%;
    color: #8a9aab;
    font-size: .38rem;
    text-align: center;
}
.workspace-bar-value {
    color: #334c68;
    font-size: .36rem;
    font-weight: 800;
}
.workspace-bar {
    width: 100%;
    min-height: 8px;
    background: linear-gradient(180deg,#52a0ff,#1769e0);
    border-radius: .3rem .3rem .12rem .12rem;
}
.workspace-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .65rem;
    padding: .55rem .65rem;
    color: #5274a0;
    background: #eaf3ff;
    border-radius: .55rem;
    font-size: .42rem;
}

.analytics-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .8rem;
    padding: .7rem;
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: .72rem;
}
.analytics-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.analytics-pill {
    padding: .35rem .5rem;
    color: #4f6580;
    background: #fff;
    border: 1px solid #d4dfec;
    border-radius: .45rem;
    font-size: .42rem;
    font-weight: 750;
}
.analytics-pill.active {
    color: var(--blue);
    background: #e8f1ff;
    border-color: #8dbbf5;
}
.analytics-period {
    min-width: 165px;
    padding: .65rem .75rem;
    background: #fff;
    border: 1px solid #cfdced;
    border-radius: .65rem;
}
.analytics-period span {
    display: block;
    color: #8291a4;
    font-size: .4rem;
    font-weight: 850;
    text-transform: uppercase;
}
.analytics-period strong {
    display: block;
    margin-top: .25rem;
    color: #13243d;
    font-size: .56rem;
}
.analytics-period small {
    display: block;
    margin-top: .15rem;
    color: #8b9aac;
    font-size: .38rem;
}
.analytics-delta {
    display: inline-flex;
    margin-top: .3rem;
    padding: .2rem .35rem;
    color: #138153;
    background: #e7f8ef;
    border-radius: 999px;
    font-size: .36rem;
    font-weight: 850;
}
.analytics-grid {
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(250px,.75fr);
    gap: .8rem;
    margin-top: .8rem;
}
.analytics-chart {
    position: relative;
    height: 235px;
    margin-top: .75rem;
    padding: .2rem .2rem 1.45rem 1.8rem;
}
.analytics-chart::before {
    position: absolute;
    inset: .2rem .2rem 1.45rem 1.8rem;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 42px, #e7edf5 43px, #e7edf5 44px);
    content: "";
}
.analytics-chart svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.analytics-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
    color: #7b8da2;
    font-size: .4rem;
}
.analytics-legend span {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
}
.analytics-dot {
    width: .48rem;
    height: .48rem;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.analytics-dot.blue { color: var(--blue); }
.analytics-dot.green { color: #168a5b; }
.analytics-dot.red { color: #d84c5a; }

.analytics-donut-wrap {
    display: grid;
    min-height: 210px;
    place-items: center;
}
.analytics-donut {
    position: relative;
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
    background: conic-gradient(
        #1769e0 0 38%,
        #10b86c 38% 65%,
        #38bdf8 65% 82%,
        #8b5cf6 82% 93%,
        #f59e0b 93% 100%
    );
    border-radius: 50%;
}
.analytics-donut::after {
    width: 88px;
    height: 88px;
    background: #fff;
    border-radius: 50%;
    content: "";
}
.analytics-center {
    position: absolute;
    z-index: 1;
    color: #152741;
    text-align: center;
}
.analytics-center strong { display: block; font-size: .82rem; }
.analytics-center span { display: block; color: #8191a4; font-size: .4rem; }
.analytics-service-legend {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .35rem;
    color: #6f8197;
    font-size: .39rem;
}
.analytics-service-legend span {
    display: flex;
    align-items: center;
    gap: .28rem;
}
.analytics-swatch {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
}
.analytics-swatch.blue { background: var(--blue); }
.analytics-swatch.green { background: var(--green); }
.analytics-swatch.cyan { background: var(--cyan); }
.analytics-swatch.purple { background: var(--purple); }
.analytics-swatch.orange { background: var(--amber); }

.tech-boundary {
    padding: clamp(1.8rem,4vw,3rem);
    color: #fff;
    background:
        radial-gradient(circle at 95% 0%, rgba(56,189,248,.16), transparent 24rem),
        var(--navy);
    border-radius: 1.4rem;
    box-shadow: 0 28px 70px rgba(7,26,51,.2);
}
.tech-boundary h2 {
    color: #fff;
    font-size: clamp(2rem,4vw,3.7rem);
    font-weight: 850;
}
.tech-boundary p { color: rgba(255,255,255,.67); }
.tech-boundary-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .85rem;
}
.tech-boundary-card {
    padding: 1rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: .85rem;
}
.tech-boundary-card span {
    display: block;
    color: var(--cyan);
    font-size: .62rem;
    font-weight: 850;
    text-transform: uppercase;
}
.tech-boundary-card strong {
    display: block;
    margin-top: .35rem;
    color: #fff;
    font-size: .9rem;
}

.tech-final {
    padding: 86px 0;
    color: #fff;
    background: var(--blue);
}
.tech-final h2 {
    color: #fff;
    font-size: clamp(2.15rem,4.7vw,4.2rem);
    font-weight: 850;
    line-height: 1.04;
}
.tech-final p { color: rgba(255,255,255,.76); }

@media (max-width: 1199.98px) {
    .workspace { grid-template-columns: 165px minmax(0,1fr); }
    .workspace-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 991.98px) {
    .tech-section { padding: 74px 0; }
    .tech-hero { padding: 78px 0 90px; }
    .workspace-shell { overflow-x: auto; }
    .workspace { min-width: 970px; }
    .tech-boundary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .tech-actions { display: grid; }
    .tech-btn { width: 100%; }
    .tech-hero-metrics { grid-template-columns: 1fr; }
    .workspace-status { display: none; }
}