:root{
  --bg:#030608;
  --panel:#071015;
  --panel2:#0b171d;
  --ink:#d6e4e8;
  --muted:#91a9b0;
  --dim:#536970;
  --teal:#6fc7c7;
  --indigo:#8588cf;
  --line:rgba(147,210,216,.27);
  --danger:#a9dfe3;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--bg)}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:"Courier New",monospace;
  background:
    radial-gradient(circle at 78% 12%,rgba(177,216,224,.16),transparent 9rem),
    radial-gradient(circle at 20% 85%,rgba(111,199,199,.09),transparent 24rem),
    radial-gradient(circle at 82% 70%,rgba(133,136,207,.10),transparent 27rem),
    linear-gradient(135deg,#020405,#071015 45%,#030608);
  overflow-x:hidden;
}

body.glitching main{animation:page-glitch .18s steps(2) 4}

@keyframes page-glitch{
  0%{transform:translate(0)}
  25%{transform:translate(3px,-2px)}
  50%{transform:translate(-4px,2px)}
  75%{transform:translate(2px,3px)}
  100%{transform:translate(0)}
}

#fog,.crt,.noise{position:fixed;inset:0;pointer-events:none}
#fog{z-index:-4}

.crt{
  z-index:50;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),
    linear-gradient(90deg,rgba(111,199,199,.025),transparent 18%,rgba(133,136,207,.025));
  mix-blend-mode:screen;
  opacity:.28;
}

.noise{
  z-index:49;
  opacity:.12;
  background:
    repeating-radial-gradient(circle at 10% 20%,rgba(255,255,255,.16) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(86deg,transparent 0 10px,rgba(255,255,255,.035) 11px,transparent 12px);
  animation:noise 1.7s steps(2) infinite;
}

@keyframes noise{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}
  75%{transform:translate(2%,2%)}
}

.terminal-rail{
  position:fixed;
  left:1rem;
  top:7rem;
  z-index:15;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  color:var(--dim);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:flex;
  gap:1rem;
}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem clamp(1rem,4vw,3rem);
  background:rgba(2,5,7,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}

.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:bold;
}

.moonmark{
  width:2rem;height:2rem;border:2px solid var(--teal);border-radius:50%;
  position:relative;box-shadow:0 0 20px rgba(111,199,199,.18);
}
.moonmark:after{
  content:"";position:absolute;width:1.55rem;height:1.55rem;border-radius:50%;
  background:#020405;left:.55rem;top:.08rem;
}

nav{display:flex;gap:.8rem;flex-wrap:wrap}
nav a,#ambientBtn{
  color:var(--muted);
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  font:inherit;
  font-size:.82rem;
  text-decoration:none;
  text-transform:uppercase;
  cursor:pointer;
}
nav a:hover,#ambientBtn:hover{color:var(--teal);border-bottom-color:var(--teal)}

main{
  width:min(1120px,calc(100% - 2rem));
  margin:0 auto;
}

.hero{
  min-height:88vh;
  padding:clamp(4rem,8vw,7rem) 0;
}

.file-label{
  display:inline-block;
  padding:.35rem .6rem;
  color:var(--teal);
  border:1px solid var(--line);
  background:rgba(7,16,21,.7);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.75rem;
  transform:rotate(-1deg);
}

.hero-grid{
  margin-top:2rem;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
}

.kicker,.section-title p{
  color:var(--teal);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.78rem;
}

h1,h2,h3,p{margin-top:0}

h1{
  font-family:Georgia,serif;
  font-size:clamp(4.2rem,13vw,9.5rem);
  line-height:.78;
  letter-spacing:-.075em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
  text-shadow:0 0 24px rgba(111,199,199,.12);
}

h2{
  font-family:Georgia,serif;
  font-size:clamp(2.3rem,6vw,4.8rem);
  line-height:.9;
  letter-spacing:-.05em;
}

h3{font-size:1.1rem;color:#edf7f8}

p{line-height:1.75;color:var(--muted)}

.lead{
  max-width:700px;
  font-size:clamp(1.05rem,2vw,1.35rem);
}

.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.centered{justify-content:center}

.btn,.tiny-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.7rem;
  padding:.8rem 1rem;
  color:var(--ink);
  background:rgba(7,16,21,.85);
  border:1px solid var(--line);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font:inherit;
  cursor:pointer;
  clip-path:polygon(0 .45rem,.45rem 0,100% 0,100% calc(100% - .45rem),calc(100% - .45rem) 100%,0 100%);
}

.btn.primary{
  background:linear-gradient(135deg,rgba(111,199,199,.28),rgba(133,136,207,.22));
  box-shadow:0 0 22px rgba(111,199,199,.12);
}
.btn:hover,.tiny-btn:hover{border-color:rgba(210,245,246,.55);transform:translateY(-1px)}

.specimen-card,.panel{
  position:relative;
  background:
    linear-gradient(135deg,rgba(255,255,255,.04),transparent 28%),
    rgba(7,16,21,.78);
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(0,0,0,.65) inset,0 30px 90px rgba(0,0,0,.35);
  clip-path:polygon(0 .8rem,.8rem 0,100% 0,100% calc(100% - .8rem),calc(100% - .8rem) 100%,0 100%);
}

.specimen-card:before,.panel:before{
  content:"";position:absolute;inset:.5rem;border:1px dashed rgba(155,218,222,.16);pointer-events:none;
}

.specimen-card{padding:1rem}
.specimen-header{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  color:var(--dim);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
}
.tiny-btn{min-height:auto;padding:.35rem .55rem;font-size:.7rem}

.specimen{
  position:relative;
  height:360px;
  margin:1rem 0;
  background:
    radial-gradient(circle at 50% 38%,rgba(111,199,199,.13),transparent 8rem),
    radial-gradient(circle at 50% 50%,rgba(133,136,207,.07),transparent 12rem),
    #030608;
  border:1px solid rgba(147,210,216,.18);
  overflow:hidden;
}

.specimen:before{
  content:"";position:absolute;inset:15%;
  border:2px solid rgba(111,199,199,.62);
  border-radius:50%;
  box-shadow:0 0 30px rgba(111,199,199,.12);
}
.specimen:after{
  content:"";position:absolute;inset:17% 21% 12% 42%;
  background:#030608;border-radius:50%;
}

.eye{
  position:absolute;top:42%;
  width:1rem;height:1rem;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 18px var(--teal);
  animation:blink 6s infinite;
}
.eye.left{left:42%}.eye.right{left:58%}

@keyframes blink{
  0%,96%,100%{transform:scaleY(1)}
  97%,99%{transform:scaleY(.08)}
}

.scratch{
  position:absolute;
  height:2px;
  width:42%;
  background:rgba(214,240,242,.5);
  transform-origin:left center;
  box-shadow:0 0 12px rgba(111,199,199,.24);
}
.s1{left:32%;top:58%;transform:rotate(-22deg)}
.s2{left:35%;top:64%;transform:rotate(-17deg)}
.s3{left:38%;top:70%;transform:rotate(-12deg)}
.caption{font-size:.85rem;color:var(--dim)}

.panel{
  padding:clamp(2rem,5vw,4rem);
  margin-bottom:2rem;
}

.service-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}

.service-list article{
  min-height:230px;
  padding:1rem;
  background:rgba(3,7,10,.45);
  border:1px solid rgba(147,210,216,.18);
}
.service-list span{
  display:block;
  color:var(--dim);
  font-family:Georgia,serif;
  font-size:2rem;
  margin-bottom:2.4rem;
}

.archive{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.9rem;
}

.archive-card{
  min-height:180px;
  text-align:left;
  padding:1rem;
  color:var(--ink);
  background:
    linear-gradient(135deg,rgba(111,199,199,.10),transparent 60%),
    rgba(3,7,10,.58);
  border:1px solid rgba(147,210,216,.21);
  font:inherit;
  cursor:pointer;
}
.archive-card:hover,.archive-card.active{
  border-color:rgba(210,245,246,.58);
  box-shadow:0 0 24px rgba(111,199,199,.10);
}
.archive-card span,.archive-card em{
  display:block;
  color:var(--dim);
  font-size:.78rem;
}
.archive-card strong{
  display:block;
  margin:2.2rem 0;
  font-family:Georgia,serif;
  font-size:1.45rem;
}
.note-box{
  margin-top:1rem;
  padding:1rem;
  color:var(--teal);
  background:rgba(2,5,7,.72);
  border:1px dashed rgba(147,210,216,.28);
}

.split{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(2rem,6vw,5rem);
}

.contact{text-align:center}
.contact p{max-width:690px;margin-left:auto;margin-right:auto}
.secret{
  margin-top:2rem;
  opacity:0;
  color:var(--teal);
  transition:opacity .4s;
}
.secret.revealed{opacity:1}

footer{
  width:min(1120px,calc(100% - 2rem));
  margin:0 auto;
  padding:2rem 0 3rem;
  display:flex;
  justify-content:space-between;
  color:var(--dim);
  border-top:1px solid rgba(147,210,216,.16);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
}

@media(max-width:980px){
  .terminal-rail{display:none}
  .hero-grid,.split{grid-template-columns:1fr}
  .service-list,.archive{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){
  .topbar{align-items:flex-start;flex-direction:column}
  .service-list,.archive{grid-template-columns:1fr}
  h1{font-size:4.2rem}
}