@keyframes mork-rise{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes mork-scan{
  0%,100%{transform:translateX(-18vw);opacity:0}
  18%,72%{opacity:.8}
  52%{transform:translateX(92vw)}
}

@keyframes mork-pulse{
  0%,100%{opacity:.35}
  50%{opacity:.9}
}

body{
  background:
    radial-gradient(circle at 74% 18%,rgba(255,45,91,.12),transparent 30%),
    radial-gradient(circle at 10% 88%,rgba(0,245,196,.08),transparent 28%),
    #080808;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.026;
  mix-blend-mode:screen;
}

.nav{
  height:64px;
  border-bottom-color:rgba(255,255,255,.07);
}

.nav::before{
  content:"";
  position:absolute;
  left:42px;
  bottom:-1px;
  width:92px;
  height:2px;
  background:#ff2d5b;
  box-shadow:0 0 22px rgba(255,45,91,.55);
}

.home-action{
  border:1px solid rgba(255,255,255,.18);
  border-radius:3px;
  padding:8px 10px;
  color:#fff;
  background:#111;
  font-family:"DM Mono",monospace;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-left:auto;
  margin-right:22px;
}

.home-action:hover{
  border-color:#ff2d5b;
  color:#fff;
}

.answer-block{
  border-left:3px solid #00f5c4;
  background:linear-gradient(90deg,rgba(0,245,196,.08),transparent);
  padding:26px 28px;
  margin-top:24px;
}

.answer-block p{
  max-width:940px;
  color:#e8ece9;
  font-size:20px;
  line-height:1.65;
  font-weight:700;
}

.metrics-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.metrics-strip span{
  border:1px solid rgba(255,255,255,.12);
  background:#0d0d0d;
  border-radius:3px;
  padding:10px 12px;
  font-family:"DM Mono",monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#f2f0eb;
}

.signal-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:28px;
  list-style:none;
}

.signal-list li{
  min-height:92px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:3px;
  background:#0c0c0c;
  padding:20px 20px 20px 52px;
  color:#d8d8d8;
  font-weight:700;
  position:relative;
}

.signal-list li::before{
  content:"!";
  position:absolute;
  left:18px;
  top:20px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:3px;
  background:#ff2d5b;
  color:#fff;
  font-family:"DM Mono",monospace;
  font-size:12px;
}

.ops-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:28px;
}

.ops-step{
  border:1px solid rgba(255,255,255,.09);
  border-radius:3px;
  background:#0d0d0d;
  padding:22px;
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.ops-num{
  font-family:"DM Mono",monospace;
  color:#00f5c4;
  letter-spacing:.18em;
  font-size:10px;
  margin-bottom:auto;
}

.ops-step strong{
  font-family:"Barlow Condensed",sans-serif;
  font-size:32px;
  line-height:.95;
  text-transform:uppercase;
  margin-bottom:10px;
}

.example-box{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:30px;
  padding-top:24px;
}

.example-box strong{
  display:block;
  font-family:"DM Mono",monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#f5c842;
  margin-bottom:10px;
}

.example-box p{
  max-width:900px;
  color:#d7d7d7;
  font-size:18px;
  line-height:1.7;
}

.hero{
  min-height:calc(100svh - 64px);
  max-width:none;
  padding:118px 48px 92px;
  overflow:hidden;
  isolation:isolate;
}

.hero::before{
  content:"MORKSYS";
  position:absolute;
  right:-4vw;
  top:8vh;
  z-index:-2;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(120px,22vw,360px);
  font-weight:900;
  line-height:.78;
  letter-spacing:.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.055);
  opacity:.85;
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  top:38%;
  z-index:-1;
  width:19vw;
  height:2px;
  background:#00f5c4;
  box-shadow:0 0 28px rgba(0,245,196,.72);
  animation:mork-scan 5s ease-in-out infinite;
}

.hero > div:first-child{
  animation:mork-rise .8s ease forwards;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.kicker::before{
  content:"";
  width:42px;
  height:1px;
  background:#00f5c4;
}

h1{
  font-size:clamp(70px,10vw,150px);
  max-width:960px;
  text-wrap:balance;
  text-shadow:0 30px 90px rgba(0,0,0,.5);
}

h1::selection,.lead::selection,p::selection{
  background:#ff2d5b;
  color:#fff;
}

.lead{
  color:#9eaaa4;
  max-width:660px;
}

.panel{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:430px;
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(255,45,91,.12),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  position:relative;
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.07);
  pointer-events:none;
}

.panel::after{
  content:"LIVE MAP";
  position:absolute;
  top:24px;
  right:24px;
  font-family:"DM Mono",monospace;
  font-size:10px;
  letter-spacing:.22em;
  color:#00f5c4;
  animation:mork-pulse 2s ease-in-out infinite;
}

.tags span{
  background:#050505;
}

.panel-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin-top:22px;
  padding:12px 18px;
  border-radius:3px;
  background:#ff2d5b;
  color:#fff;
  font-family:"Barlow Condensed",sans-serif;
  font-size:16px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .18s ease,background .18s ease;
}

.panel-cta:hover{
  transform:translateY(-2px);
  background:#e0254f;
}

.section{
  position:relative;
  border-top-color:rgba(255,255,255,.075);
}

.section::before{
  content:"";
  position:absolute;
  left:42px;
  top:-1px;
  width:54px;
  height:2px;
  background:#ff2d5b;
}

.section:nth-of-type(even)::before{
  background:#00f5c4;
}

.topic-menu{
  max-width:none;
  background:#050505;
  overflow:hidden;
}

.topic-menu::after{
  content:"INDEX";
  position:absolute;
  right:36px;
  bottom:-18px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:140px;
  font-weight:900;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.05);
  pointer-events:none;
}

.topic-inner{
  max-width:1120px;
  margin:auto;
  position:relative;
  z-index:1;
}

.topic-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:#1b1b1b;
  margin-top:30px;
}

.topic-grid a{
  min-height:88px;
  background:#0b0b0b;
  border-top:2px solid transparent;
  padding:18px;
  display:flex;
  align-items:flex-end;
  font-family:"DM Mono",monospace;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d8d8d8;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}

.topic-grid a:nth-child(3n+1){border-color:rgba(255,45,91,.62)}
.topic-grid a:nth-child(3n+2){border-color:rgba(0,245,196,.55)}
.topic-grid a:nth-child(3n+3){border-color:rgba(245,200,66,.55)}
.topic-grid a:hover,.topic-grid a.current{
  background:#151515;
  color:#fff;
  border-color:#ff2d5b;
}

.ecosystem-matrix{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  margin-top:30px;
}

.ecosystem-list{
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(255,255,255,.08);
}

.ecosystem-item{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.ecosystem-code{
  font-family:"DM Mono",monospace;
  font-size:10px;
  letter-spacing:.2em;
  color:#00f5c4;
  text-transform:uppercase;
}

.ecosystem-item strong{
  display:block;
  font-family:"Barlow Condensed",sans-serif;
  font-size:28px;
  line-height:1;
  text-transform:uppercase;
  margin-bottom:8px;
}

.ecosystem-aside{
  min-height:320px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(rgba(255,45,91,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,245,196,.05) 1px,transparent 1px),
    #080808;
  background-size:46px 46px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
}

.ecosystem-aside::before{
  content:"";
  position:absolute;
  left:-40%;
  top:24%;
  width:42%;
  height:2px;
  background:#ff2d5b;
  box-shadow:0 0 22px rgba(255,45,91,.65);
  animation:mork-scan 5.8s ease-in-out infinite;
}

.ecosystem-aside strong{
  font-family:"Barlow Condensed",sans-serif;
  font-size:42px;
  line-height:.92;
  text-transform:uppercase;
  position:relative;
  z-index:1;
}

.ecosystem-aside p{
  margin-top:12px;
  position:relative;
  z-index:1;
}

.box{
  background:transparent;
  border-left:2px solid rgba(255,45,91,.72);
  border-top:0;
  border-right:0;
  border-bottom:0;
  border-radius:0;
}

.flow{
  min-height:340px;
  background:
    linear-gradient(rgba(255,45,91,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,245,196,.05) 1px,transparent 1px),
    #050505;
  background-size:58px 58px;
}

.flow::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,rgba(255,45,91,.12));
  pointer-events:none;
}

.node{
  min-height:86px;
  display:flex;
  align-items:flex-end;
  background:rgba(8,8,8,.72);
}

.related a{
  position:relative;
  min-height:86px;
  display:flex;
  align-items:flex-end;
  background:#0d0d0d;
  overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.related a::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,45,91,.12),transparent);
  transform:translateX(-120%);
  transition:transform .45s ease;
}

.related a:hover{
  transform:translateY(-3px);
  background:#141414;
}

.related a:hover::before{
  transform:translateX(120%);
}

details{
  transition:border-color .2s ease;
}

details[open]{
  border-top-color:rgba(0,245,196,.45);
}

.cta{
  position:relative;
  overflow:hidden;
  border-radius:4px;
}

.cta::before{
  content:"MORK";
  position:absolute;
  right:-16px;
  top:50%;
  transform:translateY(-50%);
  font-family:"Barlow Condensed",sans-serif;
  font-size:130px;
  font-weight:900;
  color:rgba(0,0,0,.11);
  pointer-events:none;
}

.cta strong,.cta a{
  position:relative;
  z-index:1;
}

footer{
  background:#101010;
}

@media(max-width:860px){
  .hero{
    min-height:auto;
    padding:86px 20px 62px;
  }

  .hero::before{
    top:72px;
    right:-20px;
    font-size:34vw;
  }

  .panel{
    min-height:280px;
  }

  .topic-grid{
    grid-template-columns:1fr;
  }

  .signal-list,.ops-grid{
    grid-template-columns:1fr;
  }

  .ecosystem-matrix{
    grid-template-columns:1fr;
  }

  .ecosystem-item{
    grid-template-columns:1fr;
    gap:8px;
  }

  h1{
    font-size:clamp(54px,16vw,86px);
  }

  .section::before{
    left:20px;
  }
}