/* =====================================================
   TRANSPARENT OLED PRODUCTS – VERTICAL GRID STYLE
   ===================================================== */

:root {
  /* ================= SECTION ================= */
  --oled-products-padding-y: 3rem;

  /* ================= HEADING ================= */
  --oled-products-heading-size: 2.1rem;
  --oled-products-heading-weight: 600;
  --oled-products-heading-margin-bottom: 2rem;

  /* ================= GRID ================= */
  --oled-products-gap: 1.5rem;

  /* ================= PRODUCT HEIGHTS ================= */
  --oled-vertical-height-desktop: 520px;
  --oled-vertical-height-tablet: 460px;
  --oled-vertical-height-mobile: 360px;

  --oled-tile-height-desktop: 240px;
  --oled-tile-height-tablet: 210px;
  --oled-tile-height-mobile: 190px;

  /* ================= TEXT ================= */
  --oled-title-size: 1.6rem;
  --oled-text-size: 1.2rem;

  /* ================= OVERLAY ================= */
  --oled-overlay-padding: 1.5rem;
  /* --oled-overlay-bg: linear-gradient(
    180deg,
    rgba(0,0,0,0.12),
    rgba(0,0,0,0.7)
  ); */

  /* ================= MOTION ================= */
  --oled-hover-scale: 1.045;
  --oled-hover-shadow: 0 22px 44px rgba(0,0,0,0.18);
}

/* ================= SECTION ================= */

.an-oled-products-section {
  padding: var(--oled-products-padding-y) 0;
  background: #ffffff;
}

.an-oled-products-wrapper {
  max-width: 1360px;
  margin: auto;
  padding: 0 1.5rem;
}

/* ================= HEADING ================= */

.an-oled-products-header {
  text-align: center;
  margin-bottom: var(--oled-products-heading-margin-bottom);
}

.an-oled-products-header h2 {
  font-size: var(--oled-products-heading-size);
  font-weight: var(--oled-products-heading-weight);
}

/* ================= GRID STRUCTURE ================= */

.an-oled-products-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: var(--oled-products-gap);
  align-items: start;
}

/* ================= PRODUCT ================= */

.an-oled-product {
  position: relative;
  height: var(--oled-tile-height-desktop);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #f5f5f5;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.an-oled-product:hover {
  transform: scale(var(--oled-hover-scale));
  box-shadow: var(--oled-hover-shadow);
}

.an-oled-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= VERTICAL PRODUCT ================= */

.an-oled-product--vertical {
  height: var(--oled-vertical-height-desktop);
}

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

.an-oled-product-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--oled-products-gap);
}

/* ================= OVERLAY ================= */

.an-oled-overlay {
  position: absolute;
  inset: 0;
  padding: var(--oled-overlay-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--oled-overlay-bg);
}

.an-oled-overlay h3 {
  font-size: var(--oled-title-size);
  color: #fff;
  margin-bottom: 0.35rem;
}

.an-oled-overlay p {
  font-size: var(--oled-text-size);
  color: rgba(255, 255, 255, 0.9);
}

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

@media (max-width: 1024px) {
  .an-oled-product--vertical {
    height: var(--oled-vertical-height-tablet);
  }

  .an-oled-product {
    height: var(--oled-tile-height-tablet);
  }
}

@media (max-width: 768px) {
  .an-oled-products-grid {
    grid-template-columns: 1fr;
  }

  .an-oled-product--vertical {
    height: var(--oled-vertical-height-mobile);
  }

  .an-oled-product {
    height: var(--oled-tile-height-mobile);
  }

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

@media (max-width: 480px) {
  .an-oled-products-header h2 {
    font-size: 1.7rem;
  }
}

/* ================= END TRANSPARENT OLED PRODUCTS ================= */






/* =====================================================
   CAMERAS SECTION – LAYOUT & HEIGHT KNOBS
   ===================================================== */

:root {
  /* ================= SECTION ================= */
  --cameras-section-padding-y: 3rem;

  /* ================= HEADING ================= */
  --cameras-heading-size: 2.1rem;
  --cameras-heading-weight: 600;
  --cameras-heading-margin-bottom: 2rem;

  /* ================= FEATURE CARD ================= */
  --camera-feature-height-desktop: 360px;
  --camera-feature-height-tablet: 300px;
  --camera-feature-height-mobile: 260px;

  /* ================= STACK CARD ================= */
  --camera-stack-card-height: 112px;

  /* ================= TEXT ================= */
  --camera-title-size: 1.6rem;
  --camera-text-size: 1.2rem;

  /* ================= OVERLAY ================= */
  --camera-overlay-padding: 1.6rem;
  /* --camera-overlay-bg: linear-gradient(
    180deg,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.65)
  ); */

  /* ================= MOTION ================= */
  --camera-hover-scale: 1.035;
  --camera-hover-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* ================= SECTION ================= */

.an-cameras-section {
  padding: var(--cameras-section-padding-y) 0;
  background: #fff;
}

.an-cameras-wrapper {
  max-width: 1360px;
  margin: auto;
  padding: 0 1.5rem;
}

/* ================= HEADING ================= */

.an-cameras-header {
  text-align: center;
  margin-bottom: var(--cameras-heading-margin-bottom);
}

.an-cameras-header h2 {
  font-size: var(--cameras-heading-size);
  font-weight: var(--cameras-heading-weight);
}

/* ================= GRID STRUCTURE ================= */

.an-cameras-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr;
  gap: 1.5rem;
  align-items: start;
}

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

.an-cameras-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #f5f5f5;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.an-cameras-card:hover {
  transform: scale(var(--camera-hover-scale));
  box-shadow: var(--camera-hover-shadow);
}

.an-cameras-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= FEATURE CARD ================= */

.an-cameras-card--feature {
  height: var(--camera-feature-height-desktop);
}

/* ================= OVERLAY ================= */

.an-cameras-overlay {
  position: absolute;
  inset: 0;
  padding: var(--camera-overlay-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--camera-overlay-bg);
}

.an-cameras-overlay h3 {
  font-size: var(--camera-title-size);
  color: #fff;
  margin-bottom: 0.4rem;
}

.an-cameras-overlay p {
  font-size: var(--camera-text-size);
  color: rgba(255,255,255,0.9);
}

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

.an-cameras-stack {
  display: grid;
  grid-template-rows: repeat(3, var(--camera-stack-card-height));
  gap: 1.5rem;
  color: white;
}

.an-cameras-title {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
}

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

@media (max-width: 1024px) {
  .an-cameras-card--feature {
    height: var(--camera-feature-height-tablet);
  }
}

@media (max-width: 768px) {
  .an-cameras-grid {
    grid-template-columns: 1fr;
  }

  .an-cameras-card--feature {
    height: var(--camera-feature-height-mobile);
  }

  .an-cameras-stack {
    grid-template-rows: repeat(3, 160px);
  }
}

@media (max-width: 480px) {
  .an-cameras-stack {
    grid-template-rows: repeat(3, 140px);
  }

  .an-cameras-header h2 {
    font-size: 1.7rem;
  }
}

/* ================= END CAMERAS SECTION ================= */














/* =====================================================
   SPEAKERS GRID – DIFFERENT STYLE + KNOBS
   ===================================================== */

:root {
  /* ================= SECTION ================= */
  --speaker-grid-padding-y: 3rem;

  /* ================= HEADING ================= */
  --speaker-grid-heading-size: 2.1rem;
  --speaker-grid-heading-weight: 600;
  --speaker-grid-heading-margin-bottom: 2rem;

  /* ================= GRID ================= */
  --speaker-grid-gap: 1.5rem;
  --speaker-tile-height-desktop: 260px;
  --speaker-tile-height-tablet: 220px;
  --speaker-tile-height-mobile: 200px;

  /* ================= TEXT ================= */
  --speaker-title-size: 1.5rem;
  --speaker-text-size: 1.2rem;

  /* ================= OVERLAY ================= */
  --speaker-overlay-padding: 1.4rem;
  /* --speaker-overlay-bg: linear-gradient(
    180deg,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.7)
  ); */

  /* ================= MOTION ================= */
  --speaker-hover-scale: 1.05;
  --speaker-hover-shadow: 0 18px 36px rgba(0,0,0,0.18);
}

/* ================= SECTION ================= */

.an-speaker-grid-section {
  padding: var(--speaker-grid-padding-y) 0;
  background: #ffffff;
}

.an-speaker-grid-wrapper {
  max-width: 1360px;
  margin: auto;
  padding: 0 1.5rem;
}

/* ================= HEADING ================= */

.an-speaker-grid-header {
  text-align: center;
  margin-bottom: var(--speaker-grid-heading-margin-bottom);
}

.an-speaker-grid-header h2 {
  font-size: var(--speaker-grid-heading-size);
  font-weight: var(--speaker-grid-heading-weight);
}

/* ================= GRID ================= */

.an-speaker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--speaker-grid-gap);
}

/* ================= TILE ================= */

.an-speaker-tile {
  position: relative;
  height: var(--speaker-tile-height-desktop);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #f5f5f5;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.an-speaker-tile:hover {
  transform: scale(var(--speaker-hover-scale));
  box-shadow: var(--speaker-hover-shadow);
}

.an-speaker-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= OVERLAY ================= */

.an-speaker-overlay {
  position: absolute;
  inset: 0;
  padding: var(--speaker-overlay-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--speaker-overlay-bg);
}

.an-speaker-overlay h3 {
  font-size: var(--speaker-title-size);
  color: #fff;
  margin-bottom: 0.4rem;
}

.an-speaker-overlay p {
  font-size: var(--speaker-text-size);
  color: rgba(255,255,255,0.9);
}

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

@media (max-width: 1024px) {
  .an-speaker-tile {
    height: var(--speaker-tile-height-tablet);
  }
}

@media (max-width: 768px) {
  .an-speaker-grid {
    grid-template-columns: 1fr;
  }

  .an-speaker-tile {
    height: var(--speaker-tile-height-mobile);
  }
}

@media (max-width: 480px) {
  .an-speaker-grid-header h2 {
    font-size: 1.7rem;
  }
}

/* ================= END SPEAKERS GRID ================= */










































/* =====================================================
   SOLUTIONS BY INDUSTRY – ENTERPRISE GRID
   ===================================================== */

:root {
  /* ================= SECTION ================= */
  --industry-section-padding-y: 4rem;

  /* ================= HEADING ================= */
  --industry-heading-size: 2.3rem;
  --industry-heading-weight: 500;
  --industry-subtext-size: 1rem;
  --industry-header-gap: 1rem;

  /* ================= GRID ================= */
  --industry-grid-gap: 1.5rem;

  /* ================= CARD HEIGHT ================= */
  --industry-feature-height: 420px;
  --industry-card-height: 200px;

  /* ================= TEXT ================= */
  --industry-title-size: 1.6rem;

  /* ================= OVERLAY ================= */
  --industry-overlay-padding: 1.5rem;
  /* --industry-overlay-bg: linear-gradient(
    180deg,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.65)
  ); */

  /* ================= MOTION ================= */
  --industry-hover-scale: 1.03;
  --industry-hover-shadow: 0 18px 36px rgba(0,0,0,0.18);
}

/* ================= SECTION ================= */

.an-industry-section {
  padding: var(--industry-section-padding-y) 0;
  background: #fff;
}

.an-industry-wrapper {
  max-width: 1400px;
  margin: auto;
  padding: 0 1.5rem;
}

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

.an-industry-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3rem;
}

.an-industry-header h2 {
  font-size: var(--industry-heading-size);
  font-weight: var(--industry-heading-weight);
}

.an-industry-header p {
  margin-top: var(--industry-header-gap);
  font-size: var(--industry-subtext-size);
  color: #555;
}

/* ================= GRID ================= */

.an-industry-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--industry-grid-gap);
}

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

.an-industry-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #eee;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.an-industry-card:hover {
  transform: scale(var(--industry-hover-scale));
  box-shadow: var(--industry-hover-shadow);
}

.an-industry-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.an-industry-card--featured {
  height: var(--industry-feature-height);
}

/* ================= LIST ================= */

.an-industry-list {
  display: grid;
  grid-template-rows: repeat(4, var(--industry-card-height));
  gap: var(--industry-grid-gap);
}

/* ================= OVERLAY ================= */

.an-industry-overlay {
  position: absolute;
  inset: 0;
  padding: var(--industry-overlay-padding);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--industry-overlay-bg);
}

.an-industry-overlay h3 {
  font-size: var(--industry-title-size);
  font-weight: 500;
}

.an-industry-overlay span {
  font-size: 0.85rem;
  opacity: 0.9;
}

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

@media (max-width: 1024px) {
  .an-industry-grid {
    grid-template-columns: 1fr;
  }

  .an-industry-list {
    grid-template-rows: repeat(4, 180px);
  }
}

@media (max-width: 480px) {
  .an-industry-header h2 {
    font-size: 1.8rem;
  }
}
/* ================= INDUSTRY GRID FIX ================= */

.an-industry-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* LEFT COLUMN */
.an-industry-left {
  display: grid;
  grid-template-rows: 1.4fr 1fr;
  gap: 1.5rem;
}

/* FEATURED */
.an-industry-card--featured {
  height: 300px;
}

/* SECONDARY FEATURE */
.an-industry-card--secondary {
  height: 240px;
}

/* RIGHT COLUMN */
.an-industry-list {
  display: grid;
  grid-template-rows: repeat(4, 135px);
  gap: 1.5rem;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .an-industry-grid {
    grid-template-columns: 1fr;
  }

  .an-industry-left,
  .an-industry-list {
    grid-template-rows: none;
  }
}




























/* =====================================================
   ABOUT ANISTON AV – BALANCED GRID
   ===================================================== */

:root {
  /* SECTION */
  --about-section-padding-y: 4rem;

  /* HEADER */
  --about-heading-size: 2.4rem;
  --about-subtext-size: 1rem;
  --about-header-max-width: 820px;

  /* GRID */
  --about-grid-gap: 2rem;

  /* CARD */
  --about-card-bg: #f7f7f7;
  --about-card-radius: 18px;

  /* TEXT */
  --about-title-size: 1.6rem;
  --about-text-size: 1.2rem;
}

/* SECTION */
.an-about-section {
  padding: var(--about-section-padding-y) 0;
  background: #fff;
}

.an-about-wrapper {
  max-width: 1360px;
  margin: auto;
  padding: 0 1.5rem;
}

/* HEADER */
.an-about-header {
  text-align: center;
  max-width: var(--about-header-max-width);
  margin: 0 auto 3rem;
}

.an-about-header h2 {
  font-size: var(--about-heading-size);
}

.an-about-header p {
  margin-top: 1rem;
  font-size: var(--about-subtext-size);
  color: #555;
}

/* GRID */
.an-about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--about-grid-gap);
}

/* LEFT COLUMN */
.an-about-left {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--about-grid-gap);
}

/* RIGHT COLUMN */
.an-about-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--about-grid-gap);
}

/* CARD */
.an-about-card {
  background: var(--about-card-bg);
  border-radius: var(--about-card-radius);
  padding: 2rem;
}

.an-about-card h3 {
  font-size: var(--about-title-size);
  margin-bottom: 1rem;
}

.an-about-card h4 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.an-about-card p {
  font-size: var(--about-text-size);
  color: #444;
  line-height: 1.6;
}

/* HIGHLIGHTS */
.an-about-card--highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.an-about-highlight strong {
  display: block;
  font-size: 1.1rem;
}

.an-about-highlight span {
  font-size: 0.85rem;
  color: #666;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .an-about-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 480px) {
  .an-about-header h2 {
    font-size: 1.9rem;
  }
}