/* ============================================================
   AKSHAY — SYSTEM IDENTITY
   Tokens: dark terminal-noir, phosphor green + warm rust accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root{
  /* color */
  --bg:            #0a0d0b;
  --bg-raised:     #0f1310;
  --bg-panel:      #12160f;
  --line:          #253026;
  --text:          #d9e4dc;
  --text-dim:      #8fa196;
  --text-faint:    #566158;
  --phosphor:      #6fe6a0;
  --phosphor-hi:   #b7ffd6;
  --rust:          #c9784a;
  --rust-hi:       #e6a06e;
  --danger:        #d16a5a;

  /* type */
  --f-mono: 'JetBrains Mono', 'Space Mono', monospace;
  --f-type: 'Space Mono', monospace;
  --f-serif: 'Spectral', Georgia, serif;

  /* layout */
  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 64px);
  --nav-h: 64px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* film grain + scanline atmosphere, fixed & non-interactive */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 5; opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines{
  position: fixed; inset:0; pointer-events:none; z-index:6; opacity:.035;
  background: repeating-linear-gradient(to bottom, #fff 0px, transparent 1px, transparent 3px);
}
.vignette{
  position: fixed; inset:0; pointer-events:none; z-index:4;
  box-shadow: inset 0 0 220px rgba(0,0,0,.75);
}

a{ color: var(--phosphor); text-decoration: none; }
a:hover{ color: var(--phosphor-hi); }
a:focus-visible, button:focus-visible{ outline: 1px solid var(--phosphor); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--f-serif); font-weight: 400; margin: 0 0 .4em; letter-spacing: .01em; }
.eyebrow{
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--phosphor); opacity:.85;
}

::selection{ background: var(--phosphor); color:#03150a; }

/* ---------------- layout shells ---------------- */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ---------------- nav ---------------- */
.topnav{
  position: sticky; top:0; z-index: 50;
  height: var(--nav-h); display:flex; align-items:center;
  background: rgba(10,13,11,.86); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topnav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ font-family: var(--f-mono); font-size: 14px; letter-spacing:.08em; color: var(--text); display:flex; gap:.6em; align-items:center; }
.brand .dot{ width:7px; height:7px; border-radius:50%; background: var(--phosphor); box-shadow: 0 0 8px var(--phosphor); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.navlinks{ display:flex; gap: 22px; font-family: var(--f-mono); font-size: 12px; letter-spacing:.06em; text-transform: uppercase; }
.navlinks a{ color: var(--text-dim); position:relative; padding: 4px 0; }
.navlinks a:hover, .navlinks a[aria-current="page"]{ color: var(--phosphor-hi); }
.navlinks a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background: var(--phosphor);
}
.navtoggle{ display:none; background:none; border:1px solid var(--line); color:var(--text); font-family:var(--f-mono); padding:6px 10px; }

@media (max-width: 880px){
  .navlinks{
    position:fixed; top: var(--nav-h); right:0; left:0; background: var(--bg-raised);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0;
    max-height:0; overflow:hidden; transition: max-height .3s ease;
  }
  .navlinks.open{ max-height:480px; }
  .navlinks a{ padding: 14px var(--pad); border-top:1px solid var(--line); }
  .navtoggle{ display:block; }
}

/* ---------------- hero / terminal ---------------- */
.hero{
  min-height: calc(100svh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:center;
  padding: 60px var(--pad) 40px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.terminal{
  font-family: var(--f-mono); font-size: 13px; color: var(--text-dim);
  border: 1px solid var(--line); background: var(--bg-panel);
  padding: 16px 20px; max-width: 560px; margin-bottom: 32px;
}
.terminal .row{ white-space: pre; }
.terminal .ok{ color: var(--phosphor); }
.caret{ display:inline-block; width:8px; height:1em; background:var(--phosphor); vertical-align:-2px; animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

.hero h1{
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; max-width: 16ch;
  font-weight: 300;
}
.hero h1 em{ font-style: italic; color: var(--phosphor-hi); }
.hero p.lede{ color: var(--text-dim); max-width: 56ch; font-size: 1.05rem; margin-top: 18px; }

.decode{ display:inline-block; }

/* ---------------- module grid (home) ---------------- */
.modules{ padding: 80px var(--pad); }
.modules h2{ font-family: var(--f-mono); font-size: 13px; letter-spacing:.18em; text-transform:uppercase; color: var(--text-faint); margin-bottom: 34px; }
.gridm{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); }
.card{
  background: var(--bg); padding: 30px 26px; position:relative; overflow:hidden;
  transition: background .25s ease;
}
.card:hover{ background: var(--bg-raised); }
.card .tag{ font-family: var(--f-mono); font-size:11px; letter-spacing:.14em; color: var(--phosphor); text-transform:uppercase; }
.card .status{ float:right; font-family:var(--f-mono); font-size:10px; color: var(--text-faint); border:1px solid var(--line); padding:2px 6px; }
.card h3{ font-family: var(--f-serif); font-size: 1.5rem; margin: 14px 0 8px; color: var(--text); }
.card p{ color: var(--text-dim); font-size: .93rem; margin:0; }
.card .go{ display:block; margin-top:16px; font-family: var(--f-mono); font-size:12px; color: var(--text-faint); }
.card:hover .go{ color: var(--phosphor-hi); }

/* ---------------- pillar page structure ---------------- */
.pillar-hero{
  padding: 70px var(--pad) 50px; border-bottom:1px solid var(--line); position:relative;
}
.pillar-id{ font-family: var(--f-mono); font-size:12px; color: var(--text-faint); letter-spacing:.12em; margin-bottom: 20px; }
.pillar-id span{ color: var(--phosphor); }
.pillar-hero h1{ font-size: clamp(2.2rem,5.4vw,3.6rem); font-weight:300; max-width: 18ch; }
.pillar-hero .sub{ font-family: var(--f-mono); font-size: .95rem; color: var(--text-dim); margin-top: 14px; max-width: 60ch; }

.status-bar{
  display:flex; gap:28px; flex-wrap:wrap; margin-top: 30px; font-family: var(--f-mono); font-size:12px; color: var(--text-faint);
}
.status-bar b{ color: var(--text); font-weight:400; }

.section{ padding: 64px var(--pad); border-bottom: 1px solid var(--line); }
.section.tight{ padding-top: 44px; padding-bottom: 44px; }
.section h2{ font-size: 1.7rem; font-weight:400; margin-bottom: 18px; }
.section .lead{ color: var(--text-dim); max-width: 68ch; }
.section p{ max-width: 68ch; }
.section p + p{ margin-top: 1em; }

.log{
  font-family: var(--f-mono); font-size: 13px; color: var(--text-dim);
  border-left: 2px solid var(--line); padding-left: 18px; margin: 8px 0;
}
.log .k{ color: var(--phosphor); }

.quote{
  font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; color: var(--text);
  max-width: 44ch; border-left: 2px solid var(--rust); padding-left: 22px; margin: 10px 0;
}

.taglist{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 18px; }
.taglist span{
  font-family: var(--f-mono); font-size: 11px; letter-spacing:.05em; color: var(--text-dim);
  border:1px solid var(--line); padding: 5px 10px; text-transform:uppercase;
}

.wip{
  border:1px dashed var(--line); padding: 20px 22px; font-family: var(--f-mono); font-size: 12.5px; color: var(--text-faint);
  margin-top: 26px; max-width: 68ch;
}
.wip .k{ color: var(--rust-hi); }

.pillar-nav{
  display:flex; justify-content:space-between; padding: 30px var(--pad) 70px; font-family: var(--f-mono); font-size:12px;
  color: var(--text-faint); flex-wrap:wrap; gap:12px;
}
.pillar-nav a{ color: var(--text-dim); }
.pillar-nav a:hover{ color: var(--phosphor-hi); }

/* ---------------- footer ---------------- */
footer{
  padding: 30px var(--pad) 50px; font-family: var(--f-mono); font-size: 11.5px; color: var(--text-faint);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
footer a{ color: var(--text-faint); }
footer a:hover{ color: var(--phosphor); }

/* utility */
.mono{ font-family: var(--f-mono); }
.rust{ color: var(--rust-hi); }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}