
:root {
  --navy: #071522;
  --navy-deep: #04101b;
  --navy-soft: #0b2136;
  --blue: #1e63ff;
  --blue-light: #4b84ff;
  --ice: #f4f8fc;
  --silver: #b9c3cf;
  --steel: #718197;
  --red: #dc2d2d;
  --copper: #d86b19;
  --white: #ffffff;
  --line: rgba(185, 195, 207, 0.17);
  --shadow: 0 24px 70px rgba(2, 12, 24, 0.15);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--white);
  color: #132236;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
main, header, footer, section {
  width: 100%;
  max-width: 100%;
}
video, iframe, canvas, table { max-width: 100%; }
.shell > *, .inner-shell > *,
.split-grid > *, .contact-shell > *, .faq-layout > *,
.product-detail-grid > *, .product-content-grid > *,
.contact-page-grid > * {
  min-width: 0;
}
input, select, textarea { min-width: 0; }

.shell {
  width: min(1440px, calc(100% - 80px));
  margin-inline: auto;
}

.topbar {
  display: none;
}

.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar span, .topbar a { display: inline-flex; align-items: center; gap: 8px; }
.topbar a { margin-left: auto; transition: color .2s ease; }
.topbar a:hover { color: white; }
.topbar-rule { width: 1px; height: 14px; background: rgba(255,255,255,.25); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #e2e6eb;
  backdrop-filter: blur(18px);
}

.nav-wrap {
  height: 86px;
  display: grid;
  grid-template-columns: 230px 1fr 190px;
  align-items: center;
  gap: 28px;
}

.brand {
  border: 0;
  background: transparent;
  padding: 0;
  width: 166px;
}

.brand img, .footer-brand img {
  width: 100%;
  height: 74px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 5px 12px;
}

.nav-links { display: flex; align-items: center; justify-content: center; gap: 34px; }
.nav-links > button,
.nav-links > a {
  color: #20344c;
  background: transparent;
  border: 0;
  padding: 36px 0 34px;
  font-size: 14px;
  font-weight: 650;
  position: relative;
}

.nav-links > button:not(.mobile-quote)::after,
.nav-links > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 23px;
  height: 2px;
  background: var(--copper);
  box-shadow: none;
  transition: right .25s ease;
}
.nav-links > button:hover, .nav-links > a:hover { color: #093a82; }
.nav-links > button:hover::after, .nav-links > a:hover::after { right: 0; }
.nav-product-menu { position:relative; height:86px; display:flex; align-items:center; }
.nav-product-trigger { display:flex; align-items:center; gap:4px; height:100%; }
.nav-product-trigger > a {
  color:#20344c;
  padding:36px 0 34px;
  font-size:14px;
  font-weight:650;
}
.nav-product-trigger > button {
  width:24px;
  height:34px;
  padding:0;
  border:0;
  background:transparent;
  color:#20344c;
  font-size:18px;
  line-height:1;
}
.nav-product-trigger > button span { display:block; transform:translateY(-2px); transition:transform .2s ease; }
.nav-product-menu.open .nav-product-trigger > button span { transform:translateY(1px) rotate(180deg); }
.nav-product-dropdown {
  position:absolute;
  top:76px;
  left:50%;
  width:350px;
  transform:translate(-50%, 10px);
  background:#fff;
  border:1px solid #dce3ea;
  box-shadow:0 22px 50px rgba(7,21,34,.18);
  padding:10px;
  display:grid;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:90;
}
.nav-product-dropdown a {
  color:#18314b;
  padding:10px 12px;
  font-size:12px;
  font-weight:700;
  border-bottom:1px solid #edf0f3;
}
.nav-product-dropdown a:first-child { color:#d45f0a; }
.nav-product-dropdown a:last-child { border-bottom:0; }
.nav-product-dropdown a:hover { color:#1e63ff; background:#f5f8fb; }
.nav-product-menu:hover .nav-product-dropdown,
.nav-product-menu:focus-within .nav-product-dropdown,
.nav-product-menu.open .nav-product-dropdown {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}
.mobile-quote { display: none; }
.menu-button { display: none; }
.shared-menu-symbol { font-size:28px; line-height:1; font-weight:500; }

.btn {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 14px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--blue), #0751e6);
  color: white;
  box-shadow: 0 10px 30px rgba(30, 99, 255, .25);
}
.btn-primary:hover { box-shadow: 0 14px 38px rgba(30, 99, 255, .4); }
.btn-ghost { background: rgba(5,18,31,.54); color: white; border-color: rgba(255,255,255,.46); }
.btn-ghost:hover { border-color: var(--blue-light); background: rgba(30,99,255,.1); }
.header-quote {
  justify-self: end;
  color: var(--copper);
  background: transparent;
  border-color: var(--copper);
  box-shadow: none;
}
.header-quote:hover {
  color: white;
  background: var(--copper);
  box-shadow: 0 12px 30px rgba(216,107,25,.2);
}

.hero {
  min-height: 620px;
  height: 650px;
  max-height: 700px;
  background: #f7f6f1;
  color: #093a82;
  position: relative;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .8s ease, transform 6.8s ease;
}
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247,246,241,.99) 0%, rgba(247,246,241,.95) 31%, rgba(247,246,241,.55) 53%, rgba(247,246,241,.03) 75%),
    linear-gradient(0deg, rgba(247,246,241,.58) 0%, transparent 42%);
}
.hero-slide.active { opacity: 1; transform: scale(1); }

.blueprint-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(70, 133, 210, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 133, 210, .18) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, black 0, transparent 72%);
}
.blueprint-grid::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border: 1px solid rgba(79, 143, 222, .35);
  border-radius: 50%;
  left: -180px; bottom: -180px;
  box-shadow: 0 0 0 70px rgba(80,145,225,.04), 0 0 0 140px rgba(80,145,225,.025);
}

.hero-content {
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-bottom: 82px;
}

.hero-copy { width: min(640px, 54%); animation: heroUp .8s ease both; }
.eyebrow, .section-kicker {
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--blue-light);
  font-size: 12px;
  font-weight: 800;
  display: block;
}
.hero .eyebrow { color: var(--copper); }
.hero h1 {
  font-size: clamp(48px, 4.5vw, 68px);
  line-height: 1.03;
  letter-spacing: -.055em;
  font-weight: 800;
  margin: 22px 0 24px;
  max-width: 720px;
  color: #093a82;
}
.accent-line {
  width: 72px;
  height: 3px;
  background: var(--copper);
  box-shadow: none;
  margin-bottom: 24px;
}
.hero-copy p {
  max-width: 610px;
  color: #4f6074;
  font-size: 18px;
  line-height: 1.75;
  margin: 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.hero-actions .btn-primary {
  background: linear-gradient(135deg, #df741f, #c85a0e);
  box-shadow: 0 12px 30px rgba(216,107,25,.22);
}
.hero-actions .btn-ghost {
  color: #b95008;
  background: rgba(255,255,255,.64);
  border-color: var(--copper);
}
.hero-actions .btn-ghost:hover { color: white; background: var(--copper); }
.hero-number {
  position: absolute;
  right: 10px;
  top: 76px;
  font-size: 96px;
  font-weight: 800;
  color: rgba(9,58,130,.055);
  letter-spacing: -.08em;
}
.hero-dots {
  position: absolute;
  right: 0;
  top: 50%;
  display: grid;
  gap: 9px;
}
.hero-dots button {
  width: 26px; height: 3px;
  border: 0;
  background: rgba(9,58,130,.25);
  padding: 0;
  transition: width .3s ease, background .3s ease;
}
.hero-dots button.active { width: 44px; background: var(--copper); box-shadow: none; justify-self: end; }

.proof-bar {
  height: 82px;
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255,255,255,.88);
  border: 1px solid #d9dee5;
  border-radius: 14px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 55px rgba(26,48,76,.12);
}
.proof-bar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  color: #093a82;
  position: relative;
}
.proof-bar > div + div::before {
  content: "";
  width: 1px;
  height: 46px;
  background: #d9e0e8;
  position: absolute;
  left: 0;
}
.proof-bar svg { color: var(--copper); }
.proof-bar span { display: grid; gap: 3px; color: #758397; font-size: 12px; }
.proof-bar strong { color: #093a82; font-size: 18px; }

.section { padding: 112px 0; }
.section-kicker { color: var(--blue); margin-bottom: 15px; }
.section h2 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0;
  color: #091a2c;
}
.split-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 90px; align-items: center; }
.about-section { background: #f6f9fd; }
.about-visual { position: relative; padding: 0 0 46px 38px; }
.image-frame {
  min-height: 510px;
  background: white;
  border: 1px solid #dce5ef;
  padding: 16px;
  position: relative;
  box-shadow: var(--shadow);
}
.image-frame::before {
  content: "";
  position: absolute;
  inset: -18px auto auto -18px;
  width: 120px; height: 120px;
  border-left: 2px solid var(--blue);
  border-top: 2px solid var(--blue);
}
.image-frame img { width: 100%; height: 478px; object-fit: cover; }
.experience-card {
  position: absolute;
  bottom: 0; left: 0;
  width: 240px;
  padding: 26px;
  background: var(--blue);
  color: white;
  box-shadow: 0 18px 44px rgba(30,99,255,.28);
}
.experience-card strong { font-size: 48px; line-height: 1; display: block; }
.experience-card span { font-size: 13px; line-height: 1.4; display: block; margin-top: 7px; }
.technical-label {
  position: absolute;
  right: -27px; bottom: 3px;
  writing-mode: vertical-rl;
  letter-spacing: .16em;
  font-size: 9px;
  font-weight: 800;
  color: #8a99aa;
}
.section-copy .lead { font-size: 20px; line-height: 1.65; color: #293d54; margin: 27px 0 17px; }
.section-copy > p:not(.lead) { color: #647387; line-height: 1.8; font-size: 15px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; margin: 28px 0; }
.check-grid span { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; }
.check-grid svg { color: var(--blue); }
.text-link {
  border: 0;
  border-bottom: 1px solid #a6b5c6;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-weight: 750;
  color: #132a44;
}
.text-link:hover { color: var(--blue); border-color: var(--blue); }

.products-section { background: white; }
.section-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 52px;
}
.section-heading > p { color: #69788b; line-height: 1.8; margin: 0 0 5px; max-width: 560px; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.product-card {
  border: 1px solid #dce5ef;
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border .3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.product-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: transparent; }
.product-image {
  display: block;
  border: 0;
  padding: 0;
  background: #edf2f7;
  width: 100%;
  height: 220px;
  flex: 0 0 220px;
  position: relative;
  overflow: hidden;
}
.product-image img { display:block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 14px; transition: transform .5s ease; }
.product-card:hover .product-image img { transform: scale(1.045); }
.product-index {
  position: absolute;
  right: 14px; top: 14px;
  color: #8da0b4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}
.product-info { padding: 20px 20px 22px; display:flex; flex:1; flex-direction:column; align-items:flex-start; }
.product-info > span { color: var(--blue); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; }
.product-info h3 { color: #0c2137; font-size: 18px; line-height: 1.35; margin: 9px 0 9px; }
.product-info p {
  color: #718095;
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 17px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-info button,
.product-info > a {
  border: 1px solid #d8610b;
  background: #d8610b;
  padding: 10px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.product-info button:hover, .product-info > a:hover { color: #fff; background:var(--blue); border-color:var(--blue); }

.why-section {
  background: var(--navy);
  color: white;
  position: relative;
  overflow: hidden;
}
.why-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(77,137,208,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(77,137,208,.1) 1px,transparent 1px);
  background-size: 72px 72px;
  opacity: .35;
}
.why-section .shell { position: relative; z-index: 1; }
.section-heading.light h2 { color: white; }
.section-heading.light > p { color: #9cafc3; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255,255,255,.15); }
.why-card {
  padding: 36px 30px 38px;
  min-height: 320px;
  background: rgba(8,28,46,.6);
  position: relative;
  transition: background .3s ease;
}
.why-card + .why-card { border-left: 1px solid rgba(255,255,255,.15); }
.why-card:hover { background: rgba(30,99,255,.14); }
.why-card > span { position: absolute; top: 20px; right: 20px; color: #51677e; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.why-card svg { color: var(--blue-light); margin-top: 35px; }
.why-card h3 { margin: 28px 0 13px; font-size: 20px; }
.why-card p { margin: 0; color: #9eb0c4; font-size: 13px; line-height: 1.75; }

.purpose-section { background: #f4f7fb; }
.purpose-intro { text-align: center; max-width: 700px; margin: 0 auto 54px; }
.purpose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.purpose-card {
  background: white;
  min-height: 310px;
  padding: 38px;
  box-shadow: 0 16px 60px rgba(12,35,60,.07);
  position: relative;
  overflow: hidden;
}
.purpose-card > span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.purpose-card h3 { font-size: 29px; margin: 55px 0 15px; color: #0b2139; }
.purpose-card p { color: #6c7c90; font-size: 14px; line-height: 1.8; margin: 0; }
.purpose-line { position: absolute; height: 3px; background: var(--blue); left: 0; right: 78%; bottom: 0; transition: right .35s ease; }
.purpose-card:hover .purpose-line { right: 0; }

.gallery-section { background: white; overflow: hidden; }
.gallery-slider {
  width: 100%;
  overflow: hidden;
  padding: 4px 0 12px;
  mask-image: linear-gradient(90deg, transparent 0, black 3%, black 97%, transparent 100%);
}
.gallery-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: galleryMarquee 42s linear infinite;
  will-change: transform;
}
.gallery-slider:hover .gallery-track { animation-play-state: paused; }
.gallery-item {
  width: clamp(290px, 27vw, 390px);
  height: 270px;
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: #e7edf4;
  overflow: hidden;
  position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,15,27,.78),transparent 55%); opacity:.3; transition:opacity .3s ease; }
.gallery-item > span { position: absolute; left: 18px; bottom: 16px; z-index: 2; color: white; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(7px); transition: .3s ease; }
.gallery-item:hover img { transform: scale(1.055); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover > span { opacity: 1; transform: none; }

.video-section { background: #06131f; color: white; overflow: hidden; }
.video-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
.video-heading h2 { color: white; }
.slider-controls { display: flex; gap: 9px; }
.slider-controls button { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: white; font-size: 20px; }
.slider-controls button:hover { background: var(--blue); border-color: var(--blue); }
.video-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; animation: trackIn .5s ease both; }
.video-card {
  height: 330px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0d2032;
  color: white;
  padding: 0;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.video-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,13,23,.95),rgba(3,13,23,.05) 65%); }
.video-card:hover img { transform: scale(1.04); filter: brightness(.8); }
.play { position:absolute; z-index:2; left:22px; top:22px; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--blue); box-shadow:0 12px 28px rgba(30,99,255,.4); }
.video-meta { position:absolute; z-index:2; left:23px; right:23px; bottom:23px; display:grid; gap:7px; }
.video-meta small { color:#7fa8ff; letter-spacing:.16em; font-size:9px; font-weight:800; }
.video-meta strong { font-size:19px; }
.video-progress { height: 2px; background: rgba(255,255,255,.13); margin-top: 34px; }
.video-progress span { display:block; height:100%; background:var(--blue); transition:width .4s ease; }

.testimonials-section { background: #f2f6fa; }
.testimonial-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
.testimonial-title { align-self: center; }
.testimonial-title p { color:#6f7e91; line-height:1.75; }
.testimonial-slider { min-width: 0; align-self: center; }
.testimonial-slide { opacity: 1; }
.testimonial-card {
  background: white;
  min-height: 220px;
  padding: 38px 42px;
  border-left: 3px solid var(--blue);
  box-shadow: 0 14px 44px rgba(11,33,56,.07);
  display: grid;
  grid-template-columns: 44px 1fr 150px;
  align-items: center;
  gap: 24px;
}
.testimonial-card > svg { color: #92a3b7; }
.testimonial-card > p { color:#44576d; line-height:1.75; margin:0; font-size:14px; }
.testimonial-card > div { display:grid; gap:5px; border-left:1px solid #e0e7ef; padding-left:24px; }
.testimonial-card strong { color:#10273f; }
.testimonial-card span { color:#8493a4; font-size:11px; }
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 25px;
}
.testimonial-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #8fa2b8;
  background: transparent;
  transition: width .25s ease, border-radius .25s ease, background .25s ease;
}
.testimonial-dots button.active {
  width: 28px;
  border-radius: 10px;
  border-color: var(--blue);
  background: var(--blue);
}

.faq-section { background: white; }
.faq-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:90px; align-items:start; }
.faq-copy p { color:#6b7a8d; line-height:1.75; margin:22px 0 28px; }
.faq-list { border-top:1px solid #dce4ed; }
.faq-list article { border-bottom:1px solid #dce4ed; }
.faq-list article > button { border:0; background:white; width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; padding:23px 3px; color:#132a43; font-weight:750; }
.faq-list article > button i { font-style:normal; color:var(--blue); font-size:24px; font-weight:400; }
.faq-list article > div { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-list article > div > p { overflow:hidden; margin:0; color:#6f7e90; line-height:1.75; font-size:14px; }
.faq-list article.open > div { grid-template-rows:1fr; }
.faq-list article.open > div > p { padding:0 30px 24px 3px; }

.contact-section { background: linear-gradient(135deg, #071522, #0a2948); color:white; position:relative; overflow:hidden; }
.contact-section::after { content:""; position:absolute; width:550px; height:550px; border-radius:50%; border:1px solid rgba(72,133,215,.18); right:-180px; top:-250px; box-shadow:0 0 0 80px rgba(74,136,215,.025),0 0 0 160px rgba(74,136,215,.02); }
.contact-shell { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; position:relative; z-index:1; }
.contact-copy h2 { color:white; }
.contact-copy > p { color:#a4b5c8; line-height:1.75; max-width:600px; }
.contact-details { margin-top:34px; display:grid; gap:20px; }
.contact-details > a, .contact-details > div { display:flex; gap:16px; align-items:flex-start; color:white; }
.contact-details svg { color:var(--blue-light); flex:none; margin-top:3px; }
.contact-details span { display:grid; gap:4px; }
.contact-details small { color:#8093aa; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.contact-details strong { font-size:14px; line-height:1.5; }
.form-panel { background:white; color:#14273d; padding:34px; box-shadow:0 30px 80px rgba(0,0,0,.25); }
.form-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; font-size:11px; font-weight:800; letter-spacing:.16em; color:#476078; }
.form-panel-head b { font-size:40px; color:#e6edf5; letter-spacing:-.08em; }
.enquiry-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.enquiry-form label { display:grid; gap:8px; color:#53677d; font-size:11px; font-weight:700; }
.enquiry-form .full { grid-column:1 / -1; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  width:100%;
  border:1px solid #d7e0e9;
  background:#f7f9fc;
  padding:13px 14px;
  color:#12273e;
  border-radius:4px;
  outline:none;
}
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,99,255,.08); }
.enquiry-form textarea { resize:vertical; }
.enquiry-form button { margin-top:2px; }
.enquiry-form.compact { display:grid; grid-template-columns:1fr 1fr; }

footer { background:#030b13; color:#96a7ba; padding:70px 0 22px; }
.footer-grid { display:grid; grid-template-columns:1.15fr .55fr 1fr .85fr; gap:70px; }
.footer-brand img { width:160px; }
.footer-brand p { line-height:1.75; max-width:310px; font-size:13px; }
footer h3 { color:white; font-size:14px; margin:5px 0 20px; }
footer .footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
footer button, footer a { background:transparent; border:0; color:#96a7ba; padding:0; text-align:left; font-size:12px; line-height:1.55; transition:color .2s ease; }
footer button:hover, footer a:hover { color:white; }
footer p { font-size:12px; line-height:1.6; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:52px; padding-top:21px; display:flex; justify-content:space-between; font-size:11px; }
.footer-bottom a { color:#ccd8e5; }

.floating-actions { position:fixed; right:17px; bottom:20px; z-index:45; display:grid; gap:9px; }
.floating-actions a {
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 12px 30px rgba(7,21,34,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.floating-actions a:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 16px 34px rgba(7,21,34,.32); }
.floating-actions svg { display:block; width:25px; height:25px; }
.float-whatsapp { background:#16b85d; }
.float-call { background:#1e63ff; }
.float-call svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(1,8,15,.82);
  backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  padding:24px;
  animation:fadeIn .22s ease both;
}
.quote-modal, .product-modal {
  width:min(1020px, 96vw);
  max-width:calc(100vw - 24px);
  max-height:92vh;
  overflow:auto hidden;
  background:white;
  position:relative;
  display:grid;
  grid-template-columns:.84fr 1.16fr;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.modal-close {
  position:absolute;
  z-index:5;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  border:1px solid #d8e1eb;
  background:white;
  display:grid;
  place-items:center;
  color:#12263e;
}
.modal-copy { padding:58px 42px; background:var(--navy); color:white; }
.modal-copy h2 { color:white; font-size:39px; margin:18px 0; }
.modal-copy p { color:#9fb1c5; line-height:1.75; }
.modal-copy > div { display:flex; gap:10px; align-items:center; color:#c8d4e1; font-size:12px; margin-top:35px; }
.modal-copy > div svg { color:var(--blue-light); }
.modal-form { padding:56px 54px 40px; }
.product-modal { grid-template-columns:1fr 1fr; }
.product-modal-image { background:#edf2f7; padding:40px; display:grid; place-items:center; }
.product-modal-image img { max-height:540px; width:100%; object-fit:contain; mix-blend-mode:multiply; }
.product-modal-copy { padding:62px 48px 50px; }
.product-modal-copy h2 { font-size:40px; line-height:1.12; margin:15px 0 18px; color:#0d2138; }
.product-modal-copy > p { color:#6e7f92; line-height:1.75; }
.product-modal-copy ul { list-style:none; padding:0; margin:25px 0 31px; display:grid; gap:12px; }
.product-modal-copy li { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:650; }
.product-modal-copy li svg { color:var(--blue); }
.media-backdrop { padding:60px; }
.media-close { position:absolute; right:24px; top:22px; border:0; color:white; background:transparent; z-index:2; }
.lightbox-image { max-width:94vw; max-height:86vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.video-modal { width:min(1100px, 92vw); color:white; }
.video-modal video { display:block; width:100%; max-height:76vh; background:black; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.video-modal h3 { margin:18px 0 0; font-size:19px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }

@keyframes heroUp { from { opacity:0; transform:translateY(22px); } }
@keyframes trackIn { from { opacity:.4; transform:translateX(28px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } }
@keyframes galleryMarquee { to { transform: translateX(calc(-50% - 8px)); } }

@media (max-width: 1120px) {
  .shell { width:min(100% - 48px, 1060px); }
  .nav-wrap { grid-template-columns:180px 1fr 150px; gap:18px; }
  .nav-links { gap:21px; }
  .brand { width:145px; }
  .header-quote { padding-inline:15px; }
  .hero-copy { width:61%; }
  .proof-bar { width:calc(100% - 48px); }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .why-card:nth-child(3) { border-left:0; border-top:1px solid rgba(255,255,255,.15); }
  .why-card:nth-child(4) { border-top:1px solid rgba(255,255,255,.15); }
  .split-grid, .contact-shell { gap:50px; }
  .testimonial-layout { grid-template-columns:1fr; gap:45px; }
  .testimonial-title { max-width:650px; }
}

@media (max-width: 820px) {
  html { scroll-padding-top:76px; }
  .shell { width:calc(100% - 32px); }
  .topbar { height:auto; min-height:32px; }
  .topbar-inner { justify-content:center; padding:7px 0; }
  .topbar-inner > span:nth-of-type(2), .topbar-rule, .topbar a { display:none; }
  .site-header { top:0; }
  .nav-wrap { height:76px; grid-template-columns:1fr auto; }
  .brand { width:126px; }
  .brand img { height:60px; }
  .header-quote { display:none; }
  .menu-button { display:grid; place-items:center; color:#093a82; width:44px; height:44px; background:#f7f8fa; border:1px solid #d7dde5; }
  .nav-links {
    position:absolute;
    top:76px;
    left:0; right:0;
    background:#ffffff;
    border-top:1px solid #dfe5ec;
    box-shadow:0 20px 45px rgba(7,21,34,.18);
    display:grid;
    gap:0;
    padding:0 18px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:max-height .35s ease, opacity .25s ease, visibility .25s;
  }
  .nav-links.open { max-height:560px; padding-block:11px 20px; opacity:1; visibility:visible; }
  .nav-links > button, .nav-links > a {
    padding:15px 4px;
    text-align:left;
    color:#12304f;
    border-bottom:1px solid #e5eaf0;
    font-weight:700;
  }
  .nav-links > button::after, .nav-links > a::after { display:none; }
  .nav-links.open { max-height:calc(100vh - 76px); overflow-y:auto; }
  .nav-product-menu { height:auto; display:block; border-bottom:1px solid #e5eaf0; }
  .nav-product-trigger { height:auto; }
  .nav-product-trigger > a {
    flex:1;
    color:#12304f;
    padding:15px 4px;
    font-size:14px;
    font-weight:700;
  }
  .nav-product-trigger > button {
    width:46px;
    min-height:48px;
    color:#12304f;
    border-left:1px solid #e5eaf0;
  }
  .nav-product-dropdown {
    position:static;
    width:auto;
    transform:none !important;
    border:0;
    border-top:1px solid #e5eaf0;
    box-shadow:none;
    padding:0 0 8px 14px;
    display:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    background:#f7f9fb;
  }
  .nav-product-menu:hover .nav-product-dropdown,
  .nav-product-menu:focus-within .nav-product-dropdown { display:none; }
  .nav-product-menu.open .nav-product-dropdown { display:grid; }
  .nav-product-dropdown a { padding:11px 10px; font-size:12px; }
  .mobile-quote { display:flex !important; align-items:center; justify-content:space-between; color:white !important; background:var(--copper) !important; padding:14px 16px !important; margin-top:10px; border:0 !important; border-radius:6px; }
  .hero { min-height:620px; height:640px; max-height:680px; }
  .hero-slide { background-position:74% center; }
  .hero-slide::after {
    background:
      linear-gradient(90deg,rgba(247,246,241,.96) 0%,rgba(247,246,241,.83) 42%,rgba(247,246,241,.38) 74%,rgba(247,246,241,.08) 100%),
      linear-gradient(0deg,rgba(247,246,241,.66),transparent 48%);
  }
  .hero-content { align-items:flex-start; padding-top:72px; padding-bottom:145px; }
  .hero-copy { width:78%; max-width:470px; }
  .hero h1 { font-size:clamp(38px,7.2vw,48px); }
  .hero-copy p { font-size:14px; max-width:430px; line-height:1.65; }
  .hero-number { top:20px; right:16px; font-size:58px; }
  .hero-dots { top:auto; bottom:128px; right:5px; }
  .proof-bar { bottom:14px; height:98px; width:calc(100% - 32px); }
  .proof-bar strong { font-size:15px; }
  .proof-bar > div { gap:10px; padding:0 11px; }
  .proof-bar svg { width:27px; }
  .section { padding:80px 0; }
  .split-grid, .section-heading, .contact-shell, .faq-layout { grid-template-columns:1fr; }
  .split-grid { gap:58px; }
  .section-heading { gap:22px; margin-bottom:38px; }
  .section-heading > p { max-width:650px; }
  .image-frame { min-height:410px; }
  .image-frame img { height:385px; }
  .purpose-grid { grid-template-columns:1fr; }
  .gallery-item { width:340px; height:235px; }
  .video-track { grid-template-columns:repeat(2,1fr); }
  .video-card:nth-child(3) { display:none; }
  .testimonial-card { grid-template-columns:38px 1fr; }
  .testimonial-card > div { grid-column:2; border:0; padding:0; }
  .contact-shell { gap:48px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px) {
  html, body { overflow-x:hidden; }
  body > *, main, header, footer, section { max-width:100%; overflow-x:clip; }
  .shell { width:calc(100% - 28px); }
  .topbar-inner { font-size:10px; }
  .hero { min-height:600px; height:620px; }
  .hero-content { min-height:600px; padding-top:52px; padding-bottom:145px; }
  .hero-slide { background-position:72% center; }
  .hero-slide::after {
    background:
      linear-gradient(90deg,rgba(247,246,241,.92) 0%,rgba(247,246,241,.74) 45%,rgba(247,246,241,.28) 82%,rgba(247,246,241,.07) 100%),
      linear-gradient(0deg,rgba(247,246,241,.58),transparent 48%);
  }
  .hero-copy { width:86%; }
  .eyebrow { font-size:10px; }
  .hero h1 { font-size:37px; margin-top:15px; }
  .hero-copy p { font-size:13px; line-height:1.58; }
  .accent-line { margin-bottom:18px; }
  .hero-actions { gap:8px; margin-top:20px; }
  .hero-actions .btn { width:calc(50% - 4px); min-height:44px; padding:0 8px; font-size:11px; gap:6px; }
  .proof-bar { height:116px; grid-template-columns:1fr; padding:7px 13px; }
  .proof-bar > div { justify-content:flex-start; padding:6px 7px; }
  .proof-bar > div + div::before { width:100%; height:1px; top:0; }
  .proof-bar svg { width:22px; height:22px; }
  .proof-bar span { display:flex; align-items:center; gap:8px; }
  .proof-bar strong { font-size:14px; }
  .hero-dots { bottom:132px; }
  .section { padding:66px 0; }
  .section h2 { font-size:36px; }
  .about-visual { padding-left:17px; }
  .image-frame { min-height:330px; padding:9px; }
  .image-frame img { height:310px; }
  .experience-card { width:200px; padding:19px; }
  .experience-card strong { font-size:39px; }
  .check-grid { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .product-image { height:220px; flex-basis:220px; }
  .why-grid { grid-template-columns:1fr; }
  .why-card + .why-card { border-left:0; border-top:1px solid rgba(255,255,255,.15); }
  .why-card { min-height:auto; padding:29px 26px; }
  .why-card svg { margin-top:10px; }
  .gallery-item { width:78vw; height:205px; }
  .video-heading { align-items:flex-start; }
  .video-track { grid-template-columns:1fr; }
  .video-card { height:285px; }
  .video-card:nth-child(2), .video-card:nth-child(3) { display:none; }
  .testimonial-card { min-height:285px; padding:26px 23px; display:block; }
  .testimonial-card > svg { margin-bottom:13px; }
  .testimonial-card > div { margin-top:18px; border-top:1px solid #e0e7ef; padding-top:15px; }
  .faq-layout { gap:42px; }
  .form-panel { padding:24px 18px; }
  .enquiry-form, .enquiry-form.compact { grid-template-columns:1fr; }
  .enquiry-form .full { grid-column:auto; }
  .footer-grid { grid-template-columns:1fr; gap:34px; }
  .footer-bottom { display:grid; gap:9px; }
  .modal-backdrop {
    padding:8px;
    place-items:start center;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .quote-modal, .product-modal {
    width:100%;
    max-width:calc(100vw - 16px);
    grid-template-columns:1fr;
    max-height:none;
    margin:auto 0;
    overflow-x:hidden;
  }
  .quote-modal .modal-copy {
    padding:22px 58px 16px 18px;
    min-height:0;
  }
  .quote-modal .modal-copy .section-kicker { font-size:9px; }
  .quote-modal .modal-copy h2 {
    font-size:24px;
    line-height:1.18;
    margin:8px 0 0;
    padding:0;
  }
  .quote-modal .modal-copy p,
  .quote-modal .modal-copy > div { display:none; }
  .quote-modal .modal-form { padding:17px 16px 18px; }
  .quote-modal .enquiry-form.compact { gap:11px; }
  .quote-modal .enquiry-form label { gap:5px; }
  .quote-modal .enquiry-form input,
  .quote-modal .enquiry-form select { min-height:44px; padding:10px 12px; }
  .quote-modal .enquiry-form .btn { min-height:46px; margin-top:2px; }
  .modal-close { top:10px; right:10px; width:36px; height:36px; }
  .product-modal-image { min-height:250px; padding:25px; }
  .product-modal-image img { max-height:270px; }
  .product-modal-copy { padding:34px 24px; }
  .product-modal-copy h2 { font-size:31px; }
  .media-backdrop { padding:48px 13px 20px; }
  .floating-actions { right:12px; bottom:13px; }
  .floating-actions a { width:46px; height:46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* Multi-page SEO experience */
.inner-shell { width:min(1240px, calc(100% - 48px)); margin-inline:auto; }
.inner-topbar { background:#071522; color:#c8d5e2; font-size:12px; }
.inner-topbar .inner-shell { min-height:34px; display:flex; align-items:center; justify-content:space-between; }
.inner-topbar a { color:#fff; }
.inner-header { position:sticky; top:0; z-index:80; background:rgba(255,255,255,.98); border-bottom:1px solid #e0e5eb; backdrop-filter:blur(14px); }
.inner-nav { min-height:82px; display:grid; grid-template-columns:190px 1fr 150px; align-items:center; gap:28px; }
.inner-brand { width:150px; }
.inner-brand img { width:100%; height:66px; object-fit:contain; }
.inner-links { display:flex; align-items:center; justify-content:center; gap:30px; }
.inner-links > a { color:#1a3048; font-size:14px; font-weight:700; padding:31px 0; position:relative; }
.inner-links > a::after { content:""; position:absolute; height:2px; left:0; right:100%; bottom:20px; background:#d86b19; transition:right .2s ease; }
.inner-links > a:hover::after { right:0; }
.inner-product-menu { position:relative; height:82px; display:flex; align-items:center; }
.inner-product-trigger { height:100%; display:flex; align-items:center; gap:4px; }
.inner-product-trigger > a { color:#1a3048; font-size:14px; font-weight:700; padding:31px 0; }
.inner-product-trigger > button {
  width:24px;
  height:34px;
  padding:0;
  border:0;
  background:transparent;
  color:#1a3048;
  font-size:18px;
}
.inner-product-trigger > button span { display:block; transform:translateY(-2px); transition:transform .2s ease; }
.inner-product-menu.open .inner-product-trigger > button span { transform:translateY(1px) rotate(180deg); }
.inner-product-dropdown {
  position:absolute;
  top:74px;
  left:50%;
  width:350px;
  transform:translate(-50%,10px);
  padding:10px;
  display:grid;
  background:#fff;
  border:1px solid #dce3ea;
  box-shadow:0 22px 50px rgba(7,21,34,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:95;
}
.inner-product-dropdown a {
  color:#18314b;
  padding:10px 12px;
  border-bottom:1px solid #edf0f3;
  font-size:12px;
  font-weight:700;
}
.inner-product-dropdown a:first-child { color:#d45f0a; }
.inner-product-dropdown a:last-child { border-bottom:0; }
.inner-product-dropdown a:hover { color:#1e63ff; background:#f5f8fb; }
.inner-product-menu:hover .inner-product-dropdown,
.inner-product-menu:focus-within .inner-product-dropdown,
.inner-product-menu.open .inner-product-dropdown {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.inner-quote, .inner-mobile-quote, .inner-submit, .product-order-actions button, .product-order-actions a, .inner-primary-link {
  border:0; background:linear-gradient(135deg,#d86b19,#b94c06); color:#fff; min-height:48px; padding:0 20px;
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; border-radius:5px;
  box-shadow:0 12px 28px rgba(216,107,25,.18);
}
.inner-mobile-quote, .inner-menu { display:none; }
.page-hero { background:linear-gradient(125deg,#061522 0%,#0a2742 70%,#123c60 100%); color:#fff; padding:92px 0 86px; position:relative; overflow:hidden; }
.page-hero::after { content:"CEI"; position:absolute; right:6%; top:-35px; color:rgba(255,255,255,.035); font-size:240px; line-height:1; font-weight:900; }
.page-hero .inner-shell { position:relative; z-index:1; }
.inner-kicker { color:#ff8730; text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:850; }
.page-hero h1 { max-width:920px; margin:17px 0 18px; font-size:clamp(43px,5vw,72px); letter-spacing:-.045em; line-height:1.02; }
.page-hero p { color:#b9c9d8; max-width:760px; margin:0; font-size:18px; line-height:1.7; }
.inner-section { padding:90px 0; }
.soft-section { background:#f1f5f8; }
.prose-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:76px; align-items:start; }
.rich-copy { max-width:850px; }
.rich-copy h2, .value-panel h2, .seo-intro h2, .contact-card h2, .contact-form-card h2 { color:#0d233a; font-size:clamp(28px,3vw,42px); line-height:1.13; letter-spacing:-.03em; margin:0 0 22px; }
.rich-copy h2:not(:first-child) { margin-top:46px; }
.rich-copy p, .seo-intro p { color:#596c81; font-size:16px; line-height:1.9; margin:0 0 20px; }
.rich-copy a { color:#0b5de9; text-decoration:underline; font-weight:700; }
.value-panel { background:#071522; color:#fff; padding:48px; position:sticky; top:110px; }
.value-panel > span, .product-side-card > span { color:#ff8730; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:850; }
.value-panel h2 { color:#fff; margin-top:15px; }
.value-panel ul { padding:0; margin:28px 0; list-style:none; display:grid; gap:15px; color:#c6d2df; }
.value-panel li::before { content:"✓"; color:#ff8730; margin-right:10px; }
.three-values { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.three-values article { background:#fff; padding:38px; border-top:3px solid #1e63ff; }
.three-values b { color:#d86b19; text-transform:uppercase; letter-spacing:.14em; font-size:11px; }
.three-values h2 { color:#0d233a; font-size:28px; margin:14px 0; }
.three-values p { color:#68798c; line-height:1.75; margin:0; }
.seo-intro { max-width:800px; margin-bottom:42px; }
.seo-product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.seo-product-card { border:1px solid #dfe6ed; background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.seo-product-card:hover { transform:translateY(-5px); box-shadow:0 22px 55px rgba(7,21,34,.12); }
.seo-product-image { height:285px; background:#f3f6f8; display:grid; place-items:center; overflow:hidden; }
.seo-product-image img { width:100%; height:100%; object-fit:contain; padding:20px; mix-blend-mode:multiply; transition:transform .35s ease; }
.seo-product-card:hover img { transform:scale(1.035); }
.seo-product-card > div { padding:25px; }
.seo-product-card > div > span { color:#1e63ff; text-transform:uppercase; font-weight:800; font-size:10px; letter-spacing:.16em; }
.seo-product-card h2 { font-size:20px; line-height:1.3; margin:10px 0; color:#0d233a; }
.seo-product-card p { min-height:66px; color:#6a7b8e; line-height:1.65; font-size:13px; }
.seo-read-more { color:#d45f0a; font-weight:800; font-size:13px; }
.seo-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.seo-gallery img { width:100%; height:310px; object-fit:cover; border:1px solid #dce3ea; }
.seo-video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.seo-video-grid article { background:#071522; color:#fff; padding:12px 12px 23px; }
.seo-video-grid video { width:100%; height:360px; background:#000; object-fit:contain; }
.seo-video-grid h2 { font-size:19px; margin:18px 10px 0; }
.contact-page-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:30px; }
.contact-card, .contact-form-card { border:1px solid #dfe6ed; padding:45px; }
.contact-card { background:#071522; color:#fff; }
.contact-card h2 { color:#fff; margin-top:14px; }
.contact-card > a:not(.inner-whatsapp-order), .contact-card > p { display:flex; flex-direction:column; gap:7px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); color:#c3d0dc; line-height:1.6; }
.contact-card b { color:#fff; }
.inner-order-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:25px; }
.inner-order-form label { display:grid; gap:8px; color:#344a61; font-weight:750; font-size:12px; }
.inner-order-form input, .inner-order-form select, .inner-order-form textarea { width:100%; border:1px solid #ccd6e0; background:#fff; min-height:50px; padding:12px 14px; color:#12273e; border-radius:3px; }
.inner-order-form textarea { resize:vertical; }
.inner-order-form .wide { grid-column:1/-1; }
.inner-whatsapp-order { background:#18aa5d; color:#fff; min-height:48px; padding:0 20px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; margin-top:14px; border-radius:5px; }
.inner-footer { background:#061522; color:#9fb0c1; padding-top:65px; }
.inner-footer-grid { display:grid; grid-template-columns:1.15fr .65fr 1.2fr 1fr; gap:55px; }
.inner-footer-grid > div { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.inner-footer-logo { width:150px; height:72px; object-fit:contain; background:#fff; padding:6px; border-radius:5px; }
.inner-footer h2 { color:#fff; font-size:14px; margin:3px 0 15px; }
.inner-footer a { font-size:12px; line-height:1.6; }
.inner-footer a:hover { color:#fff; }
.inner-footer p { font-size:12px; line-height:1.7; margin:4px 0; }
.inner-copyright { border-top:1px solid rgba(255,255,255,.1); padding:22px 0; margin-top:45px; font-size:11px; }
.inner-floats { position:fixed; right:18px; bottom:18px; z-index:85; display:grid; gap:10px; }
.inner-floats a { width:52px; height:52px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:900; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.inner-wa { background:#18b55e; font-size:12px; }
.inner-call { background:#1e63ff; font-size:21px; }
.inner-modal-backdrop { position:fixed; inset:0; z-index:120; background:rgba(2,10,18,.83); backdrop-filter:blur(8px); display:grid; place-items:center; padding:20px; }
.inner-modal { width:min(760px,96vw); max-height:94vh; overflow:auto; background:#fff; padding:44px; position:relative; box-shadow:0 30px 90px rgba(0,0,0,.4); }
.inner-modal-close { position:absolute; top:12px; right:14px; width:38px; height:38px; border:1px solid #dbe2e9; background:#fff; color:#0d233a; font-size:25px; }
.inner-modal h2 { color:#0d233a; font-size:34px; margin:12px 0; }
.inner-modal > p { color:#67798c; line-height:1.7; margin:0; }
.product-detail-hero { background:#f5f4ee; padding:70px 0; }
.product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:#728194; font-size:12px; margin-bottom:40px; }
.breadcrumbs a { color:#0c5cd9; }
.product-detail-grid h1 { color:#0b3978; font-size:clamp(42px,5vw,68px); line-height:1.04; letter-spacing:-.045em; margin:15px 0 20px; }
.product-detail-grid > div > p { color:#52667b; font-size:17px; line-height:1.8; }
.product-detail-image { height:520px; background:#fff; border:1px solid #dce3e8; display:grid; place-items:center; padding:28px; }
.product-detail-image img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.product-order-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.product-order-actions a { background:#18aa5d; }
.product-content-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:70px; align-items:start; }
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0; list-style:none; }
.feature-list li { background:#eff4f8; color:#203a54; padding:14px 16px; font-weight:700; font-size:13px; }
.feature-list li::before { content:"✓"; color:#1e63ff; margin-right:9px; }
.twenty-lines { padding-left:24px; display:grid; gap:10px; color:#52667b; line-height:1.65; }
.twenty-lines li::marker { color:#d86b19; font-weight:800; }
.product-side-card { position:sticky; top:110px; background:#071522; color:#cbd6e1; padding:35px; }
.product-side-card h2 { color:#fff; font-size:27px; margin:14px 0 22px; }
.product-side-card p { border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:11px; font-size:13px; }
.product-side-card .product-order-actions { display:grid; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.related-grid a { background:#fff; padding:16px 16px 24px; }
.related-grid img { width:100%; height:230px; object-fit:contain; mix-blend-mode:multiply; background:#f3f6f8; }
.related-grid h2 { color:#0d233a; font-size:20px; margin:18px 0 8px; }
.related-grid span { color:#d45f0a; font-size:13px; font-weight:800; }

@media (max-width: 900px) {
  .inner-nav { grid-template-columns:1fr auto; min-height:74px; }
  .inner-brand { width:130px; }
  .inner-brand img { height:58px; }
  .inner-quote { display:none; }
  .inner-menu { display:grid; width:44px; height:44px; place-content:center; gap:5px; background:#fff; border:1px solid #ccd5de; }
  .inner-menu span { display:block; width:22px; height:2px; background:#102c48; }
  .inner-links { position:absolute; top:74px; left:0; right:0; display:grid; gap:0; background:#fff; padding:0 20px; box-shadow:0 24px 45px rgba(7,21,34,.18); max-height:0; overflow:hidden; opacity:0; visibility:hidden; transition:.3s ease; }
  .inner-links.open { max-height:540px; opacity:1; visibility:visible; padding-block:10px 20px; }
  .inner-links > a { color:#102c48 !important; padding:15px 4px; border-bottom:1px solid #e3e8ed; font-size:15px; }
  .inner-links > a::after { display:none; }
  .inner-links.open { max-height:calc(100vh - 74px); overflow-y:auto; }
  .inner-product-menu { height:auto; display:block; border-bottom:1px solid #e3e8ed; }
  .inner-product-trigger { height:auto; }
  .inner-product-trigger > a {
    flex:1;
    color:#102c48;
    padding:15px 4px;
    font-size:15px;
    font-weight:700;
  }
  .inner-product-trigger > button {
    width:46px;
    min-height:48px;
    color:#102c48;
    border-left:1px solid #e3e8ed;
  }
  .inner-product-dropdown {
    position:static;
    width:auto;
    transform:none !important;
    display:none;
    padding:0 0 8px 14px;
    border:0;
    border-top:1px solid #e3e8ed;
    box-shadow:none;
    background:#f7f9fb;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .inner-product-menu:hover .inner-product-dropdown,
  .inner-product-menu:focus-within .inner-product-dropdown { display:none; }
  .inner-product-menu.open .inner-product-dropdown { display:grid; }
  .inner-product-dropdown a { padding:11px 10px; font-size:12px; }
  .inner-mobile-quote { display:flex; width:100%; margin-top:10px; }
  .prose-grid, .contact-page-grid, .product-detail-grid, .product-content-grid { grid-template-columns:1fr; }
  .value-panel, .product-side-card { position:static; }
  .three-values, .seo-product-grid, .seo-gallery { grid-template-columns:repeat(2,1fr); }
  .inner-footer-grid { grid-template-columns:1fr 1fr; }
  .product-detail-image { height:430px; grid-row:1; }
  .product-detail-grid { gap:38px; }
}

@media (max-width: 560px) {
  .product-grid { grid-template-columns:1fr; }
  .product-image { height:240px; flex-basis:240px; }
  .product-info { padding:19px 18px 21px; }
  .inner-shell { width:calc(100% - 28px); }
  .inner-topbar .inner-shell { font-size:10px; }
  .inner-topbar a { display:none; }
  .page-hero { padding:66px 0 62px; }
  .page-hero h1 { font-size:42px; }
  .page-hero p { font-size:15px; }
  .inner-section { padding:64px 0; }
  .three-values, .seo-product-grid, .seo-gallery, .seo-video-grid, .inner-footer-grid, .inner-order-form, .related-grid { grid-template-columns:1fr; }
  .inner-order-form .wide { grid-column:auto; }
  .seo-product-image { height:260px; }
  .seo-gallery img { height:270px; }
  .seo-video-grid video { height:255px; }
  .contact-card, .contact-form-card { padding:30px 20px; }
  .inner-modal-backdrop {
    padding:8px;
    place-items:start center;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .inner-modal {
    width:100%;
    max-width:calc(100vw - 16px);
    max-height:none;
    margin:auto 0;
    padding:25px 16px 18px;
    overflow-x:hidden;
  }
  .inner-modal h2 { font-size:25px; line-height:1.18; padding-right:32px; }
  .inner-modal > p { font-size:13px; line-height:1.55; }
  .inner-modal .inner-order-form { gap:11px; margin-top:18px; }
  .inner-modal .inner-order-form input,
  .inner-modal .inner-order-form select { min-height:44px; padding:10px 12px; }
  .inner-modal-close { top:9px; right:9px; }
  .product-detail-hero { padding:44px 0; }
  .product-detail-grid h1 { font-size:39px; }
  .product-detail-image { height:320px; padding:18px; }
  .breadcrumbs { margin-bottom:28px; }
  .product-order-actions { display:grid; }
  .feature-list { grid-template-columns:1fr; }
  .inner-floats { right:11px; bottom:12px; }
  .inner-floats a { width:46px; height:46px; }
}

@media (max-width: 390px) {
  .hero h1 { font-size:34px; }
  .hero-actions { flex-wrap:wrap; }
  .hero-actions .btn { width:100%; }
  .quote-modal .modal-copy h2 { font-size:22px; }
}

/* Simple PHP build */
[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }
.nav-links > a.active,
.nav-product-trigger > a.active { color: var(--copper); }
.why-card > b {
  display: block;
  color: #72a1ff;
  font-size: 30px;
  line-height: 1;
  margin: 20px 0;
}
.seo-gallery button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.testimonial-slide { position: relative; }
.testimonial-card { display: none; }
.testimonial-card.active { display: grid; animation: testimonialIn .45s ease both; }
@keyframes testimonialIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
.testimonial-card > b {
  color: #92a3b7;
  font-size: 48px;
  line-height: .7;
}
.php-video-slider {
  overflow: hidden;
  width: 100%;
}
.php-video-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: phpVideoMarquee 45s linear infinite;
}
.php-video-slider:hover .php-video-track { animation-play-state: paused; }
.php-video-track .video-card {
  flex: 0 0 min(420px, 31vw);
  height: 300px;
}
@keyframes phpVideoMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 9px)); }
}
.media-backdrop.is-open,
.modal-backdrop.is-open { display: grid; }
.rich-copy a { color: var(--blue); font-weight: 700; }
.page-hero + .inner-section { overflow: hidden; }

@media (max-width: 820px) {
  .php-video-track .video-card { flex-basis: min(78vw, 390px); height: 260px; }
}

@media (max-width: 560px) {
  .php-video-track .video-card { flex-basis: 84vw; height: 230px; }
  .testimonial-card.active { display: block; }
  .testimonial-card > b { display: block; margin-bottom: 16px; }
  .testimonial-card > div { margin-top: 20px; }
}
