:root {
  --navy: #0f1019;
  --navy-2: #171925;
  --orange: #ff6418;
  --yellow: #ffbf18;
  --white: #ffffff;
  --offwhite: #f5f5f2;
  --text: #252733;
  --muted: #666a75;
  --border: #dedfdc;
  --shadow: 0 24px 60px rgba(15, 16, 25, 0.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 16, 25, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-wrap { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand img { width: 310px; max-height: 74px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 28px; color: var(--white); font-size: .94rem; font-weight: 600; }
.nav-links a:hover { color: var(--yellow); }
.nav-cta { background: var(--orange); padding: 12px 18px; border-radius: 6px; }
.nav-cta:hover { color: var(--white) !important; background: #ef560e; }
.menu-toggle { display:none; border:0; background:transparent; padding:8px; }
.menu-toggle span { display:block; width:27px; height:2px; background:#fff; margin:6px 0; }

.hero {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--white);
  background:
    radial-gradient(circle at 75% 35%, rgba(255,100,24,.28), transparent 28%),
    linear-gradient(115deg, #0f1019 0%, #10111a 58%, #20212c 100%);
}
.hero::after {
  content:""; position:absolute; width:420px; height:420px; border:70px solid rgba(255,100,24,.09); border-radius:50%; right:-140px; bottom:-180px;
}
.hero-grid-overlay { position:absolute; inset:0; opacity:.24; 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:52px 52px; mask-image:linear-gradient(to right, black, transparent); }
.hero-layout { position:relative; z-index:2; display:grid; grid-template-columns: 1.05fr .95fr; gap:70px; align-items:center; padding:88px 0; }
.eyebrow { color: var(--yellow); text-transform: uppercase; letter-spacing: .15em; font-weight: 800; font-size: .78rem; }
.eyebrow.dark { color: var(--orange); }
h1,h2,h3 { font-family:"Barlow Condensed", sans-serif; margin:0 0 18px; line-height:1.05; }
h1 { font-size: clamp(3.3rem, 6vw, 6.3rem); text-transform: uppercase; letter-spacing:-.02em; max-width:800px; }
h1 span { color: var(--orange); }
h2 { font-size: clamp(2.5rem, 4vw, 4.5rem); text-transform: uppercase; }
h3 { font-size: 1.7rem; }
.hero-copy > p { color:#d5d6dc; font-size:1.08rem; max-width:680px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin:32px 0 28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; border:0; cursor:pointer; padding:15px 23px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em; font-weight:800; font-size:.86rem; }
.btn-primary { color:white; background:var(--orange); box-shadow:0 12px 28px rgba(255,100,24,.24); }
.btn-primary:hover { background:#e95510; transform:translateY(-1px); }
.btn-secondary { color:var(--white); border:1px solid rgba(255,255,255,.28); }
.btn-secondary:hover { border-color:var(--yellow); color:var(--yellow); }
.hero-points { display:flex; gap:24px; flex-wrap:wrap; color:#c8c9cf; font-size:.9rem; }
.hero-points span::before { content:"✓"; color:var(--yellow); margin-right:8px; font-weight:800; }

.hero-visual { position:relative; }
.photo-panel { border-radius:16px; overflow:hidden; background:linear-gradient(135deg,#292b38,#141620); box-shadow:var(--shadow); }
.photo-panel-main { min-height:500px; transform:rotate(1.5deg); border:1px solid rgba(255,255,255,.12); }
.photo-placeholder { min-height:inherit; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:50px; border:1px dashed rgba(255,255,255,.28); margin:14px; border-radius:10px; color:#fff; background:radial-gradient(circle at 50% 30%,rgba(255,100,24,.16),transparent 42%); }
.photo-placeholder small { color:var(--yellow); letter-spacing:.12em; text-transform:uppercase; }
.photo-placeholder strong { font-family:"Barlow Condensed"; font-size:2rem; margin-top:10px; text-transform:uppercase; }
.photo-placeholder p { color:#bfc1c9; max-width:300px; }
.gear-mark { font-size:6rem; color:var(--orange); line-height:1; margin-bottom:20px; }
.floating-stat { position:absolute; left:-34px; bottom:34px; background:var(--yellow); color:var(--navy); padding:20px 24px; width:240px; border-radius:10px; box-shadow:var(--shadow); }
.floating-stat strong { display:block; font-family:"Barlow Condensed"; font-size:2.4rem; text-transform:uppercase; line-height:1; }
.floating-stat span { font-size:.82rem; font-weight:700; }

.trust-strip { background:var(--yellow); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-grid div { padding:24px 30px; border-right:1px solid rgba(15,16,25,.18); }
.trust-grid div:last-child { border:0; }
.trust-grid strong { display:block; font-family:"Barlow Condensed"; text-transform:uppercase; font-size:1.5rem; }
.trust-grid span { font-size:.84rem; }

.section { padding:100px 0; }
.section-dark { color:var(--white); background:var(--navy); }
.split-layout, .sourcing-layout, .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.section-copy p, .section-heading p, .sourcing-copy p, .why-title p, .contact-copy > p { color:var(--muted); }
.section-dark .section-heading p, .section-dark .why-title p { color:#b9bbc4; }
.about-photo { min-height:430px; background:linear-gradient(135deg,#f2f2ee,#d9d9d2); }
.dark-placeholder { color:var(--navy); border-color:rgba(15,16,25,.25); background:repeating-linear-gradient(-45deg,rgba(15,16,25,.03),rgba(15,16,25,.03) 12px,transparent 12px,transparent 24px); }
.dark-placeholder small { color:var(--orange); }

.section-heading { margin-bottom:45px; max-width:760px; }
.section-heading.centered { margin-inline:auto; text-align:center; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card { padding:30px; border:1px solid rgba(255,255,255,.12); background:#171925; border-radius:10px; transition:.25s; }
.product-card:hover { transform:translateY(-6px); border-color:var(--orange); }
.product-card > span { color:var(--yellow); font-weight:800; }
.product-card h3 { margin-top:30px; text-transform:uppercase; }
.product-card p { color:#afb1bb; font-size:.92rem; }

.vision-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.feature-panel { padding:48px; background:var(--offwhite); border-left:6px solid var(--navy); }
.feature-panel-accent { color:#fff; background:var(--orange); border-left-color:var(--yellow); }
.panel-label { display:inline-block; margin-bottom:26px; text-transform:uppercase; letter-spacing:.15em; font-weight:800; font-size:.78rem; }
.feature-panel h3 { font-size:2.5rem; text-transform:uppercase; }
.feature-panel ul { padding-left:18px; }

.values-section { background:#fafaf8; }
.values-grid { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--border); }
.value-card { padding:30px 24px; min-height:180px; border-right:1px solid var(--border); }
.value-card:last-child { border:0; }
.value-card b { font-family:"Barlow Condensed"; font-size:1.6rem; text-transform:uppercase; }
.value-card p { color:var(--muted); font-size:.9rem; }

.sourcing-section { color:#fff; background:linear-gradient(115deg,#ff6418,#ec4f0a); }
.sourcing-photo { min-height:420px; background:#141620; }
.check-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.check-list span { padding:15px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); border-radius:6px; }
.check-list span::before { content:"✓"; color:var(--yellow); font-weight:900; margin-right:10px; }

.industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.industry-item { min-height:155px; display:flex; align-items:flex-end; padding:24px; background:linear-gradient(135deg,#f2f2ef,#dfdfd9); font-family:"Barlow Condensed"; font-size:1.7rem; font-weight:800; text-transform:uppercase; border-bottom:5px solid var(--orange); }

.why-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.why-title { position:sticky; top:140px; align-self:start; }
.why-list article { display:grid; grid-template-columns:65px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.why-list b { color:var(--yellow); font-family:"Barlow Condensed"; font-size:1.8rem; }
.why-list h3 { text-transform:uppercase; margin-bottom:8px; }
.why-list p { color:#afb1bb; margin:0; }

.promise-section { padding:0 0 100px; background:var(--navy); }
.promise-box { padding:64px; text-align:center; color:#fff; background:linear-gradient(135deg,#232531,#161721); border:1px solid rgba(255,255,255,.12); border-radius:14px; }
.promise-box h2 { max-width:950px; margin:16px auto; }
.promise-box p { color:#c1c3ca; max-width:760px; margin:0 auto; }

.contact-section { background:#f4f4f0; }
.contact-details { margin-top:30px; }
.contact-details p { padding:18px 0; border-bottom:1px solid var(--border); }
.contact-details a:hover { color:var(--orange); }
.quote-form { background:#fff; padding:40px; border-top:6px solid var(--orange); box-shadow:var(--shadow); }
.quote-form h3 { text-transform:uppercase; font-size:2.2rem; }
.quote-form label { display:block; margin-bottom:16px; font-size:.83rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.quote-form input, .quote-form textarea { width:100%; margin-top:7px; padding:14px; border:1px solid #d5d5d0; font:inherit; text-transform:none; letter-spacing:0; border-radius:4px; }
.quote-form input:focus, .quote-form textarea:focus { outline:2px solid rgba(255,100,24,.25); border-color:var(--orange); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.quote-form small { display:block; color:var(--muted); margin-top:14px; }

footer { color:#c6c7ce; background:#090a10; padding:28px 0; }
.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:28px; font-size:.82rem; }
.footer-wrap img { width:220px; }
.footer-wrap a { color:var(--yellow); }
.whatsapp-float { position:fixed; z-index:90; right:22px; bottom:22px; width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#25d366; color:white; font-weight:900; box-shadow:0 10px 30px rgba(0,0,0,.25); }

.reveal { opacity:0; transform:translateY(24px); transition:.7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .menu-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:92px; left:0; right:0; background:var(--navy); padding:24px 30px 30px; flex-direction:column; align-items:flex-start; }
  .nav-links.open { display:flex; }
  .hero-layout, .split-layout, .sourcing-layout, .contact-layout, .why-layout { grid-template-columns:1fr; }
  .hero { min-height:auto; }
  .hero-visual { max-width:700px; }
  .product-grid, .industry-grid { grid-template-columns:repeat(2,1fr); }
  .values-grid { grid-template-columns:repeat(2,1fr); }
  .value-card { border-bottom:1px solid var(--border); }
  .why-title { position:static; }
}

@media (max-width: 640px) {
  .container { width:min(100% - 26px, 1180px); }
  .nav-wrap { height:78px; }
  .brand img { width:230px; }
  .nav-links { top:78px; }
  .hero-layout { padding:68px 0 90px; gap:44px; }
  h1 { font-size:3.5rem; }
  h2 { font-size:2.8rem; }
  .photo-panel-main { min-height:380px; }
  .floating-stat { left:16px; bottom:-38px; }
  .trust-grid { grid-template-columns:1fr 1fr; }
  .trust-grid div { border-bottom:1px solid rgba(15,16,25,.18); }
  .section { padding:74px 0; }
  .product-grid, .industry-grid, .vision-grid, .values-grid, .check-list, .form-row { grid-template-columns:1fr; }
  .value-card { border-right:0; }
  .feature-panel, .quote-form, .promise-box { padding:30px 24px; }
  .footer-wrap { flex-direction:column; text-align:center; }
}