/* ================================================================
   Chronus 2026 – chronus.css
   ================================================================ */

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #0a0a0a;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p { margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }

/* ─── Container ─── */
.chr-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─── Section shared ─── */
.chr-section {
  scroll-margin-top: 100px;   /* MainNavBar (50px) + SubNavBar (50px) */
}

.chr-section-header {
  text-align: center;
  margin-bottom: 64px;
}

.chr-section-title {
  font-size: 58px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.74px;
  margin-bottom: 50px;
}

.chr-section-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: .36px;
  color: rgba(255,255,255,0.85);
  max-width: 1120px;
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
}


/* ════════════════════════════
   Sub-NavBar
   Identical behaviour to Sol page SubNavBar.
   Uses chr- prefix throughout.
════════════════════════════ */
.chr-subnav {
  position: sticky;
  top: 50px;               /* sits directly beneath the 50px MainNavBar */
  z-index: 999;            /* below MainNavBar (1000) so its dropdowns stay on top */
  background: #1e1e1e;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 4px rgba(0,0,0,0.30);
}

.chr-subnav-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
}

.chr-subnav-brand {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.chr-subnav-links {
  display: flex;
  list-style: none;
  margin: 0 0 0 40px;
  padding: 0;
  gap: 30px;
  flex: 1;
  min-width: 0;        /* allow the links area to shrink below its content width */
  overflow: hidden;    /* clip instead of forcing page-wide horizontal overflow */
}

.chr-subnav-links a {
  display: inline-block;
  padding: 3px 18px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.52);
  border-radius: 20px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.chr-subnav-links a:hover,
.chr-subnav-links a.is-active {
  color: #fff;
  background: rgba(255,255,255,0.09);
}

/* Filled cyan pill — matches Sol design */
.chr-subnav-cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 6px 12px 7px;
  background: #4dccff;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.chr-subnav-cta:hover {
  background: #7de0ff;
  color: #000;
  transform: translateY(-1px);
}

/* ── SubNavBar links responsive ──────────────────────────────────
   B) Medium widths: compress links (margin / gap / padding / font)
      so they keep fitting as the bar narrows.
   A) Below ~900px even the compressed links can't fit → hide them.
──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .chr-subnav-links   { margin-left: 24px; gap: 16px; }
  .chr-subnav-links a { padding: 3px 10px; font-size: 15px; }
  .chr-subnav-brand   { font-size: 24px; }
}
@media (max-width: 900px) {
  .chr-subnav-links { display: none; }
}


/* ════════════════════════════
   1. Cover
   Full-bleed background image — same pattern as Sol Glasses.
   <img class="chr-cover-bg"> drives section height (100% width /
   auto height).  Text is absolutely positioned over the image.
════════════════════════════ */
.chr-cover {
  position: relative;
  overflow: hidden;
}

/* Background image — block so no inline gap; height follows aspect ratio */
.chr-cover-bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Left-to-right gradient so text stays legible */
.chr-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Text overlay — centred inside the section, left-aligned content */
.chr-cover-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1300px;
  padding: 0 clamp(24px, 3vw, 40px);
  display: flex;
  align-items: center;
  z-index: 2;
}

.chr-cover-text {
  max-width: 655px;
}

.chr-cover-eyebrow {
  font-size: 30px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1.25;
  margin-bottom: clamp(16px, 2.2vw, 28px);
}

.chr-cover-title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 1.8px;
  color: #fff;
  margin-bottom: 6px;
}

.chr-cover-desc {
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.70;
  color: rgba(255,255,255,0.85);
  margin-bottom: clamp(24px, 2.8vw, 36px);
}

.chr-cover-cta {
  display: inline-flex;
  align-items: center;
  /* 1920: padding 0 20px, height 34px  → 20÷1920=1.042vw  34÷1920=1.771vw */
  padding: 0 clamp(14px, 1.042vw, 20px);
  height: clamp(26px, 1.771vw, 34px);
  background: #4dccff;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.2s;
}

.chr-cover-cta:hover {
  background-color: #6fd7ff;
  color: #000;
}


/* ════════════════════════════
   Shared HTML5 Video Player
   Used in Sections 2, 3, and 4.
════════════════════════════ */

/* Outer wrapper — full-width, 16:9 ratio cinema screen */
.chr-video-wrap,
.chr-tutorial-video-wrap {
  position: relative;
  width: 100%;
  background: #0d0d0d;
  border-radius: 12px;
  overflow: hidden;
  /* Force 16:9 via aspect-ratio */
  aspect-ratio: 16 / 9;
}

/* Showcase + Remote videos: 80% width, centred (tutorial stays 100%) */
.chr-video-wrap {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* The <video> element fills its container */
.chr-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play button overlay — visible by default, hidden while playing */
.chr-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.30);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.chr-video-overlay:hover {
  background: rgba(0,0,0,0.20);
}

/* Hide overlay while video is playing */
.chr-video-overlay.is-playing {
  opacity: 0;
  pointer-events: none;
}

/* Play / pause button */
.chr-play-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: clamp(56px, 7vw, 80px);
  height: clamp(56px, 7vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.chr-play-btn:hover {
  transform: scale(1.12);
  opacity: 0.9;
}

.chr-play-btn svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
}


/* ════════════════════════════
   2. Wearable Eye Tracker in the Field
════════════════════════════ */
.chr-showcase {
  padding: 120px 0 0;
  background: #0a0a0a;
}


/* ════════════════════════════
   3. Explore Chronus in Action
   Two-column: feature buttons left · video right
════════════════════════════ */
.chr-tutorial {
  padding: 120px 0 0;
}

.chr-tutorial-layout {
  display: flex;
  gap: 100px;   /* 1920 spec */
  align-items: stretch;   /* feature-btns column & video-wrap equal height */
}

/* ─── Feature switcher buttons (left column) ─── */
.chr-feature-btns {
  flex: 0 0 268px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.chr-feature-btn {
  -webkit-appearance: none;
  appearance: none;
  background: #1d1d1f;
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
  /* 1920: Height 54px · letter-spacing 1px (width fills the column) */
  padding: 0 15px;
  height: 54px;
  letter-spacing: 1px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chr-feature-btn:hover {
  background: #252527;
  border-color: rgba(255,255,255,0.22);
}

.chr-feature-btn.is-active {
  background: #1d1d1f;
  border-color: #4dccff;
}

/* Circled arrow icon */
.chr-feature-btn-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.chr-feature-btn.is-active .chr-feature-btn-icon {
  border-color: #4dccff;
  color: #4dccff;
}

.chr-feature-btn-title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  transition: color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chr-feature-btn.is-active .chr-feature-btn-title {
  color: #fff;
  font-weight: 600;
}

/* "Watch Tutorial ›" link — 60 px below the last button */
.chr-tutorial-watch-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 60px;
  padding-left: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #4dccff;
  letter-spacing: 0.01em;
  transition: color 0.15s ease, letter-spacing 0.2s ease;
}

.chr-tutorial-watch-link:hover {
  color: #7de0ff;
  letter-spacing: 0.05em;
}

/* ─── Tutorial video (right column) ─── */
.chr-tutorial-video-wrap {
  flex: 1;
  min-width: 0;
  /* aspect-ratio set by the shared .chr-tutorial-video-wrap rule above */
}


/* ════════════════════════════
   4. Remote Control & Live View
════════════════════════════ */
.chr-remote {
  padding: 120px 0 0;
  background: #0a0a0a;
}


/* ════════════════════════════
   5. Advanced Eye Tracking Software Ecosystem
════════════════════════════ */
.chr-ecosystem {
  padding: 120px 0 0;
}

/* Grid wrapper — plain block; children handle their own layout */
.chr-eco-grid {
  display: block;
}

/* ── Desktop panel: image on top + 3-col text below ── */
.chr-eco-panel {
  overflow: visible;      /* image must not be clipped */
  background: transparent;
  border-radius: 0;
}

.chr-eco-panel-img {
  line-height: 0;  /* kill inline gap below img */

  /* Shift image left while preventing left-viewport overflow.
     -7.79% = -95px at 1920vp (container content 1220px).
     At viewport < 1410px the container has no centering margin, so
     clamp the shift to the 40px left padding via:
       max( desired%, min(-40px, calc(-50vw + 610px)) )
     <= 1300px  -> capped at -40px  (image aligns to viewport left edge)
        1410px+ -> full -7.79%      (container centering absorbs the shift)  */
  margin-left: max(-7.79%, min(-40px, calc(-50vw + 610px)));
}

.chr-eco-panel-img img {
  display: block;
  width: 100%;   /* parent auto-width already absorbs the negative margin */
  height: auto;
  border-radius: 12px;
}

.chr-eco-panel-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.chr-eco-col {
  padding: 0 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal centre */
  text-align: center;
}

.chr-eco-col + .chr-eco-col {
  /* no divider lines between columns */
}

.chr-eco-col-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  margin-bottom: 25px;   /* title → body gap */
}

.chr-eco-col-desc {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255,255,255,0.85);
  flex: 1;
  margin-bottom: 25px;   /* body → link gap */
}

.chr-eco-col-link {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #4dccff;
  margin-top: auto;
  transition: letter-spacing 0.2s ease;
}

.chr-eco-col-link:hover {
  letter-spacing: 0.4px;
}

/* ── Mobile cards: hidden on desktop, shown ≤768px ── */
.chr-eco-cards-mobile {
  display: none;
}

/* ── Mobile card styles (shared with .chr-eco-card) ── */
.chr-eco-card {
  border-radius: 16px;
  overflow: hidden;
  background: #141414;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.chr-eco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.55);
}

.chr-eco-card-visual {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a1a1a;
}

.chr-eco-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.36s ease;
}

.chr-eco-card:hover .chr-eco-card-visual img {
  transform: scale(1.04);
}

.chr-eco-card-body {
  padding: 60px 24px 28px;   /* 60px top = image → text gap */
  display: flex;
  flex-direction: column;
  align-items: center;       /* horizontal centre */
  text-align: center;
  flex: 1;
}

.chr-eco-card-name {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  margin-bottom: 25px;       /* title → body gap */
}

.chr-eco-card-desc {
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255,255,255,0.85);
  flex: 1;
  margin-bottom: 25px;       /* body → link gap */
}

.chr-eco-card-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #4dccff;
  transition: letter-spacing 0.2s ease;
  margin-top: auto;
}

.chr-eco-card-link:hover {
  color: #4dccff;
  letter-spacing: 0.4px;
}


/* ════════════════════════════
   6. Blog  (Bootstrap Carousel)
   Blog card styles shared with Sol Glasses design.
════════════════════════════ */
.chr-blog {
  padding: 120px 0 120px;   /* last section → 120px gap to footer */
  background: #0a0a0a;
}

.chr-blog-outer {
  position: relative;
  padding: 0 44px;
}

/* ─── Blog card ─── */
/* Card design mirrors Home "Featured News" (.news-card) */
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;                                         /* fill the carousel column for equal heights */
  container-type: inline-size;                          /* title font scales to the card's own width */
  background: #121212;                                  /* Home --surface */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(77, 204, 255, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 60px rgba(77, 204, 255, 0.25),
              0 16px 48px rgba(0, 0, 0, 0.45);
}

/* Image: 9px frame margin + 12px radius (Home Featured News look) */
.blog-card-img {
  height: 270px;
  margin: 9px;
  overflow: hidden;
  border-radius: 12px;
  flex-shrink: 0;
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img img {
  transform: scale(1.06);
}

.blog-card-body {
  flex: 1;
  padding: 14px 22px 24px;
}

.blog-card-title {
  /* scales to the card's own width: 20px max (Home), 14px floor */
  font-size: clamp(14px, 5cqi, 20px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.4px;
  color: #fff;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #4dccff;
  margin-top: auto;
  transition: letter-spacing 0.2s ease, color 0.15s ease;
  position: absolute;
  bottom: 12px;
}

.blog-card:hover .blog-card-link {
  color: #7de0ff;
  letter-spacing: 0.4px;
}

/* ─── Carousel arrow controls ─── */
.chr-blog-carousel .carousel-control-prev,
.chr-blog-carousel .carousel-control-next {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  transition: background 0.15s ease;
}

.chr-blog-carousel .carousel-control-prev { left: -44px; }
.chr-blog-carousel .carousel-control-next { right: -44px; }

.chr-blog-carousel .carousel-control-prev:hover,
.chr-blog-carousel .carousel-control-next:hover {
  background: rgba(255,255,255,0.16);
  opacity: 1;
}

.chr-blog-carousel .carousel-control-prev-icon,
.chr-blog-carousel .carousel-control-next-icon {
  width: 16px;
  height: 16px;
}


/* ════════════════════════════
   7. Technical Specifications
   Bootstrap 5 accordion — same visual pattern as Sol Glasses.
   Direct !important overrides for WordPress CMS compatibility.
════════════════════════════ */
.chr-specs {
  padding: 120px 0 0;
  background: #0d0d0d;
}

.chr-specs-accordion {
  --bs-accordion-bg:              transparent;
  --bs-accordion-border-width:    0px;
  --bs-accordion-border-color:    transparent;
  --bs-accordion-border-radius:   16px;
  --bs-accordion-btn-bg:          rgba(255, 255, 255, 0.15);
  --bs-accordion-btn-color:       #fff;
  --bs-accordion-active-color:    #fff;
  --bs-accordion-active-bg:       rgba(255, 255, 255, 0.15);
  --bs-accordion-btn-icon:        none;
  --bs-accordion-btn-active-icon: none;
  --bs-accordion-btn-icon-width:  0px;
  border: none;
  overflow: visible;
  width: 80%;
  margin: 0 auto;
}

.chr-specs-accordion .accordion-item {
  border-radius: 16px !important;
  overflow: hidden;
  margin-bottom: 24px;
  background-color: transparent !important;
  border: none !important;
}

.chr-specs-accordion .accordion-item:last-child { margin-bottom: 0; }

.chr-specs-accordion .accordion-button {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  font-size: 18px;
  font-weight: 600;
  padding: 22px 28px;
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
}

.chr-specs-accordion .accordion-button:not(.collapsed) {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* + / − toggle icon */
.chr-specs-accordion .accordion-button::after {
  content: '+' !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255,255,255,0.70);
  transform: none !important;
  transition: none !important;
  margin-left: auto;
  flex-shrink: 0;
}

.chr-specs-accordion .accordion-button:not(.collapsed)::after {
  content: '−' !important;
}

.chr-specs-accordion .accordion-body {
  padding: 4px 28px 24px;
  background-color: transparent !important;
}

/* ─── Spec table ─── */
.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table tr {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.spec-table tr:last-child { border-bottom: none; }

.spec-table td {
  padding: 15px 28px;
  font-size: 14px;
  line-height: 1.55;
  vertical-align: top;
}

.spec-table td:first-child {
  font-weight: 600;
  color: rgba(255,255,255,0.84);
  width: 38%;
}

.spec-table td:last-child {
  color: rgba(255,255,255,0.46);
}


/* ════════════════════════════
   Responsive
════════════════════════════ */

/* ── ≤ 1100px ── */
@media (max-width: 1100px) {
  .chr-tutorial-layout {
    gap: 32px;
  }
  .chr-feature-btns {
    flex: 0 0 260px;
  }
}

/* ── ≤ 900px ── */
@media (max-width: 900px) {
  /* eco panel: tighten column padding */
  .chr-eco-col {
    padding: 20px 20px 24px;
  }
  .chr-eco-col-name { font-size: 16px; }
}

/* ── ≤ 768px ── */
@media (max-width: 768px) {
  /* Cover — narrow viewport: switch bg to object-fit:cover so the
     section doesn't collapse too short when the image is portrait. */
  .chr-cover {
    min-height: 380px;
  }
  .chr-cover-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  .chr-cover-inner {
    align-items: flex-start;
    padding-top: 64px;   /* clears 50 px navbar + breathing room */
    padding-bottom: 40px;
  }
  .chr-cover-title   { font-size: 34px; }
  .chr-cover-eyebrow { font-size: 22px; }
  .chr-cover-text { max-width: 70%; }

  /* SubNavBar: hide links on mobile */
  .chr-subnav-links { display: none; }

  /* Container */
  .chr-container { padding: 0 20px; }

  /* Section titles */
  .chr-section-title    { font-size: 28px; }
  .chr-section-subtitle { font-size: 15px; }

  /* Tutorial: stack vertically (buttons above, video below) */
  .chr-tutorial-layout {
    flex-direction: column;
    gap: 24px;
  }
  .chr-feature-btns {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .chr-feature-btns {
    gap: 12px;
  }
  .chr-feature-btn {
    flex: 1 1 calc(50% - 6px);
    width: auto;       /* reset fixed 268px so flex 2-col layout works */
    height: auto;      /* reset fixed 54px */
    padding: 10px 12px;
    gap: 10px;
  }
  .chr-feature-btn-icon {
    width: 24px;
    height: 24px;
  }
  /* Watch link spans full width so it sits below the 2-column button grid */
  .chr-tutorial-watch-link {
    flex: 0 0 100%;
    margin-top: 20px;
  }

  .chr-tutorial-video-wrap {
    /* aspect-ratio still 16/9, just full width now */
    flex: 0 0 auto;
  }

  /* Ecosystem: swap panel → individual cards */
  .chr-eco-panel        { display: none; }
  .chr-eco-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Blog */
  .chr-blog-outer { padding: 0 32px; }
  .chr-blog-carousel .carousel-control-prev { left: -32px; }
  .chr-blog-carousel .carousel-control-next { right: -32px; }

  /* Specs */
  .spec-table td { padding: 14px 20px; }
  .chr-specs-accordion .accordion-button { font-size: 16px; padding: 18px 20px; }
  .chr-specs-accordion { width: 100%; }

  /* Section spacing */
  .chr-showcase, .chr-tutorial, .chr-remote,
  .chr-ecosystem, .chr-blog, .chr-specs { padding: 80px 0; }
}

/* ── ≤ 600px ── */
@media (max-width: 600px) {
  /* no rules needed — eco panel already hidden; mobile cards already column */
}

@media (max-width: 1200px) {
  .chr-cover-title { font-size: 48px; }
}

@media (max-width: 480px) {
  .chr-cover-title { font-size: 28px; }
  .chr-cover-cta   { font-size: 16px; }
}

/* ── ≤ 480px ── */
@media (max-width: 480px) {
  .chr-feature-btns {
    flex-direction: column;
    gap: 10px;
  }
  .chr-feature-btn {
    flex: 0 0 auto;
    width: auto;       /* reset fixed 268px → full-width stacked buttons */
    height: auto;      /* reset fixed 54px */
    padding: 10px 14px;
    gap: 10px;
  }
  .chr-feature-btn-icon {
    width: 24px;
    height: 24px;
  }

  .spec-table { display: block; overflow-x: auto; }
}