:root {
  --ink: #080b0c;
  --paper: #e4e5dc;
  --muted: #929b96;
  --line: rgba(228, 229, 220, .16);
  --red: #ff3d46;
  --blue: #4f9dff;
  --violet: #bf67ff;
  --accent: #ff3d46;
  --amber: var(--accent);
  --green: #a8d3a0;
  --mono: 'DM Mono', monospace;
  --display: 'Space Grotesk', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--display); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 76% 14%, rgba(92, 128, 86, .12), transparent 30%), linear-gradient(115deg, transparent 0 54%, rgba(255,255,255,.018) 54% 54.2%, transparent 54.2%); }
.noise { position: fixed; inset: 0; opacity: .045; pointer-events: none; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.topbar { height: 78px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; position: relative; z-index: 2; }
.brand { color: var(--paper); text-decoration: none; letter-spacing: .12em; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 28px; height: 28px; border: 1px solid var(--amber); color: var(--amber); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; }
.brand-muted { color: var(--muted); font-weight: 400; }
.nav-links { display: flex; gap: 28px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.nav-links a { color: var(--muted); text-decoration: none; transition: color .2s ease; }.nav-links a:hover, .nav-links a.active { color: var(--paper); }
.system-pill { color: var(--green); font: 11px var(--mono); letter-spacing: .08em; }.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 8px; box-shadow: 0 0 0 5px rgba(155,219,122,.08); }
.section-shell, .hero { width: min(1180px, 90vw); margin: auto; }.hero { min-height: 670px; display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 8vw; padding: 100px 0 120px; }
.eyebrow { color: var(--amber); font: 11px var(--mono); letter-spacing: .12em; margin: 0 0 23px; }.eyebrow-line { width: 28px; height: 1px; background: currentColor; display: inline-block; vertical-align: middle; margin-right: 9px; }
h1, h2 { margin: 0; font-weight: 600; letter-spacing: -.055em; line-height: .94; }h1 { font-size: clamp(58px, 8vw, 112px); }h1 em { color: var(--amber); font-style: normal; }h2 { font-size: clamp(42px, 5vw, 72px); }
.hero-text { max-width: 430px; color: var(--muted); line-height: 1.65; margin: 30px 0; font-size: 16px; }.hero-actions { display: flex; gap: 24px; align-items: center; }.button { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }.button-primary { background: var(--amber); color: var(--ink); padding: 15px 18px; }.button-primary span, .button-quiet span { margin-left: 16px; }.button-quiet { color: var(--paper); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.hero-console { border: 1px solid rgba(255,174,53,.45); background: #0c1110; box-shadow: 18px 18px 0 rgba(255,174,53,.08); transform: rotate(1.2deg); }.console-top { height: 38px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 15px; color: var(--muted); font: 10px var(--mono); }.console-top i { display: inline-block; width: 7px; height: 7px; background: #48534b; border-radius: 50%; margin-right: 4px; }.console-top i:first-child { background: var(--red); }.console-body { padding: 25px 24px 30px; font: 12px/2 var(--mono); }.console-body p { margin: 0; }.prompt { color: var(--amber); }.path, .green { color: var(--green); }.muted { color: #66736a; }.amber { color: var(--amber); }.cursor { display: inline-block; width: 7px; height: 14px; background: var(--amber); vertical-align: -2px; margin-left: 4px; animation: blink 1s steps(2) infinite; }.console-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 15px; color: var(--muted); font-size: 10px; }.console-grid strong { color: var(--paper); font-weight: 400; text-align: right; }
.profile-section { padding: 60px 0 130px; }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 45px; }.section-note { font: 12px/1.7 var(--mono); color: var(--muted); text-align: right; }.profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.profile-card { appearance: none; border: 1px solid var(--line); background: #0b0f10; color: var(--paper); text-align: left; min-height: 285px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; position: relative; cursor: pointer; transition: transform .25s ease, background .25s ease, border-color .25s ease; }.profile-card:hover, .profile-card.selected { transform: translateY(-7px); }.profile-card:hover { border-color: var(--paper); }.profile-card.pentest.selected, .profile-card.pentest:hover { border-color: var(--red); background: linear-gradient(145deg, rgba(255,61,70,.16), #0b0f10 56%); }.profile-card.daily.selected, .profile-card.daily:hover { border-color: var(--blue); background: linear-gradient(145deg, rgba(79,157,255,.16), #0b0f10 56%); }.profile-card.carma.selected, .profile-card.carma:hover { border-color: var(--violet); background: linear-gradient(145deg, rgba(191,103,255,.16), #0b0f10 56%); }.profile-card.expert.selected, .profile-card.expert:hover { border-color: var(--amber); background: linear-gradient(145deg, rgba(214,161,93,.16), #0b0f10 56%); }.card-index { font: 10px var(--mono); color: var(--muted); }.profile-card img { width: 72px; height: 72px; object-fit: contain; margin: 28px 0 18px; }.card-title { font-size: 20px; font-weight: 600; }.card-description { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 8px; max-width: 180px; }.card-arrow { position: absolute; right: 18px; bottom: 18px; color: var(--amber); font-size: 20px; }
.status-section { padding: 0 0 130px; }.status-panel { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 48px 0; display: flex; justify-content: space-between; align-items: center; }.status-copy h2 { font-size: clamp(34px, 4vw, 54px); }.status-copy h2 span { color: var(--amber); }.status-copy > p:last-child { color: var(--muted); margin-top: 20px; }.status-metrics { display: grid; grid-template-columns: repeat(3, 110px); gap: 25px; }.status-metrics div { border-left: 1px solid var(--line); padding-left: 15px; }.metric-label { display: block; color: var(--muted); font: 10px var(--mono); margin-bottom: 10px; }.status-metrics strong { font: 12px var(--mono); color: var(--paper); }
.stack-section { padding: 0 0 100px; }.stack-list { border-top: 1px solid var(--line); margin-top: 45px; }.stack-list > div { display: grid; grid-template-columns: 70px 1fr 1.4fr; gap: 25px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }.stack-number, .stack-list span { font: 11px var(--mono); color: var(--muted); }.stack-list strong { font-size: 18px; }
.resources-section { padding: 0 0 130px; }.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.resource-card { min-height: 160px; border: 1px solid var(--line); background: #0b0f10; color: var(--paper); text-decoration: none; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .25s ease, border-color .25s ease, background .25s ease; }.resource-card:hover { transform: translateY(-5px); border-color: var(--amber); background: #111614; }.resource-card.resource-main { grid-column: span 2; border-color: rgba(214,161,93,.4); }.resource-card.resource-demo { background: linear-gradient(140deg, rgba(168,211,160,.13), #0b0f10 70%); }.resource-type { color: var(--amber); font: 10px var(--mono); letter-spacing: .06em; }.resource-card strong { font-size: 20px; font-weight: 500; }.resource-card strong span { color: var(--amber); margin-left: 8px; }.resource-card small { color: var(--muted); font-size: 12px; }
.footer { border-top: 1px solid var(--line); padding: 25px 0 35px; display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--mono); letter-spacing: .06em; }.footer a { color: var(--paper); text-decoration: none; }
.reveal { animation: rise .75s both cubic-bezier(.2,.8,.2,1); }.delay-one { animation-delay: .12s; }.delay-two { animation-delay: .2s; }.delay-three { animation-delay: .28s; }.delay-four { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 800px) { .topbar { padding: 0 5vw; }.nav-links { display: none; }.hero { grid-template-columns: 1fr; gap: 60px; padding: 70px 0 90px; }.hero-console { width: 94%; margin-left: 3%; }.profile-grid { grid-template-columns: repeat(2, 1fr); }.resource-grid { grid-template-columns: repeat(2, 1fr); }.resource-card.resource-main { grid-column: span 2; }.status-panel { display: block; }.status-metrics { margin-top: 35px; }.section-heading { display: block; }.section-note { text-align: left; margin-top: 22px; } }
@media (max-width: 500px) { h1 { font-size: 56px; }.profile-grid { grid-template-columns: 1fr; }.profile-card { min-height: 240px; }.stack-list > div { grid-template-columns: 45px 1fr; gap: 12px; }.stack-list > div span:last-child { grid-column: 2; }.status-metrics { grid-template-columns: repeat(3, 1fr); gap: 10px; }.footer { flex-wrap: wrap; gap: 18px; }.footer a { width: 100%; } }