/* SpaceLinx landing page: a single screen, styled as the SpaceLinx web app is. Its two typefaces
   (Poppins for text, Square721 BdEx BT Bold for titles), its dark palette (page #000, panel
   #191919, card #2c2c2c, text #fff / #a1a1a1, accent #00ccff), its 4px buttons in uppercase
   14px/500, and the sign-in page's backdrop under a dark veil. One hero holds the headline, the
   button and the four module boxes (the sidebar's PLM, Manufacturing, Procurement, Inventory,
   with the same icons). The boxes sit in one row on a desktop, two by two on a tablet and
   stacked on a phone; nothing else is on the page. */

@font-face {
  font-family: "Poppins Wireframe";
  src: url("assets/fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins Wireframe";
  src: url("assets/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Square721 BdEx BT Bold";
  src: url("assets/fonts/square721bdexbtcyr_bold.woff2") format("woff2"),
       url("assets/fonts/square721bdexbtcyr_bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --page: #000000;
  --panel: #191919;
  --card: #2c2c2c;
  --header: #2d2d2d;
  --text: #ffffff;
  --muted: #a1a1a1;
  --accent: #00ccff;
  --secondary: #009cbb;
  --accent-hover: rgba(0, 204, 255, 0.08);
  --chip-bg: rgba(0, 151, 190, 0.25);
  --border: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(0, 204, 255, 0.25);
  --font-body: "Poppins Wireframe", "Poppins", sans-serif;
  --font-header: "Square721 BdEx BT Bold", "Poppins Wireframe", sans-serif;
  --nav-h: 72px;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2 { margin: 0; }
h1 { font-family: var(--font-header); font-weight: 400; line-height: 1.15; letter-spacing: 0.01em; font-size: clamp(26px, 3.9vw, 50px); }

/* ---- header (the app's header bar) --------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 calc(var(--gutter) + 8px);
  background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.brand__logo { height: 30px; display: block; }

/* ---- buttons (WfButton: 4px, uppercase, 14px/500) ------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 64px;
  padding: 7px 15px; border-radius: 4px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.75;
  text-transform: uppercase; white-space: nowrap;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.97); }
/* The Sign in button is a <button>, not a link: script.js starts the Microsoft login from it. */
.btn--signin { cursor: pointer; }
.btn--signin[disabled] { opacity: 0.75; cursor: progress; transform: none; }

/* ---- the one screen ------------------------------------------------------ */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.8) 100%),
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("assets/background.png") center / cover no-repeat;
  background-color: #050b16;
}
.hero__inner {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(28px, 4.5vh, 56px); width: 100%; max-width: 1240px; margin: 0 auto; padding-bottom: 32px;
}
.hero__content { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.hero__content h1 { margin: 0; }

/* ---- the four module boxes ---------------------------------------------- */
.modules {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.module {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 22px 20px 20px; border-radius: 6px;
  background: rgba(25, 25, 25, 0.82); border: 1px solid var(--border);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.module::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px;
  background: var(--accent); opacity: 0; transition: opacity 0.2s;
}
.module:hover { border-color: var(--accent); background: rgba(44, 44, 44, 0.9); transform: translateY(-3px); }
.module:hover::before { opacity: 1; }
.module__icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 6px; background: var(--chip-bg); color: var(--accent);
}
.module__icon svg { width: 26px; height: 26px; }
.module h2 { font-family: var(--font-header); font-weight: 400; font-size: 18px; letter-spacing: 0.02em; }
.module:hover h2 { color: var(--accent); }
.module > p { color: var(--muted); font-size: 13px; flex: 1 1 auto; }
.module__items { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.module__items li {
  padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border);
  font-size: 11px; color: var(--text); opacity: 0.85; white-space: nowrap;
}

/* ---- footer, pinned to the bottom of the same screen --------------------- */
.footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px;
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 16px 0 18px;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--muted);
}
.footer__contact:hover { color: var(--accent); }
.footer__powered { height: 22px; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hero { background-position: 68% center; padding-top: calc(var(--nav-h) + 8px); }
  .hero__inner { justify-content: flex-start; gap: 28px; padding-top: 12px; }
  .footer { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .modules { grid-template-columns: 1fr; }
  .module { padding: 18px 16px 16px; }
}
@media (max-width: 480px) {
  .brand__logo { height: 26px; }
  h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .module, .btn { transition: none; }
}