/* ==========================================================================
   SIL-VEX ENGINEERING — home.css  (index.html only)
   ========================================================================== */

/* --------------------------------------------------------------- hero -- */
/* Premium white hero. The entrance/parallax animation itself is run by
   GSAP in js/hero-premium.js — this file only lays things out and sets
   a safe, fully-visible default so the section still looks right if
   GSAP is ever blocked or slow to load (progressive enhancement). */

.hero-premium{
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 92vh, 860px);
  display:flex;
  align-items:center;
  background: #FFFFFF;
  padding-block: clamp(90px, 10vw, 120px) 60px;
}

.hero-bg-gradient{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(46% 60% at 82% 18%, rgba(11,59,92,.08), transparent 70%),
    radial-gradient(40% 50% at 12% 88%, rgba(195,49,31,.06), transparent 70%),
    linear-gradient(180deg, #FCFDFE 0%, #F4F6F8 100%);
}

.hero-particles{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.particle{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle, rgba(11,59,92,.5), rgba(11,59,92,0) 70%);
  filter: blur(.5px);
}

.hero-premium-inner{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 5vw, 60px);
  align-items:center;
}

/* ------------------------------------------------------------- copy --- */
.hero-copy-premium{ max-width: 600px; }
.hero-copy-premium h1{
  color: var(--ink);
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  margin-block: .3em .4em;
}
.hero-copy-premium p{ max-width: 46ch; color: var(--steel); font-size:1.02rem; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin: 30px 0 44px; }
.btn-ghost-dark{
  display:inline-flex; align-items:center; gap:.6em;
  padding: .9em 1.6em;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  border-radius: var(--radius); border: 1px solid var(--line);
  color: var(--ink); cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn-ghost-dark:hover{ transform: translateY(-2px); background: var(--bg-alt); border-color: var(--navy); }

.hero-stats-light dt{ color: var(--ink); }
.hero-stats-light dd{ color: var(--steel-soft); }
.hero-stats{ display:flex; gap: clamp(24px, 4vw, 46px); margin:0; }
.hero-stats dt{ font-family: var(--font-display); font-size: 1.9rem; letter-spacing:.02em; }
.hero-stats dd{ margin:0; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }

/* ---------------------------------------------------- product stage --- */
.hero-product-stage{
  position:relative;
  aspect-ratio: 1/1;
  width: min(90%, 560px);
  margin-inline:auto;
  perspective: 1400px;
}
.hero-product-shadow{
  position:absolute;
  left:50%; bottom:4%;
  width:62%; height:10%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(15,29,38,.28), transparent 72%);
  filter: blur(4px);
  border-radius:50%;
}
.hero-float-layer{ position:absolute; inset:0; }

/* one product "slot" in the rotation — image + caption move and fade
   together. Default state (no JS) shows only the first slide so the
   hero still looks complete without GSAP. */
.hero-product-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 14px;
  visibility:hidden; opacity:0;
}
.hero-product-slide:first-child{ visibility:visible; opacity:1; }

.hero-product-wrap{
  width:100%; height:82%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 30px 34px rgba(15,29,38,.18));
  background: radial-gradient(60% 60% at 50% 45%, rgba(11,59,92,.05), transparent 70%);
  border-radius: 12px;
}
.hero-product-wrap svg, .hero-product-wrap img{ width:100%; height:100%; object-fit:contain; }

.hero-product-caption{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--steel-soft);
  background: rgba(255,255,255,.85);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.hero-tag{
  position:absolute; z-index:2;
  font-size:.66rem; letter-spacing:.06em;
  color: var(--ink);
  background:#fff;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 2px;
  box-shadow: 0 12px 26px -14px rgba(15,29,38,.28);
}
.tag-1{ top:10%;  left:0%; }
.tag-2{ top:18%;  right:-2%; }
.tag-3{ bottom:22%; left:-4%; }
.tag-4{ bottom:8%; right:0%; }

@media (max-width: 980px){
  .hero-premium-inner{ grid-template-columns: 1fr; }
  .hero-product-stage{ order:-1; width: min(70vw, 380px); }
  .hero-tag{ display:none; }
}

/* ---------------------------------------------------------- industries */
.industries{ background: var(--paper); padding-block: 30px; border-bottom:1px solid var(--line); }
.marquee-label{
  text-align:center; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--steel-soft); margin-bottom: 16px;
}
.marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{
  display:flex; gap: 46px; white-space:nowrap;
  animation: marquee 28s linear infinite;
  font-family: var(--font-mono); font-size:.85rem; color: var(--navy);
  letter-spacing:.03em;
}
.marquee-track li::after{ content:"/"; margin-left:46px; color: var(--silver); }
@keyframes marquee{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ----------------------------------------------------------- categories */
.categories h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); max-width: 16ch; margin-bottom: 40px; }
.cat-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cat-card{
  background: var(--paper);
  padding: 34px 28px;
  transition: background .2s ease, transform .2s ease;
}
.cat-card:hover{ background: #fff; transform: translateY(-4px); box-shadow: var(--shadow); z-index:1; position:relative; }
.cat-index{ color: var(--red); font-size:.75rem; letter-spacing:.1em; }
.cat-card h3{ font-size:1.05rem; margin: .5em 0 .35em; }
.cat-card p{ font-size:.9rem; margin:0; color: var(--steel-soft); }
@media (max-width: 860px){ .cat-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cat-grid{ grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- capability */
.capability{ background: var(--bg-alt); }
.capability h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); max-width: 20ch; margin-bottom: 34px; }
.spec-sheet{ background: var(--paper); border:1px solid var(--line); padding: 6px 28px; }
.spec-sheet .spec-row{ padding-block: 26px; }

/* ------------------------------------------------------------ materials */
.materials h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); max-width: 20ch; margin-bottom: 34px; }
.material-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:20px; }
.material-card{
  border-top: 3px solid var(--navy);
  padding: 20px 4px 0;
}
.material-card h3{ font-size:.98rem; margin-bottom:.4em; }
.material-card p{ font-size:.85rem; color: var(--steel-soft); margin:0; }
@media (max-width: 980px){ .material-grid{ grid-template-columns: repeat(2,1fr); } }

/* cta-banner / cta-inner now live in base.css (shared across pages) */