:root { --font-display:Arial,Helvetica,sans-serif; --font-body:Arial,Helvetica,sans-serif; --ink:#082b4c; --green:#0868a5; --lime:#55bde8; --cream:#eef5fa; --paper:#fbfdff; --orange:#ef714b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--font-body),Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 4.5vw; background:rgba(252,251,247,.96); position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(16,47,42,.1); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:11px; }
.logo-image { width:48px; height:48px; object-fit:contain; background:white; border-radius:3px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; color:var(--paper); background:var(--green); border-radius:50% 50% 45% 55%; font:800 24px/1 var(--font-display); transform:rotate(-8deg); }
.brand>span:last-child { display:flex; flex-direction:column; line-height:1; }
.brand strong { font:800 17px/1 var(--font-display); letter-spacing:.04em; }
.brand small { font:700 8px/1.5 var(--font-body); letter-spacing:.3em; color:var(--green); }
nav { display:flex; gap:34px; font-size:14px; font-weight:600; }
nav a:hover { color:var(--green); }
.header-cta { background:var(--ink); color:white; padding:13px 17px; border-radius:4px; font-size:13px; font-weight:700; }
.header-cta span,.button span { margin-left:18px; }
.hero { background:var(--cream); }
.hero-grid { min-height:680px; display:grid; grid-template-columns:1.02fr .98fr; }
.hero-copy { padding:84px 5vw 70px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 27px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.eyebrow span { display:inline-block; width:26px; height:2px; background:currentColor; }
h1,h2 { margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:-.055em; line-height:.96; }
h1 { font-size:clamp(58px,6.5vw,96px); }
h1 em,h2 em { color:var(--green); font-style:italic; font-weight:500; }
.hero-intro { width:min(520px,90%); margin:34px 0 36px; font-size:18px; line-height:1.6; color:#46615c; }
.hero-actions { display:flex; align-items:center; gap:32px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-width:220px; padding:17px 19px; border-radius:4px; font-size:14px; font-weight:700; }
.primary { background:var(--green); color:white; }
.text-link { font-size:14px; font-weight:700; border-bottom:1px solid #a8b1ac; padding:8px 0; }
.text-link span { margin-left:10px; }
.hero-visual { min-height:620px; position:relative; overflow:hidden; background:var(--green); }
.hero-visual:before { content:""; position:absolute; inset:0; opacity:.15; background:repeating-linear-gradient(90deg,transparent 0 74px,rgba(255,255,255,.5) 75px),repeating-linear-gradient(0deg,transparent 0 74px,rgba(255,255,255,.4) 75px); }
.hero-real-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-photo-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,32,59,.08),rgba(3,32,59,.56)); }
.sun { position:absolute; width:430px; height:430px; border-radius:50%; background:var(--lime); top:-70px; right:-70px; }
.bridge { position:absolute; width:88%; left:6%; bottom:145px; }
.deck { height:34px; background:var(--ink); transform:skewX(-15deg); box-shadow:0 18px 0 rgba(9,45,38,.35); }
.truck { position:relative; height:155px; z-index:2; }
.trailer { position:absolute; width:62%; height:95px; left:8%; top:28px; background:var(--paper); border:8px solid var(--ink); border-left:14px solid var(--orange); }
.cab { position:absolute; right:8%; top:48px; width:22%; height:76px; background:var(--lime); border:8px solid var(--ink); border-radius:8px 22px 0 0; }
.cab span { display:block; margin:8px 8px 0; width:65%; height:24px; background:#b9e3db; border:5px solid var(--ink); }
.wheel { position:absolute; bottom:17px; width:31px; height:31px; border-radius:50%; background:var(--ink); border:8px solid #b6c6c1; z-index:3; }
.w1 { left:17%; }.w2 { left:57%; }.w3 { right:12%; }
.signal-card { position:absolute; right:8%; bottom:38px; width:230px; padding:18px; background:var(--paper); border-radius:4px; box-shadow:12px 12px 0 var(--ink); }
.signal-card>span { font-size:9px; letter-spacing:.2em; font-weight:800; color:var(--green); }
.signal-card strong { display:block; font:700 30px/1.2 var(--font-display); margin:4px 0; }
.signal-card strong small { font-size:12px; }
.signal-card>div { display:flex; gap:3px; }
.signal-card i { width:26px; height:4px; background:var(--lime); }
.signal-card p { margin:8px 0 0; font-size:10px; color:#59716c; }
.signal-card b { color:var(--green); }
.measurement { position:absolute; z-index:2; color:white; font:700 11px var(--font-body); letter-spacing:.12em; padding:7px 10px; border:1px solid rgba(255,255,255,.6); }
.m1 { left:6%; bottom:105px; }.m2 { right:9%; top:150px; }
.trust-strip { min-height:84px; display:flex; align-items:center; justify-content:center; gap:28px; padding:20px 4vw; background:var(--ink); color:white; }
.trust-strip span { color:var(--lime); font-size:9px; letter-spacing:.2em; font-weight:800; }
.trust-strip strong { font:600 15px var(--font-display); }.trust-strip i { width:3px; height:3px; border-radius:50%; background:#68817b; }
.section { padding:110px 5vw; }
.section-head { display:grid; grid-template-columns:.72fr 1.15fr 1fr; align-items:end; gap:40px; margin-bottom:60px; }
.section-head h2,.why h2,.cta-section h2 { font-size:clamp(48px,5.5vw,78px); }
.section-head>p:last-child { margin:0; max-width:420px; color:#5c716d; font-size:16px; line-height:1.65; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { border:1px solid #d9ded9; background:white; }
.service-art { height:250px; position:relative; overflow:hidden; display:grid; place-items:center; background:#dcebf5; }
.service-art>span { position:absolute; z-index:2; top:18px; left:18px; padding:5px 8px; background:white; border-radius:3px; font:800 11px var(--font-body); color:var(--green); }
.service-art>img { width:100%; height:100%; object-fit:contain; padding:20px; background:#f3f8fc; }
.art-02 { background:#e4f1f8; }.art-03 { background:#dbeaf5; }
.scale-icon { position:relative; width:140px; height:85px; border:8px solid var(--ink); border-top:0; transform:perspective(100px) rotateX(4deg); background:var(--paper); box-shadow:12px 12px 0 rgba(16,47,42,.18); }
.scale-icon:before { content:""; position:absolute; width:72px; height:47px; border:7px solid var(--ink); border-radius:6px; left:26px; top:-75px; background:var(--lime); }
.scale-icon:after { content:""; position:absolute; width:7px; height:30px; background:var(--ink); left:59px; top:-30px; }
.service-content { padding:28px; }
.service-content>p { margin:0 0 18px; color:var(--green); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; }
.service-content h3 { margin:0 0 12px; font:650 28px var(--font-display); letter-spacing:-.03em; }
.service-content>span { display:block; min-height:70px; color:#61736f; line-height:1.55; font-size:14px; }
.service-content a { display:flex; justify-content:space-between; padding-top:18px; margin-top:18px; border-top:1px solid #e1e5e2; color:var(--green); font-size:12px; font-weight:800; }
.detail-section { padding:110px 5vw; background:var(--green); color:white; }
.detail-intro { display:grid; grid-template-columns:.75fr 1.25fr 1fr; align-items:end; gap:40px; }
.detail-intro h2,.catalogue-title h2,.components h2,.topcontrol h2 { font-size:clamp(46px,5.4vw,76px); }
.detail-intro h2 em,.components h2 em { color:var(--lime); }
.detail-intro>p:not(.eyebrow) { margin:0; color:#d7eaf6; font-size:16px; line-height:1.65; }
.feature-pills { grid-column:2/4; display:flex; flex-wrap:wrap; gap:9px; }
.feature-pills span { padding:9px 13px; border:1px solid rgba(255,255,255,.25); border-radius:30px; font-size:11px; font-weight:700; }
.technical-image { margin:55px 0 22px; padding:25px; background:white; }
.technical-image img { display:block; width:100%; max-height:620px; object-fit:contain; }
.system-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.2); }
.system-cards article { padding:32px; background:#07598d; }
.system-cards article>img { width:calc(100% + 64px); height:220px; object-fit:cover; margin:-32px -32px 28px; }
.system-cards span { color:var(--lime); font-size:9px; letter-spacing:.18em; font-weight:800; }
.system-cards h3 { margin:14px 0 12px; font:650 25px var(--font-display); }
.system-cards p { margin:0; color:#d6eaf6; font-size:14px; line-height:1.65; }
.weighbridge-gallery { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:18px; }
.weighbridge-gallery img { width:100%; height:125px; object-fit:cover; background:white; }
.catalogue { background:var(--paper); }
.catalogue-title { display:grid; grid-template-columns:.65fr 1.2fr 1fr; gap:40px; align-items:end; margin-bottom:70px; }
.catalogue-title>p:last-child { margin:0; color:#60736e; line-height:1.65; }
.product-group { margin-top:70px; }
.group-heading { display:grid; grid-template-columns:70px 1fr; gap:20px; padding-bottom:25px; border-bottom:2px solid var(--ink); }
.group-heading>span { color:var(--green); font-size:11px; font-weight:800; padding-top:8px; }
.group-heading h3 { margin:0; font:650 34px var(--font-display); letter-spacing:-.04em; }
.group-heading p { margin:6px 0 0; color:#687b76; font-size:14px; }
.product-table { background:white; }
.product-row { display:grid; grid-template-columns:116px 1.1fr .65fr 1.45fr 28px; align-items:center; gap:22px; min-height:140px; padding:20px; border-bottom:1px solid #dce2de; }
.product-photo { width:116px; height:100px; object-fit:contain; padding:5px; background:#f7f7f4; }
.product-symbol { position:relative; width:50px; height:42px; border:3px solid var(--ink); background:#edf3ef; }
.product-symbol i { position:absolute; left:7px; right:7px; top:-10px; height:8px; background:var(--lime); border:3px solid var(--ink); }
.product-symbol b { position:absolute; width:3px; height:11px; left:21px; bottom:-11px; background:var(--ink); }
.product-row small { color:var(--green); font-size:9px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; }
.product-row h4 { margin:5px 0 0; font:650 18px var(--font-display); }
.product-row>strong { color:var(--green); font:650 15px var(--font-display); }
.product-row>p { margin:0; color:#637671; font-size:13px; line-height:1.5; }
.product-row>a { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ink); color:white; }
.components { display:grid; grid-template-columns:1.1fr .9fr; }
.loadcell-panel { padding:100px 5vw; background:var(--ink); color:white; }
.panel-copy { max-width:600px; color:#b7cac5; line-height:1.65; margin:28px 0 34px; }
.loadcell-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #4a635d; border-left:1px solid #4a635d; }
.loadcell-grid div { min-height:105px; padding:20px; border-right:1px solid #4a635d; border-bottom:1px solid #4a635d; }
.loadcell-grid img { width:100%; height:105px; object-fit:contain; margin-bottom:14px; background:white; }
.loadcell-grid strong { display:block; color:var(--lime); font:650 20px var(--font-display); }
.loadcell-grid span { display:block; margin-top:9px; color:#aebfbb; font-size:10px; line-height:1.4; }
.accessory-panel { padding:100px 5vw; background:var(--cream); }
.accessory-panel h3 { margin:0 0 35px; font:650 clamp(40px,4vw,58px) var(--font-display); letter-spacing:-.05em; }
.accessory-list { border-top:1px solid #bcc8c3; }
.accessory-list>div { display:grid; grid-template-columns:86px 28px 1fr; align-items:center; gap:15px; padding:16px 0; border-bottom:1px solid #bcc8c3; }
.accessory-list img { width:86px; height:72px; object-fit:contain; background:white; }
.accessory-list b { color:var(--green); font-size:10px; }
.accessory-list span { color:#63736f; font-size:12px; line-height:1.45; }
.accessory-list strong { display:block; color:var(--ink); font:650 16px var(--font-display); margin-bottom:4px; }
.topcontrol { display:grid; grid-template-columns:.55fr 1.2fr .85fr; gap:60px; align-items:center; padding:100px 5vw; background:var(--lime); }
.topcontrol-mark { width:160px; height:160px; display:grid; place-content:center; background:var(--ink); color:white; border-radius:50%; font:800 22px var(--font-display); text-align:center; }
.topcontrol-mark span { display:block; color:var(--lime); font-size:14px; letter-spacing:.12em; }
.topcontrol>div:last-child>p { color:#173e5c; line-height:1.6; margin:0 0 24px; }
.service-promise { background:var(--cream); }
.promise-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.promise-grid article { min-height:240px; padding:30px; background:white; border-top:4px solid var(--green); }
.promise-grid span { color:var(--green); font-size:10px; font-weight:800; }
.promise-grid h3 { margin:38px 0 12px; font:650 24px var(--font-display); }
.promise-grid p { margin:0; color:#657772; line-height:1.6; font-size:14px; }
.why { display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:white; }
.why-panel { padding:110px 7vw 110px 5vw; }
.eyebrow.light { color:var(--lime); }
.why h2 em,.cta-section h2 em { color:var(--lime); }
.why-panel>p:not(.eyebrow) { color:#bcd3e2; max-width:520px; font-size:17px; line-height:1.7; margin:34px 0; }
.pale { color:var(--ink); background:var(--lime); }
.metrics { display:grid; grid-template-columns:1fr 1fr; background:var(--green); }
.metrics>div { min-height:255px; padding:45px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid rgba(255,255,255,.15); }
.metrics strong { font:600 clamp(36px,4vw,60px) var(--font-display); color:var(--lime); letter-spacing:-.05em; }
.metrics sup { font-size:20px; }.metrics p { max-width:240px; color:#d7eaf6; line-height:1.45; margin:10px 0 0; }
.section-head.compact { grid-template-columns:.8fr 2fr; }
.process-list { border-top:1px solid #bbc5c0; }
.process-row { display:grid; grid-template-columns:80px 1fr 1.2fr 40px; align-items:center; gap:30px; padding:27px 10px; border-bottom:1px solid #bbc5c0; }
.process-row>span { color:var(--green); font-size:11px; font-weight:800; }.process-row h3 { margin:0; font:650 25px var(--font-display); }.process-row p { margin:0; color:#60736e; line-height:1.5; font-size:14px; }.process-row b { color:var(--green); font-size:20px; }
.cta-section { padding:100px 5vw; display:grid; grid-template-columns:1.1fr .9fr; gap:7vw; align-items:center; background:var(--green); color:white; }
.contact-card { padding:36px; background:var(--ink); }
.contact-card>p { color:#c4dbea; font-size:17px; line-height:1.5; margin:0 0 28px; }
.white { width:100%; color:var(--ink); background:white; }
.contact-numbers { display:flex; gap:25px; margin-top:25px; font-size:13px; font-weight:700; color:var(--lime); }
footer { min-height:190px; display:grid; grid-template-columns:1.2fr 1fr 1fr auto; align-items:center; gap:35px; padding:40px 5vw; background:#061f36; color:white; }
.footer-brand .brand-mark { background:var(--lime); color:var(--ink); }.footer-brand small { color:var(--lime); }
footer>p,footer>span { color:#9eb9cb; font-size:12px; line-height:1.5; } footer>div { display:flex; gap:22px; font-size:12px; font-weight:700; }
.bot { position:fixed; right:24px; bottom:24px; z-index:40; display:flex; align-items:flex-end; flex-direction:column; gap:10px; }
.bot-toggle { display:flex; align-items:center; gap:10px; padding:9px 16px 9px 9px; border:0; border-radius:30px; color:white; background:var(--green); box-shadow:0 12px 35px rgba(8,43,76,.25); cursor:pointer; }
.bot-toggle span,.bot-panel header span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--lime); color:var(--ink); font:800 11px var(--font-display); }
.bot-toggle b { font:700 13px var(--font-body); }
.bot-panel { width:min(370px,calc(100vw - 32px)); overflow:hidden; border:1px solid #cbdce8; border-radius:15px; background:white; box-shadow:0 24px 70px rgba(8,43,76,.25); }
.bot-panel header { display:flex; align-items:center; justify-content:space-between; padding:15px; color:white; background:var(--ink); }
.bot-panel header>div { display:flex; align-items:center; gap:10px; }.bot-panel header p { display:flex; flex-direction:column; margin:0; }.bot-panel header strong { font-size:13px; }.bot-panel header small { margin-top:2px; color:#9dd8f0; font-size:9px; }
.bot-panel header>button { border:0; color:white; background:transparent; font-size:24px; cursor:pointer; }
.bot-messages { height:270px; overflow-y:auto; padding:16px; background:#f2f7fb; }
.bot-messages p { width:85%; margin:0 0 10px; padding:10px 12px; border-radius:10px; font-size:12px; line-height:1.45; }
.bot-messages .assistant { color:var(--ink); background:white; border:1px solid #d6e3ec; }
.bot-messages .user { margin-left:auto; color:white; background:var(--green); }
.bot-suggestions { display:flex; gap:6px; overflow-x:auto; padding:10px 12px 0; background:white; }
.bot-suggestions button { flex:0 0 auto; padding:7px 9px; border:1px solid #bcd4e4; border-radius:20px; color:var(--green); background:white; font-size:9px; font-weight:700; cursor:pointer; }
.bot-panel form { display:grid; grid-template-columns:1fr 40px; gap:7px; padding:12px; }
.bot-panel input { min-width:0; padding:10px 12px; border:1px solid #c8d9e5; border-radius:6px; outline:none; font:12px var(--font-body); }.bot-panel input:focus { border-color:var(--green); }
.bot-panel form button { border:0; border-radius:6px; color:white; background:var(--green); font-size:17px; cursor:pointer; }
@media (max-width:900px) {
  nav { display:none; }.site-header { height:74px; }.header-cta { padding:11px; }
  .hero-grid,.why,.cta-section { grid-template-columns:1fr; }.hero-copy { padding:70px 6vw; }.hero-visual { min-height:520px; }
  .section { padding:80px 6vw; }.section-head { grid-template-columns:1fr; gap:22px; }.service-grid { grid-template-columns:1fr; }.service-art { height:210px; }
  .section-head.compact { grid-template-columns:1fr; }.process-row { grid-template-columns:45px .8fr 1.3fr 20px; gap:15px; }
  footer { grid-template-columns:1fr 1fr; }
  .detail-intro,.catalogue-title,.topcontrol { grid-template-columns:1fr; }.feature-pills { grid-column:auto; }.system-cards { grid-template-columns:1fr; }
  .product-row { grid-template-columns:100px 1fr .65fr 28px; }.product-row>p { grid-column:2/5; }.product-photo { width:100px; height:90px; }
  .components { grid-template-columns:1fr; }.promise-grid { grid-template-columns:1fr; }.topcontrol-mark { width:120px; height:120px; }
}
@media (max-width:560px) {
  .brand strong { font-size:14px; }.header-cta { font-size:0; min-width:auto; }.header-cta:before { content:"Call"; font-size:12px; }.header-cta span { font-size:12px; margin-left:8px; }
  h1 { font-size:52px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:16px; }.hero-visual { min-height:430px; }.sun { width:300px; height:300px; }
  .bridge { bottom:125px; }.truck { height:125px; }.trailer { height:75px; }.cab { height:62px; top:47px; }.wheel { bottom:8px; }
  .signal-card { transform:scale(.8); transform-origin:bottom right; }.trust-strip { justify-content:flex-start; overflow:hidden; gap:16px; }.trust-strip strong:nth-of-type(n+4),.trust-strip i:nth-of-type(n+3) { display:none; }
  .metrics { grid-template-columns:1fr; }.metrics>div { min-height:180px; padding:32px; }
  .process-row { grid-template-columns:35px 1fr 20px; }.process-row p { grid-column:2/4; }.cta-section { padding:75px 6vw; }.contact-card { padding:25px; }.contact-numbers { flex-direction:column; gap:10px; }
  footer { grid-template-columns:1fr; padding:55px 6vw; } footer>div { flex-wrap:wrap; }
  .logo-image { width:42px; height:42px; }.detail-section { padding:75px 6vw; }.technical-image { margin-top:35px; padding:8px; }
  .catalogue-title { margin-bottom:45px; }.group-heading { grid-template-columns:38px 1fr; }.product-group { margin-top:50px; }
  .product-row { grid-template-columns:88px 1fr 26px; gap:14px; }.product-photo { width:88px; height:84px; }.product-row>strong { grid-column:2/3; }.product-row>p { grid-column:2/4; }.product-row>a { grid-column:3; grid-row:1; }
  .loadcell-panel,.accessory-panel { padding:75px 6vw; }.loadcell-grid { grid-template-columns:1fr 1fr; }.topcontrol { padding:75px 6vw; gap:35px; }
  .system-cards article>img { height:190px; }.weighbridge-gallery { grid-template-columns:1fr 1fr; }.weighbridge-gallery img { height:150px; }.accessory-list>div { grid-template-columns:72px 1fr; }.accessory-list img { width:72px; }.accessory-list b { display:none; }
  .bot { right:12px; bottom:12px; }.bot-toggle b { display:none; }.bot-toggle { padding:7px; }.bot-panel { width:calc(100vw - 24px); }.bot-messages { height:240px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
