/* ==========================================================================
   STARFIELD (lightweight CSS backdrop for non-hero pages)
   ========================================================================== */
.starfield{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg-0);
}
[data-theme="light"] .starfield{ opacity: .35; }
.starfield canvas{ width: 100%; height: 100%; display: block; }

/* ==========================================================================
   PRODUCT / FEATURE CARDS
   ========================================================================== */
.product-card{
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative;
  overflow: hidden;
}
.product-card__media{
  aspect-ratio: 16/10; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-2);
  position: relative;
}
.product-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-orbit); }
.product-card:hover .product-card__media img{ transform: scale(1.06); }
.product-card__title{ font-size: var(--fs-md); }
.product-card__desc{ color: var(--text-2); font-size: var(--fs-sm); }
.product-card__meta{ display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: auto; }

.feature-card{ text-align: left; }
.feature-card__icon{
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--orbit-gradient-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-2);
  color: var(--accent);
}
.feature-card__title{ font-size: 1.05rem; margin-bottom: .4em; }
.feature-card__desc{ color: var(--text-2); font-size: var(--fs-sm); }

/* ==========================================================================
   TIMELINE (Legacy page)
   ========================================================================== */
.timeline{ position: relative; padding-left: var(--sp-4); }
.timeline::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--accent), var(--blue));
}
.timeline__item{ position: relative; padding-bottom: var(--sp-5); }
.timeline__item:last-child{ padding-bottom: 0; }
.timeline__dot{
  position: absolute; left: calc(-1 * var(--sp-4) - 5px); top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-0); border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg-0);
}
.timeline__year{ font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-md); }
.timeline__title{ margin-top: .2em; font-size: var(--fs-md); }
.timeline__desc{ margin-top: .5em; color: var(--text-2); max-width: 62ch; }

/* ==========================================================================
   MASONRY GALLERY (Art page) + lightbox
   ========================================================================== */
.masonry{
  column-count: 3; column-gap: var(--sp-3);
}
.masonry__item{
  border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in;
  position: relative; background: var(--bg-2);
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  display: block;
}
.masonry__item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-orbit); }
.masonry__item:hover img{ transform: scale(1.05); }
.masonry__cap{
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-2);
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  font-family: var(--font-mono); font-size: var(--fs-xs); color: #fff;
  opacity: 0; transition: opacity var(--dur-fast);
}
.masonry__item:hover .masonry__cap{ opacity: 1; }

@media (max-width: 900px){ .masonry{ column-count: 2; } }
@media (max-width: 560px){ .masonry{ column-count: 1; } }

.lightbox{
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5,5,8,.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast);
  padding: var(--sp-4);
}
.lightbox.is-open{ opacity: 1; pointer-events: auto; }
.lightbox img{ max-width: min(92vw, 1100px); max-height: 86vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox__close{
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.06); color: #fff; font-size: 1.2rem;
}

/* ==========================================================================
   3D / IMAGE TILT VIEWER  (used on Beaverchip + Everest product pages)
   ========================================================================== */
.tilt-viewer{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 50% 20%, rgba(var(--accent-rgb), .18), transparent 65%), var(--bg-2);
  border: 1px solid var(--card-border);
  overflow: hidden;
  perspective: 1200px;
}
.tilt-viewer__stage{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
  will-change: transform;
}
.tilt-viewer__stage img{
  width: 86%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
  pointer-events: none;
  user-select: none;
}
.tilt-viewer__badge{
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em;
  color: var(--text-2); text-transform: uppercase;
  display: flex; align-items: center; gap: .5em;
}
.tilt-viewer__hint{
  position: absolute; bottom: var(--sp-2); right: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2);
}

/* ==========================================================================
   SPEC TABLE / ACCORDION  (Beaverchip / Documentation)
   ========================================================================== */
.spec-table{ width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-md); }
.spec-table tr{ border-bottom: 1px solid var(--line); }
.spec-table td{ padding: .9em .4em; vertical-align: top; }
.spec-table td:first-child{ color: var(--text-2); width: 38%; letter-spacing: .03em; }
.spec-table td:last-child{ color: var(--text-0); }

.accordion__item{ border-bottom: 1px solid var(--line); }
.accordion__trigger{
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) 0; background: none; border: none; text-align: left;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--text-0);
}
.accordion__icon{ transition: transform var(--dur-fast) var(--ease-orbit); flex-shrink: 0; color: var(--accent); }
.accordion__item.is-open .accordion__icon{ transform: rotate(45deg); }
.accordion__panel{
  max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-orbit);
}
.accordion__panel-inner{ padding-bottom: var(--sp-3); color: var(--text-2); max-width: 70ch; }

/* ==========================================================================
   VALUE CARDS (Values page)
   ========================================================================== */
.value-card{
  text-align: center; padding: var(--sp-5) var(--sp-3);
}
.value-card__icon{
  width: 64px; height: 64px; margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--orbit-gradient-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.form-field{ margin-bottom: var(--sp-3); }
.form-field label{ display: block; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); margin-bottom: .5em; letter-spacing: .03em; }
.form-field input, .form-field textarea, .form-field select{
  width: 100%; padding: .85em 1em;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text-0); font-family: var(--font-display); font-size: .95rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); outline: none;
}
.form-field textarea{ resize: vertical; min-height: 130px; }

/* Mobile (≤640px): the contact grid collapses to a single column. Allow its
   items (the form + the contact cards) to shrink below their intrinsic width
   so long card content / a nowrap CTA can never force a horizontal scroll. */
@media (max-width: 640px){
  body[data-page="contact"] .wrap.grid.grid--2{ min-width: 0; }
  body[data-page="contact"] .wrap.grid.grid--2 > *{ min-width: 0; }
}

/* WhatsApp button — reuses the site button language (ghost + accent) so it reads
   as a chat link without introducing a new palette. Lives here (shared) so the
   main contact page and the PCB services page use the exact same treatment. */
.btn--whatsapp{ border-style: dashed; }
.btn--whatsapp svg{ color: var(--accent); flex-shrink: 0; }

.contact-card{ display: flex; gap: var(--sp-3); align-items: flex-start; }
.contact-card__icon{
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--orbit-gradient-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  position: relative; border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-4);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.16), rgba(var(--blue-rgb),.2));
  border: 1px solid var(--card-border);
  text-align: center;
  overflow: hidden;
}
.cta-band__title{ max-width: 22ch; margin: 0 auto; }
.cta-band__actions{ display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* ==========================================================================
   COMING-SOON / IN-DEVELOPMENT MARKER (used on lighter scaffold pages)
   ========================================================================== */
.dev-note{
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-3); border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong);
  color: var(--text-2); font-size: var(--fs-sm);
  margin-top: var(--sp-3);
}