/* TP-DESIGN-SYSTEM-V1 */
/*
  Tanner Phillips design language for GlassCastle(S)
  Operational green = alive/verified
  Violet = intelligence/analysis
  Magenta = discovery/experimental
  Light is scarce; structure does the visual work.
*/
:root{
  --tp-void:#080A0D;
  --tp-graphite:#11151A;
  --tp-struct:#232930;
  --tp-green:#35FF95;
  --tp-violet:#8B5CF6;
  --tp-magenta:#E147FF;
  --tp-frost:#DCE3E9;
  --tp-steel:#89939E;
  --tp-ghost:#56616D;
  --tp-danger:#FF5D67;
  --tp-grid:8px;
  --tp-radius:6px;
  --bg:var(--tp-void);
  --panel:var(--tp-graphite);
  --line:var(--tp-struct);
  --green:var(--tp-green);
  --violet:var(--tp-violet);
  --text:var(--tp-frost);
  --muted:var(--tp-steel);
}

html{
  background:var(--tp-void);
  scrollbar-color:var(--tp-struct) var(--tp-void);
}

body{
  background:
    linear-gradient(180deg,rgba(53,255,149,.025),transparent 16rem),
    radial-gradient(circle at 84% 3%,rgba(139,92,246,.08),transparent 28rem),
    var(--tp-void);
  color:var(--tp-frost);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.62;
}

body:before{
  opacity:.11;
  background-image:
    linear-gradient(rgba(53,255,149,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,.06) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(#000,transparent 72%);
}

::selection{background:rgba(53,255,149,.22);color:var(--tp-frost)}

.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  padding:8px 12px;
  transform:translateY(-160%);
  border:1px solid var(--tp-green);
  border-radius:4px;
  background:var(--tp-graphite);
  color:var(--tp-frost);
  font:600 10px/1.2 "Roboto Mono",monospace;
  letter-spacing:.12em;
  text-decoration:none;
}
.skip-link:focus{transform:none}

nav{
  height:64px;
  background:rgba(8,10,13,.92);
  border-bottom:1px solid var(--tp-struct);
  box-shadow:0 1px 0 rgba(255,255,255,.015);
}
.wordmark,
.navlinks,
.eyebrow,
.section-head>p,
.card small,
.ukc-band small,
.diamond-node small,
.diamond-side small,
footer,
.signal,
.operator-strip,
.button{
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.wordmark{letter-spacing:.14em}
.wordmark img{
  width:32px;height:32px;
  border:1px solid rgba(53,255,149,.42);
  border-radius:4px;
  filter:saturate(.82) contrast(1.04);
}
.wordmark b{color:var(--tp-green);font-weight:600}
.navlinks{gap:24px;font-size:9px}
.navlinks a{color:var(--tp-steel);position:relative}
.navlinks a:after{
  content:"";
  position:absolute;left:0;right:100%;bottom:-8px;height:1px;
  background:var(--tp-green);
  transition:right .18s ease;
}
.navlinks a:hover:after,.navlinks a:focus-visible:after{right:0}
.navlinks .nav-action{
  padding:7px 9px;
  border:1px solid rgba(139,92,246,.30);
  border-radius:4px;
  color:var(--tp-frost);
  background:rgba(139,92,246,.045);
}
.navlinks .nav-action:after{display:none}
.navlinks .nav-action:hover,.navlinks .nav-action:focus-visible{
  border-color:var(--tp-violet);
  background:rgba(139,92,246,.08);
}
.mobile-nav{display:none;position:relative;font-family:"Roboto Mono",ui-monospace,monospace}
.mobile-nav summary{
  list-style:none;
  cursor:pointer;
  padding:8px 10px;
  border:1px solid var(--tp-struct);
  border-radius:4px;
  color:var(--tp-frost);
  font-size:9px;
  letter-spacing:.12em;
  user-select:none;
}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav[open] summary{border-color:rgba(53,255,149,.45);color:var(--tp-green)}
.mobile-nav>div{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:210px;
  padding:8px;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(8,10,13,.98);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.mobile-nav a{
  display:block;
  padding:10px 11px;
  border-bottom:1px solid rgba(35,41,48,.72);
  color:var(--tp-steel);
  font-size:9px;
  letter-spacing:.09em;
  text-decoration:none;
}
.mobile-nav a:last-child{border-bottom:0;color:#cbbdff}
.mobile-nav a:hover,.mobile-nav a:focus-visible{color:var(--tp-green);background:rgba(53,255,149,.04)}

main{width:min(1248px,calc(100% - 40px))}

.hero{
  min-height:610px;
  grid-template-columns:1.02fr .98fr;
  gap:48px;
  padding:72px 0 48px;
}
.hero-visual{
  position:relative;
  min-width:0;
}
.instrument-frame{
  padding:8px;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(17,21,26,.72);
  box-shadow:0 24px 72px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025);
  overflow:hidden;
}
.instrument-frame:before,
.instrument-frame:after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  z-index:3;
  pointer-events:none;
}
.instrument-frame:before{
  top:4px;left:4px;
  border-top:1px solid var(--tp-green);
  border-left:1px solid var(--tp-green);
}
.instrument-frame:after{
  right:4px;bottom:4px;
  border-right:1px solid var(--tp-violet);
  border-bottom:1px solid var(--tp-violet);
}
.hero-art{
  display:block;
  width:100%;
  border:0;
  border-radius:3px;
  box-shadow:none;
  opacity:.88;
  filter:saturate(.82) contrast(1.05) brightness(.83);
}
.instrument-chrome{
  position:absolute;
  left:16px;right:16px;bottom:14px;
  display:flex;justify-content:space-between;gap:16px;
  padding:8px 10px;
  border-top:1px solid rgba(53,255,149,.32);
  background:linear-gradient(180deg,transparent,rgba(8,10,13,.72));
  color:rgba(220,227,233,.76);
  font:500 8px/1.2 "Roboto Mono",monospace;
  letter-spacing:.13em;
}
.instrument-chrome span:last-child{color:var(--tp-green)}
.instrument-reticle{
  position:absolute;
  left:50%;top:50%;
  width:72px;height:72px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(53,255,149,.20);
  border-radius:50%;
  pointer-events:none;
}
.instrument-reticle:before,
.instrument-reticle:after{
  content:"";
  position:absolute;
  background:rgba(53,255,149,.20);
}
.instrument-reticle:before{left:50%;top:-14px;width:1px;height:98px}
.instrument-reticle:after{top:50%;left:-14px;height:1px;width:98px}

.eyebrow{color:var(--tp-green);letter-spacing:.19em;font-size:9px}
.hero h1{
  max-width:760px;
  margin:16px 0 24px;
  color:var(--tp-frost);
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(44px,6vw,82px);
  font-weight:650;
  letter-spacing:-.055em;
  line-height:.96;
}
.hero h1 span{color:var(--tp-green)}
.hero-copy>p:not(.eyebrow){
  max-width:660px;
  color:var(--tp-steel);
  font-size:15px;
  line-height:1.75;
}

.actions{gap:8px;margin-top:28px}
.button{
  min-height:42px;
  padding:11px 14px;
  border:1px solid rgba(53,255,149,.44);
  border-radius:4px;
  background:rgba(53,255,149,.055);
  color:var(--tp-frost);
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.button:hover{
  transform:translateY(-1px);
  border-color:var(--tp-green);
  background:rgba(53,255,149,.09);
  box-shadow:none;
}
.button.alt{
  border-color:rgba(139,92,246,.45);
  background:rgba(139,92,246,.055);
}
.button.alt:hover{
  border-color:var(--tp-violet);
  background:rgba(139,92,246,.09);
}
a:focus-visible,.button:focus-visible{
  outline:1px solid var(--tp-magenta);
  outline-offset:4px;
}

.operator-strip{
  display:grid;
  grid-template-columns:.8fr .8fr 1.5fr 1fr;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(17,21,26,.72);
  overflow:hidden;
}
.operator-strip>div{
  min-height:66px;
  padding:12px 16px;
  border-right:1px solid var(--tp-struct);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.operator-strip>div:last-child{border-right:0}
.operator-strip small{
  color:var(--tp-ghost);
  font-size:8px;
  letter-spacing:.15em;
}
.operator-strip strong{
  color:var(--tp-frost);
  font-size:10px;
  font-weight:500;
  letter-spacing:.06em;
}
.operator-strip div:first-child strong{color:var(--tp-green)}
.operator-strip div:nth-child(2) strong{color:var(--tp-violet)}

.signal{
  justify-content:flex-start;
  margin-top:8px;
  padding:12px 16px;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(17,21,26,.46);
  color:var(--tp-steel);
  font-size:8px;
}
.signal i{color:var(--tp-green)}

.section-head{padding:96px 0 24px}
.section-head>p{
  color:var(--tp-green);
  font-size:9px;
  letter-spacing:.18em;
}
.section-head h2,.final h2{
  max-width:980px;
  color:var(--tp-frost);
  font-family:Inter,system-ui,sans-serif;
  font-size:clamp(30px,4vw,50px);
  font-weight:620;
  letter-spacing:-.04em;
  line-height:1.08;
}
.section-copy{
  max-width:780px;
  color:var(--tp-steel)!important;
  font-family:Inter,system-ui,sans-serif!important;
  font-size:13px!important;
  line-height:1.72!important;
}

.grid{gap:8px}
.card,.rule{
  position:relative;
  min-height:210px;
  padding:22px;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(17,21,26,.74);
  box-shadow:inset 0 1px rgba(255,255,255,.018);
  overflow:hidden;
}
.card:before,.rule:before{
  content:"";
  position:absolute;
  top:-1px;left:16px;
  width:32px;height:1px;
  background:var(--tp-green);
  opacity:.72;
}
.card:nth-child(3n+2):before{background:var(--tp-violet)}
.card:nth-child(3n):before{background:var(--tp-magenta);opacity:.46}
.card{
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:#39424c;
  background:#12181e;
}
.card small{
  color:var(--tp-green);
  font-size:8px;
  letter-spacing:.15em;
}
.card h3{
  margin:28px 0 10px;
  color:var(--tp-frost);
  font-family:Inter,system-ui,sans-serif;
  font-size:17px;
  font-weight:620;
  letter-spacing:-.018em;
}
.card p,.rule p{
  color:var(--tp-steel);
  font-size:12.5px;
  line-height:1.7;
}
.card b{color:var(--tp-violet);font-family:"Roboto Mono",monospace;font-size:9px;letter-spacing:.08em}

.ukc-band,
.diamond-shape,
.diamond-side article{
  border-color:var(--tp-struct);
  border-radius:var(--tp-radius);
  background:rgba(17,21,26,.68);
}
.ukc-band:before{background:var(--tp-green)}
.ukc-band.pivot{
  border-color:rgba(139,92,246,.36);
  background:rgba(139,92,246,.045);
}
.ukc-band.pivot:before{background:var(--tp-violet);box-shadow:none}
.ukc-band.objectives{border-color:rgba(225,71,255,.22)}
.ukc-phases span{
  border-color:#2a323a;
  border-radius:3px;
  background:#0d1115;
  color:var(--tp-frost);
}
.ukc-band.pivot .ukc-phases span{border-color:rgba(139,92,246,.34)}
.diamond-shape{
  background:
    linear-gradient(rgba(53,255,149,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(139,92,246,.025) 1px,transparent 1px),
    #0d1115;
  background-size:32px 32px;
}
.diamond-lines line{stroke:rgba(53,255,149,.34)}
.diamond-node,.diamond-event{
  border-color:#35404a;
  border-radius:4px;
  background:rgba(8,10,13,.90);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}
.diamond-event{border-color:rgba(139,92,246,.48)}
.diamond-event b,.diamond-gap b{color:#cbbdff}

.rule{min-height:160px}
.rule b{
  color:var(--tp-frost);
  font-family:"Roboto Mono",monospace;
  font-size:10px;
  letter-spacing:.06em;
}
.final{
  margin:56px 0 88px;
  padding:40px;
  border:1px solid var(--tp-struct);
  border-radius:var(--tp-radius);
  background:
    linear-gradient(100deg,rgba(53,255,149,.035),transparent 45%),
    linear-gradient(280deg,rgba(139,92,246,.04),transparent 40%),
    var(--tp-graphite);
}
footer{
  border-top:1px solid var(--tp-struct);
  color:var(--tp-ghost);
  background:#07090b;
}

@media(max-width:900px){
  .mobile-nav{display:block}
  main{width:min(100% - 28px,1248px)}
  .hero{gap:32px}
  .operator-strip{grid-template-columns:1fr 1fr}
  .operator-strip>div:nth-child(2){border-right:0}
  .operator-strip>div:nth-child(-n+2){border-bottom:1px solid var(--tp-struct)}
}
@media(max-width:620px){
  .hero{padding-top:32px}
  .hero h1{font-size:clamp(38px,13vw,52px)}
  .instrument-chrome{font-size:7px}
  .operator-strip{grid-template-columns:1fr}
  .operator-strip>div{
    min-height:54px;
    border-right:0;
    border-bottom:1px solid var(--tp-struct);
  }
  .operator-strip>div:last-child{border-bottom:0}
  .signal{gap:10px}
  .section-head{padding-top:72px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}