/* ============================================================
   SoftwareDevCo — Responsive Styles
   ============================================================ */


/* ============================================================
   TABLET AND MOBILE
   ============================================================ */

@media (max-width: 800px) {

  /* ==========================================================
     NAVIGATION
     ========================================================== */

  .top-nav {
    height: 72px;

    padding: 0 20px;

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


  /*
    The desktop navigation is replaced by the mobile menu.
  */

  .nav-left,
  .nav-right {
    display: none;
  }


  .center-logo {
    grid-column: 2;
    grid-row: 1;
  }


  .center-logo img {
    width: 46px;
  }


  .mobile-menu-toggle {
    position: relative;

    z-index: 42;

    grid-column: 3;
    grid-row: 1;

    display: flex;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    justify-self: end;

    gap: 6px;

    width: 44px;
    height: 44px;

    padding: 0;

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

    border-radius: 50%;

    background:
      rgba(255, 255, 255, 0.025);

    color: #ffffff;

    cursor: pointer;

    pointer-events: none;
  }


  body.is-ready .mobile-menu-toggle {
    pointer-events: auto;
  }


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

    width: 17px;
    height: 1px;

    background:
      currentColor;

    transition:
      transform
      0.35s
      cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity
      0.25s
      ease;
  }


  .mobile-menu-toggle.is-active span:first-child {
    transform:
      translateY(3.5px)
      rotate(45deg);
  }


  .mobile-menu-toggle.is-active span:last-child {
    transform:
      translateY(-3.5px)
      rotate(-45deg);
  }


  .mobile-menu {
    position: fixed;

    inset: 0;

    z-index: 35;

    display: flex;

    flex-direction: column;
    justify-content: space-between;

    padding:
      calc(112px + env(safe-area-inset-top))
      24px
      calc(30px + env(safe-area-inset-bottom));

    background:
      radial-gradient(
        600px
        400px
        at
        80%
        0%,
        rgba(255, 255, 255, 0.055),
        transparent
        68%
      ),
      #050505;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
      translateY(-16px);

    transition:
      opacity
      0.35s
      ease,
      visibility
      0.35s,
      transform
      0.45s
      cubic-bezier(0.16, 1, 0.3, 1);
  }


  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
      translateY(0);
  }


  body.mobile-menu-open {
    overflow: hidden;
  }


  .mobile-menu-nav {
    display: flex;

    flex-direction: column;
  }


  .mobile-menu-nav a {
    display: grid;

    grid-template-columns:
      44px
      1fr;

    align-items: baseline;

    padding:
      22px
      0;

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

    color: #ffffff;

    font-size:
      clamp(
        30px,
        9vw,
        44px
      );

    font-weight: 500;

    letter-spacing: -0.035em;
    line-height: 1;

    text-decoration: none;
    text-transform: none;
  }


  .mobile-menu-nav a span {
    color:
      rgba(255, 255, 255, 0.34);

    font-family:
      "JetBrains Mono",
      "Courier New",
      monospace;

    font-size: 9px;
    letter-spacing: 1.4px;
  }


  .mobile-menu-footer {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    color:
      rgba(255, 255, 255, 0.35);

    font-family:
      "JetBrains Mono",
      "Courier New",
      monospace;

    font-size: 8px;
    letter-spacing: 1.6px;
    line-height: 1.5;

    text-transform: uppercase;
  }


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

  .hero-inner {
    padding:
      118px
      24px
      132px;
  }


  .hero-title {
    font-size:
      clamp(
        44px,
        12.6vw,
        72px
      );

    line-height: 1.02;
  }


  .hero-eyebrow {
    margin-bottom: 20px;

    font-size: 9px;
    letter-spacing: 3px;
  }


  .hero-sub {
    max-width: 500px;

    margin-top: 26px;

    font-size: 15px;
    line-height: 1.6;
  }


  .hero-actions {
    gap: 18px;

    margin-top: 34px;
  }


  .btn-primary {
    padding: 14px 22px;

    font-size: 11px;
  }


  .btn-ghost {
    font-size: 11px;
  }


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

  .hero-footer {
    flex-direction: column;

    gap: 8px;

    padding:
      0
      24px
      calc(22px + env(safe-area-inset-bottom));
  }


  .mono-tag {
    font-size: 8px;
    letter-spacing: 2px;
  }


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

  .grid-lines {
    background-size:
      33vw
      20vh;
  }


  .curve-one {
    top: -220px;
    right: -200px;

    width: 420px;
    height: 420px;
  }


  .curve-two {
    right: -80px;
    bottom: -440px;

    width: 640px;
    height: 640px;
  }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .top-nav {
    padding: 0 18px;
  }


  .mobile-menu {
    padding:
      calc(104px + env(safe-area-inset-top))
      20px
      calc(24px + env(safe-area-inset-bottom));
  }


  .mobile-menu-nav a {
    padding:
      20px
      0;

    font-size:
      clamp(
        29px,
        9.5vw,
        40px
      );
  }


  .hero-inner {
    padding:
      108px
      20px
      122px;
  }


  .hero-title {
    font-size:
      clamp(
        42px,
        12.6vw,
        58px
      );
  }


  .hero-sub {
    font-size: 14px;
  }


  .hero-actions {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }


  .btn-primary {
    justify-content: center;

    width: 100%;
  }


  .btn-ghost {
    margin-left: 2px;
  }


  .hero-footer {
    padding:
      0
      20px
      calc(20px + env(safe-area-inset-bottom));
  }
}


/* ============================================================
   SHORT SCREENS
   ============================================================ */

@media (max-height: 650px) and (min-width: 801px) {

  .hero-inner {
    padding-top: 110px;
    padding-bottom: 90px;
  }


  .hero-title {
    font-size:
      clamp(
        42px,
        7vw,
        82px
      );
  }


  .hero-sub {
    margin-top: 22px;
  }


  .hero-actions {
    margin-top: 28px;
  }
}


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

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

  .mobile-menu,
  .mobile-menu-toggle span {
    transition: none;
  }
}