:root {
  --bg: #0a0e19;
  --bg-deep: #070a12;
  --bg-soft: #101726;

  --card: rgba(21, 28, 46, 0.76);
  --card-hover: rgba(26, 34, 56, 0.9);

  --border: rgba(255, 255, 255, 0.10);
  --border-hover: rgba(130, 105, 255, 0.48);

  --text: #f7f8ff;
  --muted: #a2aabc;
  --muted-dark: #687287;

  --purple: #9367ff;
  --violet: #b075ff;
  --blue: #4d8dff;
  --cyan: #37d8ff;
  --green: #4be5a5;

  --max-width: 1220px;

  --mouse-x: 50%;
  --mouse-y: 30%;
}


/* ==================================================
   RESET
================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  background:
    radial-gradient(
      circle at var(--mouse-x) var(--mouse-y),
      rgba(65, 96, 180, 0.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 50% -10%,
      #1b2743 0%,
      #101625 30%,
      #090d17 68%
    );

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  transition: background 0.18s linear;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

::selection {
  background: rgba(139, 92, 246, 0.35);
  color: #fff;
}


/* ==================================================
   BACKGROUND
================================================== */

.background-grid {
  position: fixed;
  inset: 0;

  pointer-events: none;

  opacity: 0.34;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.028) 1px,
      transparent 1px
    );

  background-size: 72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 78%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 78%
    );

  z-index: -4;
}


.noise {
  position: fixed;
  inset: 0;

  pointer-events: none;

  opacity: 0.012;

  z-index: 999;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}


.orb {
  position: fixed;

  border-radius: 50%;

  filter: blur(130px);

  pointer-events: none;

  z-index: -3;
}


.orb-one {
  width: 680px;
  height: 680px;

  background: #7257ff;

  opacity: 0.13;

  top: -240px;
  left: -180px;
}


.orb-two {
  width: 620px;
  height: 620px;

  background: #22cfff;

  opacity: 0.095;

  top: 300px;
  right: -220px;
}


.orb-three {
  width: 560px;
  height: 560px;

  background: #bd55ff;

  opacity: 0.065;

  bottom: 150px;
  left: 30%;
}


/* ==================================================
   HEADER
================================================== */

.site-header {
  position: sticky;
  top: 0;

  z-index: 100;

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  background:
    linear-gradient(
      to bottom,
      rgba(10, 14, 25, 0.92),
      rgba(10, 14, 25, 0.72)
    );

  border-bottom:
    1px solid rgba(255,255,255,0.065);

  box-shadow:
    0 8px 40px rgba(0,0,0,.12);
}


.header-inner {
  position: relative;

  width:
    min(
      calc(100% - 60px),
      var(--max-width)
    );

  margin: 0 auto;

  min-height: 84px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;
}


/* LEFT STATUS */

.header-side {
  display: flex;
  align-items: center;

  gap: 8px;
}


.header-left {
  justify-self: start;
}


.header-status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 0 4px rgba(75,229,165,.06),
    0 0 14px rgba(75,229,165,.72);
}


.header-status-text {
  color: #7e899e;

  font-size: .59rem;
  font-weight: 750;

  letter-spacing: .16em;
}


/* CENTER LOGO */

.header-logo-link {
  position: relative;

  justify-self: center;

  display: flex;
  align-items: center;
  justify-content: center;
}


.header-logo-link::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 56px;

  background:
    linear-gradient(
      90deg,
      #397dff,
      #9f5cff
    );

  opacity: .16;

  filter: blur(30px);

  pointer-events: none;
}


.header-logo {
  position: relative;

  width: 188px;
  height: auto;

  display: block;

  transition:
    transform .25s ease,
    filter .25s ease;

  filter:
    drop-shadow(
      0 0 20px rgba(100,110,255,.22)
    );
}


.header-logo-link:hover .header-logo {
  transform: scale(1.045);

  filter:
    drop-shadow(
      0 0 28px rgba(100,110,255,.4)
    );
}


/* RIGHT NAV */

.desktop-nav {
  justify-self: end;

  display: flex;
  align-items: center;

  gap: 28px;
}


.desktop-nav > a {
  color: #a6adbd;

  font-size: .85rem;

  transition:
    color .2s ease,
    transform .2s ease;
}


.desktop-nav > a:hover {
  color: white;

  transform:
    translateY(-1px);
}


.nav-button {
  padding: 10px 16px;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 10px;

  background:
    rgba(255,255,255,.045);
}


.nav-button:hover {
  border-color:
    rgba(139,92,246,.4);

  background:
    rgba(139,92,246,.09);
}


.mobile-menu-button {
  display: none;

  background: transparent;
  border: 0;

  padding: 8px;
}


.mobile-menu-button span {
  display: block;

  width: 22px;
  height: 2px;

  margin: 5px;

  border-radius: 99px;

  background: white;
}


/* ==================================================
   HERO
================================================== */

.hero {
  width:
    min(
      calc(100% - 40px),
      var(--max-width)
    );

  margin: 0 auto;

  min-height: calc(100vh - 84px);

  display: grid;

  grid-template-columns:
    minmax(0,1.12fr)
    minmax(430px,.88fr);

  align-items: center;

  gap: 70px;

  padding:
    38px 0
    90px;
}


.hero-content {
  position: relative;
  z-index: 2;
}


.status-pill {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding: 8px 13px;

  border:
    1px solid rgba(75,229,165,.25);

  border-radius: 999px;

  color: #75f0ba;

  background:
    rgba(75,229,165,.075);

  box-shadow:
    0 0 30px rgba(75,229,165,.035);

  font-size: .72rem;
  font-weight: 650;
}


.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 0 4px rgba(75,229,165,.09),
    0 0 15px rgba(75,229,165,.58);
}


.hero h1 {
  margin:
    26px 0
    24px;

  font-size:
    clamp(
      4.1rem,
      6.55vw,
      6.75rem
    );

  line-height: .91;

  letter-spacing: -.066em;

  font-weight: 820;

  text-shadow:
    0 8px 35px rgba(0,0,0,.16);
}


.gradient-text {
  background:
    linear-gradient(
      100deg,
      #b985ff 0%,
      #7685ff 43%,
      #35d8ff 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  filter:
    drop-shadow(
      0 8px 26px rgba(84,115,255,.12)
    );
}


.hero-description {
  max-width: 660px;

  margin: 0;

  color: #a8b0c1;

  font-size:
    clamp(
      1rem,
      1.6vw,
      1.16rem
    );

  line-height: 1.8;
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 34px;
}


.button {
  min-height: 50px;

  padding:
    0 22px;

  display: inline-flex;
  align-items: center;

  gap: 12px;

  border-radius: 12px;

  font-size: .9rem;
  font-weight: 680;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}


.button:hover {
  transform:
    translateY(-3px);
}


.button-primary {
  background:
    linear-gradient(
      135deg,
      #8d60ff,
      #5e72f7
    );

  box-shadow:
    0 15px 45px rgba(113,79,245,.27);
}


.button-primary:hover {
  box-shadow:
    0 20px 58px rgba(113,79,245,.42);
}


.button-secondary {
  border:
    1px solid rgba(255,255,255,.11);

  background:
    rgba(255,255,255,.045);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}


.button-secondary:hover {
  border-color:
    rgba(255,255,255,.2);

  background:
    rgba(255,255,255,.07);
}


.hero-meta {
  display: flex;

  gap: 40px;

  margin-top: 52px;
}


.hero-meta > div {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.meta-label {
  color: #657086;

  font-size: .63rem;
  font-weight: 750;

  letter-spacing: .14em;
}


.meta-value {
  display: flex;
  align-items: center;

  gap: 7px;

  color: #c4cad6;

  font-size: .8rem;
}


.tiny-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--purple);

  box-shadow:
    0 0 9px rgba(147,103,255,.45);
}


.online-text {
  color: #70eeb5;
}


/* ==================================================
   HERO SERVER CARD
================================================== */

.hero-visual {
  position: relative;

  display: flex;
  justify-content: center;

  transform-style: preserve-3d;

  transition: transform .12s linear;
}


.glass-card {
  position: relative;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      145deg,
      rgba(26,34,56,.94),
      rgba(13,18,31,.9)
    );

  backdrop-filter:
    blur(24px);

  box-shadow:
    0 40px 120px rgba(0,0,0,.34),
    0 0 80px rgba(58,92,200,.055);
}


.server-card {
  width: 100%;

  max-width: 465px;

  border-radius: 25px;

  overflow: hidden;

  transform:
    perspective(1200px)
    rotateX(var(--card-rotate-x, 0deg))
    rotateY(var(--card-rotate-y, 0deg));

  transition:
    transform .12s ease-out,
    border-color .25s ease,
    box-shadow .25s ease;
}


.server-card:hover {
  border-color:
    rgba(124,111,255,.24);

  box-shadow:
    0 45px 130px rgba(0,0,0,.38),
    0 0 100px rgba(91,103,255,.09);
}


.server-card::before {
  content: "";

  position: absolute;
  inset: -1px;

  border-radius: inherit;

  padding: 1px;

  background:
    linear-gradient(
      135deg,
      rgba(186,120,255,.32),
      transparent 38%,
      rgba(46,217,255,.27)
    );

  -webkit-mask:
    linear-gradient(#fff 0 0)
    content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:
    xor;

  pointer-events: none;
}


.server-card-top {
  height: 58px;

  padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(255,255,255,.075);
}


.window-controls {
  display: flex;
  gap: 7px;
}


.window-controls span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #46516a;
}


.server-label {
  color: #748096;

  font-size: .6rem;
  font-weight: 750;

  letter-spacing: .16em;
}


.server-logo-wrap {
  position: relative;

  min-height: 325px;

  display: grid;
  place-items: center;
}


.logo-glow {
  position: absolute;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #397cff,
      #ae54ff
    );

  filter: blur(84px);

  opacity: .34;

  animation:
    glow-breathe
    4s ease-in-out
    infinite;
}


@keyframes glow-breathe {

  0%,
  100% {
    transform: scale(.95);
    opacity: .25;
  }

  50% {
    transform: scale(1.08);
    opacity: .38;
  }

}


.server-logo {
  position: relative;

  width: 210px;

  filter:
    drop-shadow(
      0 25px 50px rgba(0,0,0,.42)
    )
    drop-shadow(
      0 0 20px rgba(74,121,255,.16)
    );

  animation:
    float-logo
    5s ease-in-out
    infinite;
}


@keyframes float-logo {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-11px)
      rotate(1deg);
  }

}


.server-info {
  padding:
    23px 25px
    27px;

  border-top:
    1px solid rgba(255,255,255,.075);
}


.server-status-row {
  display: flex;
  justify-content: space-between;

  color: #a0aabc;

  font-size: .72rem;
}


.status-live {
  display: flex;
  align-items: center;

  gap: 7px;

  color: #74efb7;
}


.status-live span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 11px rgba(75,229,165,.55);
}


.progress {
  height: 3px;

  margin:
    18px 0
    24px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.075);

  overflow: hidden;
}


.progress-value {
  width: 88%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #985fff,
      #45dfff
    );

  border-radius: inherit;

  box-shadow:
    0 0 18px rgba(82,152,255,.85);

  animation:
    progress-pulse
    3s ease-in-out
    infinite;
}


@keyframes progress-pulse {

  0%,
  100% {
    opacity: .8;
  }

  50% {
    opacity: 1;
  }

}


.server-stats {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 10px;
}


.server-stats div {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.server-stats span {
  color: #707a90;

  font-size: .62rem;

  text-transform: uppercase;

  letter-spacing: .07em;
}


.server-stats strong {
  font-size: .8rem;
}


.floating-card {
  position: absolute;

  padding: 13px 15px;

  display: flex;
  align-items: center;

  gap: 11px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius: 13px;

  background:
    rgba(21,27,45,.94);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 16px 55px rgba(0,0,0,.32),
    0 0 30px rgba(83,105,255,.05);

  z-index: 4;
}


.floating-card span {
  display: block;

  color: #838ea4;

  font-size: .6rem;
}


.floating-card strong {
  display: block;

  margin-top: 2px;

  color: #f7f8ff;

  font-size: .72rem;
}


.floating-icon {
  color: var(--cyan);

  font-size: 1.15rem;

  text-shadow:
    0 0 14px rgba(55,216,255,.6);
}


.floating-one {
  top: 92px;
  right: -58px;

  animation:
    floating-card-one
    5s ease-in-out
    infinite;
}


.floating-two {
  bottom: 75px;
  left: -60px;

  animation:
    floating-card-two
    5.8s ease-in-out
    infinite;
}


@keyframes floating-card-one {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }

}


@keyframes floating-card-two {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }

}


.pulse {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 18px rgba(75,229,165,.75);

  animation:
    pulse-dot
    2s ease-in-out
    infinite;
}


@keyframes pulse-dot {

  0%,
  100% {
    box-shadow:
      0 0 8px rgba(75,229,165,.5);
  }

  50% {
    box-shadow:
      0 0 22px rgba(75,229,165,.95);
  }

}


/* ==================================================
   SECTIONS
================================================== */

.section {
  width:
    min(
      calc(100% - 40px),
      var(--max-width)
    );

  margin: 0 auto;

  padding:
    110px 0;
}


.section-header {
  margin-bottom: 55px;

  display: grid;

  grid-template-columns:
    1fr .75fr;

  align-items: end;

  gap: 70px;
}


.section-kicker {
  color: #b07aff;

  font-size: .66rem;
  font-weight: 750;

  letter-spacing: .14em;
}


.section-header h2,
.about-content h2 {
  margin:
    12px 0 0;

  font-size:
    clamp(
      2.7rem,
      5vw,
      4.2rem
    );

  line-height: 1;

  letter-spacing: -.055em;
}


.section-header p {
  margin: 0;

  color: #a3acbd;

  line-height: 1.75;
}


/* ==================================================
   PROJECT CARDS
================================================== */

.project-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 18px;
}


.project-card {
  position: relative;

  min-height: 330px;

  padding: 29px;

  display: flex;
  flex-direction: column;

  border:
    1px solid rgba(255,255,255,.095);

  border-radius: 19px;

  background:
    linear-gradient(
      145deg,
      rgba(24,31,51,.82),
      rgba(14,19,32,.79)
    );

  overflow: hidden;

  box-shadow:
    0 18px 55px rgba(0,0,0,.08);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.project-card::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -90px;
  left: -90px;

  border-radius: 50%;

  background: var(--purple);

  opacity: 0;

  filter: blur(80px);

  transition:
    opacity .3s ease;
}


.project-card:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(140,110,255,.4);

  box-shadow:
    0 25px 75px rgba(0,0,0,.18),
    0 0 40px rgba(100,85,255,.04);
}


.project-card:hover::before {
  opacity: .16;
}


.project-top {
  position: relative;

  display: flex;
  justify-content: space-between;

  align-items: center;

  z-index: 1;
}


.project-icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  border:
    1px solid rgba(255,255,255,.095);

  background:
    rgba(255,255,255,.045);
}


.project-icon svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: #bd91ff;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.project-status {
  padding: 5px 8px;

  border-radius: 6px;

  background:
    rgba(139,92,246,.12);

  color: #b88cff;

  font-size: .57rem;
  font-weight: 750;

  letter-spacing: .08em;
}


.status-online {
  color: #64ebb0;

  background:
    rgba(65,230,159,.095);
}


.status-work {
  color: #d09cff;

  background:
    rgba(168,104,255,.12);
}


.project-card h3 {
  margin:
    36px 0
    12px;

  font-size: 1.38rem;

  letter-spacing: -.025em;
}


.project-card p {
  margin: 0;

  color: #a5aec0;

  font-size: .9rem;

  line-height: 1.7;
}


.project-footer {
  margin-top: auto;

  padding-top: 30px;

  display: flex;
  justify-content: space-between;

  color: #b087ff;

  font-size: .75rem;
}


.project-arrow {
  font-size: 1rem;
}


.project-card-wide {
  grid-column:
    1 / -1;

  min-height: 230px;
}


.wide-content {
  flex: 1;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;
}


.wide-content p {
  max-width: 550px;
}


.coming-soon {
  line-height: .82;

  text-align: right;
}


.coming-soon span,
.coming-soon strong {
  display: block;

  font-size:
    clamp(
      2.7rem,
      6vw,
      5rem
    );

  font-weight: 820;

  letter-spacing: -.07em;
}


.coming-soon span {
  color: rgba(255,255,255,.16);
}


.coming-soon strong {
  background:
    linear-gradient(
      90deg,
      #ad78ff,
      #42d8ff
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


/* ==================================================
   STACK
================================================== */

.stack-grid {
  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  border-top:
    1px solid rgba(255,255,255,.1);

  border-left:
    1px solid rgba(255,255,255,.1);

  border-radius: 17px;

  overflow: hidden;

  background:
    rgba(255,255,255,.012);
}


.stack-item {
  min-height: 190px;

  padding: 26px;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;

  border-right:
    1px solid rgba(255,255,255,.1);

  border-bottom:
    1px solid rgba(255,255,255,.1);

  background:
    rgba(21,28,46,.28);

  transition:
    background .25s ease,
    transform .25s ease;
}


.stack-item:hover {
  background:
    rgba(139,92,246,.07);

  transform:
    translateY(-3px);
}


.stack-number {
  margin-bottom: auto;

  color: #667188;

  font-size: .65rem;

  font-family:
    monospace;
}


.stack-item strong {
  font-size: 1.16rem;
}


.stack-item p {
  margin:
    5px 0 0;

  color: #929cad;

  font-size: .76rem;
}


/* ==================================================
   ABOUT
================================================== */

.about-section {
  padding-bottom: 140px;
}


.about-card {
  padding: 62px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 80px;

  border:
    1px solid rgba(255,255,255,.105);

  border-radius: 24px;

  background:
    linear-gradient(
      135deg,
      rgba(154,95,255,.08),
      rgba(22,28,46,.82) 50%,
      rgba(46,217,255,.04)
    );

  box-shadow:
    0 28px 90px rgba(0,0,0,.14);
}


.about-content p {
  max-width: 550px;

  color: #a7b0c0;

  line-height: 1.8;
}


.about-tags {
  margin-top: 28px;

  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.about-tags span {
  padding: 7px 10px;

  border:
    1px solid rgba(255,255,255,.1);

  border-radius: 7px;

  color: #a4aec0;

  font-size: .7rem;

  background:
    rgba(255,255,255,.035);
}


/* ==================================================
   TERMINAL
================================================== */

.terminal {
  align-self: center;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.11);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #09101b,
      #070a10
    );

  box-shadow:
    0 30px 80px rgba(0,0,0,.3),
    0 0 70px rgba(70,80,180,.03);
}


.terminal-header {
  min-height: 46px;

  padding: 0 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}


.terminal-dots {
  display: flex;
  gap: 6px;
}


.terminal-dots span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #43506a;
}


.terminal-title {
  color: #647087;

  font-size: .65rem;
}


.terminal-body {
  padding:
    28px 30px;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: .78rem;

  line-height: 1.65;
}


.terminal-body div {
  color: #a8b1c2;
}


.terminal-body p {
  margin:
    3px 0
    17px;

  color: #e0e4ed;
}


.terminal-prompt {
  color: #bd80ff;
}


.terminal-online {
  color: #66ecb2 !important;
}


.terminal-gradient {
  color: #79aaff !important;
}


/* ==================================================
   FOOTER
================================================== */

footer {
  border-top:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(8,11,19,.62);
}


.footer-inner {
  width:
    min(
      calc(100% - 40px),
      var(--max-width)
    );

  min-height: 120px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1fr 1fr 1fr;

  align-items: center;
}


.footer-brand {
  display: flex;
  align-items: center;

  gap: 11px;
}


.footer-brand img {
  width: 40px;
  height: 40px;

  filter:
    drop-shadow(
      0 0 16px rgba(95,103,255,.2)
    );
}


.footer-brand strong,
.footer-brand span {
  display: block;
}


.footer-brand strong {
  font-size: .84rem;
}


.footer-brand span {
  margin-top: 2px;

  color: #718099;

  font-size: .65rem;
}


.footer-center {
  text-align: center;

  color: #728096;

  font-size: .7rem;
}


.footer-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 7px;

  color: #78849a;

  font-size: .7rem;
}


.footer-status > span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 12px rgba(75,229,165,.65);
}


/* ==================================================
   REVEAL
================================================== */

.reveal {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1),
    transform .75s cubic-bezier(.2,.7,.2,1);
}


.reveal.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1050px) {

  .hero {
    grid-template-columns: 1fr;

    min-height: auto;

    padding-top: 70px;

    text-align: center;
  }


  .hero-description {
    margin:
      0 auto;
  }


  .hero-actions,
  .hero-meta {
    justify-content: center;
  }


  .hero-visual {
    margin-top: 35px;
  }


  .section-header {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .about-card {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 900px) {

  .header-inner {
    width:
      min(
        calc(100% - 30px),
        var(--max-width)
      );

    min-height: 76px;

    grid-template-columns:
      1fr auto 1fr;
  }


  .header-status-text {
    display: none;
  }


  .desktop-nav {
    display: none;
  }


  .mobile-menu-button {
    justify-self: end;

    display: block;
  }


  .header-logo {
    width: 148px;
  }

}


@media (max-width: 760px) {

  .hero {
    gap: 48px;

    padding:
      55px 0
      85px;
  }


  .hero h1 {
    font-size:
      clamp(
        3.3rem,
        16vw,
        5rem
      );
  }


  .hero-meta {
    display: grid;

    grid-template-columns:
      repeat(2,auto);

    gap:
      25px 35px;
  }


  .server-card {
    max-width: 400px;
  }


  .floating-card {
    display: none;
  }


  .section {
    padding:
      88px 0;
  }


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


  .project-card-wide {
    grid-column: auto;
  }


  .wide-content {
    align-items: flex-start;

    flex-direction: column;
  }


  .coming-soon {
    text-align: left;
  }


  .stack-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .about-card {
    padding: 32px;
  }


  .footer-inner {
    grid-template-columns: 1fr;

    gap: 22px;

    padding:
      30px 0;

    text-align: center;
  }


  .footer-brand,
  .footer-status {
    justify-content: center;
  }


  .footer-center {
    order: 3;
  }

}


@media (max-width: 480px) {

  .header-logo {
    width: 128px;
  }


  .hero-actions {
    flex-direction: column;
  }


  .button {
    justify-content: center;
  }


  .hero-meta {
    grid-template-columns: 1fr;
  }


  .server-logo {
    width: 165px;
  }


  .server-logo-wrap {
    min-height: 270px;
  }


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


  .section-header h2,
  .about-content h2 {
    font-size: 2.7rem;
  }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
  }

}