@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg:#05060a;
  --text:#f6f8ff;
  --muted:#9099ae;
  --line:rgba(145,172,214,.18);
  --cyan:#00efff;
  --violet:#8a5cff;
  --pink:#ff2bd6;
  --green:#48ff9b;
  --max:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 78% 18%,rgba(138,92,255,.13),transparent 27rem),
    radial-gradient(circle at 12% 14%,rgba(0,239,255,.06),transparent 24rem),
    var(--bg);
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(0,239,255,.22);color:white}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

.shell{width:min(calc(100% - 48px),var(--max));margin:auto}

header{
  height:84px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(5,6,10,.86);
  backdrop-filter:blur(16px);
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;object-fit:contain}
.brand strong,.brand small{display:block}
.brand strong{font:700 12px "Space Mono",monospace;letter-spacing:.11em}
.brand small{margin-top:3px;color:#67748a;font:400 7px "Space Mono",monospace;letter-spacing:.08em}
nav{display:flex;gap:25px;color:#9ba6ba;font:400 9px "Space Mono",monospace}
nav a:hover{color:white}

.hero{padding:100px 0 66px;border-bottom:1px solid var(--line)}
.kicker{color:var(--cyan);font:400 8px "Space Mono",monospace;letter-spacing:.12em}
h1{
  margin:18px 0 28px;
  font-size:clamp(60px,9vw,128px);
  line-height:.82;
  letter-spacing:-.065em;
}
h1 span,.section-title span{
  color:transparent;
  -webkit-text-stroke:1px rgba(230,239,255,.78);
}
.lead{max-width:760px;color:#9aa5b9;line-height:1.72;font-size:16px}

.grid{
  padding:64px 0 110px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.card{
  border:1px solid var(--line);
  background:rgba(5,9,16,.5);
  min-height:300px;
  padding:28px;
  position:relative;
  overflow:hidden;
  transition:transform .28s ease,border-color .28s ease,background .28s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,239,255,.28);
  background:rgba(7,12,21,.62);
}
.card::after{
  content:"";
  position:absolute;
  width:180px;
  height:1px;
  right:-30px;
  top:38px;
  background:linear-gradient(90deg,transparent,var(--pink));
  transform:rotate(-18deg);
  opacity:.4;
}
.card small{color:var(--cyan);font:400 7px "Space Mono",monospace;letter-spacing:.09em}
.card h2{margin:16px 0 12px;font-size:clamp(28px,3.2vw,46px);letter-spacing:-.035em}
.card p{color:#8490a5;line-height:1.65;font-size:12px;max-width:580px}
.meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:7px}
.meta span{
  padding:7px 9px;
  border:1px solid rgba(126,158,203,.16);
  color:#78869c;
  font:400 6px "Space Mono",monospace;
}
.action{
  margin-top:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#7d899d;
  font:700 7px "Space Mono",monospace;
}
.action b{color:var(--pink);font-size:14px}

.featured{grid-column:span 8;min-height:470px}
.side{grid-column:span 4}
.half{grid-column:span 6}
.full{grid-column:1/-1}

.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  color:#738096;
  font:400 7px "Space Mono",monospace;
}
.status i{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(72,255,155,.6);
}

.section-title{
  margin:0 0 24px;
  font-size:clamp(40px,5vw,68px);
  line-height:.9;
  letter-spacing:-.05em;
}

footer{
  border-top:1px solid var(--line);
  min-height:76px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#606c81;
  font:400 7px "Space Mono",monospace;
  letter-spacing:.08em;
}

@media(max-width:820px){
  .shell{width:min(calc(100% - 28px),var(--max))}
  header{height:70px}
  .brand small{display:none}
  nav{gap:14px;font-size:8px}
  h1{font-size:clamp(48px,16vw,78px)}
  .grid{grid-template-columns:1fr}
  .featured,.side,.half,.full{grid-column:auto}
  .card{min-height:260px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}


/* MAIN SITE PART 3 */
@media(max-width:980px){
  header{align-items:flex-start;padding:14px 0;height:auto;min-height:76px;gap:18px}
  nav{flex-wrap:wrap;justify-content:flex-end;max-width:72%}
}
@media(max-width:620px){
  header{display:grid;grid-template-columns:1fr}
  nav{max-width:none;justify-content:flex-start;gap:12px 16px}
}