/* ── Design Tokens ── */
:root {
  --blue:        #0d5cf5;
  --blue-dark:   #0b1e3f;
  --blue-mid:    #1a3a6e;
  --blue-light:  #e8f0fe;
  --accent:      #1ea7ff;
  --white:       #ffffff;
  --off-white:   #f8fafc;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f5f9;
  --gray-200:    #e2e8f0;
  --gray-300:    #cbd5e1;
  --gray-400:    #94a3b8;
  --gray-500:    #64748b;
  --gray-600:    #475569;
  --gray-700:    #334155;
  --gray-800:    #1e293b;
  --gray-900:    #0f172a;
  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Archivo', sans-serif;
  --font-body:    'Inter', sans-serif;
  --sidebar-w:    260px;
  --sticky-top:   90px;
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:     0 4px 16px rgba(0,0,0,.10);
  --shadow-md:  0 8px 32px rgba(0,0,0,.12);
  --transition: 0.25s ease;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); color: var(--gray-800); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 50px; font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; border: 2px solid transparent; transition: all var(--transition); white-space: nowrap; }

.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

.btn--white:hover { background: var(--blue-light); transform: translateY(-1px); }

.btn--lg { padding: 14px 28px; font-size: 0.9rem; }
.btn--sm { padding: 8px 18px; font-size: 0.8rem; }

/* =================== TOPBAR =================== */
/* .topbar { background: #0b1e3f; font-size: 0.8rem; color: rgba(255,255,255,.75); }

.topbar i { color: #1ea7ff; margin-right: 6px; } */

.topbar__social a:hover { background: #0d5cf5; color: #fff; }

/* =================== HEADER =================== */
/* .site-header / .brand__name / .brand__sub / .nav a / .brand--light: shared.css owns
   these now (were byte-identical duplicates that risked drifting from the header on
   every other page if only edited here). */
.header__cta { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px; font-size: 0.82rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.05em; border: none; background: #0d5cf5; color: #fff; cursor: pointer; }

.menu-toggle span { width: 24px; height: 2px; background: #0b1e3f; transition: all .3s cubic-bezier(.65,.05,.36,1); }

/* ── Product/Event Hero ── */
.product-hero {
  position: relative;
  background: var(--blue-dark);
  padding: 80px 0 90px;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
}
.product-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(13,92,245,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(30,167,255,.12) 0%, transparent 60%);
  pointer-events: none;
}
.product-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.product-hero__inner { position: relative; z-index: 2; width: 100%; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; margin-bottom: 24px; flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,.55); transition: color var(--transition); }

.breadcrumb i { font-size: 0.55rem; color: rgba(255,255,255,.3); }

.product-hero__content { display: flex; align-items: center; gap: 56px; justify-content: space-between; }
.product-hero__left { flex: 1; min-width: 0; }
.product-hero__eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:0.7} }
.product-hero__title { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.8rem); line-height: 1.0; letter-spacing: 2px; color: var(--white); margin-bottom: 10px; }
.product-hero__subtitle { font-size: 1rem; color: rgba(255,255,255,.55); font-style: italic; margin-bottom: 16px; }
.product-hero__desc { font-size: 0.95rem; color: rgba(255,255,255,.7); max-width: 540px; margin-bottom: 22px; line-height: 1.7; }
.product-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.product-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero carousel — base styles (.product-hero__carousel, .hero-carousel*, .slide-visual*,
   .carousel-btn*, .carousel-dot*) now live in pages/shared.css, loaded on every page. Only this
   page's own responsive override (below, in the Responsive section) stays here. */

/* The single-image fallback (event has no hero media — rendered from featured_image_url)
   has no slide-switching UI to declutter, so unlike the multi-slide carousel it stays
   visible and full-width at every breakpoint instead of hiding at 1024px. Mirrors the
   equivalent override in pages/product_detail.css. */
.product-hero__carousel--featured .hero-carousel__slide .slide-visual__image {
  max-height: 420px;
}
@media (max-width: 1024px) {
  .product-hero__carousel.product-hero__carousel--featured { display: block; width: 100%; }
}
@media (max-width: 640px) {
  .product-hero__carousel.product-hero__carousel--featured {
    display: block;
    width: 100%;
    margin-top: 28px;
  }
  .product-hero__carousel--featured .hero-carousel__slide .slide-visual__image {
    max-height: 280px;
  }
}

/* ── Countdown Bar ── */
.event-countdown-bar { background: #060f20; border-bottom: 1px solid rgba(13,92,245,.2); padding: 12px 0; }
.event-countdown-bar__inner { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; }
.countdown-label-text { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.countdown-group { display: flex; align-items: center; gap: 6px; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.countdown-num { font-family: var(--font-display); font-size: 1.8rem; color: #fff; line-height: 1; }
.countdown-unit-label { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.countdown-sep { font-family: var(--font-display); font-size: 1.5rem; color: rgba(255,255,255,.3); margin-bottom: 10px; }

/* ── Page Body ── */

/* ── Sidebar ── */

.sidebar-card--product { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%); border-color: transparent; display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.sidebar-product__icon { width: 48px; height: 48px; border-radius: var(--radius); background: rgba(13,92,245,.5); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--accent); flex-shrink: 0; border: 1px solid rgba(30,167,255,.3); }
.sidebar-product__info { min-width: 0; }
.sidebar-product__model { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--white); letter-spacing: 0.5px; margin-bottom: 4px; }
.sidebar-product__category { display: inline-block; padding: 2px 10px; background: rgba(30,167,255,.2); border: 1px solid rgba(30,167,255,.3); border-radius: 12px; font-size: 0.68rem; font-family: var(--font-heading); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.sidebar-card__heading { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-400); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-100); }

.sidebar-nav__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); font-size: 0.85rem; font-family: var(--font-body); color: var(--gray-600); transition: all var(--transition); border-left: 2px solid transparent; }

.quick-spec { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gray-100); gap: 8px; }
.quick-spec:last-child { border-bottom: none; }
.quick-spec__label { font-size: 0.78rem; color: var(--gray-500); }
.quick-spec__value { font-size: 0.8rem; font-weight: 700; font-family: var(--font-heading); color: var(--gray-800); text-align: right; }

/* ── Content Main ── */
.content-main { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.content-section { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 40px; margin-bottom: 24px; box-shadow: var(--shadow-sm); scroll-margin-top: 100px; display: none; }
.content-section.active { display: block; animation: section-in .3s ease forwards; }
@keyframes section-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

.section-divider { height: 3px; background: linear-gradient(90deg, var(--blue) 0%, var(--accent) 60%, transparent 100%); border-radius: 2px; margin-bottom: 24px; }
.section-body { font-size: 0.95rem; color: var(--gray-600); line-height: 1.75; margin-bottom: 16px; }

.subsection-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--gray-800); margin: 28px 0 14px; }

/* Mini stats */

.mini-stat__label { font-size: 0.75rem; font-family: var(--font-heading); font-weight: 600; color: var(--gray-500); letter-spacing: 0.5px; }

/* App card / feature card grid — matching product app-card */
.applications-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 24px; }
.app-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; transition: all var(--transition); display: flex; flex-direction: column; gap: 8px; }
.app-card:hover { background: var(--white); border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.app-card__icon { width: 44px; height: 44px; border-radius: var(--radius); background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--white); margin-bottom: 4px; flex-shrink: 0; }
.app-card__name { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--gray-800); line-height: 1.3; }
.app-card__use { font-size: 0.78rem; color: var(--gray-500); line-height: 1.55; }

/* Features list — product style */
.features-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 28px; }
.features-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; color: var(--gray-700); line-height: 1.5; }
.features-list li i { flex-shrink: 0; width: 22px; height: 22px; background: var(--blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; margin-top: 1px; }

/* Spec table */

.spec-table thead th:first-child { border-radius: var(--radius-lg) 0 0 0; }

.spec-table tbody td:first-child { font-weight: 600; color: var(--gray-800); width: 48%; }
.spec-group-header td { background: var(--gray-800) !important; color: var(--white) !important; font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; padding: 10px 20px !important; }

/* Agenda tabs */
.agenda-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--gray-200); margin-bottom: 24px; }
.agenda-tab { padding: 10px 20px; background: none; border: none; border-bottom: 2px solid transparent; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--gray-500); cursor: pointer; transition: all .2s; margin-bottom: -2px; }
.agenda-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.agenda-item { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--gray-100); }
.agenda-item:last-child { border-bottom: none; }
.agenda-item--tct .agenda-time { color: var(--blue); }
.agenda-time { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.04em; color: var(--gray-400); min-width: 80px; padding-top: 2px; }
.agenda-body { flex: 1; }
.agenda-tag { display: inline-block; font-family: var(--font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: var(--gray-100); color: var(--gray-500); margin-bottom: 6px; }
.agenda-tag--tct { background: rgba(13,92,245,.1); color: var(--blue); }
.agenda-title { font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--gray-800); margin-bottom: 4px; }
.agenda-body p { font-size: 0.83rem; line-height: 1.65; color: var(--gray-500); }

/* Team grid */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.team-member { display: flex; align-items: center; gap: 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 14px 16px; transition: all var(--transition); }
.team-member:hover { border-color: var(--blue); background: var(--blue-light); }
.team-member__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; color: #fff; flex-shrink: 0; }
.tm-av--1 { background: linear-gradient(135deg, #0a3a7a, var(--blue)); }
.tm-av--2 { background: linear-gradient(135deg, #0d2d5e, var(--accent)); }
.tm-av--3 { background: linear-gradient(135deg, #3a0d7a, #7c3aed); }
.tm-av--4 { background: linear-gradient(135deg, #0a3020, #059669); }
.team-member__info { display: flex; flex-direction: column; gap: 2px; }
.team-member__info strong { font-family: var(--font-heading); font-weight: 700; font-size: 0.87rem; color: var(--gray-800); }
.team-member__info span { font-size: 0.76rem; color: var(--gray-500); }
.team-member__days { color: var(--blue) !important; font-weight: 600 !important; }

/* Info callout */
.info-callout { display: flex; gap: 14px; background: rgba(13,92,245,.06); border: 1px solid rgba(13,92,245,.15); border-left: 3px solid var(--blue); border-radius: var(--radius); padding: 14px 16px; margin: 20px 0; font-size: 0.875rem; line-height: 1.7; color: var(--gray-700); }
.info-callout--green { background: rgba(5,150,105,.06); border-color: rgba(5,150,105,.15); border-left-color: #059669; }
.info-callout__icon { color: var(--blue); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.info-callout--green .info-callout__icon { color: #059669; }

/* Venue / location */
.venue-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; }
.venue-card__header { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-bottom: 1px solid var(--gray-200); }
.venue-card__icon { width: 44px; height: 44px; border-radius: var(--radius); background: linear-gradient(135deg, var(--blue), var(--accent)); display: grid; place-items: center; font-size: 1.1rem; color: #fff; flex-shrink: 0; }
.venue-card__name { font-family: var(--font-heading); font-weight: 800; font-size: 0.95rem; color: var(--gray-800); margin-bottom: 4px; }
.venue-card__address { font-size: 0.83rem; color: var(--gray-500); line-height: 1.55; }
.venue-map-placeholder { background: linear-gradient(135deg, var(--blue-dark), var(--blue-mid)); min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 2.5rem; color: rgba(255,255,255,.3); }
.venue-map-placeholder p { font-size: 0.85rem; color: rgba(255,255,255,.45); text-align: center; }

/* Transport grid */
.transport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.transport-item { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 18px; transition: all var(--transition); }
.transport-item:hover { border-color: var(--blue); background: var(--white); }
.transport-icon { width: 40px; height: 40px; border-radius: var(--radius); background: linear-gradient(135deg, var(--blue), var(--accent)); display: grid; place-items: center; color: #fff; font-size: 1rem; margin-bottom: 10px; }
.transport-item h4 { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--gray-800); margin-bottom: 6px; }
.transport-item p { font-size: 0.82rem; line-height: 1.65; color: var(--gray-500); }

/* Hotel list */
.hotel-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.hotel-item { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--gray-100); gap: 12px; flex-wrap: wrap; transition: background var(--transition); }
.hotel-item:last-child { border-bottom: none; }
.hotel-item:hover { background: var(--blue-light); }
.hotel-item strong { font-family: var(--font-heading); font-weight: 600; font-size: 0.87rem; color: var(--gray-800); }
.hotel-item span { font-size: 0.8rem; color: var(--gray-500); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
.contact-method { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; transition: all var(--transition); }
.contact-method:hover { border-color: var(--blue); background: var(--blue-light); }
.contact-method__icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--accent)); display: grid; place-items: center; color: #fff; font-size: 1rem; margin-bottom: 4px; }
.contact-method h4 { font-family: var(--font-heading); font-weight: 700; font-size: 0.88rem; color: var(--gray-800); }
.contact-method a { font-size: 0.85rem; color: var(--blue); }
.contact-method__note { font-size: 0.72rem; color: var(--gray-400); margin-top: 3px; }

/* Meeting form */
.meeting-cta { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); padding: 28px; }
.meeting-cta__text h3 { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--gray-800); margin-bottom: 6px; }
.meeting-cta__text p { font-size: 0.875rem; line-height: 1.7; color: var(--gray-500); margin-bottom: 20px; }
.meeting-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; color: var(--gray-500); letter-spacing: 0.5px; text-transform: uppercase; }
.form-field input, .form-field select, .form-field textarea { border: 1.5px solid var(--gray-200); border-radius: var(--radius); padding: 10px 14px; font-size: 0.87rem; font-family: var(--font-body); color: var(--gray-800); background: var(--white); outline: none; transition: border-color var(--transition); resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--blue); }

/* ── CTA Section ── */

.cta-section::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 100% at 90% 50%, rgba(13,92,245,.3) 0%, transparent 70%), radial-gradient(ellipse 30% 80% at 10% 50%, rgba(30,167,255,.15) 0%, transparent 60%); pointer-events: none; }

/* ── Footer ── */
/* Matches home.css's footer (the site's reference design) — overrides shared.css's "Family B"
   footer block. Literal colors instead of var(--accent): this page redefines --accent to a
   lighter highlight (#1ea7ff) for its own unrelated content, not the true brand blue home.css's
   footer uses for its underline/hover accents. */
.footer {
  background: var(--blue-dark);
  color: rgba(255,255,255,0.75);
  padding-top: 90px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer__grid { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 50px; padding-bottom: 70px; }
.footer__brand { flex: 0 1 240px; min-width: 200px; }
.footer__col { flex: 1 1 160px; min-width: 140px; }
.footer__brand p { color: rgba(255,255,255,0.65); margin: 22px 0; font-size: 0.95rem; line-height: 1.7; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: var(--white); transition: all .3s var(--transition);
}
.footer__social a:hover { background: var(--blue); color: var(--white); transform: translateY(-4px); }
.footer__col h5 {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: none;
  font-size: 1rem; letter-spacing: 0.05em; margin-bottom: 20px;
  color: var(--white); position: relative; padding-bottom: 12px;
}
.footer__col h5::after { background: var(--blue); }
.footer__col ul li a {
  color: rgba(255,255,255,0.65); font-size: 0.92rem;
  transition: all .25s var(--transition); display: inline-flex; align-items: center; gap: 6px;
}
.footer__contact p { color: rgba(255,255,255,0.65); font-size: 0.92rem; margin-bottom: 16px; line-height: 1.7; }
.footer__contact a {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.65); font-size: 0.92rem; margin-bottom: 10px;
  transition: none;
}
.footer__contact a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 22px 0; }
.footer__bottom-inner {
  display: flex; justify-content: space-between; align-items: normal;
  flex-wrap: wrap; gap: 12px; font-size: 0.85rem; color: rgba(255,255,255,0.5);
}

/* ── Back to top ── */

.back-to-top:hover { background: #0b4fd9; transform: translateY(-2px); }

/* ── Scroll Reveal ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .page-body__inner { grid-template-columns: 1fr; }
  .sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-height: none; overflow-y: visible; }
  .sidebar-card--product { grid-column: 1 / -1; }
  .sidebar-card--cta { grid-column: 1 / -1; }
  .product-hero__carousel { display: none; }
  .product-hero__content { gap: 0; }
  .footer__grid { flex-wrap: wrap; gap: 40px; }
  .footer__brand { flex: 1 1 100%; }
  .footer__col { flex: 1 1 calc(50% - 20px); min-width: 200px; }
  .nav, .header__cta { display: none; }
  .menu-toggle { display: flex; }
  .nav.open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: #ffffff; border-top: 1px solid var(--gray-200);
    padding: 20px; box-shadow: 0 10px 30px rgba(11, 30, 63, 0.08);
  }
  .nav.open ul { flex-direction: column; gap: 0; }
  .nav.open a { display: flex; width: 100%; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--gray-200); border-radius: 0; }
  .mega { display: none; }
}
@media (max-width: 768px) {
  .content-section { padding: 28px 24px; }
  .mini-stats { grid-template-columns: 1fr 1fr; }
  .applications-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .content-section { padding: 24px 20px; }
  .mini-stats { grid-template-columns: 1fr; }
  .applications-grid { grid-template-columns: 1fr; }
  .features-list { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .transport-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer { padding-top: 44px; }
  .footer__grid { flex-direction: column; }
  .footer__brand, .footer__col { flex: 1 1 auto; width: 100%; min-width: 0; }
  .cta-section__actions { flex-direction: column; align-items: center; }
  .meeting-cta { padding: 20px; }
  .sidebar-card--product { flex-wrap: wrap; }
  .product-hero__tags .tag { font-size: 0.7rem; padding: 4px 10px; }
  .contact-method { padding: 16px; }
  .cta-section__stats { gap: 24px; }
}
@media (max-width: 480px) {
  .product-hero__title { font-size: 2rem; }
  .content-section { padding: 20px 16px; }
  .countdown-num { font-size: 1.4rem; }
  .countdown-unit { min-width: 36px; }
  .meeting-cta { padding: 16px; }
}

/* -----------------------------------------------------------------
   Local overrides for selectors shared.css intentionally omits: these
   names (.btn--primary, .section-title, .breadcrumb a:hover) are also
   used by the "Family A" listing pages with different values under
   the same specificity — keeping
   both versions in shared.css would let source order decide the
   winner on every page. Defining them here instead, after shared.css
   loads, restores this page's intended look regardless of file order.
   (.container used to be duplicated here too, identically to shared.css's
   version — harmless on its own, but because .topbar__inner/.header__inner
   also carry the "container" class, this file's later-loaded .container
   rule was winning the padding shorthand over shared.css's topbar/header
   padding, collapsing the topbar and header to 0 vertical padding on
   every "Family B" detail page. Removed; shared.css's .container is
   identical in value, so nothing here actually needed it.)
   ----------------------------------------------------------------- */
.section-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--blue-dark); letter-spacing: -0.02em; }
.btn--primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn--primary:hover { background: #0b4fd9; border-color: #0b4fd9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,92,245,.35); }
.breadcrumb a:hover { color: var(--accent); }

.back-to-top { border: none; cursor: pointer; font-size: .9rem; visibility: hidden; }

a { transition: none; }
body { overflow-x: clip; }