/* ===============================
   ARIWA — Cyber-Linear Corporate
   Font: Inter (display/body) + JetBrains Mono (utility/data)
=================================== */

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

:root {
  --bg: #05080a;
  --panel: rgba(255, 255, 255, 0.01);
  --panel-border: rgba(255, 255, 255, 0.08);

  --teal: #46f3e4;
  --pink: #ff3bf3;
  --glow: 0 0 24px rgba(0, 245, 200, 0.35), 0 0 48px rgba(255, 62, 196, 0.15);

  --ink: #eef7f5;
  --ink-muted: #7c9490;

  --font-display: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #05080a;
  background-image:
    radial-gradient(
      circle at 12% -5%,
      rgba(70, 243, 228, 0.22),
      transparent 40%
    ),
    radial-gradient(
      circle at 88% 8%,
      rgba(255, 59, 243, 0.18),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(70, 243, 228, 0.14),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 0% 100%,
      rgba(255, 59, 243, 0.12),
      transparent 45%
    );
  background-attachment: fixed;
  font-family: var(--font-body);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===============================
   STICKY FOOTER LAYOUT
   Every page wraps its content in <main class="main-content">.
   main-content grows to fill leftover space so the footer always
   sits at the bottom of the viewport on short pages (e.g. Home),
   and simply follows the content on tall pages (e.g. Products).
=================================== */
.main-content {
  flex: 1 0 auto;
}

.glass {
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  position: relative;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* ===============================
   Signature: HUD corner brackets
   Appear on hover for glass cards
=================================== */
.glass::before,
.glass::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    border-color 0.25s ease;
  pointer-events: none;
}

.glass::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
  border-color: var(--teal);
}

.glass::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
  border-color: var(--pink);
}

.glass:hover::before,
.glass:hover::after {
  opacity: 1;
}

.glass:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--glow);
}

/* ===============================
   NAV
=================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 22px 40px;
  z-index: 100;
  background: rgba(5, 8, 10, 0.04);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--panel-border);
  border-radius: 0;
}

.logo {
  display: flex;
  align-items: center;
  line-height: 0; /* trims the extra inline-image gap under the img */
}

.logo img {
  height: 60px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--pink));
  transition: width 0.25s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Current-page indicator (add class="active" to the matching nav link) */
.nav-links a.active {
  color: var(--ink);
}

.nav-links a.active::after {
  width: 100%;
}

/* ===============================
   HERO (home page)
=================================== */
.hero {
  padding-top: 180px;
  text-align: center;
  padding-bottom: 60px;
  padding-left: 20px;
  padding-right: 20px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 90px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  background: linear-gradient(45deg, var(--teal), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 14px;
}

.btn {
  margin-top: 28px;
  padding: 12px 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(45deg, var(--teal), var(--pink));
  color: #05080a;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition:
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

.btn:hover {
  box-shadow: var(--glow);
  transform: translateY(-1px);
}
.btn-hidden {
  display: none;
}

/* ===============================
   PAGE HERO (secondary pages: Products, Solutions)
=================================== */
.page-hero {
  padding: 180px 40px 50px;
  text-align: center;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  background: linear-gradient(45deg, var(--teal), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-hero p {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: 560px;
  margin: 16px auto 0;
  line-height: 1.6;
}

/* ===============================
   SECTION HEADINGS (shared)
=================================== */
.brands h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  margin-bottom: 30px;
  position: relative;
  display: block;
}

.brands h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, var(--teal), var(--pink));
}

/* ===============================
   SLIDER
=================================== */
.slider-container {
  overflow: hidden;
  padding: 20px 0;
}
.slider-track {
  display: flex;
  gap: 20px;
  width: max-content;
}

.brand-card {
  width: 200px;
  min-width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 26px;
  cursor: pointer;
}

.brand-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Normalize every logo to a white silhouette so mixed brand colors
     (white, black, or colored) all read consistently against the dark
     card. True colors reveal on hover for a nice pop of brand identity. */
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.brand-card:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

/* ===============================
   SOLUTIONS GRID (solutions.html)
=================================== */
.solution-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 40px 80px;
}

.solution-card {
  padding: 30px;
}

.solution-card .icon {
  font-size: 32px;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 12px rgba(70, 243, 228, 0.35));
}

.solution-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 10px;
}

.solution-card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ===============================
   PRODUCTS (grid + filter)
=================================== */
.filter {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 20px 30px;
}

.filter button {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter button:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.2);
}

.filter button.active {
  color: #05080a;
  background: linear-gradient(45deg, var(--teal), var(--pink));
  border-color: transparent;
  box-shadow: var(--glow);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: center; /* centers rows in the space when fewer items are shown after filtering */
  gap: 20px;
  padding: 40px;
}

.product-card {
  padding: 28px 20px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.product-card.show {
  opacity: 1;
  transform: translateY(0);
}

.product-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.product-logo {
  max-width: 75%;
  max-height: 44px;
  object-fit: contain;
  margin: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.product-card:hover .product-logo {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

/* ===============================
   CONTACT PAGE (contact.html)
=================================== */
.contact-page {
  display: flex;
  justify-content: center;
  padding: 0 40px 60px;
}

.contact-info {
  width: 100%;
  max-width: 640px;
  padding: 40px;
}

.contact-info h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}

.contact-info > p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 26px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--panel-border);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-item i {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--teal);
  font-size: 14px;
}

.contact-item a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-item a:hover {
  color: var(--teal);
}

.contact-item strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

/* ===============================
   MAP EMBED
=================================== */
.map-section {
  display: flex;
  justify-content: center;
  padding: 0 40px 80px;
}

.map-box {
  width: 100%;
  max-width: 900px;
  overflow: hidden; /* clips the iframe to the glass card's rounded corners */
}

.map-box iframe {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.back-btn:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-3px);
}

.back-btn .arrow {
  color: var(--teal);
}

/* ===============================
   BRAND DETAIL PAGE
=================================== */

.brand-detail {
  padding: 170px 40px 40px;
}

.brand-header {
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.brand-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brand-logo {
  display: block;

  width: 220px;
  height: 80px;

  object-fit: contain;
  object-position: center;

  filter: brightness(0) invert(1);
  opacity: 0.9;

  margin: 0;

  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.brand-logo:hover {
  filter: none;
  transform: scale(1.05);
}

/* Brand Description */
.brand-desc {
  max-width: 700px;

  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;

  color: var(--ink-muted);
}

/* Visit Button */
.brand-action .btn {
  margin-top: 0;
}

/* ===============================
   FEATURED PRODUCTS
=================================== */

.product-title {
  padding: 50px 0 20px;
}

.product-title h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;

  text-transform: uppercase;

  text-align: center;

  background: linear-gradient(45deg, var(--teal), var(--pink));

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

  color: transparent;
}

/* Product Gallery */

.product-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
}

.product-item {
  position: relative;
  padding: 25px;
  border-radius: 20px;

  border: 1px solid var(--panel-border);

  background: var(--panel);

  text-align: center;

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

.product-item:hover {
  transform: scale(1.08);
  z-index: 10;

  border-color: #00e5ff;

  box-shadow:
    0 0 25px rgba(0, 229, 255, 0.35),
    0 0 50px rgba(255, 0, 255, 0.15);
}

.product-item img {
  width: 100%;
  height: 180px;

  object-fit: contain;

  margin-bottom: 18px;

  transition: transform 0.35s ease;
}

.product-item:hover img {
  transform: scale(1.08);
}

.product-item h3 {
  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  color: var(--ink);
}

/* Footer detail buttons */

.detail-footer {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 40px 60px;
}
/* ===============================
   VIZRT PRODUCT GRID
================================ */

.vizrt-gallery {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
}
/* ===============================
   KILOVIEW PRODUCT GRID
================================ */

.kiloview-gallery {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
}
/* ===============================
   NDI VIDEO SHOWCASE
================================ */

.ndi-gallery {
  display: flex;
  justify-content: center;
}

.ndi-video-box {
  width: 900px;
  max-width: 90%;
  padding: 25px;
}

.ndi-video-box iframe {
  width: 100%;
  height: 500px;
  border: none;
  border-radius: 16px;
}
/* ===============================
   MAGEWELL
================================ */

.magewell-section {
  padding: 35px;
  width: min(1200px, calc(100vw - 190px)); /* เปลี่ยนจาก width: 100%; */
  max-width: 1200px;
  margin: 0 auto 40px;
}
/* Magewell full layout */
.product-gallery:has(.magewell-section) {
  display: block;
}
.magewell-section h2 {
  font-size: 28px;

  margin-bottom: 25px;
}

.magewell-wrapper {
  position: relative;

  display: flex;

  align-items: center;
}
.magewell-slider {
  display: flex;

  gap: 25px;

  overflow: hidden;

  width: 100%;

  scroll-behavior: smooth;
}
.magewell-slider .product-item {
  min-width: 260px;
  height: 270px;
}
.magewell-slider img {
  height: 160px;

  object-fit: contain;
}

.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 58px;
  height: 58px;

  border: none;
  border-radius: 50%;

  cursor: pointer;

  font-size: 24px;
  font-weight: bold;

  color: #111;

  background: linear-gradient(45deg, var(--teal), var(--pink));

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

  z-index: 10;

  transition: 0.25s;
}

.slide-btn:hover {
  transform: translateY(-50%) scale(1.08);
}

.slide-btn.left {
  left: -120px;
}

.slide-btn.right {
  right: -120px;
}

/* Director Mini row */

.director-section {
  width: 100%;
  max-width: 1200px;

  margin: 40px auto 0;

  display: flex;
  justify-content: center;

  padding: 35px;
}

.director-box {
  width: 450px; /* เดิม 350px */
  max-width: 100%;
}

.director-box img {
  width: 100%;
  height: 280px; /* เพิ่มความสูงของรูป */
  object-fit: contain;
}

.director-box h3 {
  margin-top: 20px;
  text-align: center;
}
/* ===============================
   SNS
================================ */

.sns-gallery {
  display: flex;
  flex-direction: column;
}

/* ---------- Storage Slider ---------- */

.sns-section {
  width: min(1200px, calc(100vw - 190px)); /* เปลี่ยนจาก width: 100%; */
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 35px;
  overflow: visible;
}

.sns-section h2 {
  font-size: 28px;
  margin-bottom: 25px;
}

.sns-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.sns-slider {
  display: flex;
  gap: 25px;
  overflow: hidden;
  width: 100%;
  scroll-behavior: smooth;
}

.sns-slider .product-item {
  min-width: 260px;
  height: 270px;
}

.sns-slider img {
  width: 100%;
  height: 170px;
  object-fit: contain;
}

/* ---------- Arrow ---------- */

.sns-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 60px;
  height: 60px;

  border: none;
  border-radius: 50%;

  background: linear-gradient(45deg, #46f3e4, #ff3bf3);

  font-size: 26px;
  font-weight: bold;
  color: #000;

  cursor: pointer;
  transition: 0.25s;
}

.sns-btn:hover {
  transform: translateY(-50%) scale(1.08);
}

.sns-btn.left {
  left: -120px;
}

.sns-btn.right {
  right: -120px;
}

/* ---------- Director ---------- */

.sns-director {
  width: 100%;
  max-width: 1200px;

  margin: 40px auto 0;

  padding: 35px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.sns-director h2 {
  margin-bottom: 25px;
}

.sns-main-product {
  width: 450px;
  max-width: 100%;
}

.sns-main-product img {
  width: 100%;
  height: 300px;
  object-fit: contain;
}
/* ===============================
   STEP OUT AI FOOTBALL ANALYSIS
================================ */

.stepout-gallery {
  width: 100%;
  display: flex;
  justify-content: center;
}

.stepout-product {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px;
}

.stepout-product h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: 30px;

  background: linear-gradient(45deg, var(--teal), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stepout-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  justify-content: center;
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

.stepout-images .product-item {
  padding: 20px;
}

.stepout-images img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  margin-bottom: 15px;
}
/* ===============================
   SPONIXTECH VIDEO PRODUCTS
================================ */

.sponix-gallery {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 40px;

  width: 100%;

  max-width: 900px;

  margin: 40px auto;
}

.sponix-video-card {
  width: 100%;

  padding: 30px;

  text-align: center;
}

.sponix-video-card video {
  width: 100%;

  max-height: 500px;

  border-radius: 16px;

  object-fit: contain;
}

.sponix-video-card h3 {
  margin-top: 20px;

  font-family: var(--font-display);

  font-size: 20px;

  color: var(--ink);
}
/* ===============================
   JOYMECHANIX
================================ */

.joy-gallery {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

  justify-items: center;
  align-items: start;
}

.joy-card {
  width: 100%;
  max-width: 320px;

  padding: 30px;
  text-align: center;
}

.joy-card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  margin-bottom: 15px;
}

.joy-card h3 {
  font-size: 17px;
  color: var(--ink);
}

.joy-video {
  grid-column: 1 / -1;

  width: 100%;
  max-width: 1200px;

  padding: 35px;
  text-align: center;
}

.joy-video video {
  width: 100%;
  max-height: 550px;
  object-fit: contain;
  border-radius: 16px;
}

.joy-video h3 {
  margin-top: 20px;
  font-size: 18px;
}
/* ===============================
   MOBILE DETAIL
=================================== */

@media (max-width: 640px) {
  .brand-detail {
    padding: 190px 20px 30px;
  }

  .brand-header {
    flex-direction: column;
    align-items: flex-start;

    padding: 26px;
    gap: 20px;
  }

  .brand-logo {
    width: 180px;
  }

  .brand-action {
    width: 100%;
  }

  .brand-action .btn {
    width: 100%;
  }

  .detail-footer {
    padding: 0 20px 40px;

    flex-direction: column-reverse;
    align-items: stretch;

    gap: 14px;
  }

  .detail-footer .back-btn,
  .detail-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .product-gallery {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .vizrt-gallery {
    grid-template-columns: 1fr;
  }
  .kiloview-gallery {
    grid-template-columns: 1fr;
  }
  .ndi-video-box iframe {
    height: 250px;
  }
  .stepout-images {
    grid-template-columns: 1fr;
  }

  .joy-gallery {
    grid-template-columns: 1fr;
  }

  /* Special-layout sections: tighten padding so more slider width is usable */
  .magewell-section,
  .director-section,
  .sns-section,
  .sns-director,
  .stepout-product,
  .sponix-video-card {
    padding: 20px;
  }

  /* The slide arrows were positioned at -120px, which pushes them off the
     viewport entirely on mobile and makes the sliders un-navigable by touch.
     The sliders below are already swipeable by finger on mobile, so the
     arrow buttons are hidden entirely instead of repositioned. */
  .slide-btn,
  .sns-btn {
    display: none;
  }

  .magewell-slider,
  .sns-slider {
    scroll-padding: 0 50px;
  }

  .director-box,
  .sns-main-product {
    width: 100%;
  }

  .joy-card {
    padding: 20px;
  }

  .joy-video {
    padding: 20px;
  }

  /* Let the Magewell / SNS sliders be swiped with a finger on mobile,
     instead of only being usable via the arrow buttons. */
  .magewell-slider,
  .sns-slider {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }

  .magewell-slider::-webkit-scrollbar,
  .sns-slider::-webkit-scrollbar {
    display: none;
  }

  .magewell-slider .product-item,
  .sns-slider .product-item {
    scroll-snap-align: center;
  }
}
/* ===============================
   FOOTER
=================================== */
.footer {
  flex-shrink: 0;
  text-align: center;
  padding: 30px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-top: 1px solid var(--panel-border);
}

/* ===============================
   FOOTER — split variant (copyright left, social icons right)
   Add class="footer footer-split" and wrap content in
   .footer-left / .footer-right, as used on contact.html
=================================== */
.footer.footer-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  text-align: left;
  padding: 24px 40px;
}

.footer-left {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.footer-right {
  display: flex;
  gap: 12px;
}

.footer-right a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--ink-muted);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.footer-right a:hover {
  color: var(--teal);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* ===============================
   RESPONSIVE
=================================== */
@media (max-width: 900px) {
  .solution-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Hamburger toggle checkbox: always hidden visually (all breakpoints).
   Kept in the DOM so the label + :checked sibling selectors still work. */
.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .solution-container {
    grid-template-columns: 1fr;
    padding: 0 20px 60px;
  }

  .navbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
  }

  .logo img {
    height: 42px;
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 26px;
    height: 20px;
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition:
      transform 0.25s ease,
      opacity 0.2s ease;
  }

  .nav-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 22px 0 28px;

    background: rgba(5, 8, 10, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--panel-border);

    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
      max-height 0.3s ease,
      opacity 0.25s ease;
  }

  .nav-toggle:checked ~ .nav-links {
    max-height: 320px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    font-size: 13px;
  }

  .hero {
    padding-top: 160px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 12px;
  }

  .slider-track {
    gap: 14px;
  }

  .brand-card {
    width: 130px;
    min-width: 130px;
    height: 70px;
    padding: 14px 16px;
  }

  .page-hero {
    padding: 190px 20px 40px;
  }

  .page-hero h1 {
    font-size: 34px;
  }

  .solution-card {
    padding: 24px;
  }

  .products-grid {
    padding: 20px;
    gap: 14px;
  }

  .contact-page,
  .map-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contact-info {
    padding: 26px 22px;
  }

  .contact-item {
    gap: 12px;
    padding: 14px 0;
  }

  .map-box iframe {
    height: 220px;
  }

  .footer.footer-split {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  .footer-right {
    justify-content: center;
  }

  .footer:not(.footer-split) {
    padding: 20px;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: 28px;
  }

  .page-hero h1 {
    font-size: 28px;
  }
}