:root {
  --navy: #04172a;
  --navy-soft: #08253f;
  --orange: #f27500;
  --orange-light: #ff9a22;
  --white: #f8fafc;
  --muted: #9aabba;
  --border: rgba(255,255,255,.14);
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: Arial, "Segoe UI", sans-serif;
  line-height: 1.6;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 96px 0; }

.header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  background: rgba(2, 15, 27, .96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.nav-wrap { height: 100%; display: flex; align-items: center; gap: 36px; }
.brand { display: flex; align-items: center; gap: 10px; line-height: 1; }
.brand-mark { width: 56px; height: 46px; }
.brand-logo-img {
  width: 148px;
  max-height: 66px;
  object-fit: contain;
  padding: 5px 8px;
  background: rgba(255,255,255,.98);
  border-radius: 12px;
}
.brand > span { display: flex; flex-direction: column; }
.brand strong { font-size: 17px; }
.brand small { margin-top: 5px; font-size: 13px; font-weight: 800; letter-spacing: 5px; }
.main-nav { display: flex; gap: 28px; margin-left: auto; }
.main-nav a { color: #b7c4cf; font-size: 12px; font-weight: 700; }
.main-nav a:hover { color: var(--orange); }
.header-phone { display: flex; align-items: center; gap: 9px; padding-left: 18px; border-left: 1px solid #31485c; }
.header-phone > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; background: var(--orange); border-radius: 8px; }
.header-phone > span:last-child { display: flex; flex-direction: column; }
.header-phone small { color: #8ea0af; font-size: 8px; letter-spacing: 1px; }
.header-phone strong { font-size: 14px; }
.menu-toggle { display: none; margin-left: auto; padding: 8px; border: 0; background: transparent; }
.menu-toggle span { display: block; width: 25px; height: 2px; margin: 5px; background: white; }

.hero { position: relative; min-height: 780px; padding-top: 78px; overflow: hidden; background: radial-gradient(circle at 78% 30%, #16466e 0, #071e33 35%, #031424 75%); }
.hero-bg { position: absolute; inset: 0; opacity: .08; background: linear-gradient(90deg, #031424 0 45%, transparent), url("thuan-tien-poster-reference.png") center / cover; }
.hero-layout { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; min-height: 690px; }
.hero-copy { padding: 70px 0 50px; }
.overline { display: flex; align-items: center; gap: 10px; margin: 0; color: #d5dfe7; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.overline::before { content: ""; width: 32px; height: 3px; background: var(--orange); }
.overline.orange { color: var(--orange); }
.hero h1 { margin: 25px 0 8px; font-size: clamp(48px, 5.4vw, 72px); line-height: .95; letter-spacing: -4px; }
.hero h2 { margin: 0; color: var(--orange); font-size: clamp(31px, 3.4vw, 45px); line-height: 1; letter-spacing: -2px; }
.hero-description { max-width: 600px; margin: 25px 0; color: #b6c3ce; font-size: 14px; }
.origin-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; max-width: 610px; padding: 10px 13px; border-left: 3px solid var(--orange); background: rgba(4, 26, 45, .82); font-size: 10px; }
.origin-strip small { color: var(--orange); font-weight: 900; letter-spacing: 1px; }
.origin-strip span { color: var(--orange); }
.hero-buttons { display: flex; gap: 12px; margin-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 15px 20px; border-radius: 3px; font-size: 11px; font-weight: 900; }
.button-primary { background: linear-gradient(90deg, var(--orange), var(--orange-light)); }
.button-outline { border: 1px solid #536a7c; }
.button:hover { transform: translateY(-2px); }
.benefit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); }
.benefit-row > div { display: flex; align-items: center; gap: 9px; }
.benefit-row b { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 11px; }
.benefit-row span { display: flex; flex-direction: column; }
.benefit-row strong { font-size: 9px; }
.benefit-row small { color: #8799a8; font-size: 8px; }
.hero-image-wrap { position: relative; min-width: 0; }
.hero-image-wrap img { width: 110%; height: 440px; object-fit: cover; object-position: 62% center; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 55px rgba(0,0,0,.42); }
.power-badge { position: absolute; z-index: 2; top: -45px; right: -16px; width: 140px; min-height: 155px; display: flex; flex-direction: column; align-items: center; padding: 14px 8px 26px; background: #071c30; border: 4px solid var(--orange); clip-path: polygon(0 0,100% 0,100% 77%,50% 100%,0 77%); }
.power-badge small { font-size: 9px; font-weight: 800; }
.power-badge strong { color: var(--orange); font-size: 28px; line-height: 1.2; }
.power-badge span { font-size: 9px; }
.power-badge b { color: var(--orange); font-size: 18px; }
.hero-caption { position: absolute; right: -20px; bottom: 18px; margin: 0; padding: 10px 15px; background: rgba(3, 20, 35, .94); border-left: 3px solid var(--orange); font-size: 9px; }

.services { background: #061b2e; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.section-heading h2, .brands-intro h2, .contact-copy h2 { margin: 14px 0 0; font-size: clamp(34px, 4vw, 44px); line-height: 1.15; letter-spacing: -2px; }
.section-heading h2 span, .brands-intro h2 span, .contact-copy h2 span { color: var(--orange); }
.section-heading > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 12px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-card { position: relative; min-height: 430px; padding: 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); }
.service-blue { background: linear-gradient(145deg, #0b59ad, #052953); }
.service-green { background: linear-gradient(145deg, #0b7d39, #073c24); }
.service-red { background: linear-gradient(145deg, #bd211b, #5d120f); }
.service-icon { width: 55px; height: 55px; display: grid; place-items: center; margin-left: auto; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; font-size: 24px; }
.service-card > small { font-size: 9px; opacity: .75; }
.service-card h3 { margin: 24px 0 8px; font-size: 25px; line-height: 1.2; }
.service-card > b { font-size: 10px; letter-spacing: .6px; }
.service-card ul { margin: 21px 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.2); list-style: none; }
.service-card li { margin: 9px 0; font-size: 11px; }
.service-card li::before { content: "✓"; margin-right: 8px; color: #ffc15a; font-weight: 900; }
.service-card > a { position: absolute; left: 28px; right: 28px; bottom: 24px; display: flex; justify-content: space-between; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.2); font-size: 10px; font-weight: 800; }

.brands { background: #eef1f2; color: #092033; }
.brands-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 60px; align-items: center; }
.brands-intro > p:not(.overline) { max-width: 450px; color: #657681; font-size: 12px; }
.text-link { display: inline-block; margin-top: 15px; color: #ce5d00; font-size: 10px; font-weight: 900; }
.brand-catalog { overflow: hidden; background: white; border: 1px solid #d2d9dc; box-shadow: 0 20px 45px rgba(7,31,48,.12); }
.catalog-title { display: flex; justify-content: space-between; padding: 11px 15px; background: #081f34; color: white; border-bottom: 3px solid var(--orange); }
.catalog-title span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: 1.3px; }
.catalog-title b { font-size: 8px; letter-spacing: 1px; }
.catalog-japan { margin-top: -1px; }
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.brand-grid article { min-height: 205px; display: flex; flex-direction: column; align-items: center; padding: 20px 9px; text-align: center; border-right: 1px solid #d9dfe1; }
.brand-grid article:last-child { border-right: 0; }
.brand-grid article > strong { font-size: 15px; }
.brand-grid article > b { width: 66px; height: 66px; display: grid; place-items: center; margin: 17px auto; color: white; background: #0b3130; border: 8px solid #145141; border-radius: 8px; font-size: 26px; }
.brand-grid p { display: flex; flex-direction: column; margin: auto 0 0; font-size: 9px; font-weight: 800; }
.brand-grid small { color: #6e7b83; font-size: 8px; }
.brand-grid-japan article > strong { color: #bd2020; }
.brand-grid-japan article > b { color: #c31e1e; background: #eef0f1; border-color: #bec5c8; }

.applications { padding: 48px 0; background: #041527; border-block: 1px solid var(--border); }
.applications-layout { display: grid; grid-template-columns: 190px 1fr; align-items: center; }
.applications-title { display: flex; flex-direction: column; padding-right: 30px; border-right: 1px solid #324a5f; }
.applications-title small { color: #8294a3; font-size: 9px; letter-spacing: 2px; }
.applications-title strong { color: var(--orange); font-size: 28px; }
.application-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.application-grid > div { display: flex; flex-direction: column; align-items: center; padding: 4px; border-right: 1px solid #2b4053; }
.application-grid > div:last-child { border-right: 0; }
.application-grid span { height: 45px; font-size: 28px; }
.application-grid b { font-size: 8px; }

.contact { position: relative; background: linear-gradient(115deg, #0c3353, #061b2f 60%, #031424 60%); }
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: center; }
.contact-copy > p:not(.overline) { max-width: 480px; color: var(--muted); font-size: 12px; }
.contact-list { margin-top: 27px; }
.contact-list > a, .contact-list > div { display: flex; align-items: center; gap: 12px; margin: 13px 0; }
.contact-list > a > span, .contact-list > div > span { flex: 0 0 40px; height: 40px; display: grid; place-items: center; background: var(--orange); border-radius: 8px; }
.contact-list p { display: flex; flex-direction: column; margin: 0; }
.contact-list small { color: #879aaa; font-size: 8px; letter-spacing: 1px; }
.contact-list strong { font-size: 13px; }
.quote-form { padding: 34px; color: #0a1f30; background: white; border-top: 5px solid var(--orange); box-shadow: 0 25px 60px rgba(0,0,0,.28); }
.form-title { display: flex; justify-content: space-between; padding-bottom: 18px; margin-bottom: 12px; border-bottom: 1px solid #dde2e4; }
.form-title strong { font-size: 13px; }
.form-title small { color: #7d8991; font-size: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.quote-form label { display: block; margin: 12px 0; font-size: 9px; font-weight: 800; }
.quote-form input, .quote-form select, .quote-form textarea { width: 100%; display: block; margin-top: 7px; padding: 12px; border: 1px solid #d7dddf; background: #f8f9f9; outline: none; font-size: 11px; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,117,0,.12); }
.quote-form textarea { resize: vertical; }
.quote-form button { width: 100%; display: flex; justify-content: space-between; padding: 14px 16px; color: white; background: linear-gradient(90deg, var(--orange), var(--orange-light)); border: 0; cursor: pointer; font-size: 10px; font-weight: 900; }
.form-message { display: none; margin: 12px 0 0; padding: 11px; color: #27743a; background: #e7f6ea; font-size: 10px; font-weight: 700; }
.form-message.show { display: block; }

.footer { background: #020e19; }
.footer-top { min-height: 125px; display: flex; align-items: center; gap: 28px; }
.footer-top > p { padding-left: 28px; border-left: 1px solid #304558; color: #8394a2; font-size: 9px; }
.footer-top nav { display: flex; gap: 22px; margin-left: auto; }
.footer-top nav a { color: #8799a7; font-size: 9px; }
.footer-bottom { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid #1c3142; color: #647a8b; font-size: 8px; }
.floating-buttons { position: fixed; z-index: 80; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.floating-buttons a { width: 44px; height: 44px; display: grid; place-items: center; color: white; background: var(--orange); border-radius: 50%; box-shadow: 0 8px 25px rgba(0,0,0,.28); }
.floating-buttons a:last-child { background: #0d59ad; }

.model-link { margin-top: 12px; color: #c95d00; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.model-link:hover { color: #ff7b00; }
.brand-grid-japan .model-link { color: #b31c1c; }

.catalog-hero { min-height: 590px; padding-top: 78px; background: radial-gradient(circle at 80% 30%, #17466e, #061b2f 44%, #031424 75%); }
.catalog-hero-layout { min-height: 510px; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 55px; }
.catalog-hero-layout > div { position: relative; z-index: 2; }
.catalog-hero h1 { margin: 18px 0; font-size: clamp(46px, 6vw, 72px); line-height: .98; letter-spacing: -4px; }
.catalog-hero h1 span { color: var(--orange); }
.catalog-hero-layout > div > p:not(.overline):not(.breadcrumb) { max-width: 540px; color: #aebdca; font-size: 13px; }
.catalog-hero .button { margin-top: 14px; }
.catalog-hero img { width: 100%; height: 365px; object-fit: cover; object-position: 62% center; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 25px 60px rgba(0,0,0,.4); }
.catalog-hero-japan { background: radial-gradient(circle at 80% 30%, #4e3334, #161e2b 44%, #031424 75%); }
.catalog-hero-japan img { filter: saturate(.75) contrast(1.08); }
.breadcrumb { display: flex; gap: 9px; margin: 0 0 20px; color: #71879a; font-size: 9px; }
.breadcrumb a { color: var(--orange); }
.machine-section { padding: 90px 0; background: #eef1f2; color: #092033; }
.machine-heading { max-width: 650px; margin-bottom: 38px; }
.machine-heading h2 { margin: 12px 0 7px; font-size: clamp(32px, 4vw, 43px); line-height: 1.15; }
.machine-heading > p:last-child { color: #657680; font-size: 12px; }
.machine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.machine-card { display: grid; grid-template-columns: 130px 1fr; min-height: 285px; overflow: hidden; background: white; border: 1px solid #d7dddf; transition: .2s; }
.machine-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(7,31,48,.1); }
.machine-letter { display: grid; place-items: center; color: white; background: linear-gradient(145deg, #0d5542, #082b30); font-size: 58px; font-weight: 900; }
.japan-machines .machine-letter { color: #d62323; background: linear-gradient(145deg, #f1f3f3, #cbd1d3); }
.machine-copy { padding: 25px; }
.machine-copy > span { color: #d05f00; font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.japan-machines .machine-copy > span { color: #b82222; }
.machine-copy h3 { margin: 5px 0 10px; font-size: 25px; }
.machine-copy p { color: #697982; font-size: 10px; }
.machine-copy ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; }
.machine-copy li { padding: 5px 8px; color: #35505e; background: #edf1f2; font-size: 8px; font-weight: 700; }
.inspection-section { padding: 50px 0; background: #061b2e; }
.inspection-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.inspection-grid > div { padding: 7px 35px; border-right: 1px solid #294155; }
.inspection-grid > div:first-child { padding-left: 0; }
.inspection-grid > div:last-child { border: 0; }
.inspection-grid span { color: var(--orange); font-size: 9px; font-weight: 900; }
.inspection-grid h3 { margin: 6px 0; font-size: 15px; }
.inspection-grid p { margin: 0; color: #8699a8; font-size: 9px; }
.catalog-cta { padding: 65px 0; background: #082942; }
.catalog-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.catalog-cta small { color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.catalog-cta h2 { margin: 7px 0 0; font-size: clamp(24px, 3vw, 34px); }
.compact-footer .footer-bottom { min-height: 65px; align-items: center; }
.compact-footer a { color: var(--orange); }

.catalog-hero-directory { background: radial-gradient(circle at 78% 28%, #235d86, #071e33 42%, #031424 76%); }
.route-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.route-chips a { padding: 9px 12px; color: #f6fbff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.17); border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .4px; }
.route-chips a:hover { color: var(--orange); border-color: rgba(242,117,0,.7); }

.directory-section { padding: 90px 0; background: #eef1f2; color: #092033; }
.category-panel { margin-top: 22px; overflow: hidden; background: white; border: 1px solid #d7dddf; box-shadow: 0 18px 42px rgba(7,31,48,.1); }
.category-head { display: flex; justify-content: space-between; gap: 30px; padding: 28px; color: white; background: linear-gradient(135deg, #0a483c, #071f35); border-bottom: 4px solid var(--orange); }
.category-panel-red .category-head { background: linear-gradient(135deg, #552124, #071f35); }
.category-head span { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: 1.4px; }
.category-head h3 { margin: 5px 0 8px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; }
.category-head p { max-width: 640px; margin: 0; color: #b7c6d2; font-size: 11px; }
.category-head a { align-self: flex-start; white-space: nowrap; padding: 11px 13px; color: white; background: rgba(242,117,0,.92); font-size: 9px; font-weight: 900; }
.route-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.route-card { min-height: 205px; display: flex; flex-direction: column; padding: 22px; border-right: 1px solid #dce1e3; transition: .2s; }
.route-card:last-child { border-right: 0; }
.route-card:hover { transform: translateY(-3px); background: #f8fafb; }
.route-card span { color: #d15f00; font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.category-panel-red .route-card span { color: #b31c1c; }
.route-card strong { margin: 12px 0 8px; font-size: 26px; line-height: 1; text-transform: uppercase; }
.route-card small { color: #647682; font-size: 10px; }
.route-card b { margin-top: auto; color: #c95d00; font-size: 9px; }
.category-panel-red .route-card b { color: #b31c1c; }

.popular-lines { padding: 90px 0; background: #061b2e; }
.line-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.line-card { display: grid; grid-template-columns: 86px 1fr; gap: 20px; min-height: 260px; padding: 24px; background: linear-gradient(145deg, #0b2f4d, #051728); border: 1px solid rgba(255,255,255,.13); }
.line-card > span { width: 76px; height: 76px; display: grid; place-items: center; color: var(--orange); border: 2px solid rgba(242,117,0,.75); border-radius: 12px; font-size: 34px; font-weight: 900; }
.line-card small { color: var(--orange); font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.line-card h3 { margin: 6px 0 10px; font-size: 30px; line-height: 1; }
.line-card p { color: #94a7b6; font-size: 10px; }
.line-card a { display: inline-block; margin-top: 10px; color: #ff9730; font-size: 9px; font-weight: 900; }

.capacity-section { padding: 90px 0; background: #eef1f2; color: #092033; }
.capacity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.capacity-grid a { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 96px; padding: 22px; background: white; border: 1px solid #d7dddf; border-left: 5px solid var(--orange); box-shadow: 0 12px 28px rgba(7,31,48,.07); transition: .2s; }
.capacity-grid a:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(7,31,48,.12); }
.capacity-grid strong { color: #0a253c; font-size: 20px; }
.capacity-grid span { max-width: 170px; color: #687986; font-size: 10px; text-align: right; }

@media (max-width: 1020px) {
  .main-nav { gap: 16px; }
  .hero h1 { font-size: 55px; }
  .hero-image-wrap img { height: 390px; }
  .benefit-row { grid-template-columns: 1fr 1fr; }
  .brands-layout { grid-template-columns: 1fr; }
  .brands-intro { max-width: 650px; }
  .contact-layout { gap: 40px; }
  .route-grid { grid-template-columns: 1fr 1fr; }
  .line-grid { grid-template-columns: 1fr; }
  .capacity-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .header { height: 68px; }
  .brand-mark { width: 48px; }
  .brand-logo-img { width: 128px; max-height: 58px; }
  .brand strong { font-size: 14px; }
  .brand small { font-size: 11px; }
  .menu-toggle { display: block; }
  .header-phone { display: none; }
  .main-nav { position: fixed; top: 68px; left: 0; right: 0; display: flex; flex-direction: column; gap: 0; padding: 12px 20px 25px; background: #04172a; border-top: 1px solid #263d50; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .2s; }
  .main-nav.open { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { padding: 13px 5px; border-bottom: 1px solid #20364a; }
  .hero { padding-top: 68px; }
  .hero-layout { display: flex; flex-direction: column; align-items: stretch; }
  .hero-copy { padding: 65px 0 20px; }
  .hero-image-wrap { margin: 60px 0 45px; }
  .hero-image-wrap img { width: 100%; }
  .power-badge { right: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .service-grid, .contact-layout { grid-template-columns: 1fr; }
  .service-card { min-height: 400px; }
  .applications-layout { grid-template-columns: 1fr; }
  .applications-title { padding: 0 0 18px; margin-bottom: 22px; border-right: 0; border-bottom: 1px solid #324a5f; }
  .application-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .application-grid > div { border-right: 0; }
  .footer-top { align-items: flex-start; flex-direction: column; padding: 34px 0; }
  .footer-top > p { padding: 0; border: 0; }
  .footer-top nav { margin-left: 0; }
  .catalog-hero-layout { display: flex; flex-direction: column; align-items: stretch; padding: 70px 0 50px; }
  .catalog-hero img { height: 320px; }
  .machine-grid { grid-template-columns: 1fr; }
  .catalog-cta-inner { align-items: flex-start; flex-direction: column; }
  .category-head { align-items: flex-start; flex-direction: column; }
  .route-grid { grid-template-columns: 1fr 1fr; }
  .route-card:nth-child(2n) { border-right: 0; }
}

@media (max-width: 540px) {
  .container { width: min(var(--container), calc(100% - 28px)); }
  .section { padding: 72px 0; }
  .hero h1 { font-size: 43px; letter-spacing: -2.5px; }
  .hero h2 { font-size: 28px; }
  .hero-buttons { flex-direction: column; }
  .hero-image-wrap img { height: 300px; }
  .power-badge { top: -42px; width: 112px; min-height: 135px; }
  .power-badge strong { font-size: 22px; }
  .power-badge b { font-size: 14px; }
  .hero-caption { right: 0; }
  .section-heading h2, .brands-intro h2, .contact-copy h2 { font-size: 33px; }
  .brand-grid { grid-template-columns: 1fr 1fr; }
  .brand-grid article { min-height: 190px; border-bottom: 1px solid #d9dfe1; }
  .brand-grid article:nth-child(2n) { border-right: 0; }
  .catalog-title b { display: none; }
  .application-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .quote-form { padding: 26px 21px; }
  .footer-top nav { flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .floating-buttons { right: 10px; bottom: 10px; }
  .floating-buttons a { width: 40px; height: 40px; }
  .catalog-hero h1 { font-size: 43px; letter-spacing: -2px; }
  .catalog-hero img { height: 260px; }
  .machine-card { grid-template-columns: 80px 1fr; }
  .machine-letter { font-size: 38px; }
  .machine-copy { padding: 20px 17px; }
  .inspection-grid { grid-template-columns: 1fr; }
  .inspection-grid > div, .inspection-grid > div:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid #294155; }
  .route-grid, .capacity-grid { grid-template-columns: 1fr; }
  .route-card { border-right: 0; border-bottom: 1px solid #dce1e3; }
  .line-card { grid-template-columns: 1fr; }
  .capacity-grid a { align-items: flex-start; flex-direction: column; }
  .capacity-grid span { max-width: none; text-align: left; }
}

/* Website kiểu danh mục sản phẩm tham khảo, dùng riêng cho trang chủ mới */
.hp-page {
  background: #f2f4f6;
  color: #1c2c38;
}

.hp-page .container {
  width: min(1180px, calc(100% - 32px));
}

.hp-topbar {
  color: #d8e3ec;
  background: #071b2d;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}

.hp-topbar-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hp-topbar p {
  margin: 0;
  font-weight: 800;
  letter-spacing: .4px;
}

.hp-topbar-inner > div {
  display: flex;
  gap: 16px;
  align-items: center;
  white-space: nowrap;
}

.hp-topbar a {
  color: #ff9730;
  font-weight: 900;
}

.hp-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #d9e0e4;
  box-shadow: 0 10px 24px rgba(7, 27, 45, .08);
}

.hp-header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.hp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0a2338;
  line-height: 1;
}

.hp-logo-mark {
  width: 58px;
  height: 46px;
}

.hp-logo span {
  display: flex;
  flex-direction: column;
}

.hp-logo strong {
  color: #f27500;
  font-size: 18px;
  font-weight: 900;
}

.hp-logo small {
  margin-top: 4px;
  color: #0d52a3;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 5px;
}

.hp-header .menu-toggle {
  display: none;
  margin-left: auto;
  padding: 9px;
  border: 1px solid #d8e0e5;
  background: #fff;
  border-radius: 6px;
}

.hp-header .menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px;
  background: #0a2338;
}

.hp-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.hp-header .main-nav a,
.hp-nav-item > a {
  display: flex;
  align-items: center;
  min-height: 82px;
  padding: 0 12px;
  color: #223645;
  font-size: 13px;
  font-weight: 800;
}

.hp-header .main-nav a:hover,
.hp-nav-item:hover > a {
  color: #f27500;
}

.hp-nav-item {
  position: relative;
}

.hp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 8px;
  background: white;
  border: 1px solid #d9e0e4;
  box-shadow: 0 18px 40px rgba(7,27,45,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .18s;
}

.hp-nav-item:hover .hp-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hp-header .main-nav .hp-dropdown a {
  min-height: auto;
  display: block;
  padding: 10px 12px;
  color: #405260;
  border-bottom: 1px solid #edf0f2;
  font-size: 12px;
}

.hp-header .main-nav .hp-dropdown a:last-child {
  border-bottom: 0;
}

.hp-hotline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #fff;
  background: #f27500;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.hp-hotline span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
}

.hp-hero {
  position: relative;
  overflow: hidden;
  color: white;
  background: #08233b;
}

.hp-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,14,26,.94), rgba(3,14,26,.74) 44%, rgba(3,14,26,.12)),
    radial-gradient(circle at 76% 24%, rgba(242,117,0,.28), transparent 25%),
    url("thuan-tien-poster-reference.png") center / cover;
  opacity: .9;
}

.hp-hero-inner {
  position: relative;
  min-height: 520px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 42px;
  align-items: center;
  padding: 52px 0;
}

.hp-eyebrow {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 8px 11px;
  color: #fff;
  background: #f27500;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.hp-hero h1 {
  margin: 0;
  font-size: clamp(40px, 5.2vw, 66px);
  line-height: 1.05;
  letter-spacing: -2px;
}

.hp-hero h1 span {
  color: #ff9a22;
}

.hp-hero-copy > p:not(.hp-eyebrow) {
  max-width: 620px;
  margin: 18px 0 0;
  color: #cfdae3;
  font-size: 15px;
}

.hp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.hp-btn-primary {
  color: white;
  background: linear-gradient(90deg, #f27500, #ff9a22);
}

.hp-btn-light {
  color: #fff;
  border: 1px solid rgba(255,255,255,.44);
}

.hp-hero-card {
  position: relative;
}

.hp-hero-card img {
  width: 100%;
  height: 365px;
  object-fit: cover;
  object-position: 62% center;
  border: 8px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
}

.hp-power-tag {
  position: absolute;
  top: -25px;
  right: -8px;
  width: 130px;
  min-height: 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 18px;
  color: white;
  background: #08213a;
  border: 4px solid #f27500;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
}

.hp-power-tag small {
  font-size: 9px;
  font-weight: 900;
}

.hp-power-tag strong {
  color: #ff8a10;
  font-size: 30px;
  line-height: 1.1;
}

.hp-power-tag span {
  font-size: 9px;
  font-weight: 900;
}

.hp-power-tag b {
  color: #ff8a10;
  font-size: 19px;
}

.hp-feature-strip {
  padding: 34px 0;
  background: #fff;
}

.hp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hp-feature-grid article {
  position: relative;
  min-height: 190px;
  padding: 24px;
  background: #f7f9fa;
  border: 1px solid #dce3e7;
}

.hp-feature-grid article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #f27500;
}

.hp-feature-grid span,
.hp-section-title small,
.hp-group-heading a,
.hp-quote small {
  color: #f27500;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .9px;
}

.hp-feature-grid h2 {
  margin: 10px 0;
  color: #0a2338;
  font-size: 22px;
  line-height: 1.2;
}

.hp-feature-grid p {
  color: #60717e;
  font-size: 13px;
}

.hp-feature-grid a {
  color: #0d52a3;
  font-size: 12px;
  font-weight: 900;
}

.hp-products {
  padding: 72px 0;
  background: #eef2f4;
}

.hp-section-title {
  max-width: 760px;
  margin-bottom: 34px;
}

.hp-section-title h2 {
  margin: 8px 0 10px;
  color: #0a2338;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -1px;
}

.hp-section-title p {
  margin: 0;
  color: #687986;
  font-size: 14px;
}

.hp-product-group {
  margin-top: 34px;
}

.hp-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  color: #fff;
  background: #08233b;
  border-left: 6px solid #f27500;
}

.hp-group-heading h3 {
  margin: 0;
  font-size: 24px;
}

.hp-group-heading a {
  color: #ff9a22;
}

.hp-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 0 0;
}

.hp-product-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  background: #fff;
  border: 1px solid #d9e0e4;
  box-shadow: 0 10px 28px rgba(7,27,45,.06);
  transition: .2s;
  overflow: hidden;
}

.hp-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(7,27,45,.13);
}

.hp-product-card span {
  align-self: flex-start;
  margin: 14px 14px 0;
  padding: 4px 8px;
  color: #fff;
  background: #0d52a3;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.hp-product-card img {
  width: calc(100% - 28px);
  height: 142px;
  margin: 12px 14px;
  object-fit: cover;
  object-position: 62% center;
  border: 1px solid #e4e8eb;
}

.hp-product-card strong {
  display: block;
  margin: auto 14px 16px;
  color: #0a2338;
  font-size: 16px;
  line-height: 1.35;
}

.hp-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 18px;
}

.hp-brand-grid a {
  min-height: 195px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #d9e0e4;
  box-shadow: 0 10px 28px rgba(7,27,45,.06);
}

.hp-brand-grid b {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #0c5a43;
  border: 6px solid #17815f;
  border-radius: 10px;
  font-size: 28px;
}

.hp-brand-grid strong {
  color: #0a2338;
  font-size: 22px;
  text-transform: uppercase;
}

.hp-brand-grid span {
  color: #667886;
  font-size: 12px;
}

.hp-services {
  padding: 76px 0;
  color: white;
  background: linear-gradient(135deg, #061b2e, #092c49);
}

.hp-section-title-light h2 {
  color: white;
}

.hp-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hp-service-grid article {
  min-height: 320px;
  padding: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
}

.hp-service-grid article:nth-child(2) {
  background: rgba(11,125,57,.22);
}

.hp-service-grid article:nth-child(3) {
  background: rgba(189,33,27,.23);
}

.hp-service-grid span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #ff9a22;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  font-size: 26px;
}

.hp-service-grid h3 {
  margin: 20px 0 10px;
  font-size: 24px;
  line-height: 1.2;
}

.hp-service-grid p,
.hp-service-grid li {
  color: #bdcbd6;
  font-size: 13px;
}

.hp-service-grid ul {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  list-style: none;
}

.hp-service-grid li {
  margin: 8px 0;
}

.hp-service-grid li::before {
  content: "✓";
  margin-right: 8px;
  color: #ff9a22;
  font-weight: 900;
}

.hp-quote {
  padding: 76px 0;
  background: #fff;
}

.hp-quote-inner {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 48px;
  align-items: center;
}

.hp-quote h2 {
  margin: 10px 0;
  color: #0a2338;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
}

.hp-quote p {
  color: #647684;
  font-size: 14px;
}

.hp-contact-short {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.hp-contact-short a {
  padding: 12px 14px;
  color: #fff;
  background: #f27500;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
}

.hp-form {
  margin: 0;
}

.hp-footer {
  color: #c5d2dc;
  background: #061321;
}

.hp-footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1.1fr .85fr .85fr;
  gap: 34px;
  padding: 46px 0;
}

.hp-footer-logo strong {
  color: #ff8a10;
}

.hp-footer p {
  color: #91a4b3;
  font-size: 13px;
}

.hp-footer h3 {
  margin: 0 0 12px;
  color: white;
  font-size: 16px;
}

.hp-footer a:not(.hp-logo) {
  display: block;
  margin: 7px 0;
  color: #91a4b3;
  font-size: 13px;
}

.hp-footer a:not(.hp-logo):hover {
  color: #ff9a22;
}

.hp-copyright {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid rgba(255,255,255,.11);
  color: #708698;
  font-size: 12px;
}

@media (max-width: 1060px) {
  .hp-header-inner {
    flex-wrap: wrap;
  }

  .hp-hotline {
    display: none;
  }

  .hp-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp-brand-grid,
  .hp-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .hp-topbar-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 9px 0;
  }

  .hp-topbar-inner > div {
    flex-wrap: wrap;
    white-space: normal;
  }

  .hp-header-inner {
    min-height: 72px;
  }

  .hp-header .menu-toggle {
    display: block;
  }

  .hp-header .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 18px 22px;
    background: #fff;
    border-top: 1px solid #d9e0e4;
    box-shadow: 0 18px 40px rgba(7,27,45,.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: .18s;
  }

  .hp-header .main-nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .hp-header .main-nav a,
  .hp-nav-item > a {
    min-height: auto;
    padding: 12px 4px;
    border-bottom: 1px solid #edf0f2;
  }

  .hp-nav-item {
    position: static;
  }

  .hp-dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 0 12px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .hp-hero-inner,
  .hp-quote-inner {
    grid-template-columns: 1fr;
  }

  .hp-hero-inner {
    min-height: 0;
    padding: 46px 0;
  }

  .hp-feature-grid,
  .hp-service-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .hp-logo-mark {
    width: 48px;
  }

  .hp-logo strong {
    font-size: 15px;
  }

  .hp-logo small {
    font-size: 11px;
    letter-spacing: 4px;
  }

  .hp-hero h1 {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .hp-hero-card img {
    height: 250px;
  }

  .hp-power-tag {
    width: 112px;
    min-height: 130px;
  }

  .hp-product-grid,
  .hp-brand-grid,
  .hp-footer-grid {
    grid-template-columns: 1fr;
  }

  .hp-group-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .hp-copyright {
    flex-direction: column;
  }
}

/* Trang chủ kiểu Win Power, viết lại riêng cho Thuận Tiến Power */
.wpn-page {
  background: #f3f5f7;
  color: #172735;
}

.wpn-page .container {
  width: min(1180px, calc(100% - 32px));
}

.wpn-top {
  color: #d9e7f2;
  background: #071b2c;
  font-size: 12px;
}

.wpn-top-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.wpn-top p {
  margin: 0;
  font-weight: 900;
  letter-spacing: .4px;
}

.wpn-top-inner > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
}

.wpn-top a {
  color: #ffd247;
  font-weight: 900;
}

.wpn-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: white;
  box-shadow: 0 12px 30px rgba(7, 27, 44, .12);
}

.wpn-head-main {
  min-height: 86px;
  display: grid;
  grid-template-columns: 270px 1fr 210px;
  gap: 24px;
  align-items: center;
}

.wpn-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0a2d4b;
  line-height: 1;
}

.wpn-logo svg {
  width: 62px;
  height: 48px;
  flex: 0 0 auto;
}

.wpn-logo-img {
  width: 186px;
  height: auto;
}

.wpn-logo span {
  display: flex;
  flex-direction: column;
}

.wpn-logo strong {
  color: #f27500;
  font-size: 18px;
  font-weight: 900;
}

.wpn-logo small {
  margin-top: 4px;
  color: #1457a9;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 5px;
}

.wpn-search {
  display: grid;
  grid-template-columns: 1fr 112px;
  overflow: hidden;
  border: 2px solid #f0b400;
  border-radius: 999px;
  background: white;
}

.wpn-search input {
  min-width: 0;
  padding: 13px 18px;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.wpn-search button {
  color: #07233b;
  background: #ffd247;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.wpn-head-phone {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  column-gap: 10px;
  color: #0a2d4b;
}

.wpn-head-phone span {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: white;
  background: #f27500;
  border-radius: 50%;
  font-size: 20px;
}

.wpn-head-phone b {
  color: #6b7b88;
  font-size: 11px;
}

.wpn-head-phone strong {
  color: #f27500;
  font-size: 16px;
}

.wpn-menu-bar {
  background: #0b4a86;
}

.wpn-menu-inner {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.wpn-header .menu-toggle {
  display: none;
  margin-left: auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
}

.wpn-header .menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px;
  background: white;
}

.wpn-nav {
  display: flex;
  gap: 0;
  margin: 0;
  width: 100%;
}

.wpn-header .main-nav a,
.wpn-nav-group > a {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: white;
  border-right: 1px solid rgba(255,255,255,.18);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.wpn-header .main-nav a:hover,
.wpn-nav-group:hover > a {
  color: #ffd247;
  background: #073967;
}

.wpn-nav-group {
  position: relative;
}

.wpn-nav-group > div {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  padding: 8px;
  background: white;
  border: 1px solid #d9e0e4;
  box-shadow: 0 18px 40px rgba(7, 27, 44, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .18s;
}

.wpn-nav-group:hover > div {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.wpn-header .main-nav .wpn-nav-group div a {
  min-height: auto;
  display: block;
  padding: 11px 12px;
  color: #263c4d;
  border-right: 0;
  border-bottom: 1px solid #eef1f3;
  font-size: 12px;
  text-transform: none;
}

.wpn-header .main-nav .wpn-nav-group div a:hover {
  color: #f27500;
  background: #f7f9fb;
}

.wpn-hero {
  position: relative;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(90deg, rgba(5, 24, 42, .96), rgba(5, 24, 42, .84) 48%, rgba(5, 24, 42, .28)),
    url("thuan-tien-poster-reference.png") center / cover;
}

.wpn-hero-inner {
  min-height: 540px;
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  gap: 44px;
  align-items: center;
  padding: 54px 0;
}

.wpn-label {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 8px 12px;
  color: #061b2e;
  background: #ffd247;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.wpn-hero h1 {
  margin: 0;
  font-size: clamp(42px, 5.3vw, 70px);
  line-height: 1.04;
  letter-spacing: -2px;
}

.wpn-hero h1 span {
  color: #ffd247;
}

.wpn-hero-copy > p:not(.wpn-label) {
  max-width: 610px;
  margin: 18px 0 0;
  color: #d7e3ec;
  font-size: 15px;
}

.wpn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.wpn-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.wpn-btn-yellow {
  color: #061b2e;
  background: #ffd247;
}

.wpn-btn-outline {
  color: white;
  border: 1px solid rgba(255,255,255,.45);
}

.wpn-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 560px;
  margin-top: 34px;
}

.wpn-hero-stats div {
  padding: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}

.wpn-hero-stats strong {
  display: block;
  color: #ffd247;
  font-size: 22px;
  line-height: 1;
}

.wpn-hero-stats span {
  color: #b7c8d6;
  font-size: 11px;
}

.wpn-hero-image {
  position: relative;
}

.wpn-hero-image img {
  width: 100%;
  height: 365px;
  object-fit: cover;
  object-position: 62% center;
  border: 8px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.4);
}

.wpn-badge {
  position: absolute;
  right: -12px;
  top: -24px;
  width: 150px;
  padding: 16px 10px;
  text-align: center;
  color: #061b2e;
  background: #ffd247;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.wpn-badge small {
  display: block;
  font-size: 10px;
  font-weight: 900;
}

.wpn-badge b {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.wpn-intro {
  padding: 34px 0;
  background: white;
}

.wpn-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.wpn-intro article {
  min-height: 176px;
  padding: 24px;
  border: 1px solid #dce3e7;
  border-top: 5px solid #0b4a86;
  background: #f8fafb;
}

.wpn-intro span,
.wpn-title small,
.wpn-quote small {
  color: #f27500;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.wpn-intro h2 {
  margin: 10px 0;
  color: #0a2d4b;
  font-size: 22px;
  line-height: 1.2;
}

.wpn-intro p,
.wpn-title p {
  color: #667886;
  font-size: 13px;
}

.wpn-products,
.wpn-projects,
.wpn-quote {
  padding: 76px 0;
  background: #eef2f4;
}

.wpn-title {
  max-width: 760px;
  margin-bottom: 34px;
}

.wpn-title h2 {
  margin: 8px 0 10px;
  color: #0a2d4b;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -1px;
}

.wpn-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.wpn-product {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: white;
  border: 1px solid #d9e0e4;
  box-shadow: 0 10px 28px rgba(7,27,44,.07);
  transition: .2s;
}

.wpn-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(7,27,44,.14);
}

.wpn-product img {
  width: 100%;
  height: 175px;
  object-fit: contain;
  object-position: center;
  background: #f7f9fa;
  border: 1px solid #edf0f2;
}

.wpn-product span {
  margin-top: 13px;
  color: #f27500;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.wpn-product strong {
  margin-top: 5px;
  color: #0a2d4b;
  font-size: 18px;
}

.wpn-product small {
  margin-top: 6px;
  color: #6c7e8a;
  font-size: 11px;
}

.wpn-product-specs {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #e4eaee;
  list-style: none;
}

.wpn-product-specs li {
  color: #405260;
  font-size: 11px;
  line-height: 1.35;
}

.wpn-product-specs em {
  color: #0a2d4b;
  font-style: normal;
  font-weight: 900;
}

.wpn-product b {
  display: inline-block;
  margin-top: auto;
  padding-top: 12px;
  color: #0b4a86;
  font-size: 11px;
  font-weight: 900;
}

.wpn-shells {
  padding: 76px 0;
  color: white;
  background: linear-gradient(135deg, #08233b, #0b4a86);
}

.wpn-title-light h2 {
  color: white;
}

.wpn-shell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.wpn-shell-grid article {
  min-height: 235px;
  padding: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}

.wpn-shell-grid span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #ffd247;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  font-size: 28px;
}

.wpn-shell-grid h3 {
  margin: 20px 0 10px;
  font-size: 22px;
}

.wpn-shell-grid p {
  color: #c1d0dc;
  font-size: 13px;
}

.wpn-services {
  padding: 76px 0;
  background: white;
}

.wpn-services .wpn-title small {
  font-size: 14px;
  letter-spacing: 1.4px;
}

.wpn-services .wpn-title h2 {
  color: #08233b;
  font-size: clamp(36px, 4.4vw, 54px);
  font-weight: 900;
  letter-spacing: -1.4px;
}

.wpn-services .wpn-title p {
  max-width: 620px;
  color: #475b69;
  font-size: 16px;
  line-height: 1.7;
}

.wpn-service-layout {
  display: grid;
  grid-template-columns: .68fr 1.32fr;
  gap: 34px;
  align-items: start;
}

.wpn-service-list {
  display: grid;
  gap: 18px;
}

.wpn-service-list article {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 25px 28px;
  background: #f7f9fb;
  border: 1px solid #dce3e7;
  border-left: 6px solid #f27500;
  border-radius: 18px;
}

.wpn-service-list b {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #061b2e;
  background: #ffd247;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 900;
}

.wpn-service-list h3 {
  margin: 0 0 8px;
  color: #0a2d4b;
  font-size: 27px;
  line-height: 1.18;
  font-weight: 900;
}

.wpn-service-list p {
  margin: 0;
  color: #475b69;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  white-space: nowrap;
}

.wpn-project-grid,
.wpn-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.wpn-project-grid article,
.wpn-news-grid article {
  overflow: hidden;
  background: white;
  border: 1px solid #d9e0e4;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(7,27,44,.07);
}

.wpn-project-grid img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center;
  background: #e9eef2;
}

.wpn-project-grid span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 20px 0;
  padding: 7px 12px;
  color: white;
  background: linear-gradient(135deg, #ff7a00, #e44d00);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wpn-project-grid h3,
.wpn-project-grid p,
.wpn-news-grid h3,
.wpn-news-grid p {
  margin-inline: 20px;
}

.wpn-project-grid h3,
.wpn-news-grid h3 {
  margin-top: 10px;
  margin-bottom: 8px;
  color: #0a2d4b;
  font-size: 20px;
}

.wpn-project-grid p,
.wpn-news-grid p {
  color: #667886;
  font-size: 13px;
  margin-bottom: 22px;
}

.wpn-news {
  padding: 76px 0;
  background: white;
}

.wpn-news-grid article {
  padding-top: 22px;
}

.wpn-news-grid span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: 20px;
  color: #061b2e;
  background: #ffd247;
  border-radius: 50%;
  font-weight: 900;
}

.wpn-quote {
  background: linear-gradient(120deg, #0b4a86, #08233b);
  color: white;
}

.wpn-quote-inner {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 48px;
  align-items: center;
}

.wpn-quote h2 {
  margin: 10px 0;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
}

.wpn-quote p {
  color: #c5d5e1;
  font-size: 14px;
}

.wpn-contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.wpn-contact-cards a {
  padding: 12px 14px;
  color: #061b2e;
  background: #ffd247;
  border-radius: 4px;
  font-weight: 900;
}

.wpn-form {
  margin: 0;
}

.wpn-footer {
  color: #c4d2dd;
  background: #061321;
}

.wpn-footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1.05fr .85fr .85fr;
  gap: 34px;
  padding: 46px 0;
}

.wpn-footer-logo strong {
  color: #f27500;
}

.wpn-footer-logo {
  display: inline-flex;
  padding: 10px 12px;
  background: rgba(255,255,255,.96);
  border-radius: 16px;
}

.wpn-footer-logo .wpn-logo-img {
  width: 225px;
  max-height: none;
}

.wpn-footer p {
  color: #91a4b3;
  font-size: 13px;
}

.wpn-footer h3 {
  margin: 0 0 12px;
  color: white;
  font-size: 16px;
}

.wpn-footer a:not(.wpn-logo) {
  display: block;
  margin: 7px 0;
  color: #91a4b3;
  font-size: 13px;
}

.wpn-footer a:not(.wpn-logo):hover {
  color: #ffd247;
}

.wpn-copy {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid rgba(255,255,255,.11);
  color: #708698;
  font-size: 12px;
}

.wpn-phone-ring {
  position: fixed;
  z-index: 90;
  left: 16px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.wpn-phone-ring a {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: white;
  background: #f27500;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(242,117,0,.55);
  animation: wpnPulse 1.4s infinite;
}

.wpn-phone-ring span {
  padding: 9px 12px;
  color: white;
  background: #f27500;
  border-radius: 999px;
  font-weight: 900;
}

@keyframes wpnPulse {
  0% { box-shadow: 0 0 0 0 rgba(242,117,0,.55); }
  70% { box-shadow: 0 0 0 16px rgba(242,117,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,117,0,0); }
}

.wpn-bottom-contact {
  display: none;
}

.spec-hero {
  color: white;
  background: linear-gradient(120deg, #061b2e, #0b4a86);
}

.spec-hero-inner {
  min-height: 420px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 44px;
  align-items: center;
  padding: 58px 0;
}

.spec-hero h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -2px;
}

.spec-hero h1 span {
  color: #ffd247;
}

.spec-hero p:not(.wpn-label) {
  max-width: 620px;
  color: #d1dfeb;
  font-size: 14px;
}

.spec-hero img {
  width: 100%;
  height: 310px;
  object-fit: contain;
  background: #f7f9fa;
  border: 8px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.32);
}

.spec-list {
  padding: 76px 0;
  background: #eef2f4;
}

.spec-grid {
  display: grid;
  gap: 18px;
}

.spec-card {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 24px;
  padding: 20px;
  background: white;
  border: 1px solid #d9e0e4;
  box-shadow: 0 12px 30px rgba(7,27,44,.08);
  scroll-margin-top: 150px;
}

.spec-card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: contain;
  background: #f7f9fa;
  border: 1px solid #e3e8ec;
}

.spec-copy > span {
  color: #f27500;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.spec-copy h2 {
  margin: 6px 0 9px;
  color: #0a2d4b;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.12;
}

.spec-copy p {
  color: #667886;
  font-size: 13px;
}

.spec-copy table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  font-size: 13px;
}

.spec-copy th,
.spec-copy td {
  padding: 10px 12px;
  border: 1px solid #dfe5e8;
  text-align: left;
}

.spec-copy th {
  width: 210px;
  color: #0a2d4b;
  background: #f5f8fa;
}

.spec-copy a {
  display: inline-flex;
  padding: 11px 14px;
  color: #061b2e;
  background: #ffd247;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 1060px) {
  .wpn-head-main {
    grid-template-columns: 240px 1fr;
  }

  .wpn-head-phone {
    display: none;
  }

  .wpn-product-grid,
  .wpn-shell-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .wpn-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-card {
    grid-template-columns: 240px 1fr;
  }

  .wpn-service-list p {
    white-space: normal;
  }
}

@media (max-width: 820px) {
  .wpn-top-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 9px 0;
  }

  .wpn-top-inner > div {
    justify-content: flex-start;
  }

  .wpn-head-main {
    min-height: 74px;
    grid-template-columns: 1fr;
  }

  .wpn-search {
    display: none;
  }

  .wpn-header .menu-toggle {
    display: block;
  }

  .wpn-menu-inner {
    justify-content: flex-end;
  }

  .wpn-header .main-nav {
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px;
    background: white;
    box-shadow: 0 18px 40px rgba(7,27,44,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: .18s;
  }

  .wpn-header .main-nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .wpn-header .main-nav a,
  .wpn-nav-group > a {
    min-height: auto;
    padding: 12px;
    color: #0a2d4b;
    border-right: 0;
    border-bottom: 1px solid #edf0f2;
  }

  .wpn-nav-group {
    position: static;
  }

  .wpn-nav-group > div {
    position: static;
    min-width: 0;
    padding: 0 0 0 12px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .wpn-hero-inner,
  .wpn-intro-grid,
  .wpn-service-layout,
  .wpn-quote-inner,
  .spec-hero-inner {
    grid-template-columns: 1fr;
  }

  .wpn-hero-inner {
    min-height: 0;
  }

  .wpn-product-grid,
  .wpn-shell-grid,
  .wpn-project-grid,
  .wpn-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-card {
    grid-template-columns: 1fr;
  }

  .spec-card img {
    height: 260px;
  }
}

@media (max-width: 560px) {
  .wpn-logo svg {
    width: 48px;
  }

  .wpn-logo-img {
    width: 162px;
  }

  .wpn-footer-logo .wpn-logo-img {
    width: 190px;
  }

  .wpn-logo strong {
    font-size: 15px;
  }

  .wpn-logo small {
    font-size: 11px;
    letter-spacing: 4px;
  }

  .wpn-hero h1 {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .wpn-hero-image img {
    height: 250px;
  }

  .spec-hero h1 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .spec-hero img {
    height: 230px;
  }

  .wpn-badge {
    right: 0;
    width: 126px;
  }

  .wpn-hero-stats,
  .wpn-product-grid,
  .wpn-shell-grid,
  .wpn-project-grid,
  .wpn-news-grid,
  .wpn-footer-grid {
    grid-template-columns: 1fr;
  }

  .wpn-service-list article {
    grid-template-columns: 1fr;
  }

  .wpn-copy {
    flex-direction: column;
  }

  .wpn-phone-ring {
    display: none;
  }

  .wpn-bottom-contact {
    position: fixed;
    z-index: 120;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: white;
    border-top: 1px solid #d9e0e4;
    box-shadow: 0 -8px 24px rgba(7,27,44,.12);
  }

  .wpn-bottom-contact a {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #0a2d4b;
    font-size: 11px;
    font-weight: 800;
  }

  .wpn-bottom-contact span {
    color: #f27500;
    font-size: 18px;
  }

  .wpn-page {
    padding-bottom: 58px;
  }

  .spec-copy th,
  .spec-copy td {
    display: block;
    width: 100%;
  }

  .spec-copy th {
    border-bottom: 0;
  }
}