:root {
    --black:#1A1A1A;
    --blue:#0056D2;
    --copper:#B87333;
    --bg:#F8F9FA;
    --muted:#68707a;
    --border:#e5e7eb;
    --shadow:0 18px 55px rgba(26,26,26,.10)
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    font-family:Poppins,sans-serif;
    background:var(--bg);
    color:var(--black);
    line-height:1.7
}

a {
    text-decoration:none
}

.topbar {
    background:#111;
    color:#d8d8d8;
    font-size:.82rem
}

.topbar a {
    color:#fff
}

.navbar {
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    box-shadow:0 6px 25px #0000000f
}

.navbar-brand img {
    width:180px;
    max-height:68px;
    object-fit:contain
}

.nav-link {
    font-weight:600;
    color:#30343a!important;
    padding:.85rem .8rem!important;
    position:relative
}

.nav-link:after {
    content:"";
    position:absolute;
    left:.8rem;
    right:.8rem;
    bottom:.35rem;
    height:2px;
    background:var(--blue);
    transform:scaleX(0);
    transform-origin:left;
    transition:.25s
}

.nav-link:hover:after,.nav-link.active:after {
    transform:scaleX(1)
}

.nav-cta {
    background:var(--blue);
    color:#fff!important;
    border-radius:999px;
    padding:.65rem 1.15rem!important
}

.btn-primary {
    background:var(--blue);
    border-color:var(--blue);
    padding:.85rem 1.35rem;
    border-radius:10px;
    font-weight:700
}

.btn-copper {
    background:var(--copper);
    border-color:var(--copper);
    color:#fff;
    padding:.85rem 1.35rem;
    border-radius:10px;
    font-weight:700
}

.btn-copper:hover {
    background:#995c25;
    color:#fff
}

.hero {
    min-height:680px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(110deg,#0a0a0af5,#0a0a0ac2 50%,#002d69ad),radial-gradient(circle at 80% 30%,#b8733347,transparent 30%),#111
}

.hero:before {
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);
    background-size:55px 55px
}

.hero:after {
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border:1px solid #0056d259;
    border-radius:50%;
    right:-170px;
    top:-120px;
    box-shadow:0 0 0 70px #b873330a,0 0 0 140px #0056d208
}

.hero-content {
    position:relative;
    z-index:2
}

.kicker,.eyebrow {
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.11em;
    font-size:.78rem
}

.kicker {
    color:#d39a62
}

.kicker:before {
    content:"";
    display:inline-block;
    width:34px;
    height:2px;
    background:var(--copper);
    vertical-align:middle;
    margin-right:9px
}

.eyebrow {
    color:var(--blue)
}

.hero h1 {
    font-size:clamp(2.4rem,5vw,4.8rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.04em
}

.hero h1 span {
    color:#35a0ff
}

.hero p {
    max-width:720px;
    color:#d7dde5;
    font-size:1.05rem
}

.hero-badges {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:2rem
}

.hero-badge {
    padding:.55rem .85rem;
    border:1px solid #ffffff2e;
    background:#ffffff0d;
    border-radius:999px;
    font-size:.85rem
}

.section {
    padding:90px 0
}

.section-title {
    font-weight:800;
    letter-spacing:-.03em
}

.section-title span {
    color:var(--blue)
}

.section-lead {
    color:var(--muted);
    max-width:760px
}

.stat-strip {
    background:#111;
    color:#fff;
    border-radius:22px;
    padding:28px;
    margin-top:-30px;
    position:relative;
    z-index:3;
    box-shadow:var(--shadow)
}

.stat-number {
    font-size:2rem;
    font-weight:800
}

.stat-label {
    color:#aeb5be;
    font-size:.85rem
}

.about-img-wrap {
    position:relative
}

.about-img-wrap:before {
    content:"";
    position:absolute;
    width:80%;
    height:80%;
    right:-18px;
    bottom:-18px;
    background:var(--copper);
    border-radius:22px
}

.about-img-wrap img {
    position:relative;
    border-radius:22px;
    box-shadow:var(--shadow);
    width:100%;
    min-height:390px;
    object-fit:cover
}

.feature-card,.product-card,.value-card,.job-card,.news-card,.contact-card {
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 8px 30px #0000000a;
    transition:.3s;
    height:100%
}

.feature-card:hover,.product-card:hover,.value-card:hover,.job-card:hover,.news-card:hover {
    transform:translateY(-7px);
    box-shadow:var(--shadow)
}

.feature-card,.value-card,.job-card,.contact-card {
    padding:26px
}

.icon-box {
    width:54px;
    height:54px;
    border-radius:15px;
    background:#0056d20f;
    color:var(--blue);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    margin-bottom:1.2rem
}

.icon-box.copper {
    background:#b873331f;
    color:var(--copper)
}

.dark-section {
    background:#111;
    color:#fff;
    position:relative;
    overflow:hidden
}

.product-card {
    overflow:hidden
}

.product-img {
    height:240px;
    overflow:hidden;
    background:#e8ecef
}

.product-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s
}

.product-card:hover .product-img img {
    transform:scale(1.06)
}

.product-body {
    padding:22px
}

.product-tag {
    display:inline-block;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800;
    color:var(--blue);
    margin-bottom:.5rem
}

.page-hero {
    padding:135px 0 75px;
    background:linear-gradient(110deg,#0f0f0ff5,#0f0f0fc7),radial-gradient(circle at 85% 25%,#0056d259,transparent 32%),#111;
    color:#fff
}

.page-hero h1 {
    font-size:clamp(2.4rem,5vw,4rem);
    font-weight:800
}

.timeline {
    border-left:2px solid #d8dde4;
    margin-left:16px;
    padding-left:32px
}

.timeline-item {
    position:relative;
    margin-bottom:38px
}

.timeline-item:before {
    content:"";
    position:absolute;
    left:-42px;
    top:5px;
    width:18px;
    height:18px;
    background:var(--blue);
    border:4px solid #e9f1ff;
    border-radius:50%
}

.product-filter .btn {
    border-radius:999px;
    margin:4px
}

.product-filter .btn.active,.product-filter .btn:hover {
    background:var(--blue);
    color:#fff
}

.news-card {
    padding:0;
    overflow:hidden
}

.news-thumb {
    height:175px;
    background:linear-gradient(135deg,#111,#26384e);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:2rem
}

.news-body {
    padding:22px
}

.news-meta {
    font-size:.75rem;
    color:var(--muted)
}

.form-control,.form-select {
    padding:.85rem 1rem;
    border-radius:10px
}

.map-wrap {
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--shadow);
    min-height:430px
}

.map-wrap iframe {
    width:100%;
    height:100%;
    min-height:430px;
    border:0
}

.cta-banner {
    background:linear-gradient(110deg,#111,#173b68);
    border-radius:26px;
    padding:55px;
    color:#fff;
    position:relative;
    overflow:hidden
}

.footer {
    background:#0d0d0d;
    color:#b8bec7;
    padding-top:65px
}

.footer h5 {
    color:#fff
}

.footer a {
    color:#b8bec7
}

.footer a:hover {
    color:#fff
}

.footer-bottom {
    border-top:1px solid #ffffff17;
    margin-top:45px;
    padding:20px 0;
    font-size:.85rem
}

.footer-logo {
    width:185px
}

.reveal {
    opacity:0;
    transform:translateY(20px);
    transition:.7s
}

.reveal.is-visible {
    opacity:1;
    transform:none
}

.spinner {
    width:1rem;
    height:1rem;
    border:.15em solid #ffffff59;
    border-top-color:#fff;
    border-radius:50%;
    display:inline-block;
    animation:spin .7s linear infinite
}
@keyframes spin {
    to {
        transform:rotate(360deg)
    }
}
@media(max-width:768px) {
    .hero {
        min-height:600px
    }

    .hero h1 {
        font-size:2.55rem
    }

    .section {
        padding:70px 0
    }

    .page-hero {
        padding:115px 0 60px
    }

    .navbar-brand img {
        width:155px
    }
}

.metal-visual {
    background:linear-gradient(135deg,#171717,#3b4654);
    color:#fff;
    font-size:4rem
}

.director-card {
    position:relative;
    overflow:hidden
}

.director-initial {
    width:72px;
    height:72px;
    border-radius:20px;
    background:linear-gradient(135deg,var(--blue),#173b68);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:1.35rem;
    margin-bottom:1.2rem;
    box-shadow:0 10px 25px #0056d226
}

.product-card .product-img img {
    display:block
}

/* Social media links */
.social-links {
    gap: .5rem !important;
}

.social-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.social-icon:hover {
    transform: translateY(-2px);
    background: var(--blue);
    border-color: var(--blue);
    color: #fff !important;
}

.footer-social h6 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 0;
    letter-spacing: .2px;
}

.footer-handle {
    display: inline-block;
    margin-left: .25rem;
    color: rgba(255, 255, 255, .65);
    font-weight: 500;
}

.footer-social .social-icon-footer {
    width: 42px;
    height: 42px;
    font-size: 1.08rem;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.footer-social .social-icon-footer:hover,
.footer-social .social-icon-footer:focus-visible {
    transform: translateY(-3px);
    background: var(--blue);
    border-color: var(--blue);
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(0, 86, 214, .28);
}

.footer-social .social-icon-footer:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .footer-social .social-icon-footer {
        width: 40px;
        height: 40px;
    }

    .footer-handle {
        display: block;
        margin: .25rem 0 0 0;
    }
}

/* Responsive refinements: mobile, tablet and desktop */
img, svg { max-width: 100%; height: auto; }
.navbar-toggler { border: 1px solid var(--border); padding: .45rem .65rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(0,86,210,.18); }

@media (max-width: 991.98px) {
  .navbar-brand img { width: 155px; max-height: 58px; }
  .navbar .container { min-height: 70px; }
  .navbar-collapse { background: #fff; margin-top: .5rem; padding: .65rem 1rem 1rem; border-radius: 0 0 16px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
  .nav-link { padding: .7rem 0 !important; }
  .nav-link:after { left: 0; right: auto; width: 34px; bottom: .35rem; }
  .nav-cta { display: inline-flex; justify-content: center; margin-top: .5rem; padding: .7rem 1rem !important; }
  .hero { min-height: 610px; padding: 85px 0; }
  .section { padding: 70px 0; }
  .about-img-wrap:before { right: -10px; bottom: -10px; }
  .footer-social { margin-top: 1rem; }
}

@media (max-width: 767.98px) {
  body { font-size: .96rem; overflow-x: hidden; }
  .topbar .container { justify-content: center !important; text-align: center; }
  .topbar .d-flex { justify-content: center; row-gap: .2rem; }
  .hero { min-height: auto; padding: 78px 0 72px; }
  .hero:after { width: 310px; height: 310px; right: -150px; top: -80px; }
  .hero h1 { font-size: clamp(2.15rem, 10vw, 3.2rem); line-height: 1.08; }
  .hero p { font-size: .98rem; }
  .hero .btn { width: 100%; margin-bottom: .65rem; }
  .hero .d-flex.gap-3 { display: block !important; }
  .hero-badges { gap: 8px; margin-top: 1.25rem; }
  .hero-badge { font-size: .76rem; padding: .45rem .65rem; }
  .section { padding: 58px 0; }
  .section-title { font-size: clamp(1.8rem, 8vw, 2.45rem); }
  .section-lead { font-size: .95rem; }
  .stat-strip { border-radius: 16px; padding: 18px 12px; margin-top: -18px; }
  .stat-number { font-size: 1.55rem; }
  .about-img-wrap img { min-height: 280px; }
  .about-img-wrap:before { width: 75%; height: 75%; right: -6px; bottom: -6px; border-radius: 16px; }
  .product-card, .feature-card, .value-card, .job-card, .news-card, .contact-card { margin-bottom: 14px; }
  .product-card .product-img, .product-img { min-height: 220px !important; }
  .table-responsive { font-size: .85rem; }
  .footer-social { text-align: center; }
  .footer-social .d-flex { justify-content: center !important; flex-wrap: wrap; }
  footer .row > [class*='col-'] { margin-bottom: 1.5rem; }
  input, select, textarea, .form-control, .form-select { font-size: 16px !important; }
}

@media (max-width: 575.98px) {
  .container { width: 100%; padding-left: 16px; padding-right: 16px; }
  .topbar { font-size: .74rem; }
  .navbar-brand img { width: 138px; max-height: 52px; }
  .navbar .container { min-height: 62px; }
  .hero { padding: 66px 0 58px; }
  .hero h1 { letter-spacing: -.03em; }
  .kicker:before { width: 24px; }
  .stat-strip .row > div { padding: .6rem .25rem; }
  .btn-primary, .btn-copper { padding: .78rem 1rem; }
  .product-card .product-body, .feature-card, .value-card, .job-card, .news-card, .contact-card { padding: 1.15rem; }
  .director-initial { width: 60px; height: 60px; border-radius: 16px; }
}