
:root{
  --navy:#0B192C;
  --brand:#F28C28;
  --eco:#10B981;
  --soft:#F8FAFC;
  --line:#E5E7EB;
}
::selection{background:var(--brand);color:#fff}
body{overflow-x:hidden}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0B192C}
::-webkit-scrollbar-thumb{background:#F28C28;border-radius:10px}
.reveal{opacity:0;transform:translateY(20px);transition:all .8s cubic-bezier(.16,1,.3,1)}
.reveal.active{opacity:1;transform:translateY(0)}
.mask-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.77,0,.175,1)}
.mask-reveal.active{clip-path:inset(0 0 0 0)}
.stagger-item{opacity:0;transform:translateY(15px);transition:all .6s ease-out}
.active .stagger-item{opacity:1;transform:translateY(0)}
.img-zoom-container{overflow:hidden;position:relative;background:#0B192C}
.img-zoom{transition:transform 3s cubic-bezier(.16,1,.3,1);width:100%;height:100%;object-fit:cover}
.img-zoom-container:hover .img-zoom{transform:scale(1.05)}
.metal-texture::before{content:"";position:absolute;inset:0;opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}
#scroll-progress{position:fixed;top:0;left:0;height:3px;background:#F28C28;width:0%;z-index:100}
.brand-logo-img{filter:none!important;transition:all .3s ease}
#navbar.scrolled{padding-top:.75rem;padding-bottom:.75rem;background-color:rgba(255,255,255,.98);box-shadow:0 4px 15px -5px rgba(0,0,0,.1)}
#navbar.scrolled .nav-link{color:#0B192C}
#navbar.scrolled .nav-link:hover,#navbar.scrolled .nav-link.active-link{color:#F28C28}
.glass-dark{background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.page-hero{position:relative;min-height:58vh;display:flex;align-items:end;overflow:hidden;background:#0B192C}
.page-hero .overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(11,25,44,.72), rgba(11,25,44,.52), #0B192C)}
.page-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;mix-blend-luminosity}
.marquee-wrap{position:absolute;left:0;right:0;bottom:0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(11,25,44,.7);backdrop-filter:blur(8px);overflow:hidden}
.marquee-track{display:flex;gap:48px;white-space:nowrap;min-width:max-content;animation:marquee 32s linear infinite;padding:12px 0}
.marquee-track span{font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.marquee-track span i{color:#F28C28;font-style:normal;margin-right:10px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.soft-card{background:#fff;border:1px solid #f1f5f9;box-shadow:0 20px 44px rgba(11,25,44,.06)}
.compact-footer{padding-top:68px;padding-bottom:24px}
.footer-grid-compact{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.footer-brand-line{font-size:24px;font-weight:800;line-height:1.1;color:#fff;white-space:nowrap}
.footer-link-title{color:#fff;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.footer-mini-link{display:block;color:#9CA3AF;font-size:13px;line-height:1.8}
.footer-mini-link:hover{color:#F28C28}
.quality-preview{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.preview-tile{background:#fff;border:1px solid #E5E7EB;border-radius:4px;box-shadow:0 18px 40px rgba(11,25,44,.06);overflow:hidden}
.preview-tile img{display:block;width:100%;height:260px;object-fit:cover;background:#f8fafc}
.preview-tile .body{padding:18px}
.family-badge{display:inline-flex;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.family-ferrous{background:#FFF4EA;color:#A65315}
.family-nonferrous{background:#EEF7FF;color:#1E3A8A}
.family-specialty{background:#F3F0FF;color:#5B21B6}
.family-quality{background:#ECFDF5;color:#047857}
.link-card{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.section-divider{height:1px;background:linear-gradient(to right, rgba(11,25,44,.08), rgba(11,25,44,.02))}
.leader-mini img{height:160px}
.form-input,.form-select,.form-textarea{width:100%;margin-top:8px;padding:14px 16px;border:1px solid #d1d5db;border-radius:2px;background:#fff;color:#0B192C}
.form-textarea{min-height:150px;resize:vertical}
.form-file{width:100%;margin-top:8px;padding:10px;border:1px solid #d1d5db;border-radius:2px;background:#fff;color:#0B192C}
.note{font-size:12px;color:#6b7280;line-height:1.6}
@media (max-width:1024px){
  .footer-grid-compact{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .footer-grid-compact{grid-template-columns:1fr}
  .quality-preview{grid-template-columns:1fr}
  .footer-brand-line{white-space:normal;font-size:20px}
  .marquee-track{gap:28px}
}

.nav-dropdown{position:relative}
.dropdown-panel{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);min-width:520px;background:rgba(255,255,255,.98);border:1px solid rgba(11,25,44,.08);box-shadow:0 24px 50px rgba(11,25,44,.12);padding:22px;border-radius:2px;opacity:0;visibility:hidden;pointer-events:none;transition:all .22s ease}
.nav-dropdown:hover .dropdown-panel,.nav-dropdown:focus-within .dropdown-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.dropdown-title{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#F28C28;margin-bottom:10px}
.dropdown-link{display:block;padding:9px 0;color:#0B192C;font-size:14px;line-height:1.4}
.dropdown-link:hover{color:#F28C28}
.mobile-sub-link{display:block;padding:8px 0;color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.mobile-sub-link:hover{color:#F28C28}
@media (max-width:1024px){.dropdown-panel{display:none}}
