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

/* --------------------------------------------------------------- hero -- */
.hero-premium{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display:flex;
  align-items:center;
  background: #FFFFFF;
  padding: calc(var(--header-h) + clamp(48px, 8vw, 90px)) 0 clamp(90px, 10vw, 110px);
}

.hero-bg-gradient{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(50% 62% at 84% 12%, rgba(11,59,92,.1), transparent 70%),
    radial-gradient(42% 55% at 10% 90%, rgba(195,49,31,.08), transparent 70%),
    linear-gradient(180deg, #FDFEFF 0%, #F3F5F7 100%);
}

.hero-bg-grid{
  position:absolute; inset:0; z-index:0; opacity:.55;
  background-image:
    linear-gradient(rgba(11,59,92,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,59,92,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 90% at 60% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(80% 90% at 60% 40%, #000 30%, transparent 75%);
}

.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,.55), rgba(11,59,92,0) 70%);
  filter: blur(.5px);
}

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

/* ------------------------------------------------------------- copy --- */
.hero-copy-premium{ max-width: 620px; }
.hero-copy-premium h1{
  color: var(--ink);
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  margin-block: .35em .45em;
  letter-spacing: .005em;
}
.hero-copy-premium h1 em{
  font-style: normal;
  color: transparent;
  background: linear-gradient(120deg, var(--red-2), var(--red-deep));
  -webkit-background-clip: text;
          background-clip: text;
}
.hero-copy-premium p{ max-width: 48ch; color: var(--steel); font-size:1.02rem; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin: 30px 0 38px; }

.hero-bullets{ display:flex; flex-direction:column; gap:12px; margin:0; }
.hero-bullets li{
  display:flex; align-items:center; gap:14px;
  font-size:.92rem; color: var(--steel);
}
.hero-bullets li .mono{
  font-size:.62rem; letter-spacing:.14em; color: var(--red);
  border:1px solid var(--line); border-radius:50%;
  width:26px; height:26px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}

/* ---------------------------------------------------- product stage --- */
.hero-product-stage{
  position:relative;
  aspect-ratio: 1/1;
  width: min(92%, 560px);
  margin-inline:auto;
  perspective: 1400px;
}
.hero-stage-corner{
  position:absolute; width: 34px; height: 34px; z-index: 4; pointer-events:none;
}
.hero-stage-corner.tl{ top:-8px; left:-8px; border-top:2px solid var(--navy); border-left:2px solid var(--navy); }
.hero-stage-corner.tr{ top:-8px; right:-8px; border-top:2px solid var(--navy); border-right:2px solid var(--navy); }
.hero-stage-corner.bl{ bottom:-8px; left:-8px; border-bottom:2px solid var(--navy); border-left:2px solid var(--navy); }
.hero-stage-corner.br{ bottom:-8px; right:-8px; border-bottom:2px solid var(--navy); border-right:2px solid var(--navy); }

.hero-product-shadow{
  position:absolute;
  left:50%; bottom:2%;
  width:60%; height:9%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(15,29,38,.3), transparent 72%);
  filter: blur(5px);
  border-radius:50%;
}
.hero-float-layer{ position:absolute; inset:0; }

.hero-product-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 16px;
  visibility:hidden; opacity:0;
}
.hero-product-slide:first-child{ visibility:visible; opacity:1; }

.hero-product-wrap{
  width:100%; height:80%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 34px 40px rgba(15,29,38,.2));
  background: radial-gradient(62% 62% at 50% 44%, rgba(11,59,92,.06), transparent 72%);
  border-radius: 14px;
}
.hero-product-wrap img{ width:100%; height:100%; object-fit:contain; }

.hero-product-caption{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--steel);
  background: rgba(255,255,255,.9);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* scroll hint */
.scroll-hint{
  position:absolute; left:50%; bottom:22px; transform: translateX(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color: var(--steel-soft);
}
.scroll-hint-line{
  width:1px; height:44px; display:block; overflow:hidden; position:relative; background: rgba(124,139,150,.25);
}
.scroll-hint-line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--red);
  animation: scrollDrop 2s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes scrollDrop{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}
@media (prefers-reduced-motion: reduce){ .scroll-hint-line::after{ animation:none; display:none; } }

@media (max-width: 980px){
  .hero-premium-inner{ grid-template-columns: 1fr; }
  .hero-product-stage{ order:-1; width: min(72vw, 400px); margin-bottom: 10px; }
  .hero-premium{ padding-top: calc(var(--header-h) + 40px); }
}

/* ------------------------------------------------------------ stat band */
.stat-band{
  background:
    radial-gradient(55% 120% at 88% 0%, rgba(14,74,114,.6), transparent 70%),
    linear-gradient(135deg, var(--navy-deep-2) 0%, var(--navy-deep) 60%, var(--navy) 100%);
  padding-block: clamp(44px, 6vw, 66px);
  position:relative; overflow:hidden;
}
.stat-band::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
.stat-band::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--red-2), transparent 65%);
}
.stat-grid{
  position:relative;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.stat{ display:flex; flex-direction:column; gap:8px; border-left:1px solid rgba(255,255,255,.14); padding-left: 26px; }
.stat-value{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.3rem);
  color:#fff; line-height:1;
}
.stat-value b{
  color: transparent;
  background: linear-gradient(120deg, #fff 30%, var(--silver));
  -webkit-background-clip: text;
          background-clip: text;
}
.stat-label{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.55); }
@media (max-width: 860px){ .stat-grid{ grid-template-columns: 1fr 1fr; } .stat:nth-child(3){ border-left:0; padding-left:0; } }
@media (max-width: 480px){
  .stat-grid{ grid-template-columns: 1fr; }
  .stat{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top: 18px; }
}

/* ---------------------------------------------------------- industries */
.industries{ background: var(--paper); padding-block: 34px; border-bottom:1px solid var(--line); }
.marquee-label{
  text-align:center; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--steel-soft); margin-bottom: 18px;
}
.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 30s linear infinite;
  font-family: var(--font-mono); font-size:.86rem; 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; flex-wrap:wrap; } }

/* ----------------------------------------------------------- categories */
.categories{ background: var(--bg); }
.cat-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.cat-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px 26px;
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--red-2), var(--red));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(195,49,31,.3); }
.cat-card:hover::before{ transform: scaleX(1); }
.cat-index{ color: var(--red); font-size:.72rem; letter-spacing:.12em; }
.cat-card h3{ font-size:1.06rem; margin: .6em 0 .4em; }
.cat-card p{ font-size:.9rem; margin:0 0 18px; color: var(--steel-soft); flex:1; }
.cat-go{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color: var(--navy);
  opacity:0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.cat-card:hover .cat-go{ opacity:1; transform:none; }
.cat-go .arr{ display:inline-block; transition: transform .2s ease; }
.cat-card:hover .cat-go .arr{ transform: translateX(4px); }
@media (max-width: 860px){ .cat-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){
  .cat-grid{ grid-template-columns: 1fr; }
  .cat-go{ opacity:1; transform:none; }
}

/* ----------------------------------------------------------- capability */
.capability{ background: var(--bg-alt); }
.spec-sheet{ background: var(--paper); border:1px solid var(--line); padding: 4px 30px; box-shadow: var(--shadow-sm); }
.spec-sheet .spec-row{ padding-block: 28px; }

/* -------------------------------------------------------------- process */
.process{
  background:
    radial-gradient(60% 110% at 10% 0%, rgba(14,74,114,.55), transparent 70%),
    linear-gradient(135deg, var(--navy-deep-2), var(--navy-deep) 55%, var(--navy));
  color:#fff;
  position:relative; overflow:hidden;
}
.process::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 80%);
          mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 80%);
}
.process .wrap{ position:relative; }
.process-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
}
.process-step{
  background: rgba(6,28,44,.92);
  padding: 34px 26px;
  transition: background .25s ease, transform .25s ease;
}
.process-step:hover{ background: rgba(11,59,92,.95); transform: translateY(-4px); }
.ps-num{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.2em; color: var(--red-2); margin-bottom: 16px;
}
.ps-num::after{ content:""; width:26px; height:1px; background: rgba(255,255,255,.25); }
.process-step h3{ color:#fff; font-size:1.08rem; margin-bottom:.5em; }
.process-step p{ color: rgba(255,255,255,.62); font-size:.9rem; margin:0; }
@media (max-width: 960px){ .process-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ materials */
.materials{ background: var(--paper); }
.material-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.material-card{
  border-top: 3px solid var(--navy);
  padding: 20px 2px 0;
  position:relative;
  transition: transform .22s ease, border-color .22s ease;
}
.material-card:hover{ transform: translateY(-6px); border-color: var(--red); }
.m-index{ font-size:.62rem; letter-spacing:.16em; color: var(--steel-soft); }
.material-card h3{ font-size:1rem; margin:.5em 0 .45em; }
.material-card p{ font-size:.85rem; color: var(--steel-soft); margin:0; }
@media (max-width: 980px){ .material-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .material-grid{ grid-template-columns: 1fr 1fr; } }