:root {
  --navy: #032138;
  --navy-2: #0c3555;
  --red: #e31e24;
  --red-dark: #b8141a;
  --red-light: #ff6b70;
  --red-soft: #fff1f2;
  --ink: #15212d;
  --muted: #667282;
  --line: #dde4ea;
  --soft: #f5f7f9;
  --white: #ffffff;
  --success: #1b8754;
  --shadow: 0 18px 50px rgba(3,33,56,.12);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }

.container { width: min(1160px, calc(100% - 36px)); margin-inline: auto; }
.section { padding: 84px 0; }
.section-sm { padding: 54px 0; }
.section-title { max-width: 760px; margin-bottom: 36px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--red); font-weight: 800; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.eyebrow::before { content:""; width: 28px; height: 2px; background: var(--red); }
h1,h2,h3,h4 { line-height: 1.15; margin: 0 0 16px; color: var(--navy); }
h1 { font-size: clamp(2.5rem, 6vw, 5.4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.03em; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 18px; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: #d8e5f2; max-width: 680px; }
.muted { color: var(--muted); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(220,228,237,.8);
}
.nav { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display:flex; align-items:center; flex:0 0 auto; }
.brand img { width: 170px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; font-weight: 700; color: #314257; }
.nav-links a { position: relative; }
.nav-links a:not(.btn)::after { content:""; position:absolute; left:0; bottom:-8px; width:0; height:2px; background:var(--red); transition:.2s; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.menu-btn { display:none; border:0; background:none; font-size:1.6rem; color:var(--navy); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 48px; padding: 0 21px; border-radius: 999px;
  font-weight: 800; border: 1px solid transparent; cursor:pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; box-shadow:0 10px 26px rgba(227,30,36,.25); }
.btn-outline { color:var(--white); border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.06); }
.btn-dark { color:#fff; background:var(--navy); }

.hero {
  min-height: 760px; display:flex; align-items:center; overflow:hidden; position:relative;
  color:#fff;
  background:
    radial-gradient(circle at 86% 20%, rgba(227,30,36,.20), transparent 30%),
    linear-gradient(130deg, #021726 0%, var(--navy) 56%, var(--navy-2) 100%);
}
.hero::after {
  content:""; position:absolute; inset:auto -8% -38% auto; width:620px; aspect-ratio:1; border-radius:50%;
  border:100px solid rgba(255,255,255,.03); box-shadow:0 0 0 70px rgba(227,30,36,.06);
}
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:56px; position:relative; z-index:1; }
.hero h1 { color:#fff; }
.hero h1 span { color:var(--red-light); }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-card {
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); padding:28px; border-radius:26px;
  backdrop-filter: blur(14px); box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.hero-photo-card {
  position:relative; min-height:560px; overflow:hidden; border-radius:30px;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 32px 90px rgba(0,0,0,.34);
  background:#0b2438;
}
.hero-photo-card::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(3,33,56,.02) 32%,rgba(3,33,56,.90) 100%);
}
.hero-photo-card::after {
  content:""; position:absolute; width:220px; height:220px; right:-78px; top:-72px; z-index:2;
  border:48px solid rgba(227,30,36,.38); border-radius:50%;
}
.hero-photo-card > img { width:100%; height:560px; object-fit:cover; object-position:49% center; }
.hero-photo-overlay { position:absolute; z-index:3; left:30px; right:30px; bottom:78px; color:#fff; }
.hero-photo-overlay span { display:block; color:var(--red-light); font-size:.78rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.hero-photo-overlay strong { display:block; max-width:430px; font-size:clamp(1.45rem,2.6vw,2.25rem); line-height:1.13; }
.hero-photo-badges { position:absolute; z-index:3; left:26px; right:26px; bottom:22px; display:flex; flex-wrap:wrap; gap:8px; }
.hero-photo-badges span { padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.94); color:var(--navy); font-size:.72rem; font-weight:850; }
.industry-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.industry-item { background:#fff; color:var(--ink); border-radius:16px; padding:22px; min-height:145px; position:relative; overflow:hidden; }
.industry-item strong { display:block; color:var(--navy); font-size:1.05rem; margin-top:24px; }
.industry-item span { color:var(--muted); font-size:.9rem; }
.icon {
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:#eef4fa; color:var(--navy); font-size:1.35rem; font-weight:900;
}

.trust-strip { margin-top:-36px; position:relative; z-index:4; }
.trust-card { background:#fff; box-shadow:var(--shadow); border-radius:var(--radius); display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; }
.trust-item { padding:26px; border-right:1px solid var(--line); }
.trust-item:last-child { border-right:0; }
.trust-item strong { display:block; color:var(--navy); font-size:1.08rem; }
.trust-item span { color:var(--muted); font-size:.9rem; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:34px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:.25s; }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
.card .icon { margin-bottom:22px; }
.card p { color:var(--muted); }
.card-link { color:var(--red); font-weight:800; }

.soft { background:var(--soft); }
.about-panel { display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }
.visual-block { min-height:520px; border-radius:28px; position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(3,33,56,.08),rgba(3,33,56,.76)),url('../img/safety-professional.webp') center 24% / cover no-repeat; box-shadow:var(--shadow); }
.visual-block::before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,transparent 0 42%,rgba(227,30,36,.92) 42% 55%,transparent 55%); opacity:.35; }
.visual-block::after { content:"C"; position:absolute; right:6%; bottom:-12%; font-size:28rem; line-height:1; font-weight:900; color:rgba(255,255,255,.055); }
.visual-stats { position:absolute; inset:auto 26px 26px 26px; display:grid; grid-template-columns:1fr 1fr; gap:14px; z-index:2; }
.stat { background:rgba(255,255,255,.92); border-radius:16px; padding:20px; }
.stat b { display:block; color:var(--navy); font-size:1.6rem; }
.check-list { list-style:none; padding:0; margin:24px 0; display:grid; gap:12px; }
.check-list li { display:flex; gap:11px; align-items:flex-start; }
.check-list li::before { content:"✓"; display:grid; place-items:center; flex:0 0 24px; height:24px; border-radius:50%; background:#e5f4ec; color:var(--success); font-weight:900; }

.products { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; }
.product-visual { height:190px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#eaf0f6,#f9fbfd); color:var(--navy); font-size:3.6rem; }
.product-visual img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.product:hover .product-visual img { transform:scale(1.045); }
.product-body { padding:22px; }
.product-body p { color:var(--muted); font-size:.93rem; }
.tag { display:inline-flex; padding:6px 10px; border-radius:999px; background:var(--red-soft); color:#a50f15; font-size:.76rem; font-weight:800; }

.cta { background:linear-gradient(135deg,var(--navy),var(--navy-2)); border-radius:28px; padding:54px; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:30px; overflow:hidden; position:relative; }
.cta::after { content:""; width:260px; height:260px; border:60px solid rgba(255,255,255,.05); border-radius:50%; position:absolute; right:-70px; top:-90px; }
.cta h2 { color:#fff; max-width:680px; }
.cta > * { position:relative; z-index:1; }

.page-hero { padding:96px 0 76px; color:#fff; position:relative; overflow:hidden; background:linear-gradient(130deg,#021726,var(--navy-2)); }
.page-hero::after { content:""; position:absolute; width:320px; height:320px; border-radius:50%; right:-90px; top:-120px; background:rgba(227,30,36,.18); border:65px solid rgba(255,255,255,.035); }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { color:#fff; font-size:clamp(2.5rem,5vw,4.6rem); }
.breadcrumb { color:#b8c9da; font-weight:700; }
.breadcrumb a { color:var(--red-light); }

.values { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value { padding:26px; border-radius:18px; background:#fff; border-top:4px solid var(--red); box-shadow:0 12px 36px rgba(12,42,77,.08); }
.timeline { display:grid; gap:18px; }
.timeline-item { display:grid; grid-template-columns:70px 1fr; gap:18px; align-items:start; }
.timeline-number { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:var(--navy); color:#fff; font-weight:900; }

.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; }
.contact-card { background:var(--navy); color:#fff; border-radius:26px; padding:36px; }
.contact-card h2,.contact-card h3 { color:#fff; }
.contact-list { display:grid; gap:20px; margin-top:30px; }
.contact-row { display:grid; grid-template-columns:44px 1fr; gap:14px; }
.contact-row .icon { background:rgba(255,255,255,.1); color:var(--red-light); }
.form { background:#fff; border:1px solid var(--line); border-radius:26px; padding:36px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
label { font-weight:800; color:var(--navy); font-size:.9rem; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 14px; outline:none; background:#fbfcfd; }
input:focus,select:focus,textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(227,30,36,.13); }
textarea { min-height:140px; resize:vertical; }
.form-note { margin-top:12px; font-size:.86rem; color:var(--muted); }

.site-footer { background:#021726; color:#c7d4e2; padding:64px 0 22px; }
.footer-grid { display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:36px; }
.site-footer h3 { color:#fff; font-size:1rem; }
.footer-brand { width:190px; height:auto; background:#fff; padding:10px 12px; border-radius:14px; opacity:1; margin-bottom:18px; }
.footer-links { display:grid; gap:10px; }
.phone-list { display:grid; gap:4px; }
.phone-list a:hover { color:var(--red-light); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:20px; display:flex; justify-content:space-between; gap:20px; font-size:.9rem; }
.whatsapp { position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:#fff; font-size:1.65rem; box-shadow:0 12px 32px rgba(0,0,0,.25); z-index:30; }

@media (max-width: 980px) {
  .menu-btn { display:block; }
  .nav-links { position:absolute; left:18px; right:18px; top:148px; display:none; padding:22px; border-radius:18px; background:#fff; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .hero { min-height:auto; padding:90px 0; }
  .hero-grid,.about-panel,.contact-grid { grid-template-columns:1fr; }
  .hero-photo-card { min-height:500px; }
  .hero-photo-card > img { height:500px; }
  .trust-card { grid-template-columns:repeat(2,1fr); }
  .trust-item:nth-child(2) { border-right:0; }
  .trust-item:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .grid-3,.products { grid-template-columns:repeat(2,1fr); }
  .values { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .cta { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 640px) {
  .container { width:min(100% - 26px,1160px); }
  .brand img { width:145px; }
  .section { padding:64px 0; }
  .hero { padding:72px 0; }
  .hero-photo-card { min-height:390px; border-radius:22px; }
  .hero-photo-card > img { height:390px; }
  .hero-photo-overlay { left:22px; right:22px; bottom:78px; }
  .hero-photo-badges { left:18px; right:18px; bottom:18px; }
  .industry-grid,.grid-3,.grid-2,.products,.values,.form-grid,.footer-grid { grid-template-columns:1fr; }
  .trust-card { grid-template-columns:1fr; }
  .trust-item { border-right:0; border-bottom:1px solid var(--line); }
  .trust-item:last-child { border-bottom:0; }
  .visual-block { min-height:430px; }
  .visual-stats { grid-template-columns:1fr; }
  .cta { padding:34px 26px; }
  .form,.contact-card { padding:26px; }
  .footer-bottom { flex-direction:column; }
}


.topbar { background:var(--navy); color:#d8e3eb; font-size:.82rem; }
.topbar-inner { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar a:hover { color:#fff; }
.topbar .phone-list { display:flex; flex-direction:row; gap:18px; }
.nav-links a.active { color:var(--red); }

.photo-feature { display:grid; grid-template-columns:1.15fr .85fr; min-height:460px; overflow:hidden; border-radius:28px; background:var(--navy); box-shadow:var(--shadow); }
.photo-feature-media { min-height:460px; background:linear-gradient(90deg,rgba(3,33,56,.05),rgba(3,33,56,.18)),url('../img/mining-operations.webp') center / cover no-repeat; }
.photo-feature-copy { padding:56px; color:#dce7ef; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.photo-feature-copy::after { content:""; position:absolute; width:240px; height:240px; right:-95px; bottom:-90px; border-radius:50%; border:55px solid rgba(227,30,36,.18); }
.photo-feature-copy h2 { color:#fff; }
.photo-feature-copy .eyebrow { color:var(--red-light); }
.photo-feature-copy > * { position:relative; z-index:1; }

.image-strip { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; }
.image-panel { min-height:420px; border-radius:24px; overflow:hidden; position:relative; box-shadow:var(--shadow); }
.image-panel.worker { background:linear-gradient(180deg,transparent 40%,rgba(3,33,56,.78)),url('../img/industrial-worker.webp') center / cover no-repeat; }
.image-panel.professional { background:linear-gradient(180deg,transparent 42%,rgba(3,33,56,.82)),url('../img/safety-professional.webp') center 25% / cover no-repeat; }
.image-panel-caption { position:absolute; left:24px; right:24px; bottom:20px; color:#fff; font-weight:800; }
.image-panel-caption span { display:block; color:#f5c9cb; font-size:.86rem; font-weight:600; }

.product { transition:transform .25s, box-shadow .25s, border-color .25s; }
.product:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
.product-body h3 { margin-top:10px; }

@media (max-width: 980px) {
  .photo-feature { grid-template-columns:1fr; }
  .photo-feature-media { min-height:380px; }
  .image-strip { grid-template-columns:1fr; }
  .topbar-inner { justify-content:center; }
  .topbar-inner > a { display:none; }
}

@media (max-width: 640px) {
  .topbar .phone-list { gap:10px; font-size:.76rem; }
  .photo-feature-copy { padding:36px 28px; }
  .photo-feature-media { min-height:300px; }
  .image-panel { min-height:360px; }
}