.cyber-page { --cyber: #00ef5d; --cyber-dark: #06130d; }
.cyber-hero { position: relative; min-height: 760px; display: grid; align-items: end; overflow: hidden; background: #030706; }
.cyber-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cyber-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.76) 52%, rgba(0,10,8,.28) 100%); }
.cyber-hero-copy { position: relative; z-index: 2; padding-bottom: 100px; color: #fff; }
.cyber-hero h1 { max-width: 1080px; margin: 22px 0; font-size: clamp(3.4rem, 7vw, 7.4rem); line-height: .88; overflow-wrap: normal; word-break: normal; hyphens: none; }
.cyber-hero p:not(.eyebrow) { max-width: 720px; margin-bottom: 34px; color: #c4d2cc; font-size: 1.1rem; }
.cyber-page .button-primary { background: var(--cyber); border-color: var(--cyber); color: #031008; }
.cyber-intro, .cyber-modern { background: #f4f7f5; }
.cyber-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.cyber-card { position: relative; min-height: 320px; padding: 38px; border: 1px solid #dce5df; background: #fff; }
.cyber-card b { color: var(--cyber); font-family: var(--heading); font-size: 1.1rem; }
.cyber-card h3 { margin: 42px 0 24px; font-size: 2rem; }
.cyber-card ul { margin: 0; padding: 0; list-style: none; }
.cyber-card li { position: relative; margin: 12px 0; padding-left: 20px; color: #52625a; }
.cyber-card li::before { content: ">"; position: absolute; left: 0; color: #00b84a; font-weight: 800; }
.cyber-feature { color: #fff; background: #06100c; }
.cyber-feature-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 70px; }
.cyber-feature figure { margin: 0; border: 1px solid rgba(0,239,93,.25); }
.cyber-feature img, .cyber-landscape img { display: block; width: 100%; }
.cyber-feature h2 { margin: 20px 0; font-size: clamp(3rem,5vw,5.2rem); }
.cyber-feature p:not(.eyebrow) { color: #aabcb3; }
.cyber-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.cyber-tags span { padding: 9px 14px; border: 1px solid rgba(0,239,93,.35); color: var(--cyber); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cyber-landscape { margin-top: 50px; border: 1px solid #dce5df; overflow: hidden; }
@media (max-width: 900px) { .cyber-hero { min-height: 650px; } .cyber-grid, .cyber-feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cyber-hero-copy { padding-bottom: 70px; } .cyber-card { min-height: 0; padding: 28px; } .cyber-card h3 { margin-top: 28px; } }