:root {
  color-scheme: dark;
  --bg: #020707;
  --bg-2: #051010;
  --text: #f3fbf5;
  --muted: #aab8b2;
  --dim: #6e8179;
  --line: rgba(153, 255, 171, 0.34);
  --line-strong: rgba(159, 255, 178, 0.78);
  --surface: rgba(3, 15, 16, 0.72);
  --surface-strong: rgba(5, 24, 24, 0.86);
  --accent: #8dffa2;
  --accent-2: #b7ffd3;
  --cyan: #7ae7ff;
  --shadow: rgba(78, 255, 118, 0.36);
  --panel-width: 1390px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mouse-x: 50%;
  --mouse-y: 48%;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: #010404; color: var(--text); font-family: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
button, a, p, h1, h2 { font: inherit; }
.project-zone h2, .confidential { font-family: "SF Mono", "IBM Plex Mono", "Roboto Mono", "Cascadia Mono", ui-monospace, monospace; letter-spacing: 0; }
body::before, body::after { position: fixed; inset: 0; z-index: 1; pointer-events: none; content: ""; }
body::before { background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 70%); }
body::after { background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(129,255,158,.18), transparent 22rem), radial-gradient(circle at 50% 44%, rgba(126,255,171,.13), transparent 25rem), linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.48) 76%, rgba(0,0,0,.78)); }
#matrix-rain { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; background: #010404; }
.cursor-field { position: fixed; inset: auto auto 0 0; z-index: 1; width: 100vw; height: 45vh; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(118,255,155,.12), transparent 44%), linear-gradient(to bottom, transparent, rgba(0,0,0,.5)); }
.page-shell { position: relative; z-index: 2; min-height: 100svh; padding: 1rem; }
.page-shell::before { position: fixed; inset: 1rem; z-index: -1; pointer-events: none; content: ""; border: 1px solid rgba(232,255,244,.22); border-radius: 8px; box-shadow: inset 0 0 60px rgba(98,255,138,.035), 0 0 80px rgba(0,0,0,.72); }
.project-card { color: inherit; text-decoration: none; }
.hero { position: relative; display: grid; width: min(100%, var(--panel-width)); min-height: calc(100svh - 2rem); margin: 0 auto; padding: clamp(1.5rem,3.5vh,3.25rem) clamp(1.1rem,3vw,3rem) 2rem; }
.hero-panel { position: relative; display: grid; grid-template-rows: 1fr auto auto auto; align-content: center; min-height: min(780px, calc(100svh - 4rem)); isolation: isolate; }
.hero-panel::before, .hero-panel::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; }
.hero-panel::before { background: radial-gradient(ellipse at 50% 47%, rgba(170,255,189,.18), transparent 3.4rem), radial-gradient(ellipse at 50% 50%, rgba(66,255,126,.18), transparent 13rem), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.56) 100%); }
.hero-panel::after { opacity: .8; background: linear-gradient(90deg, transparent 0 34%, rgba(125,255,160,.14) 50%, transparent 66%), linear-gradient(180deg, transparent 0 68%, rgba(95,255,149,.08), transparent 90%); mask-image: radial-gradient(ellipse at 50% 58%, black, transparent 62%); }
.hero-copy { align-self: center; max-width: 850px; margin: 0 auto clamp(3.2rem,6.6vh,5.2rem); text-align: center; }
h1 { display: flex; justify-content: center; gap: clamp(.54rem,2vw,2rem); margin: 0; color: rgba(246,255,250,.98); font-size: clamp(3.2rem,7.25vw,7.45rem); font-weight: 280; line-height: .95; letter-spacing: .04em; text-shadow: 0 0 30px rgba(255,255,255,.11), 0 0 48px rgba(100,255,143,.16); }
h1 span:last-child { color: var(--accent-2); text-shadow: 0 0 22px rgba(141,255,162,.7), 0 0 70px rgba(141,255,162,.45); }
.lightline { width: min(36rem,74vw); height: 2px; margin: clamp(1rem,2.2vh,1.5rem) auto 0; background: linear-gradient(90deg, transparent, rgba(127,255,164,.36), var(--accent-2), rgba(127,255,164,.36), transparent); box-shadow: 0 0 18px rgba(126,255,159,.64), 0 0 62px rgba(126,255,159,.42); transform-origin: 50% 50%; animation: lightline-pulse 4.8s ease-in-out infinite; }
.project-zone { align-self: end; }
.project-zone h2 { position: relative; width: max-content; margin: 0 auto 1.42rem; color: rgba(235,255,241,.92); font-size: clamp(.72rem,1.1vw,.9rem); font-weight: 580; line-height: 1; text-transform: uppercase; letter-spacing: .5em; }
.project-zone h2::after { position: absolute; left: 50%; bottom: -.75rem; width: 2.1rem; height: 1px; content: ""; background: var(--accent); box-shadow: 0 0 18px rgba(141,255,162,.7); transform: translateX(-50%); }
.project-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(.9rem,1.6vw,1.28rem); width: min(100%,880px); margin: 0 auto; }
.project-card { --card-glow: rgba(114,255,152,0); position: relative; display: grid; grid-template-columns: 4.8rem minmax(0,1fr) 1.8rem; align-items: center; min-height: 148px; padding: 1.55rem 1.5rem 1.55rem 1.35rem; overflow: hidden; border: 1px solid rgba(220,255,232,.17); border-radius: 7px; background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 30%), radial-gradient(circle at 16% 18%, rgba(141,255,162,.1), transparent 12rem), rgba(4,18,20,.82); box-shadow: inset 0 0 60px rgba(168,255,196,.028), 0 22px 46px rgba(0,0,0,.24), 0 0 0 1px rgba(0,0,0,.28); transition: transform 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease); }
.project-card::before, .project-card::after { position: absolute; inset: 0; pointer-events: none; content: ""; }
.project-card::before { opacity: 0; background: linear-gradient(90deg, transparent, rgba(141,255,162,.16), transparent), radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(141,255,162,.16), transparent 13rem); transition: opacity 240ms var(--ease); }
.project-card::after { border-radius: inherit; box-shadow: inset 0 0 0 1px var(--card-glow), inset 0 0 35px rgba(116,255,156,.035); }
.project-card:hover, .project-card:focus-visible, .project-card.is-active { --card-glow: rgba(149,255,173,.52); border-color: rgba(149,255,173,.68); background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 30%), radial-gradient(circle at 16% 18%, rgba(141,255,162,.16), transparent 12rem), rgba(5,24,24,.9); box-shadow: inset 0 0 65px rgba(168,255,196,.052), 0 24px 58px rgba(0,0,0,.34), 0 0 36px rgba(101,255,142,.18); transform: translateY(-4px); }
.project-card:hover::before, .project-card:focus-visible::before, .project-card.is-active::before { opacity: 1; }
.corner { position: absolute; width: 12px; height: 12px; border-color: rgba(230,255,238,.68); transition: border-color 220ms var(--ease), transform 220ms var(--ease); }
.top-left { top: 1.08rem; left: 1.08rem; border-top: 1px solid; border-left: 1px solid; } .top-right { top: 1.08rem; right: 1.08rem; border-top: 1px solid; border-right: 1px solid; } .bottom-left { bottom: 1.08rem; left: 1.08rem; border-bottom: 1px solid; border-left: 1px solid; } .bottom-right { right: 1.08rem; bottom: 1.08rem; border-right: 1px solid; border-bottom: 1px solid; }
.project-card:hover .corner, .project-card:focus-visible .corner, .project-card.is-active .corner { border-color: var(--accent-2); }
.project-mark { position: relative; display: grid; place-items: center; width: 58px; height: 58px; color: rgba(224,255,234,.92); }
.project-mark::before, .project-mark::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(141,255,162,.42); transform: rotate(45deg) scale(.7); } .project-mark::after { border-color: rgba(122,231,255,.18); transform: rotate(0deg) scale(.84); }
.project-mark svg { position: relative; z-index: 1; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.45; filter: drop-shadow(0 0 12px rgba(141,255,162,.24)); }
.project-copy { display: grid; min-width: 0; }
.project-name { color: rgba(249,255,251,.96); font-size: clamp(1.28rem,2vw,1.76rem); font-weight: 420; line-height: 1.12; text-wrap: balance; }
.project-arrow { display: inline-flex; justify-content: flex-end; color: var(--accent); } .project-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.65; transition: transform 220ms var(--ease); } .project-card:hover .project-arrow svg, .project-card:focus-visible .project-arrow svg, .project-card.is-active .project-arrow svg { transform: translateX(4px); }
.access-stem { display: grid; justify-items: center; margin: clamp(1.35rem,3vh,2rem) auto 0; } .stem-line { width: 1px; height: clamp(2.2rem,7vh,5.2rem); background: linear-gradient(to bottom, rgba(141,255,162,.18), rgba(190,255,205,.84)); box-shadow: 0 0 22px rgba(141,255,162,.36); }
.secure-node { display: grid; place-items: center; width: 30px; height: 30px; margin-top: -1px; border: 1px solid rgba(141,255,162,.72); border-radius: 4px; background: rgba(4,24,17,.8); color: var(--accent); transform: rotate(45deg); box-shadow: inset 0 0 18px rgba(141,255,162,.12), 0 0 24px rgba(141,255,162,.18); } .secure-node svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.45; transform: rotate(-45deg); }
.confidential { margin: 1rem 0 0; color: rgba(236,255,242,.72); font-size: clamp(.62rem,.85vw,.74rem); font-weight: 520; line-height: 1; text-align: center; text-transform: uppercase; letter-spacing: .5em; }
@keyframes lightline-pulse { 0%,100% { opacity: .68; transform: scaleX(.92); } 50% { opacity: 1; transform: scaleX(1.08); } }
@media (max-width: 980px) { .page-shell { padding: .75rem; } .page-shell::before { inset: .75rem; } .hero { min-height: calc(100svh - 1.5rem); padding-top: clamp(2.2rem,5vh,4rem); } .hero-panel { min-height: auto; } .hero-copy { margin-bottom: clamp(2.6rem,6vh,4.3rem); } h1 { gap: clamp(.38rem,1.85vw,.82rem); font-size: clamp(2.7rem,10.5vw,5.4rem); }  .project-list { grid-template-columns: 1fr; width: min(100%,520px); margin: 0 auto; } .project-card { grid-template-columns: 4.1rem minmax(0,1fr) 1.6rem; min-height: 114px; padding: 1.15rem 1.12rem; } .project-mark { width: 48px; height: 48px; } .project-mark svg { width: 32px; height: 32px; } .project-name { font-size: clamp(1.18rem,4.6vw,1.42rem); }  }
@media (max-width: 520px) { .page-shell { padding: 0; } .page-shell::before { inset: 0; border-right: 0; border-left: 0; border-radius: 0; } .hero { min-height: 100svh; padding: 3.5rem .78rem 2rem; } .hero-copy { margin-bottom: 3rem; } h1 { gap: .24rem; justify-content: flex-start; font-size: clamp(2.25rem,11.2vw,3.4rem); } .lightline { width: 100%; margin-left: 0; } .hero-copy { text-align: left; } .project-zone h2 { margin-left: auto; margin-right: auto; font-size: .66rem; letter-spacing: .42em; } .project-card { grid-template-columns: 3.7rem minmax(0,1fr) 1.35rem; min-height: 108px; padding: 1rem .92rem; } .corner { width: 10px; height: 10px; } .top-left, .top-right { top: .78rem; } .bottom-left, .bottom-right { bottom: .78rem; } .top-left, .bottom-left { left: .78rem; } .top-right, .bottom-right { right: .78rem; } .project-mark { width: 42px; height: 42px; } .project-mark svg { width: 30px; height: 30px; }   .access-stem { margin-top: 1.35rem; } .stem-line { height: 2.65rem; } .confidential { font-size: .58rem; letter-spacing: .34em; } }
@media (max-width: 374px) { h1 { font-size: 2rem; } .project-card { grid-template-columns: 3.2rem minmax(0,1fr) 1.2rem; padding-right: .72rem; padding-left: .72rem; } .project-name { font-size: 1.04rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
/* arguspyx-mobile-spacing-start */
@media (max-width:520px){.hero{padding:1rem .78rem 2rem}.hero-panel{grid-template-rows:auto auto auto auto;align-content:start}.hero-copy{margin-bottom:1.45rem}.lightline{margin-top:.72rem}}
/* arguspyx-mobile-spacing-end */