:root {
    --dev-bg: #090a0a;
    --dev-bg-soft: #0d0e0e;
    --dev-surface: #141515;
    --dev-surface-2: #191a1a;
    --dev-surface-3: #202121;
    --dev-border: #292a2a;
    --dev-border-strong: #363737;
    --dev-text: #f5f5f3;
    --dev-muted: #9b9c98;
    --dev-muted-2: #6e706d;
    --dev-accent: #91a7b5;
    --dev-accent-strong: #c1ced5;
    --dev-secondary: #738a98;
    --dev-success: #62d39a;
    --dev-radius: 14px;
    --dev-radius-lg: 24px;
    --dev-shadow: 0 26px 80px rgba(0, 0, 0, .34);
    --dev-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--dev-bg); scroll-behavior: smooth; }
body.dev-page {
    min-height: 100vh;
    margin: 0;
    color: var(--dev-text);
    background: var(--dev-bg);
    font-family: var(--dev-font);
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
}

.dev-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dev-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 84% 4%, rgba(185, 200, 209, .075), transparent 29%),
        radial-gradient(circle at 10% 30%, rgba(115, 138, 152, .055), transparent 24%),
        linear-gradient(180deg, #090a0a 0%, #0a0b0b 45%, #080909 100%);
}
.dev-grid {
    position: absolute;
    inset: 0;
    opacity: .3;
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.7) 48%, transparent 92%);
}
.dev-glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; filter: blur(100px); opacity: .12; }
.dev-glow-one { right: -160px; top: 120px; background: #c1ced5; }
.dev-glow-two { left: -220px; top: 880px; background: #738a98; }

.dev-shell { width: min(1220px, calc(100% - 42px)); margin: 0 auto; padding: 28px 0 72px; }
.dev-topline {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 0 4px;
}
.dev-brand { display: flex; align-items: center; gap: 11px; }
.dev-brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--dev-border-strong);
    border-radius: 10px;
    background: var(--dev-surface-2);
    box-shadow: 0 0 0 4px rgba(145, 167, 181, .04);
}
.dev-brand-mark img { width: 32px; height: 32px; object-fit: contain; }
.dev-brand-copy { display: grid; line-height: 1.05; }
.dev-brand-copy strong { font-size: 15px; font-weight: 800; letter-spacing: -.025em; }
.dev-brand-copy small { margin-top: 5px; color: var(--dev-muted-2); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; }
.dev-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid var(--dev-border);
    border-radius: 999px;
    color: var(--dev-muted);
    background: rgba(20, 21, 21, .8);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.dev-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--dev-success); box-shadow: 0 0 0 4px rgba(98, 211, 154, .08); }

.dev-hero {
    position: relative;
    min-height: 610px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items: center;
    gap: clamp(36px, 6vw, 86px);
    padding: clamp(46px, 7vw, 82px);
    overflow: hidden;
    border: 1px solid var(--dev-border);
    border-radius: var(--dev-radius-lg);
    background:
        radial-gradient(circle at 92% 8%, rgba(145, 167, 181, .11), transparent 32%),
        linear-gradient(145deg, rgba(22, 23, 23, .98), rgba(13, 14, 14, .96));
    box-shadow: var(--dev-shadow), inset 0 1px 0 rgba(255,255,255,.02);
}
.dev-hero::after {
    content: "";
    position: absolute;
    inset: auto -60px -120px 42%;
    height: 260px;
    border: 1px solid rgba(145, 167, 181, .08);
    border-radius: 50%;
    transform: rotate(-9deg);
    pointer-events: none;
}
.dev-hero-copy, .dev-system-preview { position: relative; z-index: 1; }
.dev-kicker { color: #7d817e; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.dev-hero h1 {
    margin: 19px 0 22px;
    font-size: clamp(44px, 6.1vw, 78px);
    line-height: .96;
    letter-spacing: -.055em;
    font-weight: 780;
}
.dev-hero h1 em { color: var(--dev-accent-strong); font-style: normal; font-weight: 620; }
.dev-hero-copy > p { max-width: 660px; margin: 0; color: var(--dev-muted); font-size: 15px; line-height: 1.75; }
.dev-tech-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; }
.dev-tech-row span, .dev-tags span {
    padding: 6px 9px;
    border: 1px solid var(--dev-border);
    border-radius: 7px;
    background: rgba(255,255,255,.018);
    color: #9fa5a2;
    font-size: 9px;
    font-weight: 700;
}

.dev-system-preview {
    min-height: 390px;
    padding: 18px;
    border: 1px solid #303232;
    border-radius: 18px;
    background: rgba(10, 11, 11, .7);
    box-shadow: 0 22px 60px rgba(0,0,0,.25);
}
.dev-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.dev-preview-label, .dev-preview-state { font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.dev-preview-label { color: var(--dev-muted-2); }
.dev-preview-state { color: var(--dev-success); }
.dev-core-node {
    position: relative;
    padding: 20px;
    border: 1px solid rgba(145, 167, 181, .28);
    border-radius: 13px;
    background: linear-gradient(110deg, rgba(145,167,181,.10), rgba(255,255,255,.018));
}
.dev-core-node strong, .dev-mini-node b, .dev-database-node b { display: block; }
.dev-core-node strong { margin: 4px 0 5px; font-size: 17px; }
.dev-core-node small, .dev-mini-node small, .dev-database-node small { color: var(--dev-muted-2); font-size: 9px; }
.dev-node-index { color: var(--dev-accent); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.dev-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0; }
.dev-mini-node { min-height: 88px; padding: 13px; border: 1px solid var(--dev-border); border-radius: 11px; background: #121313; }
.dev-mini-node > span { color: #5f6562; font-size: 8px; font-weight: 800; }
.dev-mini-node b { margin: 12px 0 4px; font-size: 11px; }
.dev-database-node { position: relative; padding: 13px 13px 13px 34px; border: 1px solid var(--dev-border); border-radius: 11px; background: #101111; }
.dev-database-node > span { position: absolute; left: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--dev-accent); box-shadow: 0 0 0 5px rgba(145,167,181,.06); }
.dev-database-node b { font-size: 10px; }

.dev-section { padding: 88px 0 0; }
.dev-section-intro { padding-top: 94px; }
.dev-section-heading { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 30px; }
.dev-section-number { color: #515653; font-size: 10px; font-weight: 800; letter-spacing: .12em; padding-top: 4px; }
.dev-section-heading h2, .dev-scale h2, .dev-final h2 { margin: 8px 0 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.03; letter-spacing: -.045em; font-weight: 740; }
.dev-section-heading p { max-width: 720px; margin: 12px 0 0; color: var(--dev-muted); line-height: 1.7; }

.dev-capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dev-capability-card {
    min-height: 255px;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--dev-border);
    border-radius: var(--dev-radius);
    background: linear-gradient(145deg, rgba(20,21,21,.96), rgba(15,16,16,.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.016);
}
.dev-capability-wide { grid-column: span 2; }
.dev-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; }
.dev-card-top > span { color: var(--dev-accent); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.dev-card-top small { color: #565b58; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.dev-capability-card h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.025em; }
.dev-capability-card p { flex: 1; margin: 0; color: var(--dev-muted); line-height: 1.65; font-size: 12px; }
.dev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.dev-tags span { padding: 5px 8px; font-size: 8px; }

.dev-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dev-flow-panel { padding: 22px; border: 1px solid var(--dev-border); border-radius: var(--dev-radius); background: #111212; }
.dev-flow-title { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #232424; }
.dev-flow-title > span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--dev-border-strong); border-radius: 8px; color: var(--dev-accent); font-size: 8px; font-weight: 800; }
.dev-flow-title div { display: grid; }
.dev-flow-title b { font-size: 12px; }
.dev-flow-title small { margin-top: 3px; color: var(--dev-muted-2); font-size: 8px; }
.dev-flow { padding-top: 16px; }
.dev-flow > div { position: relative; min-height: 60px; padding: 12px 13px 12px 45px; border: 1px solid #242626; border-radius: 10px; background: #151616; }
.dev-flow > div > span { position: absolute; left: 13px; top: 14px; color: #5d6360; font-size: 8px; font-weight: 800; }
.dev-flow > div b, .dev-flow > div small { display: block; }
.dev-flow > div b { font-size: 10px; }
.dev-flow > div small { margin-top: 4px; color: var(--dev-muted-2); font-size: 8px; }
.dev-flow > i { position: relative; display: block; width: 1px; height: 15px; margin: 0 0 0 28px; background: #303232; }
.dev-flow > i::after { content: ""; position: absolute; left: -2px; bottom: 0; width: 5px; height: 5px; border-right: 1px solid #555b58; border-bottom: 1px solid #555b58; transform: rotate(45deg); }

.dev-architecture { padding: 36px; border: 1px solid var(--dev-border); border-radius: var(--dev-radius-lg); background: rgba(15,16,16,.92); overflow: hidden; }
.dev-arch-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.dev-arch-row > div { padding: 17px; border: 1px solid var(--dev-border); border-radius: 11px; background: #141515; }
.dev-arch-row span, .dev-arch-core small { display: block; margin-bottom: 14px; color: #5c625f; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.dev-arch-row b { font-size: 11px; }
.dev-arch-lines { position: relative; height: 38px; margin: 0 9%; border-left: 1px solid #303232; border-right: 1px solid #303232; }
.dev-arch-lines::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #303232; }
.dev-arch-lines i { position: absolute; top: 50%; width: 1px; height: 50%; background: #303232; }
.dev-arch-lines i:nth-child(1) { left: 25%; }.dev-arch-lines i:nth-child(2) { left: 50%; }.dev-arch-lines i:nth-child(3) { left: 75%; }
.dev-arch-core { max-width: 520px; margin: 0 auto; padding: 23px; text-align: center; border: 1px solid rgba(145,167,181,.30); border-radius: 13px; background: linear-gradient(110deg, rgba(145,167,181,.10), #151616); }
.dev-arch-core small { margin-bottom: 7px; color: var(--dev-accent); }
.dev-arch-core strong, .dev-arch-core span { display: block; }
.dev-arch-core strong { font-size: 18px; }
.dev-arch-core span { margin-top: 6px; color: var(--dev-muted-2); font-size: 9px; }
.dev-arch-lines-down { transform: rotate(180deg); }

.dev-interface-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.dev-component-card { min-height: 146px; padding: 20px; border: 1px solid var(--dev-border); border-radius: var(--dev-radius); background: #141515; }
.dev-component-card > span { display: block; margin-bottom: 30px; color: #59605c; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.dev-component-card b, .dev-component-card small { display: block; }
.dev-component-card b { font-size: 14px; }
.dev-component-card small { margin-top: 6px; color: var(--dev-muted-2); font-size: 9px; }

.dev-reliability-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.dev-reliability-grid article { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 20px; border: 1px solid var(--dev-border); border-radius: var(--dev-radius); background: #131414; }
.dev-reliability-grid article > span { color: #59605c; font-size: 8px; font-weight: 850; padding-top: 3px; }
.dev-reliability-grid b { display: block; font-size: 12px; }
.dev-reliability-grid p { margin: 7px 0 0; color: var(--dev-muted); font-size: 10px; line-height: 1.6; }

.dev-scale {
    margin-top: 92px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    padding: clamp(30px, 5vw, 54px);
    border: 1px solid var(--dev-border);
    border-radius: var(--dev-radius-lg);
    background: linear-gradient(135deg, #151616, #0f1010);
}
.dev-scale-copy p { margin: 18px 0 0; color: var(--dev-muted); line-height: 1.7; }
.dev-scale-levels { display: grid; gap: 8px; }
.dev-scale-levels > div { position: relative; padding: 18px 18px 18px 55px; border: 1px solid var(--dev-border); border-radius: 11px; background: #111212; }
.dev-scale-levels span { position: absolute; left: 18px; top: 20px; color: #59605c; font-size: 8px; font-weight: 850; }
.dev-scale-levels b, .dev-scale-levels small { display: block; }
.dev-scale-levels b { font-size: 11px; }
.dev-scale-levels small { margin-top: 5px; color: var(--dev-muted-2); font-size: 9px; }

.dev-final { padding: 120px 20px 50px; text-align: center; }
.dev-final-index { color: #565c59; font-size: 8px; font-weight: 850; letter-spacing: .16em; }
.dev-final h2 { margin-top: 13px; }
.dev-final > p { max-width: 690px; margin: 18px auto 0; color: var(--dev-muted); font-size: 13px; line-height: 1.75; }
.dev-final-line { max-width: 470px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 13px; margin: 44px auto 0; }
.dev-final-line span { height: 1px; background: var(--dev-border); }
.dev-final-line small { color: #5d625f; font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 980px) {
    .dev-hero { grid-template-columns: 1fr; padding: 48px; }
    .dev-system-preview { max-width: 620px; }
    .dev-capability-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dev-capability-wide { grid-column: span 1; }
    .dev-scale { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
    .dev-shell { width: min(100% - 24px, 1220px); padding-top: 14px; }
    .dev-topline { margin-bottom: 10px; }
    .dev-status { display: none; }
    .dev-hero { min-height: 0; padding: 32px 22px; border-radius: 18px; }
    .dev-hero h1 { font-size: clamp(39px, 12vw, 57px); }
    .dev-system-preview { min-height: 0; padding: 13px; }
    .dev-preview-grid { grid-template-columns: 1fr; }
    .dev-section { padding-top: 66px; }
    .dev-section-heading { grid-template-columns: 36px 1fr; gap: 10px; }
    .dev-capability-grid, .dev-flow-grid, .dev-interface-grid, .dev-reliability-grid { grid-template-columns: 1fr; }
    .dev-capability-card { min-height: 220px; }
    .dev-architecture { padding: 18px; }
    .dev-arch-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .dev-arch-lines { display: none; }
    .dev-arch-core { margin: 10px 0; max-width: none; }
    .dev-scale { margin-top: 66px; padding: 28px 20px; border-radius: 18px; }
    .dev-final { padding: 82px 6px 30px; }
}

@media (max-width: 430px) {
    .dev-brand-mark { width: 36px; height: 36px; }
    .dev-brand-mark img { width: 28px; height: 28px; }
    .dev-brand-copy strong { font-size: 13px; }
    .dev-hero { padding: 27px 18px; }
    .dev-tech-row span { font-size: 8px; }
    .dev-section-heading { grid-template-columns: 1fr; }
    .dev-section-number { padding: 0; }
    .dev-section-heading h2, .dev-scale h2, .dev-final h2 { font-size: 31px; }
    .dev-arch-row { grid-template-columns: 1fr; }
    .dev-final-line { grid-template-columns: 1fr; }
    .dev-final-line span { display: none; }
}