@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #080c10;
  --panel: #0e151b;
  --line: #26343c;
  --text: #e8fff1;
  --muted: #8ca0aa;
  --lime: #9dff00;
  --cyan: #00d9ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 16px/1.5 'Space Grotesk', Arial, sans-serif; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: .35; background-image: linear-gradient(#9dff0008 1px, transparent 1px), linear-gradient(90deg, #9dff0008 1px, transparent 1px); background-size: 36px 36px; }

header { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 max(5vw, 1.25rem); position: absolute; inset: 0 0 auto; z-index: 2; border-bottom: 1px solid #ffffff18; }
.brand { color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.35rem; letter-spacing: -.07em; }
.brand span { color: var(--lime); }
nav { display: flex; gap: 1.7rem; }
nav a, .preview-exit { color: var(--text); text-decoration: none; font: 12px 'DM Mono', monospace; }
.preview-exit { padding: .55rem .8rem; border: 1px solid #ffffff45; border-radius: 4px; }

.hero { min-height: 780px; padding: 170px max(9vw, 1.5rem) 90px; position: relative; overflow: hidden; background: linear-gradient(90deg, #080c10 0%, #080c10f0 43%, #080c1080 70%, #080c10 100%), url('images/server-workspace.png') center / cover; }
.hero-copy-wrap { position: relative; z-index: 1; max-width: 780px; }
.eyebrow { margin: 0 0 1.4rem; color: var(--muted); font: 12px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .09em; }
.eyebrow span { color: var(--lime); }
h1, h2 { margin: 0; letter-spacing: -.08em; line-height: .95; }
.hero h1 { font-size: clamp(3.4rem, 7vw, 7rem); }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-copy { max-width: 510px; margin: 2.2rem 0; color: #bed0d5; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 1.75rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 195px; padding: .95rem 1.1rem; background: var(--lime); color: #091008; text-decoration: none; font: 700 12px 'DM Mono', monospace; border-radius: 3px; }
.button span { font-size: 1.2rem; }
.text-link { color: var(--text); font: 12px 'DM Mono', monospace; }
.hero-note { position: absolute; left: max(9vw, 1.5rem); bottom: 2.5rem; color: var(--muted); font: 11px 'DM Mono', monospace; }
.pulse { display: inline-block; width: 8px; height: 8px; margin-right: .45rem; background: var(--lime); border-radius: 50%; box-shadow: 0 0 12px var(--lime); }

.code-window { width: min(405px, 36vw); position: absolute; right: max(8vw, 2rem); top: 145px; z-index: 1; background: #0a1015e8; border: 1px solid #31434d; box-shadow: 16px 16px 0 #0007; }
.window-bar { padding: .65rem .75rem; border-bottom: 1px solid var(--line); color: var(--muted); font: 10px 'DM Mono', monospace; }
.window-bar span { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #ff6c67; }
.window-bar span:nth-child(2) { background: #ffbd4a; }
.window-bar span:nth-child(3) { margin-right: 1rem; background: var(--lime); }
.code-window pre { margin: 0; padding: 1.4rem; color: #c6d7da; font: 12px/1.8 'DM Mono', monospace; white-space: pre-wrap; }
.code-window i { color: #e29bff; font-style: normal; }.code-window b { color: var(--cyan); font-weight: 400; }.code-window em, .code-window mark { color: var(--lime); font-style: normal; background: none; }

.services { padding: 8rem max(9vw, 1.5rem); background: #0b1116; }
.section-intro h2, .approach h2 { font-size: clamp(2.6rem, 5vw, 5.2rem); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-grid article { display: flex; flex-direction: column; min-height: 300px; padding: 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #121d24, transparent); }
.number { color: var(--lime); font: 12px 'DM Mono', monospace; }
h3 { margin: 3.7rem 0 .8rem; font-size: 1.35rem; letter-spacing: -.04em; }
.service-grid p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.service-grid a { margin-top: auto; color: var(--cyan); font: 12px 'DM Mono', monospace; }

.visual-showcase { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 520px; background: var(--panel); border-top: 1px solid var(--line); }
.visual-showcase img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; filter: saturate(.9) contrast(1.05); }
.visual-showcase > div { align-self: center; padding: clamp(2rem, 5vw, 5rem); }
.visual-showcase h2 { font-size: clamp(2.3rem, 4vw, 4.4rem); }
.visual-showcase > div > p:last-child { color: var(--muted); line-height: 1.7; }

.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; padding: 8rem max(9vw, 1.5rem); background: #111a20; }
.approach ol { margin: 0; padding: 0; list-style: none; }.approach li { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid #31414a; }.approach li > span { color: var(--lime); font: 12px 'DM Mono', monospace; }.approach li h3 { margin: 0 0 .4rem; }.approach li p { margin: 0; color: var(--muted); font-size: .92rem; }
.contact { padding: 9rem 1.5rem; text-align: center; color: #091008; background: var(--lime); }.contact .eyebrow, .contact-note { color: #406900; }.contact h2 { max-width: 900px; margin: 0 auto 2.6rem; font-size: clamp(3rem, 6vw, 6rem); }.button-light { background: #091008; color: var(--lime); }.contact-note { margin-top: 1.6rem; font: 11px 'DM Mono', monospace; }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem max(5vw, 1.25rem); color: var(--muted); font: 11px 'DM Mono', monospace; }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; }.login-card { width: min(100%, 460px); padding: 3rem; background: var(--panel); border: 1px solid var(--line); box-shadow: 16px 16px 0 #9dff0011; }.login-card h1 { font-size: 3rem; }.login-card p { color: var(--muted); }.login-card form { margin-top: 2rem; }.login-card label { display: grid; gap: .5rem; font: 12px 'DM Mono', monospace; }.login-card input { padding: .85rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); font: inherit; }.login-card button { display: flex; justify-content: space-between; width: 100%; margin-top: 1.2rem; padding: 1rem; color: #091008; background: var(--lime); border: 0; font: 700 12px 'DM Mono', monospace; }.error { color: #ff958e !important; }

@media (max-width: 900px) { .code-window { opacity: .6; right: 2rem; top: 360px; width: 340px; } }
@media (max-width: 720px) { header { height: 70px; } nav { display: none; }.hero { min-height: 700px; padding-top: 130px; background: linear-gradient(90deg, #080c10 0%, #080c10d9 100%), url('images/server-workspace.png') center / cover; }.code-window { display: none; }.hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }.service-grid { grid-template-columns: 1fr 1fr; }.visual-showcase, .approach { grid-template-columns: 1fr; }.visual-showcase img { min-height: 290px; height: 290px; }.visual-showcase > div { padding: 3rem 1.5rem; }.approach { gap: 3rem; padding: 5rem 1.5rem; }.services { padding: 5rem 1.5rem; } }
@media (max-width: 440px) { .service-grid { grid-template-columns: 1fr; }.hero h1 { font-size: 3.2rem; } footer { flex-direction: column; } }