/* Responsive additions on top of Moxie New Landing.
   The design carries its own responsive rules (the @media block in design.css,
   hooked onto data-r attributes). This file only adds what the design does not
   cover: a menu for the nav links the design hides below 900px, and the two
   sections kept from the previous build, spaced to the design's rhythm. */

/* ---------- Nav: the design hides the links below 900px; they fold into a menu ---------- */

.nav-menu, .nav-panel { display: none; }

@media (max-width: 900px) {
  [data-nav] { gap: 10px !important; }
  [data-nav] > a:first-child { margin-right: auto; }
  .nav-menu {
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    width: 44px; height: 44px; border-radius: 999px; flex: none; cursor: pointer;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .nav-menu span { display: block; width: 16px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s cubic-bezier(.2, .85, .25, 1), opacity .2s; }
  .nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-panel {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; left: 16px; right: 16px; top: calc(100% + 10px);
    padding: 8px; border-radius: 26px; pointer-events: auto;
    background: rgba(14, 15, 34, .86); border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(-8px) scale(.98); visibility: hidden;
    transition: opacity .25s, transform .35s cubic-bezier(.2, .85, .25, 1), visibility 0s .35s;
  }
  .nav-panel.open { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .35s cubic-bezier(.2, .85, .25, 1); }
  .nav-panel a { padding: 14px 16px; border-radius: 18px; font: 600 16px Rubik, system-ui, sans-serif; color: #e6e6ee; }
  .nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
}

/* ---------- Kept sections: same padding step as the design's 280px sections ---------- */

@media (max-width: 640px) {
  .keep.section { padding-top: 130px !important; padding-bottom: 130px !important; }
}