/* ==========================================================================
   SIL-VEX ENGINEERING — company.css  (companyprofile.html only)
   ========================================================================== */

/* ---------------------------------------------------------- overview */
.cp-overview{ background: var(--bg); }
.cp-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.cp-grid p{ max-width: 58ch; }
.cp-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 26px; }

.cp-panel{
  position:relative; aspect-ratio: 4/3.4; border-radius: var(--radius-lg);
  overflow:hidden; background: var(--navy-deep);
  box-shadow: var(--shadow);
}
.cp-panel::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--red-2), transparent 60%);
}
.cp-panel-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.cp-panel-ring{
  position:absolute; left:50%; top:50%; width: 240px; height:240px;
  border: 2px solid rgba(226,58,37,.55); border-radius:50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 0 34px rgba(255,255,255,.04), 0 0 0 68px rgba(255,255,255,.03);
}
.cp-panel-label{
  position:absolute; left:14px; bottom:14px;
  font-size:.6rem; letter-spacing:.14em;
  color:#fff; background: rgba(6,28,44,.8);
  border:1px solid rgba(255,255,255,.2);
  padding: 6px 11px; border-radius: 2px;
}
@media (max-width: 860px){ .cp-grid{ grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ facts */
.cp-facts{
  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;
}
.cp-facts::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;
}
.cp-facts::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--red-2), transparent 65%);
}
.cp-facts-grid{
  position:relative;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.cp-fact{ display:flex; flex-direction:column; gap:8px; border-left:1px solid rgba(255,255,255,.14); padding-left: 26px; }
.cp-fact-value{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  color:#fff; line-height:1;
}
.cp-fact-value b{
  color: transparent;
  background: linear-gradient(120deg, #fff 30%, var(--silver));
  -webkit-background-clip: text;
          background-clip: text;
}
.cp-fact-label{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.55); }
@media (max-width: 860px){ .cp-facts-grid{ grid-template-columns: 1fr 1fr; } .cp-fact:nth-child(3){ border-left:0; padding-left:0; } }
@media (max-width: 480px){
  .cp-facts-grid{ grid-template-columns: 1fr; }
  .cp-fact{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top: 18px; }
}

/* ------------------------------------------------------------ make */
.cp-make{ background: var(--bg-alt); }
.cp-make-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.cp-line{
  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;
}
.cp-line::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;
}
.cp-line:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(195,49,31,.3); }
.cp-line:hover::before{ transform: scaleX(1); }
.cp-line-no{ color: var(--red); font-size:.7rem; letter-spacing:.14em; }
.cp-line h3{ font-size:1.06rem; margin:.6em 0 .4em; }
.cp-line p{ font-size:.9rem; color: var(--steel-soft); margin:0 0 18px; flex:1; }
.cp-line .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;
}
.cp-line:hover .cat-go{ opacity:1; transform:none; }
@media (max-width: 900px){ .cp-make-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){
  .cp-make-grid{ grid-template-columns: 1fr; }
  .cp-line .cat-go{ opacity:1; transform:none; }
}

/* ------------------------------------------------------ industries */
.cp-industries{
  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;
}
.cp-industries::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 85%);
          mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%);
}
.cp-industries .wrap{ position:relative; }
.cp-industries-track{
  display:flex; flex-wrap:wrap; gap:12px;
}
.cp-industries-track span{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.06em;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.22);
  padding: .7em 1.2em; border-radius: 999px;
  background: rgba(255,255,255,.05);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cp-industries-track span:hover{ border-color: var(--red-2); background: rgba(226,58,37,.15); transform: translateY(-3px); }

/* ------------------------------------------------------------ quality */
.cp-quality{ background: var(--bg); }
.cp-quality-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border:1px solid var(--line); }
.cp-q{
  background: var(--paper); padding: 30px 26px;
  position:relative;
  transition: background .2s ease;
}
.cp-q:hover{ background: #fff; }
.cp-q-no{ color: var(--red); font-size:.68rem; letter-spacing:.16em; }
.cp-q h3{ font-size:1.04rem; margin:.6em 0 .4em; }
.cp-q p{ font-size:.88rem; color: var(--steel-soft); margin:0; }
@media (max-width: 900px){ .cp-quality-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .cp-quality-grid{ grid-template-columns: 1fr; } }