:root {
    --ccs-bg: #020604;
    --ccs-bg-soft: #07110d;
    --ccs-bg-band: #0a1511;
    --ccs-panel: rgba(8, 18, 14, .84);
    --ccs-panel-strong: #0d1d17;
    --ccs-line: rgba(0, 255, 102, .28);
    --ccs-line-soft: rgba(0, 255, 102, .14);
    --ccs-green: #00ff66;
    --ccs-green-2: #65ff9d;
    --ccs-cyan: #72f5ff;
    --ccs-amber: #ffd166;
    --ccs-white: #f5f7f5;
    --ccs-muted: #a9b7b0;
    --ccs-dim: #64736b;
    --ccs-shadow: 0 24px 80px rgba(0, 0, 0, .42);
    --font-main: "Inter", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --header-height: 80px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 28px);
}

body.ccs-body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(0, 255, 102, .05), transparent 22rem),
        var(--ccs-bg);
    color: var(--ccs-white);
    font-family: var(--font-main);
    overflow-x: hidden;
}

body.ccs-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px),
        linear-gradient(115deg, transparent 0 18%, rgba(0, 255, 102, .045) 18% 19%, transparent 19% 100%);
    mix-blend-mode: screen;
    opacity: .55;
}

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

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

.ccs-main {
    position: relative;
    z-index: 2;
    padding-top: var(--header-height);
}

.ccs-noise,
.ccs-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.ccs-noise {
    opacity: .08;
    background-image:
        repeating-radial-gradient(circle at 0 0,
        rgba(255, 255, 255, .16) 0,
        rgba(255, 255, 255, .16) 1px,
        transparent 1px,
        transparent 4px);
    animation: ccsNoiseShift 6s steps(5, end) infinite;
}

.ccs-grid {
    opacity: .22;
    background-image:
        linear-gradient(rgba(0, 255, 102, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 102, .12) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(180deg, black, transparent 82%);
    animation: ccsGridDrift 22s linear infinite;
}

.ccs-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 30;
    height: var(--header-height);
    background: rgba(1, 4, 3, .9);
    border-bottom: 1px solid var(--ccs-line);
    backdrop-filter: blur(18px);
}

.ccs-nav-shell {
    width: min(1440px, 100%);
    height: 100%;
    margin: 0 auto;
    padding: 0 44px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.ccs-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: max-content;
    margin-right: auto;
    font-family: var(--font-mono);
    font-weight: 800;
}

.ccs-terminal {
    color: var(--ccs-green);
    font-size: 1.35rem;
    text-shadow: 0 0 18px rgba(0, 255, 102, .8);
}

.ccs-logo-text {
    color: var(--ccs-white);
    font-size: 1rem;
}

.ccs-logo-text span {
    color: var(--ccs-green);
}

.ccs-logo-text small {
    margin-left: 3px;
    color: var(--ccs-muted);
    font-weight: 500;
}

.ccs-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.ccs-nav a,
.ccs-nav-dropdown-toggle,
.ccs-nav-cta {
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.ccs-nav a,
.ccs-nav-dropdown-toggle {
    position: relative;
    color: var(--ccs-muted);
    transition: color .22s ease, text-shadow .22s ease;
}

.ccs-nav a::after,
.ccs-nav-dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: .24em;
    bottom: -10px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--ccs-green);
    transition: transform .22s ease;
}

.ccs-nav a:hover,
.ccs-nav a:focus-visible,
.ccs-nav-dropdown-toggle:hover,
.ccs-nav-dropdown-toggle:focus-visible,
.ccs-nav-dropdown.is-open .ccs-nav-dropdown-toggle {
    color: var(--ccs-green);
    text-shadow: 0 0 14px rgba(0, 255, 102, .55);
}

.ccs-nav a:hover::after,
.ccs-nav a:focus-visible::after,
.ccs-nav-dropdown-toggle:hover::after,
.ccs-nav-dropdown-toggle:focus-visible::after,
.ccs-nav-dropdown.is-open .ccs-nav-dropdown-toggle::after {
    transform: scaleX(1);
}

.ccs-nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.ccs-nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ccs-nav-dropdown-toggle span {
    color: var(--ccs-green);
    transition: transform .2s ease;
}

.ccs-nav-dropdown.is-open .ccs-nav-dropdown-toggle span,
.ccs-nav-dropdown:hover .ccs-nav-dropdown-toggle span,
.ccs-nav-dropdown:focus-within .ccs-nav-dropdown-toggle span {
    transform: rotate(45deg);
}

.ccs-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 24px);
    left: -18px;
    min-width: 310px;
    padding: 10px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(9, 20, 15, .98), rgba(2, 6, 4, .98)),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(0, 255, 102, .05) 18px 19px);
    box-shadow: var(--ccs-shadow), 0 0 34px rgba(0, 255, 102, .12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease;
}

.ccs-nav-dropdown:hover .ccs-nav-dropdown-menu,
.ccs-nav-dropdown:focus-within .ccs-nav-dropdown-menu,
.ccs-nav-dropdown.is-open .ccs-nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ccs-nav-dropdown-menu a {
    display: block;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(0, 255, 102, .1);
    font-size: .7rem;
    letter-spacing: .16em;
    white-space: nowrap;
}

.ccs-nav-dropdown-menu a:last-child {
    border-bottom: 0;
}

.ccs-nav-dropdown-menu a::after {
    display: none;
}

.ccs-nav-dropdown-menu a:hover,
.ccs-nav-dropdown-menu a:focus-visible {
    background: rgba(0, 255, 102, .07);
}

.ccs-nav-cta {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 30px;
    border-left: 1px solid var(--ccs-line);
    border-right: 1px solid var(--ccs-line);
    color: var(--ccs-green);
    transition: background .22s ease, box-shadow .22s ease;
}

.ccs-nav-cta:hover,
.ccs-nav-cta:focus-visible {
    background: rgba(0, 255, 102, .08);
    box-shadow: inset 0 0 34px rgba(0, 255, 102, .08);
}

.ccs-menu-btn {
    display: none;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid var(--ccs-line);
    background: transparent;
    cursor: pointer;
}

.ccs-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ccs-green);
    transition: transform .2s ease, opacity .2s ease;
}

.ccs-menu-btn span + span {
    margin-top: 5px;
}

.ccs-menu-btn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ccs-menu-btn.is-open span:nth-child(2) {
    opacity: 0;
}

.ccs-menu-btn.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.ccs-hero {
    position: relative;
    min-height: calc(100svh - var(--header-height) - 70px);
    overflow: hidden;
    border-bottom: 1px solid var(--ccs-line);
}

.ccs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(2, 6, 4, .98) 0%, rgba(2, 6, 4, .72) 54%, rgba(2, 6, 4, .92) 100%),
        repeating-linear-gradient(90deg, transparent 0 82px, rgba(0, 255, 102, .08) 82px 83px);
}

.ccs-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 0 46%, rgba(0, 255, 102, .12) 50%, transparent 54%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 5px);
    background-size: 100% 320px, 100% 5px;
    mix-blend-mode: screen;
    opacity: .3;
    animation: ccsScanSweep 9s linear infinite;
}

.ccs-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: .72;
}

.ccs-hero-blueprint,
.ccs-hero-scan {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ccs-hero-blueprint {
    opacity: .42;
    background:
        linear-gradient(37deg, transparent 0 26%, rgba(0, 255, 102, .28) 26% 26.2%, transparent 26.2% 100%),
        linear-gradient(142deg, transparent 0 36%, rgba(0, 255, 102, .2) 36% 36.2%, transparent 36.2% 100%),
        linear-gradient(90deg, transparent 0 68%, rgba(0, 255, 102, .16) 68% 68.15%, transparent 68.15% 100%);
    animation: ccsBlueprintFloat 18s ease-in-out infinite alternate;
}

.ccs-blueprint-node {
    position: absolute;
    min-width: 56px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 255, 102, .38);
    background: rgba(2, 6, 4, .72);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-align: center;
    text-shadow: 0 0 12px rgba(0, 255, 102, .45);
}

.node-a {
    top: 19%;
    right: 30%;
}

.node-b {
    top: 39%;
    right: 16%;
}

.node-c {
    bottom: 24%;
    right: 37%;
}

.node-d {
    bottom: 13%;
    right: 9%;
}

.ccs-hero-scan::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18%;
    width: 18%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 102, .1), transparent);
    transform: skewX(-12deg);
    animation: ccsSideScan 7.5s ease-in-out infinite;
}

.ccs-hero-inner,
.ccs-section,
.ccs-final-cta {
    width: min(1280px, calc(100% - 64px));
    margin: 0 auto;
}

.ccs-hero-inner {
    position: relative;
    z-index: 1;
    padding: 16px 0 34px;
}

.ccs-kicker {
    margin: 0 0 34px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.ccs-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .55fr);
    align-items: end;
    gap: 54px;
}

.ccs-hero-copy h1 {
    max-width: 920px;
    margin: 0;
    font-size: 5.05rem;
    line-height: .96;
    font-weight: 900;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.ccs-hero-copy h1 span,
.ccs-section-heading h2 span {
    display: block;
    color: var(--ccs-green);
    text-shadow: 0 0 24px rgba(0, 255, 102, .28);
    animation: ccsGlowBreath 4.5s ease-in-out infinite;
}

.ccs-hero-lead {
    max-width: 660px;
    margin: 26px 0 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.75;
}

.ccs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.ccs-button {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 30px;
    border: 1px solid var(--ccs-line);
    font-family: var(--font-mono);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ccs-button:hover,
.ccs-button:focus-visible {
    transform: translateY(-4px);
}

.ccs-button-primary {
    background: rgba(0, 255, 102, .09);
    color: var(--ccs-green);
    box-shadow: inset 0 0 0 1px rgba(0, 255, 102, .18), 0 0 32px rgba(0, 255, 102, .12);
    animation: ccsButtonPulse 5.5s ease-in-out infinite;
}

.ccs-button-primary:hover,
.ccs-button-primary:focus-visible {
    background: var(--ccs-green);
    color: var(--ccs-bg);
    box-shadow: 0 0 0 1px rgba(0, 255, 102, .8), 0 0 42px rgba(0, 255, 102, .34);
}

.ccs-button-ghost {
    color: var(--ccs-white);
    background: rgba(255, 255, 255, .035);
}

.ccs-button-ghost:hover,
.ccs-button-ghost:focus-visible {
    border-color: rgba(0, 255, 102, .68);
    color: var(--ccs-green);
    box-shadow: inset 0 0 24px rgba(0, 255, 102, .08), 0 0 26px rgba(0, 255, 102, .12);
}

.ccs-button.is-loading,
.ccs-button.is-loading:hover,
.ccs-button.is-loading:focus-visible {
    transform: none;
    cursor: progress;
    opacity: .88;
    box-shadow: 0 0 30px rgba(0, 255, 102, .16);
}

.ccs-button.is-loading[disabled] {
    color: var(--ccs-bg);
}

.ccs-submit-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid rgba(2, 6, 4, .28);
    border-top-color: var(--ccs-bg);
    border-radius: 50%;
    animation: ccsSubmitSpin .72s linear infinite;
}

.ccs-system-card {
    position: relative;
    min-height: 370px;
    padding: 20px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(13, 29, 23, .88), rgba(3, 8, 6, .92)),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(0, 255, 102, .08) 18px 19px);
    box-shadow: var(--ccs-shadow);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.ccs-system-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 255, 102, .62);
    box-shadow: var(--ccs-shadow), 0 0 45px rgba(0, 255, 102, .12);
}

.ccs-system-card::after {
    content: "";
    position: absolute;
    inset: auto 24px 24px 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ccs-green), transparent);
    animation: ccsLinePulse 3s ease-in-out infinite;
}

.ccs-lab-console {
    isolation: isolate;
}

.ccs-lab-console::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 26% 10%, rgba(0, 255, 102, .18), transparent 28%),
        linear-gradient(120deg, transparent 0 38%, rgba(0, 255, 102, .12) 38% 38.3%, transparent 38.3% 100%);
    opacity: .8;
}

.ccs-console-header,
.ccs-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ccs-status-pill,
.ccs-board-header strong,
.ccs-project-status {
    color: var(--ccs-bg);
    background: var(--ccs-green);
    box-shadow: 0 0 22px rgba(0, 255, 102, .22);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .18em;
    padding: 7px 10px;
    text-transform: uppercase;
    animation: ccsStatusPulse 3.6s ease-in-out infinite;
}

.ccs-console-title {
    margin: 22px 0 18px;
}

.ccs-console-title p,
.ccs-board-header span {
    margin: 0 0 7px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.ccs-console-title strong {
    display: block;
    color: var(--ccs-white);
    font-size: 1.28rem;
}

.ccs-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.ccs-metric-grid div {
    min-height: 70px;
    padding: 13px 10px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .28);
}

.ccs-metric-grid span,
.ccs-metric-grid strong {
    display: block;
    font-family: var(--font-mono);
}

.ccs-metric-grid span {
    color: var(--ccs-dim);
    font-size: .58rem;
    letter-spacing: .16em;
}

.ccs-metric-grid strong {
    margin-top: 10px;
    color: var(--ccs-green);
    font-size: .9rem;
}

.ccs-activity-feed {
    min-height: 176px;
}

.ccs-activity-feed p {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.ccs-activity-feed p + p {
    margin-top: 4px;
}

.ccs-mini-architecture {
    display: grid;
    grid-template-columns: 1fr 32px 1fr 32px 1.2fr;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--ccs-green);
}

.ccs-mini-architecture span {
    min-height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .26);
    text-align: center;
}

.ccs-mini-architecture i {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ccs-green), transparent);
    animation: ccsLinePulse 2.4s ease-in-out infinite;
}

.ccs-window-bar {
    display: flex;
    gap: 8px;
}

.ccs-window-bar span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ff5f57;
}

.ccs-window-bar span:nth-child(2) {
    background: var(--ccs-amber);
}

.ccs-window-bar span:nth-child(3) {
    background: var(--ccs-green);
}

.ccs-terminal-lines {
    padding: 18px;
    min-height: 168px;
    background: rgba(0, 0, 0, .48);
    border: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--font-mono);
    font-size: .85rem;
    line-height: 1.7;
    color: var(--ccs-muted);
}

.ccs-terminal-lines p {
    margin: 0;
}

.ccs-terminal-lines span {
    color: var(--ccs-green);
}

.ccs-cursor {
    color: var(--ccs-green);
    animation: ccsBlink 1s steps(2, start) infinite;
}

.ccs-pixel-cat {
    margin-top: 28px;
    color: var(--ccs-green-2);
    font-family: var(--font-mono);
    font-size: 1.25rem;
    line-height: 1.12;
    text-align: right;
    text-shadow: 0 0 18px rgba(0, 255, 102, .45);
}

.ccs-marquee {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0;
    overflow: hidden;
    min-height: 70px;
    border-bottom: 1px solid var(--ccs-line);
    background: rgba(5, 12, 9, .94);
}

.ccs-marquee-track {
    display: flex;
    align-items: center;
    gap: 46px;
    min-width: max-content;
    padding: 0 23px;
    animation: ccsMarquee 34s linear infinite;
}

.ccs-marquee span {
    position: relative;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .34em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ccs-marquee span::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 32px;
    border: 2px solid var(--ccs-green);
    transform: rotate(45deg);
}

.ccs-lab-section {
    position: relative;
}

.ccs-section.ccs-lab-section {
    padding-top: 118px;
    padding-bottom: 118px;
}

.ccs-lab-section::before {
    content: "> software con personalidad";
    position: absolute;
    right: max(32px, calc((100% - 1280px) / 2));
    top: 34px;
    color: rgba(0, 255, 102, .38);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .14em;
}

.ccs-lab-grid {
    display: grid;
    grid-template-columns: 1fr .95fr 1.2fr;
    gap: 20px;
}

.ccs-lab-section .ccs-section-heading,
.ccs-about .ccs-section-heading,
.ccs-projects .ccs-section-heading {
    margin-bottom: 72px;
}

.ccs-lab-board,
.ccs-lab-feed-card,
.ccs-lab-blueprint-card {
    min-height: 330px;
    padding: 28px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(13, 29, 23, .76), rgba(4, 10, 7, .78)),
        repeating-linear-gradient(0deg, transparent 0 21px, rgba(0, 255, 102, .055) 21px 22px);
    box-shadow: var(--ccs-shadow);
    transition: transform .24s ease, border-color .24s ease, background .24s ease;
}

.ccs-lab-board:hover,
.ccs-lab-feed-card:hover,
.ccs-lab-blueprint-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 102, .72);
    box-shadow: var(--ccs-shadow), 0 0 46px rgba(0, 255, 102, .13);
    background:
        linear-gradient(180deg, rgba(14, 37, 27, .84), rgba(4, 10, 7, .82)),
        repeating-linear-gradient(0deg, transparent 0 21px, rgba(0, 255, 102, .075) 21px 22px);
}

.ccs-status-list {
    margin-top: 30px;
    display: grid;
    gap: 14px;
}

.ccs-status-list p {
    margin: 0;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .24);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
}

.ccs-status-list span,
.ccs-log-feed span {
    color: var(--ccs-green);
    font-weight: 800;
}

.ccs-log-feed {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    line-height: 1.8;
}

.ccs-log-feed li {
    position: relative;
    padding: 12px 0 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ccs-log-feed li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--ccs-green);
}

.ccs-log-feed span {
    margin-right: 12px;
}

.ccs-blueprint-map {
    position: relative;
    min-height: 240px;
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid var(--ccs-line-soft);
    background:
        linear-gradient(90deg, transparent 0 24%, rgba(0, 255, 102, .16) 24% 24.4%, transparent 24.4% 100%),
        linear-gradient(0deg, transparent 0 54%, rgba(0, 255, 102, .14) 54% 54.4%, transparent 54.4% 100%),
        linear-gradient(35deg, transparent 0 34%, rgba(0, 255, 102, .2) 34% 34.35%, transparent 34.35% 100%),
        rgba(0, 0, 0, .22);
}

.ccs-blueprint-map::before,
.ccs-blueprint-map::after {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px dashed rgba(0, 255, 102, .18);
}

.ccs-blueprint-map::after {
    inset: 60px 42px;
    animation: ccsBlueprintFloat 10s ease-in-out infinite alternate;
}

.map-node {
    position: absolute;
    min-width: 62px;
    padding: 9px 10px;
    border: 1px solid var(--ccs-line);
    background: rgba(2, 6, 4, .86);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-align: center;
}

.map-node-a {
    top: 34px;
    left: 34px;
}

.map-node-b {
    top: 92px;
    left: 44%;
}

.map-node-c {
    right: 36px;
    top: 48px;
}

.map-node-d {
    right: 62px;
    bottom: 40px;
}

.ccs-section {
    padding: 96px 0;
}

.ccs-section-heading {
    max-width: 850px;
    margin-bottom: 54px;
}

.ccs-section-heading h2 {
    margin: 0;
    font-size: 3.9rem;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
}

.ccs-section-heading p:not(.ccs-kicker) {
    max-width: 680px;
    margin: 24px 0 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.8;
}

.ccs-about {
    background: transparent;
    padding-top: 118px;
    padding-bottom: 118px;
}

.ccs-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    align-items: center;
    gap: 42px;
}

.ccs-brand-panel {
    min-height: 330px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(145deg, rgba(0, 255, 102, .18) 0 10%, transparent 10% 78%, rgba(0, 255, 102, .18) 78% 100%),
        #020403;
    box-shadow: var(--ccs-shadow);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.ccs-brand-panel:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 255, 102, .7);
    box-shadow: var(--ccs-shadow), 0 0 42px rgba(0, 255, 102, .13);
}

.ccs-brand-mark {
    padding: 22px 0;
    color: var(--ccs-white);
    border-top: 1px solid var(--ccs-line);
    border-bottom: 1px solid var(--ccs-line);
    font-family: var(--font-mono);
    font-size: 2.6rem;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 0 16px rgba(255, 255, 255, .45);
}

.ccs-brand-panel p {
    margin: 24px 0 0;
    color: var(--ccs-muted);
    text-align: center;
    font-family: var(--font-mono);
}

.ccs-brand-panel span {
    width: max-content;
    max-width: 100%;
    margin: 24px auto 0;
    padding: 10px 18px;
    border: 1px solid var(--ccs-green);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 800;
}

.ccs-about-copy h3 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
}

.ccs-about-copy > p,
.ccs-mini-feature p {
    color: var(--ccs-muted);
    line-height: 1.85;
}

.ccs-mini-feature {
    margin-top: 28px;
    padding: 22px 0 0 22px;
    border-left: 4px solid var(--ccs-green);
}

.ccs-mini-feature strong {
    color: var(--ccs-white);
}

.ccs-services {
    width: 100%;
    padding-left: max(32px, calc((100% - 1280px) / 2));
    padding-right: max(32px, calc((100% - 1280px) / 2));
    background: rgba(255, 255, 255, .035);
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.ccs-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--ccs-line);
    border-left: 1px solid var(--ccs-line);
}

.ccs-service-card {
    min-height: 380px;
    padding: 54px;
    border-right: 1px solid var(--ccs-line);
    border-bottom: 1px solid var(--ccs-line);
    background: rgba(4, 10, 7, .52);
    transition: background .24s ease, box-shadow .24s ease, transform .24s ease, border-color .24s ease;
}

.ccs-service-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 255, 102, .58);
    background: rgba(0, 255, 102, .05);
    box-shadow: inset 0 -2px 0 var(--ccs-green), 0 0 38px rgba(0, 255, 102, .11);
}

.ccs-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 46px;
}

.ccs-card-top p,
.ccs-card-top span {
    margin: 0;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.ccs-card-top span {
    letter-spacing: 0;
}

.ccs-service-card h3 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.25;
}

.ccs-service-card > p {
    max-width: 520px;
    margin: 26px 0 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.75;
}

.ccs-service-card ul {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.ccs-service-card li {
    position: relative;
    margin: 12px 0;
    padding-left: 24px;
    font-family: var(--font-mono);
}

.ccs-service-card li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--ccs-green);
}

.ccs-project-list {
    display: grid;
    gap: 32px;
}

.ccs-projects {
    padding-top: 120px;
    padding-bottom: 120px;
}

.ccs-project-card {
    min-height: 250px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 26px;
    padding: 46px 52px;
    border: 1px solid var(--ccs-line);
    background: linear-gradient(180deg, rgba(13, 29, 23, .7), rgba(7, 16, 12, .48));
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease, background .26s ease;
}

.ccs-project-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 102, .74);
    box-shadow: var(--ccs-shadow), 0 0 52px rgba(0, 255, 102, .14);
}

.ccs-project-featured {
    align-items: stretch;
    min-height: 330px;
    background:
        linear-gradient(135deg, rgba(0, 255, 102, .12), transparent 38%),
        linear-gradient(180deg, rgba(13, 29, 23, .76), rgba(7, 16, 12, .58));
}

.ccs-project-featured:hover {
    background:
        linear-gradient(135deg, rgba(0, 255, 102, .18), transparent 42%),
        linear-gradient(180deg, rgba(15, 42, 30, .84), rgba(7, 16, 12, .68));
}

.ccs-project-featured > div:first-child {
    max-width: 720px;
}

.ccs-project-status {
    display: inline-flex;
    margin-bottom: 24px;
    color: var(--ccs-green);
    background: rgba(0, 255, 102, .08);
    border: 1px solid var(--ccs-line);
    box-shadow: none;
}

.ccs-project-card h3 {
    margin: 0;
    font-size: 2.35rem;
    font-weight: 500;
}

.ccs-project-card p {
    max-width: 900px;
    margin: 26px 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: 1.05rem;
    line-height: 1.75;
}

.ccs-project-card > a {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ccs-line);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: 1.2rem;
    transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ccs-project-card > a:hover {
    background: var(--ccs-green);
    color: var(--ccs-bg);
    border-color: var(--ccs-green);
    transform: translate(5px, -5px);
    box-shadow: 0 0 30px rgba(0, 255, 102, .24);
}

.ccs-project-dashboard {
    width: min(430px, 100%);
    padding: 16px;
    border: 1px solid var(--ccs-line);
    background:
        radial-gradient(circle at 18% 14%, rgba(0, 255, 102, .18), transparent 28%),
        repeating-linear-gradient(0deg, transparent 0 20px, rgba(0, 255, 102, .06) 20px 21px),
        rgba(0, 0, 0, .34);
    box-shadow: inset 0 0 28px rgba(0, 255, 102, .06);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.ccs-project-card:hover .ccs-project-dashboard {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(0, 255, 102, .76);
    box-shadow: inset 0 0 34px rgba(0, 255, 102, .1), 0 0 36px rgba(0, 255, 102, .13);
}

.dash-window {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .42);
}

.dash-window span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ff5f57;
}

.dash-window span:nth-child(2) {
    background: var(--ccs-amber);
}

.dash-window span:nth-child(3) {
    background: var(--ccs-green);
}

.dash-window strong {
    margin-left: auto;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .16em;
}

.dash-screen {
    display: grid;
    grid-template-columns: 88px 1fr;
    min-height: 210px;
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .26);
}

.dash-sidebar {
    padding: 14px 10px;
    border-right: 1px solid rgba(0, 255, 102, .14);
    background: rgba(0, 255, 102, .04);
}

.dash-sidebar span {
    display: block;
    margin-bottom: 13px;
    padding: 8px 7px;
    border: 1px solid rgba(0, 255, 102, .16);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.dash-sidebar span:first-child {
    color: var(--ccs-bg);
    background: var(--ccs-green);
}

.dash-main {
    padding: 16px;
}

.dash-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing: .18em;
}

.dash-row strong {
    color: var(--ccs-green);
    font-size: 1rem;
}

.dash-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: 10px;
    height: 82px;
    margin: 20px 0;
}

.dash-bars span {
    display: block;
    min-height: 22px;
    border: 1px solid var(--ccs-line);
    background: linear-gradient(180deg, rgba(0, 255, 102, .34), rgba(0, 255, 102, .06));
    animation: ccsBarPulse 3.4s ease-in-out infinite;
}

.dash-bars span:nth-child(1) {
    height: 45%;
}

.dash-bars span:nth-child(2) {
    height: 72%;
    animation-delay: .2s;
}

.dash-bars span:nth-child(3) {
    height: 54%;
    animation-delay: .4s;
}

.dash-bars span:nth-child(4) {
    height: 86%;
    animation-delay: .6s;
}

.dash-orders {
    display: grid;
    gap: 8px;
}

.dash-orders p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .62rem;
}

.dash-orders strong {
    color: var(--ccs-green);
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.dash-grid p {
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    color: var(--ccs-dim);
    font-family: var(--font-mono);
    font-size: .68rem;
}

.dash-grid strong {
    display: block;
    margin-top: 8px;
    color: var(--ccs-green);
    font-size: .82rem;
}

.ccs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ccs-tags span {
    padding: 9px 13px;
    border: 1px solid var(--ccs-line);
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.ccs-tags span:hover {
    border-color: rgba(0, 255, 102, .72);
    color: var(--ccs-green);
    box-shadow: 0 0 20px rgba(0, 255, 102, .1);
}

.ccs-image-panel {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(2, 6, 4, .04), rgba(2, 6, 4, .84)),
        repeating-linear-gradient(90deg, rgba(114, 245, 255, .08) 0 2px, transparent 2px 32px),
        #09120e;
}

.ccs-image-panel > span {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 2;
    padding: 10px 14px;
    border: 1px solid var(--ccs-green);
    color: var(--ccs-green);
    background: rgba(2, 6, 4, .88);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .3em;
}

/* ABOUT PAGE */

.ccs-about-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ccs-line);
    background:
        linear-gradient(90deg, rgba(2, 6, 4, .98), rgba(2, 6, 4, .72), rgba(2, 6, 4, .94)),
        radial-gradient(circle at 80% 22%, rgba(0, 255, 102, .16), transparent 32%);
}

.ccs-about-hero::before,
.ccs-about-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ccs-about-hero::before {
    background:
        linear-gradient(120deg, transparent 0 24%, rgba(0, 255, 102, .2) 24% 24.2%, transparent 24.2% 100%),
        linear-gradient(42deg, transparent 0 55%, rgba(0, 255, 102, .12) 55% 55.2%, transparent 55.2% 100%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 5px);
    opacity: .7;
    animation: ccsBlueprintFloat 16s ease-in-out infinite alternate;
}

.ccs-about-hero::after {
    background: linear-gradient(180deg, transparent 0 46%, rgba(0, 255, 102, .11) 50%, transparent 54%);
    background-size: 100% 320px;
    opacity: .35;
    animation: ccsScanSweep 10s linear infinite;
}

.ccs-about-hero-grid {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 64px));
    min-height: calc(100svh - var(--header-height) - 70px);
    margin: 0 auto;
    padding: 92px 0 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .48fr);
    align-items: center;
    gap: 68px;
}

.ccs-about-hero-copy h1 {
    max-width: 980px;
    margin: 0;
    font-size: 4.85rem;
    line-height: .99;
    font-weight: 900;
    letter-spacing: 0;
}

.ccs-about-hero-copy h1 span {
    display: block;
    color: var(--ccs-green);
    animation: ccsGlowBreath 4.8s ease-in-out infinite;
}

.ccs-about-hero-copy > p:not(.ccs-kicker) {
    max-width: 760px;
    margin: 30px 0 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: 1.02rem;
    line-height: 1.85;
}

.ccs-about-identity {
    padding: 28px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(13, 29, 23, .84), rgba(4, 10, 7, .86)),
        repeating-linear-gradient(0deg, transparent 0 20px, rgba(0, 255, 102, .06) 20px 21px);
    box-shadow: var(--ccs-shadow);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.ccs-about-identity:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 102, .7);
    box-shadow: var(--ccs-shadow), 0 0 42px rgba(0, 255, 102, .13);
}

.ccs-about-identity > p {
    margin: 28px 0 8px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .28em;
}

.ccs-about-identity strong {
    display: block;
    color: var(--ccs-white);
    font-size: 1.55rem;
}

.ccs-identity-lines {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}

.ccs-identity-lines span {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    color: var(--ccs-muted);
    background: rgba(0, 0, 0, .22);
    font-family: var(--font-mono);
}

.ccs-identity-lines span::before {
    content: "> ";
    color: var(--ccs-green);
}

.ccs-about-definition,
.ccs-origin-section,
.ccs-philosophy-section,
.ccs-stack-section,
.ccs-born-section,
.ccs-human-section,
.ccs-values-section,
.ccs-manifesto-section {
    padding-top: 120px;
    padding-bottom: 120px;
}

.ccs-about-split {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(360px, .8fr);
    gap: 60px;
    align-items: start;
}

.ccs-about-text-panel,
.ccs-human-card,
.ccs-manifesto,
.ccs-stack-terminal {
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(13, 29, 23, .72), rgba(4, 10, 7, .78)),
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(0, 255, 102, .055) 22px 23px);
    box-shadow: var(--ccs-shadow);
}

.ccs-about-text-panel {
    padding: 36px;
}

.ccs-about-text-panel p {
    margin: 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: 1.05rem;
    line-height: 1.85;
}

.ccs-about-text-panel p + p {
    margin-top: 20px;
}

.ccs-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--ccs-line);
    border-left: 1px solid var(--ccs-line);
}

.ccs-timeline article,
.ccs-philosophy-grid article,
.ccs-values-grid article,
.ccs-born-card {
    position: relative;
    min-height: 260px;
    padding: 34px;
    border-right: 1px solid var(--ccs-line);
    border-bottom: 1px solid var(--ccs-line);
    background: rgba(4, 10, 7, .56);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease, background .26s ease;
}

.ccs-timeline article:hover,
.ccs-philosophy-grid article:hover,
.ccs-values-grid article:hover,
.ccs-born-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 102, .72);
    background: rgba(0, 255, 102, .05);
    box-shadow: 0 0 42px rgba(0, 255, 102, .12);
}

.ccs-timeline article::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 34px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--ccs-green);
    background: var(--ccs-bg);
    transform: rotate(45deg);
}

.ccs-timeline span,
.ccs-philosophy-grid span,
.ccs-values-grid span,
.ccs-born-card span {
    display: block;
    margin-bottom: 30px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .24em;
}

.ccs-timeline h3,
.ccs-philosophy-grid h3,
.ccs-values-grid h3,
.ccs-born-card h3 {
    margin: 0 0 18px;
    font-size: 1.5rem;
}

.ccs-timeline p,
.ccs-philosophy-grid p,
.ccs-values-grid p,
.ccs-born-card p,
.ccs-human-card p {
    margin: 0;
    color: var(--ccs-muted);
    line-height: 1.8;
}

.ccs-philosophy-grid,
.ccs-values-grid,
.ccs-born-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ccs-stack-terminal {
    padding: 36px;
}

.ccs-stack-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 34px 0;
}

.ccs-stack-grid span {
    min-height: 74px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ccs-line-soft);
    color: var(--ccs-white);
    background: rgba(0, 0, 0, .26);
    font-family: var(--font-mono);
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: transform .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.ccs-stack-grid span:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 102, .7);
    color: var(--ccs-green);
    box-shadow: 0 0 28px rgba(0, 255, 102, .11);
}

.ccs-stack-terminal > p {
    margin: 0;
    color: var(--ccs-green);
    font-family: var(--font-mono);
}

.ccs-born-card {
    min-height: 320px;
    background:
        linear-gradient(135deg, rgba(0, 255, 102, .1), transparent 44%),
        rgba(4, 10, 7, .58);
}

.ccs-human-card {
    padding: 46px;
}

.ccs-human-card h2 {
    max-width: 920px;
    margin: 0;
    font-size: 3.3rem;
    line-height: 1.08;
}

.ccs-human-card > p:not(.ccs-kicker) {
    max-width: 760px;
    margin-top: 26px;
    font-family: var(--font-mono);
    font-size: 1rem;
}

.ccs-manifesto {
    padding: 42px;
}

.ccs-manifesto-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.ccs-manifesto-grid div {
    padding: 28px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .24);
}

.ccs-manifesto-grid p {
    margin: 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.9;
}

.ccs-manifesto-grid p + p {
    margin-top: 12px;
}

.ccs-manifesto-grid p::before {
    color: var(--ccs-green);
}

.ccs-manifesto-grid div:first-child p::before {
    content: "NO // ";
}

.ccs-manifesto-grid div:last-child p::before {
    content: "YES // ";
}

/* SERVICES PAGE */

.ccs-services-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ccs-line);
    background:
        linear-gradient(90deg, rgba(2, 6, 4, .98), rgba(2, 6, 4, .72), rgba(2, 6, 4, .94)),
        radial-gradient(circle at 78% 24%, rgba(0, 255, 102, .14), transparent 32%);
}

.ccs-services-hero::before,
.ccs-services-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ccs-services-hero::before {
    background:
        linear-gradient(38deg, transparent 0 28%, rgba(0, 255, 102, .18) 28% 28.2%, transparent 28.2% 100%),
        linear-gradient(132deg, transparent 0 58%, rgba(0, 255, 102, .12) 58% 58.2%, transparent 58.2% 100%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 5px);
    opacity: .75;
    animation: ccsBlueprintFloat 18s ease-in-out infinite alternate;
}

.ccs-services-hero::after {
    background: linear-gradient(180deg, transparent 0 46%, rgba(0, 255, 102, .1) 50%, transparent 54%);
    background-size: 100% 320px;
    opacity: .35;
    animation: ccsScanSweep 10s linear infinite;
}

.ccs-service-blueprint {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.service-node {
    position: absolute;
    min-width: 82px;
    padding: 9px 11px;
    border: 1px solid rgba(0, 255, 102, .34);
    background: rgba(2, 6, 4, .76);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-align: center;
}

.service-node-a {
    top: 18%;
    right: 31%;
}

.service-node-b {
    top: 42%;
    right: 12%;
}

.service-node-c {
    bottom: 18%;
    right: 27%;
}

.service-node-d {
    bottom: 30%;
    right: 45%;
}

.ccs-services-hero-grid {
    position: relative;
    z-index: 3;
    width: min(1280px, calc(100% - 64px));
    min-height: calc(100svh - var(--header-height) - 70px);
    margin: 0 auto;
    padding: 92px 0 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .48fr);
    align-items: center;
    gap: 68px;
}

.ccs-services-hero-copy h1 {
    max-width: 980px;
    margin: 0;
    font-size: 5rem;
    line-height: .98;
    font-weight: 900;
}

.ccs-services-hero-copy h1 span {
    display: block;
    color: var(--ccs-green);
    animation: ccsGlowBreath 4.8s ease-in-out infinite;
}

.ccs-services-hero-copy > p:not(.ccs-kicker) {
    max-width: 740px;
    margin: 30px 0 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: 1.02rem;
    line-height: 1.85;
}

.ccs-services-console,
.ccs-cloud-dashboard,
.ccs-case-screen {
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(13, 29, 23, .84), rgba(4, 10, 7, .86)),
        repeating-linear-gradient(0deg, transparent 0 20px, rgba(0, 255, 102, .06) 20px 21px);
    box-shadow: var(--ccs-shadow);
}

.ccs-services-console {
    padding: 28px;
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.ccs-services-console:hover,
.ccs-cloud-dashboard:hover,
.ccs-case-screen:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 102, .72);
    box-shadow: var(--ccs-shadow), 0 0 42px rgba(0, 255, 102, .13);
}

.ccs-capabilities-section,
.ccs-private-cloud-section,
.ccs-case-section,
.ccs-process-section,
.ccs-no-section {
    padding-top: 120px;
    padding-bottom: 120px;
}

.ccs-private-cloud-section {
    position: relative;
    overflow: hidden;
}

.ccs-private-cloud-section::before,
.ccs-private-cloud-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.ccs-private-cloud-section::before {
    inset: 12% -12% auto auto;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(0, 255, 102, .16), transparent 68%);
    filter: blur(28px);
    opacity: .45;
    animation: ccsFogDrift 16s ease-in-out infinite alternate;
}

.ccs-private-cloud-section::after {
    inset: auto auto 8% -10%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(101, 255, 157, .1), transparent 70%);
    filter: blur(34px);
    opacity: .4;
    animation: ccsFogDrift 18s ease-in-out infinite alternate-reverse;
}

.ccs-module-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.ccs-service-module {
    position: relative;
    overflow: hidden;
    grid-column: span 2;
    min-height: 340px;
    padding: 30px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(13, 29, 23, .7), rgba(4, 10, 7, .76)),
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(0, 255, 102, .052) 22px 23px);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease, background .26s ease;
}

.ccs-service-module::before {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border: 1px solid transparent;
    background:
        linear-gradient(90deg, transparent, rgba(0, 255, 102, .42), transparent) top left / 100% 1px no-repeat,
        linear-gradient(180deg, transparent, rgba(0, 255, 102, .22), transparent) top right / 1px 100% no-repeat;
    opacity: 0;
    transition: opacity .26s ease;
}

.ccs-service-module::after {
    content: "";
    position: absolute;
    top: 28px;
    right: 28px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--ccs-green);
    box-shadow: 0 0 18px rgba(0, 255, 102, .75);
    opacity: .72;
    animation: ccsNodePulse 2.8s ease-in-out infinite;
}

.ccs-service-module:nth-child(4),
.ccs-service-module:nth-child(5) {
    grid-column: span 3;
}

.ccs-service-module:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 255, 102, .78);
    background:
        linear-gradient(180deg, rgba(15, 42, 30, .82), rgba(4, 10, 7, .82)),
        repeating-linear-gradient(0deg, transparent 0 22px, rgba(0, 255, 102, .07) 22px 23px);
    box-shadow: var(--ccs-shadow), 0 0 58px rgba(0, 255, 102, .17);
}

.ccs-service-module:hover::before {
    opacity: 1;
}

.ccs-service-module:hover::after {
    opacity: 1;
    transform: scale(1.25);
}

.ccs-module-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 44px;
}

.ccs-module-top span,
.ccs-module-top strong,
.ccs-module-meta span {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.ccs-module-top strong {
    padding: 7px 9px;
    border: 1px solid var(--ccs-line);
    background: rgba(0, 255, 102, .08);
    box-shadow: inset 0 0 18px rgba(0, 255, 102, .06);
    animation: ccsStatusPulse 4.2s ease-in-out infinite;
}

.ccs-service-module h3 {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.2;
}

.ccs-service-module > p {
    margin: 24px 0 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    line-height: 1.75;
}

.ccs-module-meta {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--ccs-line-soft);
    transition: border-color .24s ease;
}

.ccs-service-module:hover .ccs-module-meta {
    border-color: rgba(0, 255, 102, .42);
}

.ccs-module-meta p {
    margin: 8px 0 0;
    color: var(--ccs-white);
    font-family: var(--font-mono);
}

.ccs-cloud-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(420px, 1fr);
    align-items: center;
    gap: 60px;
}

.ccs-cloud-dashboard {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 30px;
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.ccs-cloud-dashboard::before {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 40%, rgba(0, 255, 102, .16) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 32%, rgba(0, 255, 102, .14) 0 2px, transparent 3px),
        radial-gradient(circle at 48% 72%, rgba(101, 255, 157, .13) 0 2px, transparent 3px);
    background-size: 180px 180px, 220px 220px, 260px 260px;
    opacity: .46;
    animation: ccsCloudParticles 22s linear infinite;
}

.ccs-cloud-dashboard > * {
    position: relative;
    z-index: 1;
}

.ccs-cloud-map {
    position: relative;
    z-index: 1;
    min-height: 320px;
    margin: 28px 0;
    overflow: hidden;
    border: 1px solid var(--ccs-line-soft);
    background:
        linear-gradient(42deg, transparent 0 34%, rgba(0, 255, 102, .22) 34% 34.3%, transparent 34.3% 100%),
        linear-gradient(134deg, transparent 0 46%, rgba(0, 255, 102, .16) 46% 46.3%, transparent 46.3% 100%),
        radial-gradient(circle at 42% 48%, rgba(0, 255, 102, .18), transparent 30%),
        rgba(0, 0, 0, .25);
}

.ccs-cloud-map::before,
.ccs-cloud-map::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.ccs-cloud-map::before {
    inset: 20px;
    border: 1px dashed rgba(0, 255, 102, .16);
    animation: ccsBlueprintFloat 12s ease-in-out infinite alternate;
}

.ccs-cloud-map::after {
    left: 14%;
    right: 14%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 102, .8), transparent);
    opacity: .68;
    animation: ccsSyncLine 3.4s ease-in-out infinite;
}

.cloud-node {
    position: absolute;
    z-index: 2;
    min-width: 86px;
    padding: 12px;
    border: 1px solid var(--ccs-line);
    background: rgba(2, 6, 4, .86);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-align: center;
    animation: ccsNodePulse 3.8s ease-in-out infinite;
}

.cloud-node::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(0, 255, 102, .16);
    opacity: 0;
    animation: ccsNodeRing 3.8s ease-in-out infinite;
}

.cloud-b {
    animation-delay: .35s;
}

.cloud-c {
    animation-delay: .7s;
}

.cloud-d {
    animation-delay: 1.05s;
}

.cloud-a {
    top: 36px;
    left: 42px;
}

.cloud-b {
    top: 130px;
    left: 42%;
}

.cloud-c {
    right: 44px;
    top: 52px;
}

.cloud-d {
    right: 74px;
    bottom: 44px;
}

.ccs-cloud-stats,
.ccs-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ccs-cloud-stats p,
.ccs-case-grid p {
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .07);
    color: var(--ccs-dim);
    background: rgba(0, 0, 0, .25);
    font-family: var(--font-mono);
    font-size: .72rem;
}

.ccs-cloud-stats strong,
.ccs-case-grid strong {
    display: block;
    margin-top: 9px;
    color: var(--ccs-green);
    font-size: .95rem;
}

.ccs-case-card {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(380px, .7fr);
    gap: 52px;
    align-items: center;
    padding: 46px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(135deg, rgba(0, 255, 102, .12), transparent 42%),
        linear-gradient(180deg, rgba(13, 29, 23, .72), rgba(4, 10, 7, .76));
    box-shadow: var(--ccs-shadow);
}

.ccs-case-card h2,
.ccs-services-cta h2 {
    margin: 0;
    font-size: 3.2rem;
    line-height: 1.08;
}

.ccs-case-card p:not(.ccs-kicker) {
    max-width: 720px;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    line-height: 1.8;
}

.ccs-case-screen {
    padding: 18px;
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.ccs-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
}

.ccs-process-pipeline {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-left: 1px solid var(--ccs-line);
    border-top: 1px solid var(--ccs-line);
}

.ccs-process-pipeline span {
    position: relative;
    min-height: 118px;
    display: grid;
    place-items: center;
    border-right: 1px solid var(--ccs-line);
    border-bottom: 1px solid var(--ccs-line);
    color: var(--ccs-white);
    background: rgba(4, 10, 7, .56);
    font-family: var(--font-mono);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .24s ease, color .24s ease, box-shadow .24s ease, border-color .24s ease;
    animation: ccsPipelineBlink 7.2s ease-in-out infinite;
}

.ccs-process-pipeline span::after {
    content: ">";
    position: absolute;
    right: -10px;
    z-index: 2;
    color: var(--ccs-green);
    animation: ccsArrowBlink 2.4s ease-in-out infinite;
}

.ccs-process-pipeline span:last-child::after {
    display: none;
}

.ccs-process-pipeline span:nth-child(2) {
    animation-delay: .25s;
}

.ccs-process-pipeline span:nth-child(3) {
    animation-delay: .5s;
}

.ccs-process-pipeline span:nth-child(4) {
    animation-delay: .75s;
}

.ccs-process-pipeline span:nth-child(5) {
    animation-delay: 1s;
}

.ccs-process-pipeline span:nth-child(6) {
    animation-delay: 1.25s;
}

.ccs-process-pipeline span:hover {
    transform: translateY(-6px);
    color: var(--ccs-green);
    border-color: rgba(0, 255, 102, .62);
    box-shadow: inset 0 0 24px rgba(0, 255, 102, .08), 0 0 28px rgba(0, 255, 102, .1);
}

.ccs-no-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ccs-no-grid article {
    padding: 34px;
    border: 1px solid var(--ccs-line);
    background: rgba(4, 10, 7, .64);
}

.ccs-no-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccs-no-grid li {
    padding: 16px 0 16px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    position: relative;
}

.ccs-no-grid li::before {
    position: absolute;
    left: 0;
    color: var(--ccs-green);
}

.ccs-no-grid article:first-child li::before {
    content: "NO";
}

.ccs-no-grid article:last-child li::before {
    content: "OK";
}

.ccs-services-cta {
    width: min(1280px, calc(100% - 64px));
    margin: 0 auto;
    padding: 90px 0 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    border-top: 1px solid var(--ccs-line-soft);
}

.ccs-node-map {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(28deg, transparent 0 12%, rgba(101, 255, 157, .55) 12% 12.5%, transparent 12.5% 100%),
        linear-gradient(154deg, transparent 0 22%, rgba(101, 255, 157, .35) 22% 22.5%, transparent 22.5% 100%),
        linear-gradient(96deg, transparent 0 44%, rgba(114, 245, 255, .3) 44% 44.5%, transparent 44.5% 100%),
        radial-gradient(circle at 20% 68%, rgba(101, 255, 157, .95) 0 5px, transparent 6px),
        radial-gradient(circle at 36% 48%, rgba(101, 255, 157, .95) 0 5px, transparent 6px),
        radial-gradient(circle at 58% 60%, rgba(101, 255, 157, .95) 0 5px, transparent 6px),
        radial-gradient(circle at 72% 36%, rgba(101, 255, 157, .95) 0 5px, transparent 6px);
    opacity: .72;
    animation: ccsPan 16s linear infinite alternate;
}

.ccs-why {
    padding-top: 30px;
}

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

.ccs-why-grid article {
    min-height: 260px;
    padding: 34px;
    background: var(--ccs-panel);
    border: 1px solid rgba(255, 255, 255, .06);
}

.ccs-why-grid span {
    display: block;
    margin-bottom: 34px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 800;
}

.ccs-why-grid h3 {
    margin: 0 0 18px;
    font-size: 1.35rem;
}

.ccs-why-grid p {
    margin: 0;
    color: var(--ccs-muted);
    line-height: 1.8;
}

.ccs-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 72px 0 100px;
    border-top: 1px solid var(--ccs-line-soft);
}

.ccs-final-cta h2 {
    max-width: 760px;
    margin: 0;
    font-size: 3rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.ccs-footer {
    position: relative;
    z-index: 2;
    padding: 74px 6vw 34px;
    background: #010201;
    border-top: 1px solid var(--ccs-line);
}

.ccs-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 44px;
    max-width: 1320px;
    margin: 0 auto;
}

.ccs-footer-brand {
    display: block;
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 800;
}

.ccs-footer-brand span {
    color: var(--ccs-green);
}

.ccs-footer-brand small {
    color: var(--ccs-muted);
}

.ccs-footer p {
    max-width: 430px;
    color: var(--ccs-muted);
    line-height: 1.8;
}

.ccs-footer-terminal {
    max-width: 430px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid var(--ccs-line-soft);
    background:
        linear-gradient(180deg, rgba(0, 255, 102, .055), transparent),
        rgba(0, 0, 0, .36);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.ccs-footer-terminal:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 255, 102, .52);
    box-shadow: 0 0 32px rgba(0, 255, 102, .12);
}

.ccs-footer-terminal p {
    margin: 0;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.75;
}

.ccs-footer-terminal span {
    color: var(--ccs-green);
    font-weight: 800;
}

.ccs-footer h4 {
    margin: 0 0 18px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.ccs-footer a:not(.ccs-footer-brand) {
    display: block;
    margin-bottom: 12px;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .9rem;
    overflow-wrap: anywhere;
}

.ccs-footer a:hover,
.ccs-footer a:focus-visible {
    color: var(--ccs-green);
}

.ccs-footer-bottom {
    max-width: 1320px;
    margin: 58px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--ccs-dim);
    font-family: var(--font-mono);
    font-size: .82rem;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .72s ease, transform .72s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes ccsBlink {
    50% {
        opacity: 0;
    }
}

@keyframes ccsMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes ccsPan {
    from {
        transform: scale(1.02) translateX(-1%);
    }

    to {
        transform: scale(1.08) translateX(1%);
    }
}

@keyframes ccsNoiseShift {
    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(-1%, 1%, 0);
    }

    50% {
        transform: translate3d(1%, -.5%, 0);
    }

    75% {
        transform: translate3d(.5%, 1%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ccsGridDrift {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 88px 88px, 88px 88px;
    }
}

@keyframes ccsScanSweep {
    from {
        background-position: 0 -320px, 0 0;
    }

    to {
        background-position: 0 320px, 0 0;
    }
}

@keyframes ccsSideScan {
    0%,
    18% {
        transform: translateX(0) skewX(-12deg);
        opacity: 0;
    }

    46% {
        opacity: 1;
    }

    78%,
    100% {
        transform: translateX(760%) skewX(-12deg);
        opacity: 0;
    }
}

@keyframes ccsBlueprintFloat {
    from {
        transform: translate3d(-8px, -4px, 0);
    }

    to {
        transform: translate3d(8px, 6px, 0);
    }
}

@keyframes ccsGlowBreath {
    0%,
    100% {
        text-shadow: 0 0 20px rgba(0, 255, 102, .22);
    }

    50% {
        text-shadow: 0 0 34px rgba(0, 255, 102, .5);
    }
}

@keyframes ccsButtonPulse {
    0%,
    100% {
        box-shadow: inset 0 0 0 1px rgba(0, 255, 102, .18), 0 0 28px rgba(0, 255, 102, .1);
    }

    50% {
        box-shadow: inset 0 0 0 1px rgba(0, 255, 102, .3), 0 0 42px rgba(0, 255, 102, .22);
    }
}

@keyframes ccsSubmitSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ccsLinePulse {
    0%,
    100% {
        opacity: .45;
        transform: scaleX(.82);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes ccsBarPulse {
    0%,
    100% {
        filter: brightness(.9);
        transform: scaleY(.96);
    }

    50% {
        filter: brightness(1.25);
        transform: scaleY(1);
    }
}

@keyframes ccsStatusPulse {
    0%,
    100% {
        filter: brightness(.95);
        box-shadow: 0 0 18px rgba(0, 255, 102, .16);
    }

    50% {
        filter: brightness(1.2);
        box-shadow: 0 0 30px rgba(0, 255, 102, .28);
    }
}

@keyframes ccsNodePulse {
    0%,
    100% {
        filter: brightness(.9);
        box-shadow: 0 0 12px rgba(0, 255, 102, .18);
    }

    50% {
        filter: brightness(1.25);
        box-shadow: 0 0 26px rgba(0, 255, 102, .34);
    }
}

@keyframes ccsNodeRing {
    0%,
    100% {
        opacity: 0;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes ccsFogDrift {
    from {
        transform: translate3d(-24px, -10px, 0) scale(.98);
    }

    to {
        transform: translate3d(28px, 18px, 0) scale(1.05);
    }
}

@keyframes ccsCloudParticles {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(180px, 120px, 0);
    }
}

@keyframes ccsSyncLine {
    0%,
    100% {
        opacity: .25;
        transform: scaleX(.55);
    }

    50% {
        opacity: .9;
        transform: scaleX(1);
    }
}

@keyframes ccsPipelineBlink {
    0%,
    100% {
        color: var(--ccs-white);
        background: rgba(4, 10, 7, .56);
    }

    50% {
        color: var(--ccs-green);
        background: rgba(0, 255, 102, .055);
    }
}

@keyframes ccsArrowBlink {
    0%,
    100% {
        opacity: .38;
    }

    50% {
        opacity: 1;
    }
}

@media (max-width: 1180px) {
    .ccs-nav {
        gap: 22px;
    }

    .ccs-nav a,
    .ccs-nav-cta {
        font-size: .68rem;
    }

    .ccs-hero-grid {
        grid-template-columns: 1fr;
    }

    .ccs-system-card {
        max-width: 620px;
    }

    .ccs-hero-copy h1 {
        font-size: 4.4rem;
    }

    .ccs-lab-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ccs-lab-blueprint-card {
        grid-column: 1 / -1;
    }

    .ccs-project-dashboard {
        width: 340px;
    }

    .ccs-about-hero-grid,
    .ccs-about-split {
        grid-template-columns: 1fr;
    }

    .ccs-about-identity {
        max-width: 620px;
    }

    .ccs-about-hero-copy h1 {
        font-size: 4rem;
    }

    .ccs-timeline,
    .ccs-stack-grid,
    .ccs-module-grid,
    .ccs-process-pipeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ccs-service-module,
    .ccs-service-module:nth-child(4),
    .ccs-service-module:nth-child(5) {
        grid-column: auto;
    }

    .ccs-services-hero-grid,
    .ccs-cloud-grid,
    .ccs-case-card {
        grid-template-columns: 1fr;
    }

    .ccs-services-console,
    .ccs-cloud-dashboard,
    .ccs-case-screen {
        max-width: 680px;
    }

    .ccs-services-hero-copy h1 {
        font-size: 4rem;
    }
}

@media (max-width: 980px) {
    :root {
        --header-height: 74px;
    }

    .ccs-nav-shell {
        padding: 0 22px;
    }

    .ccs-menu-btn {
        display: grid;
    }

    .ccs-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 14px 22px 24px;
        background: rgba(2, 5, 4, .98);
        border-bottom: 1px solid var(--ccs-line);
        transform: translateY(-14px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
    }

    .ccs-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .ccs-nav a,
    .ccs-nav-dropdown,
    .ccs-nav-dropdown-toggle {
        width: 100%;
    }

    .ccs-nav-dropdown {
        display: block;
    }

    .ccs-nav-dropdown-toggle {
        justify-content: space-between;
        padding: 17px 0;
        border-bottom: 1px solid var(--ccs-line-soft);
    }

    .ccs-nav a {
        padding: 17px 0;
        border-bottom: 1px solid var(--ccs-line-soft);
    }

    .ccs-nav a::after,
    .ccs-nav-dropdown-toggle::after {
        display: none;
    }

    .ccs-nav-dropdown-menu {
        position: static;
        min-width: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding: 0 0 0 16px;
        border: 0;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        pointer-events: none;
        transform: none;
        transition: max-height .24s ease, opacity .2s ease, padding .2s ease;
    }

    .ccs-nav-dropdown:not(.is-open) .ccs-nav-dropdown-menu {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }

    .ccs-nav-dropdown.is-open .ccs-nav-dropdown-menu {
        max-height: 240px;
        padding: 6px 0 10px 16px;
        opacity: 1;
        pointer-events: auto;
    }

    .ccs-nav-dropdown-menu a {
        padding: 13px 0;
        font-size: .68rem;
        letter-spacing: .14em;
        white-space: normal;
    }

    .ccs-nav-cta {
        display: none;
    }

    .ccs-hero-inner,
    .ccs-section,
    .ccs-final-cta {
        width: min(100% - 40px, 1280px);
    }

    .ccs-hero {
        min-height: calc(100svh - var(--header-height) - 58px);
    }

    .ccs-hero-copy h1,
    .ccs-section-heading h2 {
        font-size: 3.25rem;
    }

    .ccs-about-grid,
    .ccs-service-grid,
    .ccs-lab-grid,
    .ccs-philosophy-grid,
    .ccs-values-grid,
    .ccs-born-grid,
    .ccs-manifesto-grid,
    .ccs-why-grid {
        grid-template-columns: 1fr;
    }

    .ccs-about-hero-grid {
        width: min(100% - 40px, 1280px);
        min-height: auto;
        padding: 76px 0 68px;
    }

    .ccs-services-hero-grid {
        width: min(100% - 40px, 1280px);
        min-height: auto;
        padding: 76px 0 68px;
    }

    .ccs-about-hero-copy h1 {
        font-size: 3.25rem;
    }

    .ccs-about-definition,
    .ccs-origin-section,
    .ccs-philosophy-section,
    .ccs-stack-section,
    .ccs-born-section,
    .ccs-human-section,
    .ccs-values-section,
    .ccs-manifesto-section,
    .ccs-capabilities-section,
    .ccs-private-cloud-section,
    .ccs-case-section,
    .ccs-process-section,
    .ccs-no-section {
        padding-top: 92px;
        padding-bottom: 92px;
    }

    .ccs-timeline {
        grid-template-columns: 1fr;
    }

    .ccs-module-grid,
    .ccs-process-pipeline,
    .ccs-no-grid {
        grid-template-columns: 1fr;
    }

    .ccs-process-pipeline span::after {
        right: auto;
        bottom: -14px;
        transform: rotate(90deg);
    }

    .ccs-human-card h2 {
        font-size: 2.55rem;
    }

    .ccs-lab-blueprint-card {
        grid-column: auto;
    }

    .ccs-service-card {
        min-height: auto;
        padding: 36px;
    }

    .ccs-project-card,
    .ccs-final-cta,
    .ccs-services-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .ccs-project-dashboard {
        width: 100%;
    }

    .ccs-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .ccs-logo-text {
        font-size: .92rem;
    }

    .ccs-logo-text small {
        display: none;
    }

    .ccs-hero-inner {
        padding-top: 14px;
        padding-bottom: 26px;
    }

    .ccs-hero-grid {
        gap: 26px;
    }

    .ccs-hero-blueprint {
        opacity: .25;
    }

    .ccs-blueprint-node {
        display: none;
    }

    .ccs-system-card {
        display: none;
    }

    .ccs-kicker {
        margin-bottom: 24px;
        font-size: .72rem;
        letter-spacing: .24em;
    }

    .ccs-hero-copy h1,
    .ccs-section-heading h2,
    .ccs-about-hero-copy h1,
    .ccs-services-hero-copy h1 {
        font-size: 2.55rem;
    }

    .ccs-hero-lead,
    .ccs-section-heading p:not(.ccs-kicker),
    .ccs-project-card p {
        font-size: .92rem;
    }

    .ccs-button {
        width: 100%;
        min-height: 54px;
        padding: 0 18px;
        font-size: .74rem;
        letter-spacing: .15em;
    }

    .ccs-brand-panel,
    .ccs-project-card {
        padding: 24px;
    }

    .ccs-brand-mark {
        font-size: 1.55rem;
    }

    .ccs-section {
        padding: 72px 0;
    }

    .ccs-section.ccs-lab-section,
    .ccs-about,
    .ccs-projects {
        padding-top: 84px;
        padding-bottom: 84px;
    }

    .ccs-lab-section::before {
        display: none;
    }

    .ccs-lab-board,
    .ccs-lab-feed-card,
    .ccs-lab-blueprint-card {
        min-height: auto;
        padding: 22px;
    }

    .ccs-about-text-panel,
    .ccs-stack-terminal,
    .ccs-human-card,
    .ccs-manifesto,
    .ccs-services-console,
    .ccs-cloud-dashboard,
    .ccs-case-card,
    .ccs-no-grid article {
        padding: 24px;
    }

    .ccs-timeline article,
    .ccs-philosophy-grid article,
    .ccs-values-grid article,
    .ccs-born-card {
        min-height: auto;
        padding: 26px;
    }

    .ccs-stack-grid {
        grid-template-columns: 1fr;
    }

    .ccs-cloud-stats,
    .ccs-case-grid {
        grid-template-columns: 1fr;
    }

    .ccs-cloud-map {
        min-height: 260px;
    }

    .cloud-node {
        min-width: 72px;
        padding: 9px;
        font-size: .58rem;
    }

    .ccs-case-card h2,
    .ccs-services-cta h2 {
        font-size: 2.15rem;
    }

    .ccs-services-cta {
        width: min(100% - 40px, 1280px);
        padding: 76px 0 92px;
    }

    .ccs-stack-grid span {
        min-height: 58px;
        font-size: .82rem;
    }

    .ccs-manifesto-grid div {
        padding: 20px;
    }

    .ccs-human-card h2 {
        font-size: 2.15rem;
    }

    .ccs-status-list p,
    .ccs-log-feed li {
        font-size: .82rem;
    }

    .ccs-services {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ccs-card-top {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 30px;
    }

    .ccs-service-card h3,
    .ccs-about-copy h3,
    .ccs-project-card h3 {
        font-size: 1.7rem;
    }

    .ccs-image-panel {
        min-height: 280px;
    }

    .dash-screen {
        grid-template-columns: 1fr;
    }

    .dash-sidebar {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 255, 102, .14);
    }

    .dash-sidebar span {
        margin: 0;
        padding: 7px 4px;
        text-align: center;
        letter-spacing: .08em;
    }

    .dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ccs-final-cta h2 {
        font-size: 2.25rem;
    }

    .ccs-footer-grid {
        grid-template-columns: 1fr;
    }

    .ccs-footer-bottom {
        flex-direction: column;
    }
}

.ccs-nav-dropdown {
    gap: 8px;
}

.ccs-nav-parent {
    display: inline-flex;
    align-items: center;
}

.ccs-nav-dropdown-caret {
    width: 22px;
    height: 22px;
    justify-content: center;
    color: var(--ccs-green);
}

.ccs-nav-dropdown-caret::after {
    display: none;
}

.ccs-nav-dropdown:hover .ccs-nav-parent,
.ccs-nav-dropdown:focus-within .ccs-nav-parent,
.ccs-nav-dropdown.is-open .ccs-nav-parent {
    color: var(--ccs-green);
    text-shadow: 0 0 14px rgba(0, 255, 102, .55);
}

.ccs-nav-dropdown:hover .ccs-nav-parent::after,
.ccs-nav-dropdown:focus-within .ccs-nav-parent::after,
.ccs-nav-dropdown.is-open .ccs-nav-parent::after {
    transform: scaleX(1);
}

.ccs-web-landing,
.ccs-web-price-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ccs-line);
    background:
        radial-gradient(circle at 78% 14%, rgba(0, 255, 102, .12), transparent 26rem),
        linear-gradient(180deg, rgba(9, 18, 14, .96), rgba(2, 6, 4, .98));
}

.ccs-web-landing::before,
.ccs-web-price-hero::before,
.ccs-web-choice-section::before,
.ccs-build-configurator::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 5px),
        linear-gradient(90deg, transparent 0 49%, rgba(0, 255, 102, .08) 49% 49.2%, transparent 49.2% 100%);
    mix-blend-mode: screen;
    opacity: .34;
}

.ccs-web-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 62%, rgba(0, 255, 102, .85) 0 4px, transparent 5px),
        radial-gradient(circle at 43% 39%, rgba(101, 255, 157, .76) 0 4px, transparent 5px),
        radial-gradient(circle at 71% 58%, rgba(114, 245, 255, .5) 0 3px, transparent 4px),
        linear-gradient(27deg, transparent 0 22%, rgba(0, 255, 102, .18) 22% 22.2%, transparent 22.2% 100%),
        linear-gradient(146deg, transparent 0 34%, rgba(0, 255, 102, .16) 34% 34.18%, transparent 34.18% 100%);
    opacity: .45;
    animation: ccsWebOrbit 18s ease-in-out infinite alternate;
}

.ccs-web-landing-grid,
.ccs-web-price-grid {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 64px));
    min-height: calc(100svh - var(--header-height) - 20px);
    margin: 0 auto;
    padding: 96px 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .62fr);
    align-items: center;
    gap: 56px;
}

.ccs-web-landing-copy h1,
.ccs-web-price-grid h1 {
    max-width: 960px;
    margin: 0;
    font-size: 4.7rem;
    line-height: .98;
    font-weight: 900;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.ccs-web-landing-copy,
.ccs-web-price-grid > div,
.ccs-web-terminal,
.ccs-build-status-card {
    min-width: 0;
}

.ccs-web-landing-copy h1 span,
.ccs-web-price-grid h1 span,
.ccs-config-heading h2 span {
    display: block;
    color: var(--ccs-green);
    text-shadow: 0 0 28px rgba(0, 255, 102, .32);
}

.ccs-web-terminal,
.ccs-build-status-card {
    position: relative;
    padding: 24px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .88), rgba(2, 6, 4, .93)),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(0, 255, 102, .055) 18px 19px);
    box-shadow: var(--ccs-shadow), 0 0 44px rgba(0, 255, 102, .1);
}

.ccs-web-terminal .ccs-console-header strong,
.ccs-build-status-card .ccs-console-header strong {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ccs-web-route {
    display: grid;
    grid-template-columns: 1fr 36px 1fr 36px 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.ccs-web-route span {
    min-height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .28);
}

.ccs-web-route i {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ccs-green), transparent);
    animation: ccsSyncLine 2.2s ease-in-out infinite;
}

.ccs-web-choice-section,
.ccs-web-compare-section,
.ccs-build-configurator,
.ccs-project-request-section {
    position: relative;
    width: min(1280px, calc(100% - 64px));
    margin: 0 auto;
}

.ccs-web-choice-section {
    padding: 118px 0;
}

.ccs-system-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.ccs-system-option-card {
    position: relative;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    padding: 38px;
    overflow: hidden;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(11, 24, 18, .82), rgba(3, 8, 6, .9)),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 102, .14), transparent 18rem);
    box-shadow: var(--ccs-shadow);
    transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.ccs-system-option-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 102, .76);
    box-shadow: var(--ccs-shadow), 0 0 52px rgba(0, 255, 102, .16);
}

.ccs-choice-signal {
    height: 8px;
    margin-bottom: 56px;
    background: linear-gradient(90deg, var(--ccs-green), rgba(0, 255, 102, .12), transparent);
    box-shadow: 0 0 28px rgba(0, 255, 102, .32);
    animation: ccsLinePulse 3.4s ease-in-out infinite;
}

.ccs-system-option-card span,
.ccs-web-compare-grid span,
.ccs-build-card > span,
.ccs-addon-module span,
.ccs-stack-mini span {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.ccs-system-option-card h3 {
    margin: 22px 0 16px;
    font-size: 2.25rem;
    line-height: 1.05;
    letter-spacing: 0;
}

.ccs-system-option-card p {
    margin: 0;
    color: var(--ccs-muted);
    line-height: 1.8;
}

.ccs-system-option-card ul {
    margin: 28px 0 32px;
    padding: 0;
    list-style: none;
}

.ccs-system-option-card li {
    position: relative;
    padding: 11px 0 11px 24px;
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-size: .86rem;
}

.ccs-system-option-card li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--ccs-green);
}

.ccs-system-option-card .ccs-button {
    width: fit-content;
    margin-top: auto;
}

.ccs-web-compare-section {
    padding: 0 0 112px;
}

.ccs-web-compare {
    padding: 42px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(13, 29, 23, .72), rgba(3, 8, 6, .84)),
        repeating-linear-gradient(90deg, transparent 0 44px, rgba(0, 255, 102, .045) 44px 45px);
}

.ccs-web-compare h2 {
    max-width: 760px;
    margin: 0 0 34px;
    font-size: 2.7rem;
    line-height: 1.08;
}

.ccs-web-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ccs-web-compare-grid article {
    min-height: 170px;
    padding: 24px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .28);
}

.ccs-web-compare-grid p {
    margin: 18px 0 0;
    color: var(--ccs-muted);
    line-height: 1.75;
}

.ccs-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.ccs-status-grid p {
    min-height: 86px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .28);
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-size: .88rem;
    line-height: 1.6;
}

.ccs-status-grid span {
    display: block;
    margin-bottom: 10px;
    color: var(--ccs-green);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.ccs-build-configurator {
    padding: 118px 0;
}

.ccs-config-heading {
    max-width: 800px;
    margin-bottom: 34px;
}

.ccs-config-heading h2,
.ccs-addon-heading h2 {
    margin: 0;
    font-size: 3rem;
    line-height: 1.08;
}

.ccs-config-heading p:not(.ccs-kicker) {
    max-width: 680px;
    color: var(--ccs-muted);
    line-height: 1.8;
}

.ccs-system-type-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.ccs-system-type-btn {
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ccs-line);
    background: rgba(0, 0, 0, .24);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-weight: 800;
    letter-spacing: .18em;
    cursor: pointer;
    transition: transform .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.ccs-system-type-btn:hover,
.ccs-system-type-btn.is-active {
    transform: translateY(-3px);
    border-color: rgba(0, 255, 102, .7);
    background: rgba(0, 255, 102, .075);
    color: var(--ccs-green);
    box-shadow: 0 0 30px rgba(0, 255, 102, .12);
}

.ccs-build-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
    gap: 24px;
    align-items: start;
}

.ccs-build-main {
    min-width: 0;
}

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

.ccs-build-card {
    position: relative;
    min-height: 430px;
    padding: 28px;
    border: 1px solid var(--ccs-line-soft);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .78), rgba(2, 6, 4, .86)),
        repeating-linear-gradient(0deg, transparent 0 19px, rgba(0, 255, 102, .045) 19px 20px);
    box-shadow: var(--ccs-shadow);
    cursor: pointer;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

.ccs-build-card:hover,
.ccs-build-card.is-selected {
    transform: translateY(-7px);
    border-color: rgba(0, 255, 102, .78);
    box-shadow: var(--ccs-shadow), 0 0 48px rgba(0, 255, 102, .16);
}

.ccs-build-card.is-selected::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(0, 255, 102, .9);
    pointer-events: none;
    animation: ccsModulePulse 2.8s ease-in-out infinite;
}

.ccs-build-card h3 {
    margin: 22px 0 12px;
    font-size: 2rem;
}

.ccs-build-card p {
    color: var(--ccs-muted);
    line-height: 1.72;
}

.ccs-build-meta {
    display: grid;
    gap: 8px;
    margin: 22px 0;
}

.ccs-build-meta p {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .22);
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-size: .68rem;
}

.ccs-build-meta b {
    margin-right: 8px;
    color: var(--ccs-green);
}

.ccs-build-card strong {
    display: block;
    margin-top: 26px;
    color: var(--ccs-green);
    font-size: 2.1rem;
    line-height: 1;
}

.ccs-build-card small {
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .76rem;
}

.ccs-build-card button {
    width: 100%;
    min-height: 48px;
    margin-top: 22px;
    border: 1px solid var(--ccs-line);
    background: rgba(0, 255, 102, .08);
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}

.ccs-build-card.is-selected button {
    background: var(--ccs-green);
    color: var(--ccs-bg);
    box-shadow: 0 0 28px rgba(0, 255, 102, .2);
}

.ccs-addon-panel {
    margin-top: 24px;
    padding: 30px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(10, 22, 17, .74), rgba(2, 6, 4, .9)),
        radial-gradient(circle at 90% 10%, rgba(0, 255, 102, .13), transparent 16rem);
}

.ccs-addon-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

.ccs-addon-heading span {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .18em;
    animation: ccsPipelineBlink 1.8s ease-in-out infinite;
}

.ccs-addon-heading h2 span {
    display: block;
    color: var(--ccs-green);
}

.ccs-addon-intro,
.ccs-store-subscription-note {
    margin: 18px 0 24px;
    padding: 16px 18px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .22);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .84rem;
    line-height: 1.65;
}

.ccs-store-subscription-note {
    margin-bottom: 0;
}

.ccs-addon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.ccs-addon-module {
    position: relative;
    min-height: 178px;
    padding: 22px 22px 22px 62px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .32);
    color: var(--ccs-white);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.ccs-addon-module::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 26px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ccs-green);
    box-shadow: 0 0 16px rgba(0, 255, 102, .18);
}

.ccs-addon-module::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--ccs-green), transparent);
    transform: scaleX(.25);
    opacity: .45;
    transition: transform .22s ease, opacity .22s ease;
}

.ccs-addon-module:hover,
.ccs-addon-module.is-active {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 102, .76);
    background: rgba(0, 255, 102, .055);
    box-shadow: 0 0 34px rgba(0, 255, 102, .14);
}

.ccs-addon-module.is-active::before {
    background: var(--ccs-green);
    box-shadow: 0 0 24px rgba(0, 255, 102, .44);
    animation: ccsModulePulse 2.2s ease-in-out infinite;
}

.ccs-addon-module:hover::after,
.ccs-addon-module.is-active::after {
    transform: scaleX(1);
    opacity: 1;
}

.ccs-addon-module strong {
    position: absolute;
    top: 22px;
    right: 22px;
    color: var(--ccs-green);
    font-size: 1.05rem;
}

.ccs-addon-module p {
    margin: 28px 0 0;
    color: var(--ccs-muted);
    font-family: var(--font-main);
    line-height: 1.65;
}

.ccs-config-summary {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    padding: 26px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(13, 29, 23, .88), rgba(2, 6, 4, .96)),
        repeating-linear-gradient(0deg, transparent 0 17px, rgba(0, 255, 102, .05) 17px 18px);
    box-shadow: var(--ccs-shadow), 0 0 42px rgba(0, 255, 102, .1);
}

.ccs-config-summary.is-refreshing {
    animation: ccsSummaryFlash .38s ease;
}

.ccs-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ccs-line-soft);
}

.ccs-summary-header span {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.ccs-summary-header i {
    width: 12px;
    height: 12px;
    background: var(--ccs-green);
    box-shadow: 0 0 18px rgba(0, 255, 102, .7);
    animation: ccsNodePulse 1.7s ease-in-out infinite;
}

.ccs-summary-readout {
    display: grid;
    gap: 12px;
    margin: 22px 0;
}

.ccs-summary-readout p {
    margin: 0;
    padding: 15px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .25);
}

.ccs-summary-readout span,
.ccs-active-modules h3 {
    display: block;
    margin-bottom: 8px;
    color: var(--ccs-dim);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.ccs-summary-readout strong {
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-size: .95rem;
}

.ccs-active-modules {
    padding: 18px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .26);
}

.ccs-active-modules ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccs-active-modules li {
    position: relative;
    padding: 8px 0 8px 20px;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .84rem;
}

.ccs-active-modules li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--ccs-green);
}

.ccs-confirm-build-btn {
    width: 100%;
    height: 0;
    min-height: 0;
    margin-top: 0;
    padding: 0;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform: translateY(-8px);
    transition: height .22s ease, min-height .22s ease, margin-top .22s ease, padding .22s ease, opacity .22s ease, transform .22s ease, border-color .22s ease;
}

.ccs-confirm-build-btn.is-visible {
    height: auto;
    min-height: 58px;
    margin-top: 18px;
    padding: 0 22px;
    border-color: var(--ccs-line);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ccs-stack-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.ccs-stack-mini span {
    grid-column: 1 / -1;
}

.ccs-stack-mini p {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--ccs-line-soft);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 800;
    text-align: center;
}

.ccs-project-request-section {
    padding: 0 0 118px;
}

.ccs-project-request {
    max-width: 920px;
    margin: 0 auto;
    padding: 36px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .78), rgba(2, 6, 4, .92)),
        radial-gradient(circle at 12% 12%, rgba(0, 255, 102, .14), transparent 18rem);
    box-shadow: var(--ccs-shadow);
}

.ccs-project-request.is-submitting {
    cursor: progress;
}

.ccs-project-request.is-submitting .ccs-request-grid,
.ccs-project-request.is-submitting .ccs-contact-build-options {
    opacity: .62;
    filter: saturate(.85);
    transition: opacity .2s ease, filter .2s ease;
}

.ccs-request-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
}

.ccs-request-title > span {
    width: 16px;
    height: 16px;
    background: var(--ccs-green);
    box-shadow: 0 0 20px rgba(0, 255, 102, .58);
    animation: ccsNodePulse 1.8s ease-in-out infinite;
}

.ccs-request-title h2 {
    margin: 0;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: 2rem;
    letter-spacing: .16em;
}

.ccs-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.ccs-request-grid label {
    display: grid;
    gap: 8px;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ccs-request-grid label:nth-child(n + 3) {
    grid-column: span 1;
}

.ccs-request-grid input,
.ccs-request-grid select,
.ccs-request-grid textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .35);
    color: var(--ccs-white);
    font: 500 .95rem var(--font-main);
    padding: 14px;
    outline: none;
    resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ccs-request-grid input:focus,
.ccs-request-grid select:focus,
.ccs-request-grid textarea:focus {
    border-color: rgba(0, 255, 102, .72);
    box-shadow: 0 0 24px rgba(0, 255, 102, .12);
}

.ccs-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ccs-form-messages {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
}

.ccs-form-message {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .28);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.5;
}

.ccs-form-message-success {
    border-color: rgba(0, 255, 102, .42);
    color: var(--ccs-green);
    box-shadow: 0 0 24px rgba(0, 255, 102, .08);
}

.ccs-form-message-error {
    border-color: rgba(255, 209, 102, .38);
    color: var(--ccs-amber);
}

.ccs-contact-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ccs-line);
    background:
        radial-gradient(circle at 18% 28%, rgba(0, 255, 102, .16), transparent 24rem),
        radial-gradient(circle at 82% 62%, rgba(114, 245, 255, .08), transparent 24rem),
        linear-gradient(180deg, rgba(8, 18, 14, .95), rgba(2, 6, 4, .98));
}

.ccs-contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 5px),
        linear-gradient(118deg, transparent 0 38%, rgba(0, 255, 102, .1) 38% 38.2%, transparent 38.2% 100%);
    opacity: .5;
}

.ccs-contact-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 24% 68%, rgba(0, 255, 102, .9) 0 3px, transparent 4px),
        radial-gradient(circle at 62% 30%, rgba(101, 255, 157, .7) 0 3px, transparent 4px),
        radial-gradient(circle at 82% 72%, rgba(114, 245, 255, .46) 0 3px, transparent 4px),
        linear-gradient(31deg, transparent 0 22%, rgba(0, 255, 102, .16) 22% 22.18%, transparent 22.18% 100%),
        linear-gradient(146deg, transparent 0 44%, rgba(114, 245, 255, .12) 44% 44.18%, transparent 44.18% 100%);
    opacity: .54;
    animation: ccsWebOrbit 18s ease-in-out infinite alternate;
}

.ccs-contact-grid {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 64px));
    min-height: calc(100vh - var(--header-height));
    margin: 0 auto;
    padding: 118px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    gap: 52px;
    align-items: center;
}

.ccs-contact-copy h1 {
    max-width: 880px;
    margin: 0;
    font-size: clamp(3.4rem, 7.6vw, 7.4rem);
    line-height: .96;
    letter-spacing: 0;
    overflow-wrap: break-word;
}

.ccs-contact-copy,
.ccs-contact-form {
    min-width: 0;
}

.ccs-contact-copy h1 span {
    display: block;
    color: var(--ccs-green);
    text-shadow: 0 0 34px rgba(0, 255, 102, .22);
}

.ccs-contact-copy .ccs-hero-lead {
    max-width: 720px;
}

.ccs-contact-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.ccs-contact-hints span {
    padding: 10px 12px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .24);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
}

.ccs-contact-status-card {
    position: relative;
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .86), rgba(2, 6, 4, .94)),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(0, 255, 102, .05) 18px 19px);
    box-shadow: var(--ccs-shadow), 0 0 46px rgba(0, 255, 102, .12);
}

.ccs-service-request-summary {
    position: relative;
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .86), rgba(2, 6, 4, .94)),
        radial-gradient(circle at 82% 18%, rgba(0, 255, 102, .16), transparent 16rem),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(0, 255, 102, .05) 18px 19px);
    box-shadow: var(--ccs-shadow), 0 0 46px rgba(0, 255, 102, .12);
}

.ccs-service-request-summary .ccs-summary-readout {
    margin-bottom: 0;
}

.ccs-service-request-summary .ccs-console-header strong {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
}

.ccs-contact-status-card::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 26px;
    top: 78px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 102, .82), transparent);
    opacity: .5;
    animation: ccsModulePulse 4.6s ease-in-out infinite;
}

.ccs-contact-status-card .ccs-console-header strong {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
}

.ccs-contact-status-readout {
    display: grid;
    gap: 12px;
    margin: 34px 0 24px;
}

.ccs-contact-status-readout p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .28);
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
}

.ccs-contact-status-readout span {
    color: var(--ccs-green);
    font-weight: 800;
}

.ccs-contact-form-section {
    width: min(1040px, calc(100% - 64px));
    margin: 0 auto;
    padding: 118px 0;
}

.ccs-contact-form {
    max-width: none;
}

.ccs-contact-form .ccs-request-title h2 {
    color: var(--ccs-white);
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    letter-spacing: 0;
}

.ccs-request-grid label small {
    color: var(--ccs-dim);
    font-size: .62rem;
    letter-spacing: .1em;
}

.ccs-contact-build-options {
    margin: 4px 0 2px;
    padding: 20px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .24);
}

.ccs-contact-build-options legend {
    padding: 0 8px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ccs-contact-build-options > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.ccs-contact-build-options label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.ccs-contact-build-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ccs-contact-build-options span {
    display: grid;
    place-items: center;
    min-height: 52px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .28);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
    transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ccs-contact-build-options span::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-bottom: 8px;
    border: 1px solid var(--ccs-line);
    background: rgba(0, 255, 102, .08);
    box-shadow: 0 0 14px rgba(0, 255, 102, .12);
}

.ccs-contact-build-options label:hover span,
.ccs-contact-build-options input:focus-visible + span,
.ccs-contact-build-options input:checked + span {
    transform: translateY(-3px);
    border-color: rgba(0, 255, 102, .72);
    background: rgba(0, 255, 102, .07);
    color: var(--ccs-green);
    box-shadow: 0 0 28px rgba(0, 255, 102, .13);
}

.ccs-contact-build-options input:checked + span::before {
    background: var(--ccs-green);
    box-shadow: 0 0 20px rgba(0, 255, 102, .6);
    animation: ccsStatusDot 2.2s ease-in-out infinite;
}

@keyframes ccsWebOrbit {
    from {
        transform: translate3d(-16px, -10px, 0) scale(1);
    }

    to {
        transform: translate3d(18px, 14px, 0) scale(1.04);
    }
}

@keyframes ccsModulePulse {
    0%,
    100% {
        opacity: .55;
        box-shadow: 0 0 12px rgba(0, 255, 102, .12);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 28px rgba(0, 255, 102, .32);
    }
}

@keyframes ccsSummaryFlash {
    0% {
        box-shadow: var(--ccs-shadow), 0 0 14px rgba(0, 255, 102, .08);
    }

    55% {
        box-shadow: var(--ccs-shadow), 0 0 48px rgba(0, 255, 102, .28);
    }

    100% {
        box-shadow: var(--ccs-shadow), 0 0 42px rgba(0, 255, 102, .1);
    }
}

.ccs-web-builds-section {
    width: min(1440px, calc(100% - 64px));
    margin: 0 auto;
    padding: 118px 0;
}

.ccs-web-builds-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ccs-plan-card {
    position: relative;
    min-width: 0;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--ccs-line-soft);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .78), rgba(2, 6, 4, .9)),
        repeating-linear-gradient(0deg, transparent 0 19px, rgba(0, 255, 102, .04) 19px 20px);
    box-shadow: var(--ccs-shadow);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.ccs-plan-card:hover,
.ccs-plan-card-featured {
    transform: translateY(-7px);
    border-color: rgba(0, 255, 102, .78);
    box-shadow: var(--ccs-shadow), 0 0 46px rgba(0, 255, 102, .15);
}

.ccs-plan-card-featured::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(0, 255, 102, .82);
    pointer-events: none;
    animation: ccsModulePulse 2.8s ease-in-out infinite;
}

.ccs-plan-card em {
    width: fit-content;
    margin-bottom: 18px;
    padding: 8px 10px;
    background: var(--ccs-green);
    color: var(--ccs-bg);
    font-family: var(--font-mono);
    font-size: .64rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ccs-plan-card > span,
.ccs-store-base-copy > span {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ccs-plan-card h3 {
    margin: 22px 0 12px;
    font-size: 2.15rem;
    line-height: 1;
}

.ccs-plan-card p {
    min-height: 72px;
    margin: 0;
    color: var(--ccs-muted);
    line-height: 1.65;
}

.ccs-plan-card strong {
    display: block;
    margin: 26px 0 22px;
    color: var(--ccs-green);
    font-size: 2.25rem;
}

.ccs-plan-card small {
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .88rem;
}

.ccs-plan-card .ccs-button {
    width: 100%;
    min-height: 50px;
    margin-bottom: 28px;
}

.ccs-plan-card h4 {
    margin: 0 0 16px;
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .04em;
}

.ccs-plan-card ul,
.ccs-store-base-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ccs-plan-card li,
.ccs-store-base-list li {
    position: relative;
    padding: 10px 0 10px 24px;
    color: var(--ccs-muted);
    line-height: 1.45;
}

.ccs-plan-card li::before,
.ccs-store-base-list li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-weight: 800;
}

.ccs-plan-card li.is-muted {
    color: rgba(169, 183, 176, .38);
    text-decoration: line-through;
}

.ccs-plan-card li.is-muted::before {
    color: var(--ccs-dim);
}

.ccs-store-configurator .ccs-build-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
}

.ccs-store-base-build {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(300px, 1fr);
    gap: 28px;
    padding: 34px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .82), rgba(2, 6, 4, .92)),
        radial-gradient(circle at 86% 20%, rgba(0, 255, 102, .12), transparent 18rem);
    box-shadow: var(--ccs-shadow), 0 0 44px rgba(0, 255, 102, .1);
}

.ccs-store-base-copy h3 {
    margin: 20px 0 14px;
    font-size: 2.25rem;
}

.ccs-store-base-copy p {
    margin: 0;
    color: var(--ccs-muted);
    line-height: 1.75;
}

.ccs-store-price-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.ccs-store-price-line b,
.ccs-store-price-line strong {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .28);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .82rem;
}

.ccs-store-price-line strong {
    color: var(--ccs-white);
}

.ccs-store-base-list {
    padding: 22px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .24);
}

.ccs-addon-module small {
    position: absolute;
    top: 48px;
    right: 22px;
    color: var(--ccs-dim);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ccs-cloud-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--ccs-line);
    background:
        radial-gradient(circle at 82% 20%, rgba(114, 245, 255, .1), transparent 26rem),
        radial-gradient(circle at 18% 75%, rgba(0, 255, 102, .12), transparent 25rem),
        linear-gradient(180deg, rgba(8, 18, 14, .96), rgba(2, 6, 4, .98));
}

.ccs-cloud-hero::before,
.ccs-cloud-tier-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 5px),
        linear-gradient(120deg, transparent 0 42%, rgba(0, 255, 102, .12) 42% 42.2%, transparent 42.2% 100%);
    opacity: .42;
}

.ccs-cloud-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 64%, rgba(0, 255, 102, .9) 0 4px, transparent 5px),
        radial-gradient(circle at 52% 36%, rgba(101, 255, 157, .72) 0 4px, transparent 5px),
        radial-gradient(circle at 76% 56%, rgba(114, 245, 255, .5) 0 4px, transparent 5px),
        linear-gradient(28deg, transparent 0 25%, rgba(0, 255, 102, .18) 25% 25.2%, transparent 25.2% 100%),
        linear-gradient(153deg, transparent 0 35%, rgba(114, 245, 255, .12) 35% 35.2%, transparent 35.2% 100%);
    opacity: .55;
    animation: ccsWebOrbit 18s ease-in-out infinite alternate;
}

.ccs-cloud-control-card {
    position: relative;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .88), rgba(2, 6, 4, .94)),
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(0, 255, 102, .05) 18px 19px);
    box-shadow: var(--ccs-shadow), 0 0 48px rgba(0, 255, 102, .1);
}

.ccs-cloud-control-card .ccs-console-header strong {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
}

.ccs-cloud-node-map {
    position: relative;
    min-height: 360px;
    margin: 22px 0;
    border: 1px solid var(--ccs-line-soft);
    background:
        radial-gradient(circle at center, rgba(0, 255, 102, .15), transparent 12rem),
        linear-gradient(38deg, transparent 0 28%, rgba(0, 255, 102, .32) 28% 28.35%, transparent 28.35% 100%),
        linear-gradient(142deg, transparent 0 35%, rgba(114, 245, 255, .18) 35% 35.25%, transparent 35.25% 100%),
        rgba(0, 0, 0, .24);
    overflow: hidden;
}

.ccs-cloud-node-map::before,
.ccs-cloud-node-map::after {
    content: "";
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(0, 255, 102, .14);
    animation: ccsNodeRing 3.8s ease-in-out infinite;
}

.ccs-cloud-node-map::after {
    inset: 30%;
    animation-delay: .6s;
}

.node-core,
.node-device {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid var(--ccs-line);
    background: rgba(2, 6, 4, .86);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-weight: 800;
    letter-spacing: .14em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 255, 102, .12);
}

.node-core {
    left: 50%;
    top: 50%;
    width: 116px;
    height: 116px;
    transform: translate(-50%, -50%);
    font-size: .78rem;
    animation: ccsNodePulse 4.8s ease-in-out infinite;
}

.node-device {
    min-width: 82px;
    min-height: 38px;
    padding: 8px;
    font-size: .58rem;
    animation: ccsCloudNodeBlink 5.6s ease-in-out infinite;
}

.node-phone {
    animation-delay: .4s;
}

.node-laptop {
    animation-delay: 1.4s;
}

.node-web {
    animation-delay: 2.2s;
}

.node-backup {
    animation-delay: 3.1s;
}

.node-phone {
    left: 9%;
    top: 18%;
}

.node-laptop {
    right: 9%;
    top: 22%;
}

.node-web {
    left: 12%;
    bottom: 18%;
}

.node-backup {
    right: 10%;
    bottom: 16%;
}

.cloud-flow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42%;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 102, .26), transparent);
    opacity: .5;
}

.cloud-flow::before,
.cloud-flow::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 7px;
    height: 7px;
    background: var(--ccs-green);
    box-shadow: 0 0 18px rgba(0, 255, 102, .55);
    animation: ccsCloudPacket 5.8s linear infinite;
}

.cloud-flow::after {
    animation-delay: 2.9s;
}

.flow-a {
    transform: rotate(-28deg);
}

.flow-b {
    transform: rotate(34deg);
}

.flow-b::before,
.flow-b::after {
    animation-delay: 1.1s;
}

.flow-c {
    transform: rotate(152deg);
}

.flow-c::before,
.flow-c::after {
    animation-delay: 2s;
}

.ccs-cloud-status-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.ccs-cloud-status-row p {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .24);
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ccs-cloud-status-row i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--ccs-green);
    box-shadow: 0 0 14px rgba(0, 255, 102, .7);
    animation: ccsStatusDot 4.4s ease-in-out infinite;
}

.ccs-cloud-status-row p:nth-child(2) i {
    animation-delay: 1.2s;
}

.ccs-cloud-status-row p:nth-child(3) i {
    animation-delay: 2.4s;
}

.ccs-cloud-story-grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(360px, .62fr);
    gap: 28px;
    align-items: center;
}

.ccs-cloud-manifest {
    padding: 28px;
    border: 1px solid var(--ccs-line);
    background: rgba(0, 0, 0, .3);
    box-shadow: var(--ccs-shadow);
}

.ccs-cloud-manifest p {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--ccs-line-soft);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    line-height: 1.55;
}

.ccs-cloud-manifest p:last-child {
    border-bottom: 0;
}

.ccs-cloud-manifest span {
    color: var(--ccs-green);
}

.ccs-cloud-meaning-section {
    width: min(1280px, calc(100% - 64px));
    margin: 0 auto;
    padding: 0 0 108px;
}

.ccs-cloud-meaning {
    padding: 34px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .72), rgba(2, 6, 4, .86)),
        repeating-linear-gradient(90deg, transparent 0 42px, rgba(0, 255, 102, .035) 42px 43px);
    box-shadow: var(--ccs-shadow);
}

.ccs-cloud-meaning h2 {
    margin: 0 0 14px;
    font-size: 2.35rem;
    line-height: 1.1;
}

.ccs-cloud-meaning p:not(.ccs-kicker) {
    max-width: 780px;
    margin: 0;
    color: var(--ccs-muted);
    line-height: 1.8;
}

.ccs-cloud-provider-grid,
.ccs-cloud-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ccs-cloud-provider-card,
.ccs-cloud-tier-card {
    position: relative;
    min-height: 360px;
    padding: 34px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .74), rgba(2, 6, 4, .88)),
        radial-gradient(circle at 85% 12%, rgba(0, 255, 102, .12), transparent 15rem);
    box-shadow: var(--ccs-shadow);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.ccs-cloud-provider-card:hover,
.ccs-cloud-tier-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 255, 102, .82);
    box-shadow: var(--ccs-shadow), 0 0 46px rgba(0, 255, 102, .17), inset 0 0 28px rgba(0, 255, 102, .035);
}

.ccs-cloud-provider-card span,
.ccs-cloud-tier-card span,
.ccs-cloud-platform-note span {
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ccs-cloud-provider-card h3,
.ccs-cloud-tier-card h3 {
    margin: 22px 0 14px;
    font-size: 2.25rem;
}

.ccs-cloud-provider-card p,
.ccs-cloud-tier-card p,
.ccs-cloud-platform-note p {
    color: var(--ccs-muted);
    line-height: 1.75;
}

.ccs-cloud-provider-card ul {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.ccs-cloud-provider-card li {
    position: relative;
    padding: 9px 0 9px 24px;
    color: var(--ccs-white);
    font-family: var(--font-mono);
    font-size: .84rem;
}

.ccs-cloud-provider-card li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--ccs-green);
}

.ccs-cloud-tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ccs-cloud-tier-card {
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.ccs-cloud-tier-card .ccs-button {
    width: fit-content;
    margin-top: auto;
}

.ccs-cloud-ideal {
    margin: 24px 0 28px;
    padding: 16px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .24);
}

.ccs-cloud-ideal b,
.ccs-cloud-ideal small {
    display: block;
}

.ccs-cloud-ideal b {
    margin-bottom: 8px;
    color: var(--ccs-green);
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ccs-cloud-ideal small {
    color: var(--ccs-muted);
    font-size: .92rem;
    line-height: 1.5;
}

.ccs-cloud-price-box {
    margin: 24px 0 14px;
}

.ccs-cloud-price-box strong {
    display: block;
    margin: 0;
    color: var(--ccs-green);
    font-size: 2.15rem;
    line-height: 1;
}

.ccs-cloud-price-box small {
    display: block;
    margin-top: 8px;
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .72rem;
    line-height: 1.45;
}

.ccs-cloud-duration-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 22px;
}

.ccs-cloud-duration-switch button {
    min-height: 48px;
    padding: 8px;
    border: 1px solid var(--ccs-line-soft);
    background: rgba(0, 0, 0, .24);
    color: var(--ccs-muted);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ccs-cloud-duration-switch button:hover,
.ccs-cloud-duration-switch button.is-active {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 102, .72);
    background: rgba(0, 255, 102, .075);
    color: var(--ccs-green);
    box-shadow: 0 0 22px rgba(0, 255, 102, .12);
}

.ccs-cloud-duration-switch small {
    display: block;
    margin-top: 4px;
    color: var(--ccs-green);
    font-size: .56rem;
}

.ccs-cloud-price-card.is-price-refreshing {
    animation: ccsSummaryFlash .42s ease;
}

.ccs-cloud-demo-cta {
    width: min(1280px, calc(100% - 64px));
    margin: 0 auto;
    padding: 0 0 118px;
}

.ccs-cloud-demo-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 38px;
    border: 1px solid var(--ccs-line);
    background:
        linear-gradient(180deg, rgba(12, 27, 20, .78), rgba(2, 6, 4, .9)),
        radial-gradient(circle at 88% 20%, rgba(0, 255, 102, .13), transparent 18rem);
    box-shadow: var(--ccs-shadow);
}

.ccs-cloud-demo-panel h2 {
    margin: 0 0 12px;
    font-size: 2.4rem;
    line-height: 1.1;
}

.ccs-cloud-demo-panel p:not(.ccs-kicker) {
    max-width: 760px;
    margin: 0;
    color: var(--ccs-muted);
    line-height: 1.75;
}

.ccs-request-wide {
    grid-column: 1 / -1;
}

.ccs-cloud-demo-form-section {
    padding-top: 108px;
}

@keyframes ccsCloudNodeBlink {
    0%,
    100% {
        filter: brightness(.92);
        box-shadow: 0 0 12px rgba(0, 255, 102, .12);
    }

    50% {
        filter: brightness(1.22);
        box-shadow: 0 0 28px rgba(0, 255, 102, .28);
    }
}

@keyframes ccsCloudPacket {
    from {
        left: 0;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    to {
        left: 100%;
        opacity: 0;
    }
}

@keyframes ccsStatusDot {
    0%,
    100% {
        opacity: .55;
        transform: scale(.86);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

.ccs-cloud-platform-note {
    margin-bottom: 28px;
    padding: 24px;
    border: 1px solid var(--ccs-line);
    background: rgba(0, 0, 0, .26);
}

.ccs-cloud-platform-note p {
    max-width: 920px;
    margin: 12px 0 0;
}

.ccs-cloud-ultra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1180px) {
    .ccs-web-landing-grid,
    .ccs-web-price-grid,
    .ccs-build-workbench {
        grid-template-columns: 1fr;
    }

    .ccs-web-terminal,
    .ccs-build-status-card,
    .ccs-config-summary {
        max-width: 720px;
    }

    .ccs-config-summary {
        position: relative;
        top: auto;
    }

    .ccs-build-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ccs-web-builds-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ccs-store-base-build,
    .ccs-store-configurator .ccs-build-workbench {
        grid-template-columns: 1fr;
    }

    .ccs-cloud-story-grid,
    .ccs-cloud-provider-grid,
    .ccs-cloud-tier-grid,
    .ccs-contact-grid {
        grid-template-columns: 1fr;
    }

    .ccs-contact-status-card {
        max-width: 720px;
    }
}

@media (max-width: 980px) {
    .ccs-menu-btn {
        display: grid !important;
        margin-left: auto;
    }

    .ccs-nav-cta {
        display: none !important;
    }

    .ccs-nav-dropdown {
        display: grid;
        grid-template-columns: 1fr 52px;
        align-items: center;
        gap: 0;
        width: 100%;
    }

    .ccs-nav-dropdown .ccs-nav-parent {
        width: 100%;
        padding: 17px 0;
        border-bottom: 1px solid var(--ccs-line-soft);
    }

    .ccs-nav-dropdown-caret {
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-bottom: 1px solid var(--ccs-line-soft);
    }

    .ccs-nav-dropdown-menu {
        grid-column: 1 / -1;
    }

    .ccs-web-landing-grid,
    .ccs-web-price-grid,
    .ccs-web-choice-section,
    .ccs-web-compare-section,
    .ccs-build-configurator,
    .ccs-project-request-section,
    .ccs-contact-grid,
    .ccs-contact-form-section {
        width: min(100% - 40px, 1280px);
    }

    .ccs-web-landing-grid,
    .ccs-web-price-grid {
        min-height: auto;
        padding: 82px 0;
    }

    .ccs-web-landing-copy h1,
    .ccs-web-price-grid h1 {
        font-size: 3.35rem;
    }

    .ccs-system-choice-grid,
    .ccs-web-compare-grid,
    .ccs-build-grid,
    .ccs-addon-grid,
    .ccs-web-builds-grid,
    .ccs-cloud-ultra-grid,
    .ccs-contact-build-options > div {
        grid-template-columns: 1fr;
    }

    .ccs-system-option-card {
        min-height: auto;
    }

    .ccs-web-compare h2,
    .ccs-config-heading h2,
    .ccs-addon-heading h2 {
        font-size: 2.35rem;
    }
}

@media (max-width: 640px) {
    .ccs-web-landing-copy h1,
    .ccs-web-price-grid h1,
    .ccs-contact-copy h1 {
        font-size: 2.25rem;
        line-height: 1.04;
        max-width: 100%;
    }

    .ccs-web-landing .ccs-hero-lead,
    .ccs-web-price-hero .ccs-hero-lead {
        width: 100%;
        max-width: calc(100vw - 40px);
        overflow-wrap: break-word;
    }

    .ccs-web-terminal .ccs-console-header,
    .ccs-build-status-card .ccs-console-header {
        flex-wrap: wrap;
    }

    .ccs-web-terminal .ccs-console-header strong,
    .ccs-build-status-card .ccs-console-header strong,
    .ccs-cloud-control-card .ccs-console-header strong {
        width: 100%;
        font-size: .56rem;
        letter-spacing: .12em;
    }

    .ccs-web-terminal,
    .ccs-build-status-card,
    .ccs-system-option-card,
    .ccs-web-compare,
    .ccs-addon-panel,
    .ccs-config-summary,
    .ccs-project-request,
    .ccs-plan-card,
    .ccs-store-base-build,
    .ccs-cloud-control-card,
    .ccs-cloud-provider-card,
    .ccs-cloud-tier-card,
    .ccs-contact-status-card {
        padding: 24px;
    }

    .ccs-contact-grid {
        min-height: auto;
        padding: 82px 0;
        gap: 32px;
    }

    .ccs-contact-copy h1 {
        font-size: 2rem;
        line-height: 1.08;
    }

    .ccs-contact-form-section {
        padding: 84px 0;
    }

    .ccs-contact-hints {
        display: grid;
    }

    .ccs-web-builds-section {
        width: min(100% - 40px, 1280px);
        padding: 84px 0;
    }

    .ccs-plan-card {
        min-height: auto;
    }

    .ccs-plan-card p {
        min-height: 0;
    }

    .ccs-cloud-node-map {
        min-height: 300px;
    }

    .ccs-cloud-status-row {
        grid-template-columns: 1fr;
    }

    .ccs-cloud-meaning-section {
        width: min(100% - 40px, 1280px);
        padding-bottom: 84px;
    }

    .ccs-cloud-meaning {
        padding: 24px;
    }

    .ccs-cloud-meaning h2 {
        font-size: 1.9rem;
    }

    .ccs-cloud-duration-switch {
        grid-template-columns: 1fr;
    }

    .ccs-cloud-demo-cta {
        width: min(100% - 40px, 1280px);
        padding-bottom: 84px;
    }

    .ccs-cloud-demo-panel {
        display: block;
        padding: 24px;
    }

    .ccs-cloud-demo-panel .ccs-button {
        width: 100%;
        margin-top: 24px;
    }

    .ccs-cloud-demo-panel h2 {
        font-size: 1.95rem;
    }

    .node-core {
        width: 98px;
        height: 98px;
        font-size: .66rem;
    }

    .node-device {
        min-width: 70px;
        font-size: .52rem;
        letter-spacing: .08em;
    }

    .ccs-web-route,
    .ccs-status-grid,
    .ccs-request-grid {
        grid-template-columns: 1fr;
    }

    .ccs-web-route i {
        height: 22px;
        width: 1px;
        justify-self: center;
        background: linear-gradient(180deg, transparent, var(--ccs-green), transparent);
    }

    .ccs-system-option-card h3,
    .ccs-web-compare h2,
    .ccs-config-heading h2,
    .ccs-addon-heading h2 {
        font-size: 2rem;
    }

    .ccs-system-option-card .ccs-button,
    .ccs-project-request .ccs-button {
        width: 100%;
    }

    .ccs-addon-heading {
        display: block;
    }

    .ccs-addon-module {
        padding: 58px 18px 20px;
    }

    .ccs-addon-module::before {
        top: 20px;
        left: 18px;
    }

    .ccs-addon-module strong {
        top: 18px;
        right: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

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