@charset "utf-8";

/* =========================================================
   AmorCore Website Styles - Final Organized Version
   Structure:
   01. Reset & Variables
   02. Header / Navigation
   03. Home Hero
   04. Common Utilities
   05. Home Products
   06. Home Why Choose
   07. Home Process Flow
   08. Home Watch Advantages
   09. Home Technical Team
   10. Home Latest News
   11. Home Contact CTA / Inquiry
   12. Footer
   13. Global Responsive
   14. About Page
   15. Product Overview Page
   16. Product Structure Comparison
   17. Industrial Page
   18. Commodity Page
   19. Technology - Process Flow
   20. Technology - Material Properties
   21. Technology - Performance Testing
   22. News & Blog Page
   23. Blog Show Page
   24. Contact Page
   25. FAQs Page
   26. Privacy Policy Page
   27. Sitemap Page
========================================================= */


/* =========================================================
   01. RESET & VARIABLES
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --navy: #111d31;
  --deep-blue: #203b5c;
  --blue: #2b527b;
  --light-blue: #dce7f3;
  --text-gray: #58687d;
  --white: #ffffff;
  --border: rgba(17, 29, 49, 0.1);
  --shadow: 0 18px 45px rgba(17, 29, 49, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--navy);
  background: #f6f8fb;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}


/* =========================================================
   02. HEADER / NAVIGATION
========================================================= */

.header {
  width: 100%;
  height: 82px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  border-bottom: 1px solid rgba(17, 29, 49, 0.08);
}

.header-inner {
  max-width: 1480px;
  height: 82px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-mark {
  width: 230px;
}

.mobile-toggle {
  display: none;
}

.mobile-btn {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-btn span {
  width: 23px;
  height: 2px;
  background: var(--navy);
  position: relative;
}

.mobile-btn span::before,
.mobile-btn span::after {
  content: "";
  width: 23px;
  height: 2px;
  background: var(--navy);
  position: absolute;
  left: 0;
}

.mobile-btn span::before {
  top: -7px;
}

.mobile-btn span::after {
  top: 7px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-item {
  position: relative;
}

.nav-link {
  height: 82px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #13233b;
  cursor: pointer;
  position: relative;
}

.nav-link:hover {
  color: var(--blue);
}

.nav-link.active::after {
  content: "";
  width: 48px;
  height: 4px;
  background: var(--blue);
  border-radius: 999px;
  position: absolute;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
}

.arrow {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
}

.dropdown {
  min-width: 238px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  border-radius: 0 0 12px 12px;
  padding: 14px;
  box-shadow: 0 18px 36px rgba(17, 29, 49, 0.16);
  border: 1px solid rgba(17, 29, 49, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-link {
  display: block;
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #24334a;
  border-radius: 8px;
}

.dropdown-link:hover {
  background: #eef4fa;
  color: var(--blue);
}


/* =========================================================
   03. HERO
========================================================= */

.hero {
  margin-top: 82px;
  height: 650px;
  position: relative;
  overflow: hidden;
  background: #d9e3ef;
}

.hero-slider {
  width: 300%;
  height: 650px;
  display: flex;
  animation: slideMove 16s infinite;
  position: relative;
  z-index: 2;
}

.slide {
  width: 33.333333%;
  height: 650px;
  position: relative;
  overflow: hidden;
}

.slide-bg-1 {
  background:
    radial-gradient(circle at 76% 40%, rgba(255, 255, 255, 0.72), transparent 22%),
    linear-gradient(110deg, #f8fbff 0%, #d8e4ef 43%, #9dafc3 100%);
}

.slide-bg-2 {
  background:
    radial-gradient(circle at 76% 40%, rgba(64, 105, 150, 0.25), transparent 24%),
    linear-gradient(110deg, #f7f9fc 0%, #d6e1ec 43%, #8198ae 100%);
}

.slide-bg-3 {
  background:
    radial-gradient(circle at 76% 40%, rgba(255, 255, 255, 0.65), transparent 23%),
    linear-gradient(110deg, #f8f9fb 0%, #dce5ee 44%, #748ba3 100%);
}

.tech-grid {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(70, 100, 130, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 100, 130, 0.18) 1px, transparent 1px);
  background-size: 54px 54px;
}

.molecule {
  width: 650px;
  height: 430px;
  position: absolute;
  right: 240px;
  top: 70px;
  opacity: 0.42;
  background:
    radial-gradient(circle at 18% 24%, #ffffff 0 6px, transparent 7px),
    radial-gradient(circle at 38% 36%, #ffffff 0 5px, transparent 6px),
    radial-gradient(circle at 58% 22%, #ffffff 0 6px, transparent 7px),
    radial-gradient(circle at 72% 48%, #ffffff 0 5px, transparent 6px),
    radial-gradient(circle at 86% 72%, #ffffff 0 6px, transparent 7px),
    linear-gradient(28deg, transparent 18%, rgba(255, 255, 255, 0.6) 19%, transparent 20%),
    linear-gradient(-22deg, transparent 38%, rgba(255, 255, 255, 0.55) 39%, transparent 40%);
}

.metal-shape {
  width: 830px;
  height: 330px;
  position: absolute;
  right: -90px;
  top: 148px;
  border-radius: 58% 42% 54% 46%;
  background:
    linear-gradient(112deg,
      #f8fbff 0%,
      #778ba2 10%,
      #ffffff 20%,
      #152a43 30%,
      #edf5fc 41%,
      #657a92 52%,
      #ffffff 62%,
      #174d86 70%,
      #f0f6fc 80%,
      #52677f 100%);
  filter: drop-shadow(0 32px 36px rgba(15, 27, 45, 0.28));
  transform: rotate(-8deg) skewX(-12deg);
  opacity: 0.96;
}

.metal-shape::before {
  content: "";
  width: 90%;
  height: 54%;
  position: absolute;
  top: 23%;
  left: 6%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
  transform: rotate(8deg);
}

.hero-content {
  max-width: 1480px;
  height: 100%;
  margin: 0 auto;
  padding: 0 56px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 8;
}

.hero-text {
  max-width: 720px;
  padding-bottom: 50px;
}

.hero-title {
  font-size: 76px;
  line-height: 0.98;
  font-weight: 900;
  color: #101b2f;
  letter-spacing: -3px;
  margin-bottom: 24px;
}

.hero-desc {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
  color: #2c4f75;
  margin-bottom: 10px;
}

.hero-line-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}

.hero-line-main {
  width: 88px;
  height: 3px;
  background: #6e8299;
}

.hero-line-dot {
  width: 120px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #6e8299 0 4px, transparent 4px 10px);
}

.hero-buttons {
  display: flex;
  gap: 28px;
}

.btn {

  width: 230px;
  height: 56px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 15px;
  font-weight: 900;
  transition: all 0.25s ease;
}

.btn-primary {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(43, 82, 123, 0.25);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.38);
  border: 2px solid #6e8299;
  color: #17263d;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-arrow {
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.hero-bottom-arc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 155%;
  height: 200px;
  background: #f6f8fb;
  border-radius: 100% 100% 0 0 / 30% 30% 0 0;
  transform: translateX(-50%);
  z-index: 1;
}

.hero-bottom-arc::before {
  display: none;
}

.hero-dots {
  position: absolute;
  bottom: 35px;
  left: 50%;
  z-index: 20;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}

.hero-dot {
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(17, 29, 49, 0.1);
}

.hero-dot:nth-child(1) {
  animation: dotOne 16s infinite;
}

.hero-dot:nth-child(2) {
  animation: dotTwo 16s infinite;
}

.hero-dot:nth-child(3) {
  animation: dotThree 16s infinite;
}

@keyframes slideMove {
  0%, 28% { transform: translateX(0); }
  33%, 61% { transform: translateX(-33.333333%); }
  66%, 94% { transform: translateX(-66.666666%); }
  100% { transform: translateX(0); }
}

@keyframes dotOne {
  0%, 28% { width: 36px; }
  33%, 100% { width: 10px; }
}

@keyframes dotTwo {
  0%, 28% { width: 10px; }
  33%, 61% { width: 36px; }
  66%, 100% { width: 10px; }
}

@keyframes dotThree {
  0%, 61% { width: 10px; }
  66%, 94% { width: 36px; }
  100% { width: 10px; }
}


/* =========================================================
   04. COMMON UTILITIES
========================================================= */

.section {
  padding: 82px 56px;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

.section-kicker {
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.section-title {
  color: var(--navy);
  font-size: 38px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -1px;
}

.section-desc {
  margin-top: 14px;
  color: var(--text-gray);
  font-size: 16px;
}


/* =========================================================
   05. AMORPHOUS METAL PRODUCTS
========================================================= */

.am-products-section {
  position: relative;
  padding: 100px 56px 110px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.9), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(126, 181, 232, 0.18), transparent 32%),
    linear-gradient(180deg, #f7fbff 0%, #edf3f8 100%);
  overflow: hidden;
}

.am-products-section::before {
  content: "";
  position: absolute;
  right: -90px;
  top: 18px;
  width: 360px;
  height: 92px;
  border-radius: 999px;
  transform: rotate(-12deg) skewX(-18deg);
  opacity: 0.48;
  pointer-events: none;
}

.am-products-container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
}

.am-products-head {
  max-width: 920px;
  margin: 0 auto 48px;
  text-align: center;
}

.am-products-title {
  margin-bottom: 18px;
  color: #111d31;
  font-size: 54px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -1.6px;
}

.am-products-title::after {
  content: "";
  display: block;
  width: 150px;
  height: 3px;
  margin: 24px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 181, 232, 0), #7eb5e8, rgba(126, 181, 232, 0));
  box-shadow: 0 0 18px rgba(126, 181, 232, 0.45);
}

.am-products-desc {
  max-width: 820px;
  margin: 0 auto;
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

.am-products-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.am-product-card {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  border-radius: 22px;
  background: #eaf1f7;
  border: 1px solid rgba(126, 151, 180, 0.26);
  box-shadow: 0 14px 34px rgba(17, 29, 49, 0.07);
  transition: all 0.28s ease;
}

.am-product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(93, 168, 239, 0.42);
  box-shadow: 0 24px 54px rgba(17, 29, 49, 0.14);
}

.am-product-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 290px;
  overflow: hidden;
  text-decoration: none;
}

.am-product-media img {
  width: 100%;
  height: 100%;
  min-height: 290px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.am-product-card:hover .am-product-media img {
  transform: scale(1.05);
}

.am-product-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 58px 16px 18px;
  background:
    linear-gradient(to top,
      rgba(14, 28, 48, 0.74) 0%,
      rgba(14, 28, 48, 0.28) 48%,
      rgba(14, 28, 48, 0) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}

.am-product-name {
  position: relative;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.28;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.am-product-name::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #5da8ef;
  box-shadow: 0 0 10px rgba(93, 168, 239, 0.55);
}


/* =========================================================
   06. WHY CHOOSE
========================================================= */

.why-section {
  position: relative;
  padding: 120px 56px;
  background: linear-gradient(180deg, #f6f8fb 0%, #f9fbfd 100%);
  overflow: hidden;
}

.why-section::before,
.why-section::after {
  content: "";
  position: absolute;
  top: 0;
  width: 300px;
  height: 100%;
  opacity: 0.26;
  pointer-events: none;
}

.why-section::before {
  left: 0;
  background:
    linear-gradient(90deg, rgba(135, 153, 174, 0.22) 1px, transparent 1px),
    linear-gradient(rgba(135, 153, 174, 0.22) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0.2), transparent);
  mask-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0.2), transparent);
}

.why-section::after {
  right: 0;
  background:
    radial-gradient(circle at 20px 20px, rgba(120, 140, 165, 0.55) 2px, transparent 3px),
    linear-gradient(45deg, transparent 48%, rgba(135, 153, 174, 0.22) 49%, rgba(135, 153, 174, 0.22) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(135, 153, 174, 0.22) 49%, rgba(135, 153, 174, 0.22) 51%, transparent 52%);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to left, #000, rgba(0, 0, 0, 0.22), transparent);
  mask-image: linear-gradient(to left, #000, rgba(0, 0, 0, 0.22), transparent);
}

.why-wrap {
  --why-card-width: 242px;
  --why-gap: 26px;
  --why-line-side: 18px;
  --why-total-width: calc((var(--why-card-width) * 4) + (var(--why-gap) * 3));

  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.why-head {
  margin-bottom: 14px;
  text-align: center;
}

.why-title {
  color: #111d31;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.why-title-line {
  width: 48px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: #9aaec4;
}

.why-timeline {
  width: calc(var(--why-total-width) + (var(--why-line-side) * 2));
  height: 58px;
  margin: 0 auto 12px;
  position: relative;
}

.why-timeline-line {
  position: absolute;
  left: var(--why-line-side);
  right: var(--why-line-side);
  top: 50%;
  z-index: 1;
  height: 2px;
  background: #7f93ab;
  transform: translateY(-50%);
}

.why-end {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 16px;
  transform: translateY(-50%);
}

.why-end::before,
.why-end::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  background: #7f93ab;
  transform: translateY(-50%);
}

.why-end-left {
  left: 0;
}

.why-end-left::before {
  left: 0;
  width: 14px;
  background: #5b6b8c;
  transform: translate(-100%, -50%) rotate(-45deg);
  transform-origin: right center;
}

.why-end-left::after {
  width: 18px;
  right: 0;
}

.why-end-right {
  right: 0;
}

.why-end-right::before {
  width: 18px;
  left: 0;
}

.why-end-right::after {
  left: 100%;
  width: 14px;
  background: #5b6b8c;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: left center;
}

.why-steps {
  width: var(--why-total-width);
  height: 58px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, var(--why-card-width));
  column-gap: var(--why-gap);
  align-items: center;
  position: relative;
  z-index: 3;
}

.why-step {
  display: flex;
  justify-content: center;
}

.why-step-badge {
  min-width: 55px;
  height: 38px;
  padding: 0 14px;
  background: #263f61;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(16% 0, 84% 0, 100% 50%, 84% 100%, 16% 100%, 0 50%);
  box-shadow: 0 8px 18px rgba(38, 63, 97, 0.18);
}

.why-cards {
  width: var(--why-total-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, var(--why-card-width));
  column-gap: var(--why-gap);
  justify-content: center;
}

.why-card {
  min-height: 258px;
  padding: 34px 20px 28px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(17, 29, 49, 0.06);
  box-shadow: 0 8px 24px rgba(17, 29, 49, 0.08);
  text-align: center;
  transition: all 0.25s ease;
}

.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(17, 29, 49, 0.12);
}

.why-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #203b5c;
}

.why-icon svg {
  width: 58px;
  height: 58px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-card-title {
  margin-bottom: 10px;
  color: #13233b;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 900;
}

.why-card-text {
  max-width: 210px;
  margin: 0 auto;
  color: #536278;
  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   07. PROCESS FLOW
========================================================= */

.home-process-section {
  position: relative;
  padding: 105px 56px 95px;
  background:
    radial-gradient(circle at 16% 35%, rgba(43, 82, 123, 0.10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.home-process-layout {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 70px;
  align-items: center;
}

.process-copy {
  max-width: 560px;
}

.process-main-title {
  margin-bottom: 14px;
  color: #111d31;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -1.6px;
}

.process-sub-title {
  display: inline-flex;
  align-items: center;
  margin-bottom: 28px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.process-desc {
  max-width: 560px;
  margin-bottom: 28px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

.process-tags {
  margin-bottom: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.process-tags span {
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(238, 244, 250, 0.72);
  border: 1px solid rgba(43, 82, 123, 0.14);
  color: #2b527b;
  font-size: 13px;
  font-weight: 800;
}

.process-btn {
  width: 230px;
  height: 56px;
  border-radius: 7px;
  background: #2b527b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 16px 34px rgba(43, 82, 123, 0.24);
  transition: all 0.25s ease;
}

.process-btn:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.process-btn span {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.process-chart-wrap {
  position: relative;
}

.process-chart-card {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.process-chart-img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(17, 29, 49, 0.08);
  box-shadow: 0 26px 62px rgba(17, 29, 49, 0.16);
}


/* =========================================================
   08. WATCH ADVANTAGES
========================================================= */

.watch-adv-section {
  position: relative;
  padding: 88px 56px 96px;
  background:
    radial-gradient(circle at 14% 18%, rgba(43, 82, 123, 0.08), transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(43, 82, 123, 0.10), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.watch-adv-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.13;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 145, 170, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 145, 170, 0.16) 1px, transparent 1px);
  background-size: 54px 54px;
}

.watch-adv-head {
  max-width: 1080px;
  margin: 0 auto 34px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.watch-adv-title {
  max-width: 880px;
  margin: 0 auto 16px;
  color: #111d31;
  font-size: 40px;
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -1.1px;
}

.watch-adv-subtitle {
  max-width: 820px;
  margin: 0 auto 26px;
  color: #50647d;
  font-size: 17px;
  line-height: 1.68;
  font-weight: 700;
}

.watch-adv-keywords {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.watch-adv-keywords span {
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(238, 244, 250, 0.88);
  border: 1px solid rgba(43, 82, 123, 0.14);
  color: #2b527b;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(17, 29, 49, 0.04);
}

.watch-adv-image-wrap {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.watch-adv-image-card {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(17, 29, 49, 0.08);
  box-shadow: 0 24px 56px rgba(17, 29, 49, 0.12);
}

.watch-adv-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(160, 180, 200, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 180, 200, 0.22) 1px, transparent 1px);
  background-size: 42px 42px;
}

.watch-adv-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 520px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(17, 29, 49, 0.10);
}


/* =========================================================
   09. TECHNICAL TEAM
========================================================= */

.team-impact-section {
  padding: 100px 56px 110px;
  background: #edf3f8;
}

.team-impact-container {

  max-width: 1320px;
  margin: 0 auto;
}

.team-impact-card {
  min-height: 460px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #263b50 0%, #49677f 100%);
  box-shadow: 0 30px 80px rgba(17, 29, 49, 0.22);
}

.team-impact-content {
  padding: 62px 58px;
  color: #ffffff;
}

.team-impact-kicker {
  margin-bottom: 20px;
  color: #9cc6ef;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.team-impact-title {
  max-width: 560px;
  margin-bottom: 28px;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -1.3px;
}

.team-impact-text {
  max-width: 620px;
  margin-bottom: 18px;
  color: #e1ebf4;
  font-size: 16px;
  line-height: 1.86;
}

.team-impact-line {
  width: 96px;
  height: 4px;
  margin-top: 32px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9cc6ef, rgba(156, 198, 239, 0));
}

.team-impact-photo {
  position: relative;
  min-height: 460px;
  overflow: hidden;
}

.team-impact-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(38, 59, 80, 0.55) 0%, rgba(38, 59, 80, 0.12) 42%, rgba(38, 59, 80, 0) 100%);
  pointer-events: none;
}

.team-impact-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.team-impact-stats {
  width: calc(100% - 80px);
  margin: -30px auto 0;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.team-impact-stat {
  min-height: 132px;
  padding: 24px 22px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(17, 29, 49, 0.08);
  box-shadow: 0 18px 46px rgba(17, 29, 49, 0.12);
}

.team-impact-stat-num {
  margin-bottom: 14px;
  color: #2b527b;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}

.team-impact-stat-title {
  margin-bottom: 8px;
  color: #111d31;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
}

.team-impact-stat-text {
  color: #58687d;
  font-size: 13px;
  line-height: 1.58;
}


/* =========================================================
   10. LATEST NEWS
========================================================= */

.ac-news-section {
  padding: 95px 56px 105px;
  background:
    radial-gradient(circle at 14% 18%, rgba(43, 82, 123, 0.08), transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(43, 82, 123, 0.10), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
}

.ac-news-container {
  max-width: 1320px;
  margin: 0 auto;
}

.ac-news-head {
  max-width: 860px;
  margin: 0 auto 42px;
  text-align: center;
}

.ac-news-title {
  margin: 0 0 14px;
  color: #111d31;
  font-size: 46px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1px;
}

.ac-news-desc {
  margin: 0;
  color: #58687d;
  font-size: 17px;
  line-height: 1.8;
}

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

.ac-news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border-radius: 0;
  border: 1px solid rgba(17, 29, 49, 0.08);
  box-shadow: 0 12px 32px rgba(17, 29, 49, 0.06);
  transition: all 0.28s ease;
}

.ac-news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(17, 29, 49, 0.12);
}

.ac-news-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}

.ac-news-thumb img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.ac-news-card:hover .ac-news-thumb img {
  transform: scale(1.05);
}

.ac-news-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 12px;
  background: #465c6c;
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ac-news-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 24px 22px;
  background: #ffffff;
}

.ac-news-card-title {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.34;
  font-weight: 800;
}

.ac-news-card-title a {
  color: #2b527b;
  text-decoration: none;
  transition: color 0.25s ease;
}

.ac-news-card-title a:hover {
  color: #203b5c;
}

.ac-news-card-text {
  flex: 1;
  margin: 0 0 20px;
  color: #66768a;
  font-size: 16px;
  line-height: 1.75;
}

.ac-news-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #2b527b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
}

.ac-news-link span {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.ac-news-date {
  padding-top: 14px;
  border-top: 1px solid rgba(17, 29, 49, 0.08);
  color: #7a8898;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}


/* =========================================================
   11. CONTACT
========================================================= */

.contact-section {
  padding: 0 0 110px;
  background: #edf3f8;
  overflow: hidden;
}

.contact-cta-capsule {
  width: 100%;
  max-width: none;
  margin: 0 auto 95px;
}

.contact-cta-capsule-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 280px;
  padding: 64px 72px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contact-cta-capsule-inner::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -80px;
  width: 440px;
  height: 220px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(125, 150, 172, 0.18));
  transform: rotate(-18deg);
  pointer-events: none;
}

.contact-cta-capsule-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: 140px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(126, 181, 232, 0), #7eb5e8, rgba(126, 181, 232, 0));
  box-shadow: 0 0 16px rgba(126, 181, 232, 0.38);
  transform: translateX(-50%);
  pointer-events: none;
}

.contact-cta-capsule-content {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
}

.contact-cta-capsule-kicker {
  margin-bottom: 16px;
  color: #2b527b;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.contact-cta-capsule-title {
  max-width: 860px;
  margin: 0 auto 18px;
  color: #111d31;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -1.2px;
}

.contact-cta-capsule-text {
  max-width: 820px;
  margin: 0 auto;
  color: #58687d;
  font-size: 16px;
  line-height: 1.75;
}

.contact-cta-capsule-action {
  position: relative;
  z-index: 2;
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.contact-cta-capsule-btn {
  width: 170px;
  height: 58px;
  border-radius: 999px;
  background: #2b527b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 16px 34px rgba(43, 82, 123, 0.24);
  transition: all 0.25s ease;
}

.contact-cta-capsule-btn:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.contact-cta-capsule-btn span,
.contact-submit-btn span {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.contact-container {
  max-width: 1320px;
  margin: 0 auto;
}

.contact-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.contact-title {
  margin-bottom: 16px;
  color: #111d31;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -1px;
}

.contact-desc {
  color: #58687d;
  font-size: 16px;
  line-height: 1.75;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 34px;
  align-items: stretch;
}

.contact-info-card,
.contact-form-card {
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(17, 29, 49, 0.08);
  box-shadow: 0 22px 60px rgba(17, 29, 49, 0.09);
}

.contact-info-card {
  padding: 42px 38px;
}

.contact-info-title {
  margin-bottom: 12px;
  color: #111d31;
  font-size: 28px;
  line-height: 1.22;
  font-weight: 900;
}

.contact-info-desc {
  margin-bottom: 34px;
  color: #58687d;
  font-size: 15px;
  line-height: 1.72;
}

.contact-info-list {
  display: grid;
  gap: 24px;
}

.contact-info-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: flex-start;
}

.contact-info-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #203b5c;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-info-label {
  margin-bottom: 6px;
  color: #111d31;
  font-size: 15px;
  font-weight: 900;
}

.contact-info-text {
  color: #58687d;
  font-size: 14px;
  line-height: 1.65;
}

.contact-form-card {
  padding: 42px;
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.contact-form-field input,
.contact-form-field textarea {
  width: 100%;
  border: 1px solid rgba(17, 29, 49, 0.10);
  border-radius: 12px;
  background: #f6f9fc;
  padding: 0 16px;
  color: #111d31;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.25s ease;
}

.contact-form-field input {
  height: 54px;
}

.contact-form-field textarea {
  height: 160px;
  padding-top: 16px;
  resize: vertical;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: #8a98aa;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
  border-color: rgba(43, 82, 123, 0.45);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(43, 82, 123, 0.08);
}

.contact-submit-btn {
  width: 180px;
  height: 56px;
  border: none;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(43, 82, 123, 0.24);
  transition: all 0.25s ease;
}

.contact-submit-btn:hover {
  transform: translateY(-3px);
  background: #203b5c;
}


/* =========================================================
   12. FOOTER
========================================================= */

.footer {
  padding: 72px 56px 28px;
  background: #13233a;
  color: #ffffff;
}

.footer-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 0.85fr 0.85fr 1fr;
  gap: 54px;
}

.footer-brand {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand-name {
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}


.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
}

.footer-logo img {
  width: auto;
  height: 58px;
  display: block;
  object-fit: contain;
}

.footer-text {
  max-width: 360px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.78;
}

.footer-title {
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.footer-link {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;

  line-height: 1.55;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-link:hover {
  transform: translateX(4px);
  color: #9cc6ef;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-social-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-social-link:hover {
  transform: translateY(-3px);
  color: #ffffff;
  border-color: rgba(156, 198, 239, 0.75);
  background: rgba(126, 181, 232, 0.14);
}

.footer-bottom {
  max-width: 1320px;
  margin: 54px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.footer-policy {
  display: flex;
  align-items: center;
  gap: 22px;
}

.footer-policy a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-policy a:hover {
  color: #9cc6ef;
}


/* =========================================================
   13. GLOBAL RESPONSIVE
========================================================= */

@media (max-width: 1280px) {
  .am-products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1200px) {
  .header-inner {
    padding: 0 28px;
  }

  .nav-link {
    padding: 0 10px;
    font-size: 14px;
  }

  .hero-title {
    font-size: 58px;
  }

  .metal-shape {
    width: 610px;
    right: -180px;
  }

  .why-wrap {
    --why-card-width: 220px;
    --why-gap: 20px;
  }

  .home-process-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .process-copy {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  .process-desc,
  .process-tags {
    margin-left: auto;
    margin-right: auto;
  }

  .process-tags {
    justify-content: center;
  }

  .process-btn {
    margin: 0 auto;
  }

  .watch-adv-title {
    font-size: 36px;
  }

  .watch-adv-image {
    height: 460px;
  }

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

  .team-impact-photo {
    min-height: 420px;
  }

  .team-impact-photo::before {
    background: linear-gradient(180deg, rgba(19, 35, 59, 0.4), rgba(19, 35, 59, 0));
  }

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

  .ac-news-title {
    font-size: 40px;
  }

  .contact-cta-capsule-inner {
    padding: 58px 48px;
    border-radius: 52px;
  }

  .contact-cta-capsule-title {
    font-size: 38px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-title {
    font-size: 38px;
  }

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

@media (max-width: 960px) {
  .am-products-section {
    padding: 78px 28px 88px;
  }

  .am-products-title {
    font-size: 38px;
  }

  .am-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .am-product-card,
  .am-product-media,
  .am-product-media img {
    min-height: 250px;
  }
}

@media (max-width: 860px) {
  .header,
  .header-inner {
    height: 72px;
  }

  .header-inner {
    padding: 0 20px;
  }

  .mobile-btn {
    display: flex;
  }

  .nav {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 72px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px);
    display: block;
    border-bottom: 1px solid var(--border);
    transition: max-height 0.35s ease;
  }

  .mobile-toggle:checked ~ .nav {
    max-height: 760px;
  }

  .nav-item {
    border-top: 1px solid rgba(17, 29, 49, 0.08);
  }

  .nav-link {
    height: auto;
    padding: 16px 24px;
    justify-content: space-between;
  }

  .nav-link.active::after {
    display: none;
  }

  .dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 24px 14px;
    background: #f4f7fb;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .nav-item:hover .dropdown {
    display: block;
    transform: none;
  }

  .hero {
    margin-top: 72px;
    height: 700px;
  }

  .hero-slider,
  .slide {
    height: 700px;
  }

  .hero-content {
    padding: 70px 24px 0;
    align-items: flex-start;
  }

  .hero-title {
    font-size: 44px;
    letter-spacing: -2px;
  }

  .hero-desc {
    font-size: 20px;
  }

  .hero-buttons {
    width: 260px;
    flex-direction: column;
    gap: 14px;
  }

  .btn {
    width: 100%;
  }

  .metal-shape {
    width: 460px;
    height: 220px;
    right: -110px;
    top: 430px;
  }

  .hero-bottom-arc {
    width: 170%;
    height: 180px;
    bottom: -92px;
  }

  .why-section {
    padding: 34px 22px 68px;
  }

  .why-title {
    font-size: 28px;
  }

  .why-timeline {
    display: none;
  }

  .why-cards {
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .why-card {
    min-height: auto;
    padding: 28px 20px 24px;
  }

  .section {
    padding: 62px 22px;
  }

  .section-title {
    font-size: 31px;
  }

  .home-process-section {
    padding: 62px 22px;
  }

  .process-main-title {
    font-size: 32px;
  }

  .process-chart-card {
    padding: 12px;
    border-radius: 20px;
  }

  .process-chart-img {
    border-radius: 14px;
  }

  .watch-adv-section {
    padding: 68px 22px 76px;
  }

  .watch-adv-title {
    font-size: 30px;
  }

  .watch-adv-subtitle {
    font-size: 16px;
  }

  .watch-adv-image-card {
    padding: 8px;
    border-radius: 16px;
  }

  .watch-adv-image {
    height: auto;
    border-radius: 12px;
  }

  .team-impact-section {
    padding: 72px 22px 82px;
  }

  .team-impact-card {
    border-radius: 24px;
  }

  .team-impact-content {
    padding: 40px 28px;
  }

  .team-impact-title {
    font-size: 31px;
  }

  .team-impact-text {
    font-size: 15px;
  }

  .team-impact-photo {
    min-height: 300px;
  }

  .team-impact-stats {
    width: 100%;
    margin: 18px auto 0;
    grid-template-columns: 1fr;
  }

  .team-impact-stat {
    min-height: auto;
  }

  .ac-news-section {
    padding: 72px 22px 82px;
  }

  .ac-news-head {
    margin-bottom: 32px;
  }

  .ac-news-title {
    font-size: 32px;
  }

  .ac-news-desc {
    font-size: 15px;
    line-height: 1.7;
  }

  .ac-news-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ac-news-thumb img {
    height: 220px;
  }

  .ac-news-content {
    padding: 20px 18px 18px;
  }

  .ac-news-card-title {
    font-size: 18px;
  }

  .ac-news-card-text {
    font-size: 15px;
  }

  .contact-section {
    padding: 0 22px 82px;
  }

  .contact-cta-capsule {
    padding-top: 72px;
    margin-bottom: 72px;
  }

  .contact-cta-capsule-inner {
    min-height: auto;
    padding: 42px 24px;
    border-radius: 32px;
  }

  .contact-cta-capsule-title {
    font-size: 30px;
  }

  .contact-cta-capsule-text {
    font-size: 15px;
  }

  .contact-cta-capsule-btn {
    width: 100%;
    max-width: 260px;
  }

  .contact-head {
    margin-bottom: 34px;
  }

  .contact-title {
    font-size: 32px;
  }

  .contact-desc {
    font-size: 15px;
  }

  .contact-info-card,
  .contact-form-card {
    padding: 28px 22px;
    border-radius: 22px;
  }

  .contact-info-title {
    font-size: 24px;
  }

  .contact-info-item {
    grid-template-columns: 50px 1fr;
    gap: 14px;
  }

  .contact-info-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  .contact-info-icon svg {
    width: 26px;
    height: 26px;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contact-submit-btn {
    width: 100%;
  }

  .footer {
    padding: 58px 22px 26px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 38px;
  }

  .footer-policy {
    flex-wrap: wrap;
    gap: 14px 20px;
  }
}

@media (max-width: 680px) {
  .am-products-section {
    padding: 68px 22px 76px;
  }

  .am-products-title {
    font-size: 32px;
  }

  .am-products-desc {
    font-size: 15px;
  }

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

  .am-product-card,
  .am-product-media,
  .am-product-media img {
    min-height: 220px;
    border-radius: 18px;
  }

  .am-product-name {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 38px;
  }

  .hero-desc {
    font-size: 18px;
  }

  .contact-cta-capsule-inner {
    padding: 36px 18px;
    border-radius: 26px;
  }

  .contact-cta-capsule-title {
    font-size: 27px;
  }

  .contact-info-card,
  .contact-form-card {
    padding: 24px 18px;
  }
}

@media (max-width: 420px) {
  .am-products-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= ABOUT PAGE ================= */

.about-page {
  background: #f6f8fb;
  overflow: hidden;
}

.about-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* ================= ABOUT HERO ================= */

.about-hero {
  margin-top: 82px;
  position: relative;
  padding: 110px 56px 120px;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.92), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(126,181,232,.18), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(120,145,170,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.18) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.about-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.about-hero-copy {
  max-width: 650px;
}

.about-hero-title {
  font-size: 64px;
  line-height: 1.02;
  font-weight: 900;
  color: #111d31;
  letter-spacing: -2.4px;
  margin-bottom: 26px;
}

.about-hero-desc {
  font-size: 18px;
  line-height: 1.82;
  color: #58687d;
  margin-bottom: 34px;
}

.about-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-hero-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(43,82,123,.14);
  color: #2b527b;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(17,29,49,.05);
}

/* right visual */

.about-hero-visual {
  position: relative;
  min-height: 430px;
}

.about-metal-shape {
  position: absolute;
  right: -30px;
  top: 90px;
  width: 620px;
  height: 230px;
  border-radius: 58% 42% 54% 46%;
  background:
    linear-gradient(112deg,
      #f8fbff 0%,
      #778ba2 10%,
      #ffffff 20%,
      #152a43 30%,
      #edf5fc 41%,
      #657a92 52%,
      #ffffff 62%,
      #174d86 70%,
      #f0f6fc 80%,
      #52677f 100%);
  filter: drop-shadow(0 30px 36px rgba(15,27,45,.26));
  transform: rotate(-8deg) skewX(-12deg);
  opacity: .9;
}

.about-metal-shape::before {
  content: "";
  position: absolute;
  top: 22%;
  left: 6%;
  width: 88%;
  height: 54%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: rotate(8deg);
}

.about-molecule {
  position: absolute;
  width: 220px;
  height: 150px;
  opacity: .32;
  background:
    radial-gradient(circle at 20% 30%, #ffffff 0 5px, transparent 6px),
    radial-gradient(circle at 48% 44%, #ffffff 0 4px, transparent 5px),
    radial-gradient(circle at 76% 26%, #ffffff 0 5px, transparent 6px),
    linear-gradient(28deg, transparent 24%, rgba(255,255,255,.68) 25%, transparent 26%);
}

.about-molecule-1 {
  right: 330px;
  top: 20px;
}

.about-molecule-2 {
  right: 80px;
  bottom: 10px;
  transform: rotate(18deg);
}

.about-hero-card {
  position: absolute;
  left: 20px;
  bottom: 24px;
  width: 320px;
  padding: 28px 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.13);
}

.about-hero-card-num {
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: #2b527b;
  margin-bottom: 14px;
}

.about-hero-card-title {
  font-size: 17px;
  line-height: 1.32;
  font-weight: 900;
  color: #111d31;
  margin-bottom: 10px;
}

.about-hero-card-text {
  font-size: 14px;
  line-height: 1.62;
  color: #58687d;
}

/* ================= INTRO ================= */

.about-intro-section {
  padding: 100px 56px;
  background: #ffffff;
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: start;
}

.about-section-title {
  font-size: 46px;
  line-height: 1.12;
  font-weight: 900;
  color: #111d31;
  letter-spacing: -1.2px;
}

.about-section-desc {
  max-width: 820px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.78;
  color: #58687d;
}

.about-intro-right p {
  font-size: 17px;
  line-height: 1.88;
  color: #58687d;
  margin-bottom: 22px;
}

/* ================= MATERIAL SYSTEMS ================= */

.about-material-section {
  position: relative;
  padding: 100px 56px 110px;
  background:
    radial-gradient(circle at 14% 18%, rgba(43,82,123,.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
}

.about-material-head {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}

.about-material-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.about-material-card {
  min-height: 170px;
  padding: 30px 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(238,246,253,.72));
  border: 1px solid rgba(126,151,180,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 14px 34px rgba(17,29,49,.07);
  text-align: center;
  transition: all .28s ease;
}

.about-material-card:hover {
  transform: translateY(-6px);
  border-color: rgba(93,168,239,.42);
  box-shadow: 0 24px 54px rgba(17,29,49,.13);
}

.about-material-symbol {
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  color: #2b527b;
  margin-bottom: 18px;
}

.about-material-name {
  font-size: 14px;
  line-height: 1.45;
  color: #1d3352;
  font-weight: 800;
}

/* ================= TECHNOLOGY ================= */

.about-tech-section {
  padding: 100px 56px 110px;
  background: #edf3f8;
}

.about-tech-card {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 46px;
  align-items: center;
  padding: 58px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(135deg, #263b50 0%, #49677f 100%);
  box-shadow: 0 30px 80px rgba(17,29,49,.22);
}

.section-kicker.light {
  color: #9cc6ef;
}

.about-tech-title {
  max-width: 720px;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1.2px;
  margin-bottom: 28px;
}

.about-tech-content p {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.86;
  color: #e1ebf4;
  margin-bottom: 18px;
}

.about-tech-stats {
  display: grid;
  gap: 18px;
}

.about-tech-stat {

  padding: 24px 22px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 18px 46px rgba(17,29,49,.16);
}

.about-tech-stat-num {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
  color: #2b527b;
  margin-bottom: 10px;
}

.about-tech-stat-text {
  font-size: 14px;
  line-height: 1.58;
  color: #58687d;
}

/* ================= METALLIC GLASS ================= */

.about-glass-section {
  padding: 105px 56px;
  background:
    radial-gradient(circle at 84% 18%, rgba(43,82,123,.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
}

.about-glass-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.about-glass-visual {
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-orbit {
  position: relative;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 22%, rgba(237,243,248,.9) 23% 100%);
  border: 1px solid rgba(43,82,123,.12);
  box-shadow:
    inset 0 0 0 18px rgba(126,181,232,.08),
    0 30px 70px rgba(17,29,49,.12);
}

.glass-orbit::before,
.glass-orbit::after {
  content: "";
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  border: 2px solid rgba(43,82,123,.22);
}

.glass-orbit::after {
  inset: 86px;
  border-color: rgba(126,181,232,.45);
}

.glass-orbit span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2b527b;
  box-shadow: 0 0 18px rgba(43,82,123,.35);
}

.glass-orbit span:nth-child(1) {
  top: 52px;
  left: 138px;
}

.glass-orbit span:nth-child(2) {
  right: 64px;
  bottom: 92px;
}

.glass-orbit span:nth-child(3) {
  left: 72px;
  bottom: 74px;
}

.about-glass-copy p {
  font-size: 17px;
  line-height: 1.86;
  color: #58687d;
  margin-top: 22px;
}

.about-feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.about-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(43,82,123,.10);
  color: #1d3352;
  font-size: 14px;
  font-weight: 800;
}

.about-feature-item span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2b527b;
  box-shadow: 0 0 0 5px rgba(43,82,123,.10);
}

/* ================= APPLICATIONS ================= */

.about-app-section {
  padding: 100px 56px 115px;
  background: #edf3f8;
}

.about-app-head {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}

.about-app-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.about-app-card {
  min-height: 190px;
  padding: 30px 22px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.08);
  transition: all .28s ease;
}

.about-app-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(17,29,49,.13);
}

.about-app-num {
  font-size: 15px;
  font-weight: 900;
  color: #2b527b;
  letter-spacing: 2px;
  margin-bottom: 44px;
}

.about-app-title {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
  color: #111d31;
}

/* ================= ABOUT RESPONSIVE ================= */

@media (max-width: 1200px) {
  .about-hero-inner,
  .about-intro-grid,
  .about-tech-card,
  .about-glass-layout {
    grid-template-columns: 1fr;
  }


  .about-hero-title {
    font-size: 52px;
  }

  .about-hero-copy,
  .about-intro-left,
  .about-intro-right,
  .about-glass-copy {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
  }

  .about-hero-tags,
  .about-feature-list {
    justify-content: center;
  }

  .about-material-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-app-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-tech-title {
    font-size: 38px;
  }
}

@media (max-width: 860px) {
  .about-hero {
    margin-top: 72px;
    padding: 78px 22px 84px;
  }

  .about-hero-title {
    font-size: 38px;
    letter-spacing: -1.4px;
  }

  .about-hero-desc {
    font-size: 16px;
  }

  .about-hero-visual {
    min-height: 360px;
  }

  .about-metal-shape {
    width: 440px;
    height: 180px;
    right: -110px;
    top: 110px;
  }

  .about-hero-card {
    width: 100%;
    left: 0;
    bottom: 0;
  }

  .about-intro-section,
  .about-material-section,
  .about-tech-section,
  .about-glass-section,
  .about-app-section {
    padding: 72px 22px 82px;
  }

  .about-section-title,
  .about-tech-title {
    font-size: 32px;
  }

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

  .about-tech-card {
    padding: 36px 24px;
    border-radius: 22px;
  }

  .about-glass-visual {
    min-height: 310px;
  }

  .glass-orbit {
    width: 260px;
    height: 260px;
  }

  .about-feature-list {
    grid-template-columns: 1fr;
  }

  .about-app-grid {
    grid-template-columns: 1fr;
  }

  .about-app-card {
    min-height: auto;
  }

  .about-app-num {
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .about-hero-title {
    font-size: 34px;
  }

  .about-material-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= PRODUCT OVERVIEW PAGE ================= */

.product-overview-page {
  background: #f6f8fb;
  overflow: hidden;
}

.product-overview-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* ================= HERO ================= */

.product-overview-hero {
  margin-top: 82px;
  padding: 112px 56px 118px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.96), transparent 30%),
    radial-gradient(circle at 86% 22%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  position: relative;
  overflow: hidden;
}

.product-overview-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(120,145,170,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.18) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.product-overview-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  top: 34px;
  width: 460px;
  height: 110px;
  border-radius: 999px;
  background:
    linear-gradient(110deg,
      rgba(255,255,255,.92) 0%,
      rgba(152,170,190,.42) 18%,
      rgba(255,255,255,.96) 35%,
      rgba(38,72,106,.30) 52%,
      rgba(240,247,253,.92) 72%,
      rgba(255,255,255,.85) 100%);
  transform: rotate(-12deg) skewX(-18deg);
  opacity: .48;
  pointer-events: none;
}

.product-overview-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}

.product-overview-hero-title {
  max-width: 760px;
  font-size: 62px;
  line-height: 1.02;
  font-weight: 900;
  color: #111d31;
  letter-spacing: -2.4px;
  margin-bottom: 26px;
}

.product-overview-hero-desc {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.82;
  color: #58687d;
  margin-bottom: 34px;
}

.product-overview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-overview-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(43,82,123,.14);
  color: #2b527b;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(17,29,49,.05);
}

.product-overview-hero-card {
  padding: 44px 38px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.13);
}

.product-overview-hero-card-num {
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
  color: #2b527b;

  margin-bottom: 18px;
}

.product-overview-hero-card-title {
  font-size: 26px;
  line-height: 1.22;
  font-weight: 900;
  color: #111d31;
  margin-bottom: 16px;
}

.product-overview-hero-card-text {
  font-size: 15px;
  line-height: 1.72;
  color: #58687d;
}

/* ================= COMMON ================= */

.product-section-head {
  max-width: 920px;
  margin: 0 auto 46px;
  text-align: center;
}

.product-section-title {
  font-size: 46px;
  line-height: 1.12;
  font-weight: 900;
  color: #111d31;
  letter-spacing: -1.2px;
}

.product-section-desc {
  max-width: 840px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.78;
  color: #58687d;
}

.product-advanced-section,
.product-amorphous-section,
.product-category-section,
.product-seo-section {
  padding: 100px 56px 110px;
}

.product-advanced-section {
  background: #ffffff;
}


.product-amorphous-section {
  background: #edf3f8;
}

.product-category-section {
  background:
    radial-gradient(circle at 84% 18%, rgba(43,82,123,.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
}

.product-seo-section {
  background: #ffffff;
}

/* ================= FIGURES ================= */

.product-wide-figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #edf3f8;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.11);
}

.product-wide-figure img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.product-wide-figure figcaption,
.product-image-card figcaption {
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #58687d;
  background: #ffffff;
}

/* ================= HIGHLIGHT ================= */

.product-highlight-card {
  max-width: 980px;
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 20px;
  align-items: center;
  padding: 26px 30px;
  border-radius: 18px;
  background: #edf3f8;
  border: 1px solid rgba(43,82,123,.10);
}

.product-highlight-icon {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-highlight-card h3 {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
  color: #111d31;
  margin-bottom: 8px;
}

.product-highlight-card p {
  font-size: 15px;
  line-height: 1.72;
  color: #58687d;
}

/* ================= IMAGE GRID ================= */

.product-image-grid {
  display: grid;
  gap: 28px;
}

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

.product-image-grid.bottom {
  margin-top: 34px;
}

.product-image-card {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.09);
}

.product-image-card img {
  width: 100%;
  height: 390px;
  display: block;
  object-fit: cover;
}

.product-image-card.large img {
  height: 520px;
}

/* =====================================================
   STRUCTURE COMPARISON - PRODUCT OVERVIEW
===================================================== */

.po-structure-section {
  position: relative;
  padding: 100px 56px 110px;
  background:
    radial-gradient(circle at 14% 18%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.po-structure-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.po-structure-section .po-container {max-width: 1320px;
  margin: 0 auto 54px;
  position: relative;
  z-index: 2;
}

.po-structure-block {
  margin-top: 54px;
  padding: 44px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 22px 60px rgba(17,29,49,.08);
}

.po-structure-block-blue {
  margin-top: 34px;
  background: #f6f9fc;
}

.po-structure-copy {
  max-width: 1080px;
  margin: 0 auto 34px;
  text-align: center;
}

.po-structure-label {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.po-structure-copy h3 {
  margin-bottom: 18px;
  color: #111d31;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.po-structure-copy p {
  max-width: 980px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

.po-structure-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.po-structure-image-card {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #edf3f8;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.09);
  transition: all .28s ease;
}

.po-structure-image-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 62px rgba(17,29,49,.14);
}

.po-structure-image-card img {
  width: 100%;
  height: 360px;
  display: block;
  object-fit: cover;
}

@media (max-width: 860px) {
  .po-structure-section {
    padding: 72px 22px 82px;
  }

  .po-structure-block {
    padding: 26px 20px;
    border-radius: 20px;
  }

  .po-structure-copy h3 {
    font-size: 28px;
  }

  .po-structure-copy p {
    font-size: 15px;
  }

  .po-structure-image-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .po-structure-image-card img {
    height: auto;
  }
}


/* ================= AMORPHOUS SECTION ================= */

.product-amorphous-copy p {
  font-size: 17px;
  line-height: 1.86;
  color: #58687d;
  margin-top: 20px;
}

.product-amorphous-layout {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 52px;
  align-items: center;
}

.product-feature-list {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.product-feature-item {
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(43,82,123,.10);
  color: #1d3352;
  font-size: 14px;
  font-weight: 800;
}

.product-property-card {
  padding: 42px 38px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(135deg, #263b50 0%, #49677f 100%);
  box-shadow: 0 24px 60px rgba(17,29,49,.18);
  color: #ffffff;
}

.product-property-card h3 {
  font-size: 32px;
  line-height: 1.18;
  font-weight: 900;
  margin-bottom: 18px;
}

.product-property-card p {
  font-size: 16px;
  line-height: 1.78;
  color: #e1ebf4;
  margin-bottom: 28px;
}

.product-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.product-text-link span {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ================= CATEGORY ================= */

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

.product-category-card {
  min-height: 250px;
  padding: 32px 26px;
  border-radius:10px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.08);
  transition: all .28s ease;
}

.product-category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(17,29,49,.13);
}

.product-category-num {
  font-size: 15px;
  font-weight: 900;
  color: #2b527b;
  letter-spacing: 2px;
  margin-bottom: 42px;
}

.product-category-card h3 {
  font-size: 22px;
  line-height: 1.28;
  color: #111d31;
  font-weight: 900;
  margin-bottom: 12px;
}

.product-category-card p {
  font-size: 15px;
  line-height: 1.72;
  color: #58687d;
}

/* ================= SEO ARTICLE ================= */

.product-seo-article {
  max-width: 980px;
  margin: 0 auto;
  padding: 42px 46px;
  border-radius: 10px;
  background: #edf3f8;
  border: 1px solid rgba(17,29,49,.08);
}

.product-seo-article h2 {
  font-size: 34px;
  line-height: 1.18;
  font-weight: 900;
  color: #111d31;
  margin-bottom: 22px;
}

.product-seo-article p {
  font-size: 16px;
  line-height: 1.86;
  color: #58687d;
  margin-bottom: 18px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1200px) {
  .product-overview-hero-layout,
  .product-amorphous-layout {
    grid-template-columns: 1fr;
  }

  .product-overview-hero-title {
    font-size: 50px;
  }

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

  .product-image-card.large img {
    height: 430px;
  }
}

@media (max-width: 860px) {
  .product-overview-hero {
    margin-top: 72px;
    padding: 78px 22px 84px;
  }

  .product-overview-hero-title {
    font-size: 38px;
    letter-spacing: -1.4px;
  }

  .product-overview-hero-desc {
    font-size: 16px;
  }

  .product-advanced-section,
  .product-amorphous-section,
  .product-category-section,
  .product-seo-section {
    padding: 72px 22px 82px;
  }

  .product-section-title {
    font-size: 32px;
  }

  .product-image-grid.two,
  .product-feature-list,
  .product-category-grid {
    grid-template-columns: 1fr;
  }

  .product-image-card img,
  .product-image-card.large img {
    height: auto;
  }

  .product-highlight-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .product-highlight-icon {
    margin: 0 auto;
  }

  .product-overview-hero-card,
  .product-property-card,
  .product-seo-article {
    padding: 30px 24px;
  }
}

@media (max-width: 480px) {
  .product-overview-hero-title {
    font-size: 34px;
  }

  .product-overview-tags {
    gap: 8px;
  }

  .product-overview-tags span {
    font-size: 12px;
  }
}


/* =====================================================
   INDUSTRIAL PAGE FINAL CSS
===================================================== */

.industrial-page {
  background: #f6f8fb;
  overflow: hidden;
}

.industrial-page *,
.industrial-page *::before,
.industrial-page *::after {
  box-sizing: border-box;
}

.industrial-page a {
  text-decoration: none;
}

.ip-container,
.is-container {
  max-width: 1320px;
  margin: 0 auto;
}

.industrial-page .section-kicker {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #2b527b;
  margin-bottom: 16px;
}

/* =====================================================
   BREADCRUMB
===================================================== */

.ip-breadcrumb-section {
  margin-top: 82px;
  padding: 22px 56px;
  background: #f6f8fb;
  border-bottom: 1px solid rgba(17, 29, 49, .06);
}

.ip-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: #58687d;
}

.ip-breadcrumb a {
  color: #2b527b;
  font-weight: 800;
}

.ip-breadcrumb a:hover {
  color: #203b5c;
}

.ip-breadcrumb span {
  width: 6px;
  height: 6px;
  border-top: 1.8px solid #8a98aa;
  border-right: 1.8px solid #8a98aa;
  transform: rotate(45deg);
}

.ip-breadcrumb strong {
  color: #111d31;
  font-weight: 900;
}

/* =====================================================
   HERO
===================================================== */

.ip-hero {
  position: relative;
  padding: 72px 56px 78px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.96), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.ip-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(rgba(120,145,170,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.18) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.ip-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 58px;
  align-items: center;
}

.ip-hero-title {
  max-width: 760px;
  font-size: 54px;
  line-height: 1.05;
  font-weight: 900;
  color: #111d31;
  letter-spacing: -1.8px;
  margin-bottom: 24px;
}

.ip-hero-text {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.78;
  color: #58687d;
  margin-bottom: 16px;
}

.ip-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 28px;
}

.ip-hero-tags span {
  padding: 9px 15px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(43,82,123,.14);
  color: #2b527b;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(17,29,49,.05);
}

.ip-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ip-primary-btn,
.ip-secondary-btn {
  height: 52px;
  padding: 0 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 900;
  transition: all .25s ease;
}

.ip-primary-btn {
  background: #2b527b;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(43,82,123,.24);
}

.ip-secondary-btn {
  background: #ffffff;
  color: #203b5c;
  border: 1px solid rgba(43,82,123,.16);
}

.ip-primary-btn:hover,
.ip-secondary-btn:hover {
  transform: translateY(-3px);
}

.ip-primary-btn span,
.category-intro-cta a span,
.is-inline-quote a span,
.is-form button span {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.ip-hero-card {
  padding: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 22px 54px rgba(17,29,49,.12);
}

.ip-hero-card-num {
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  color: #2b527b;
  margin-bottom: 16px;
}

.ip-hero-card-title {
  font-size: 25px;
  line-height: 1.24;
  font-weight: 900;
  color: #111d31;
  margin-bottom: 14px;
}

.ip-hero-card-text {
  font-size: 15px;
  line-height: 1.72;
  color: #58687d;
}

/* =====================================================
   PRODUCT CATEGORY NAV - FINAL
===================================================== */

.ip-simple-nav-section {
  position: relative;
  z-index: 20;
  padding: 0 56px;
  background: #ffffff;
  border-bottom: 1px solid rgba(17,29,49,.08);
}

.ip-simple-nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
}

.ip-simple-nav-title {
  padding-right: 34px;
  border-right: 1px solid rgba(17,29,49,.10);
  color: #2b527b;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ip-simple-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ip-simple-nav-link {
  min-width: 122px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: #edf3f8;
  border: 1px solid rgba(43,82,123,.12);
  color: #203b5c;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}

.ip-simple-nav-link:hover {
  background: #dfe9f3;
  border-color: rgba(43,82,123,.24);
  transform: translateY(-2px);
}

.ip-simple-nav-link.active {
  background: #203b5c;
  color: #ffffff;
  border-color: #203b5c;
  box-shadow: 0 12px 26px rgba(32,59,92,.20);
}

/* responsive */

@media (max-width: 860px) {
  .ip-simple-nav-section {
    padding: 0 22px;
  }

  .ip-simple-nav {
    min-height: auto;
    padding: 20px 0;
    flex-direction: column;
    gap: 16px;
  }

  .ip-simple-nav-title {
    padding-right: 0;
    border-right: none;
    text-align: center;
  }

  .ip-simple-nav-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ip-simple-nav-link {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .ip-simple-nav-links {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   INDUSTRIAL INTRO
===================================================== */

.category-intro-section {
  position: relative;
  padding: 82px 56px 92px;
  background: #ffffff;
  overflow: hidden;
  border-bottom: 1px solid rgba(17,29,49,.06);
}

.category-intro-section::before {
  content: "";
  position: absolute;
  right: -180px;
  top: -120px;
  width: 620px;
  height: 420px;
  border-radius: 50%;
inter-events: none;
}

.category-intro-section::after {
  content: "";
  position: absolute;
  left: -180px;
  bottom: -160px;
  width: 520px;
  height: 360px;
  border-radius: 10px;
  background: radial-gradient(
    circle,
    rgba(43,82,123,.08) 0%,
    rgba(43,82,123,.04) 42%,
    rgba(43,82,123,0) 72%
  );
  pointer-events: none;
}

.category-intro-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.category-intro-card {
  padding: 18px;
  background: #f6f9fc;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 48px rgba(17,29,49,.08);
}

.category-intro-image {
  position: relative;
  height: 245px;
  overflow: hidden;
  background: #edf3f8;
}

.category-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.72);
}

.category-intro-image::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(255,255,255,.62);
  pointer-events: none;
}

.category-intro-image-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  font-size: 38px;
  font-weight: 900;
  text-align: center;
}

.category-intro-cta {
  padding: 28px 20px 4px;
  text-align: center;
}

.category-intro-cta h3 {
  max-width: 380px;
  margin: 0 auto 18px;
  font-size: 24px;
  line-height: 1.25;
  color: #111d31;
  font-weight: 900;
}

.category-intro-cta a {
  height: 50px;
  padding: 0 26px;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 30px rgba(43,82,123,.22);
  transition: all .25s ease;
}

.category-intro-cta a:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.category-intro-title {
  font-size: 48px;
  line-height: 1.08;
  font-weight: 900;
  color: #111d31;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
}

.category-intro-content p {
  font-size: 16px;
  line-height: 1.86;
  color: #58687d;
  margin-bottom: 18px;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.category-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(43,82,123,.14);
  color: #2b527b;
  font-size: 13px;

  font-weight: 800;
  box-shadow: 0 8px 18px rgba(17,29,49,.05);
}

/* =====================================================
   PRECISION MICRO-MECHANICAL PARTS
===================================================== */

.is-precision-section {
  position: relative;
  padding: 86px 56px 96px;
  background:
    radial-gradient(circle at 16% 18%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #edf3f8 0%, #f6f9fc 100%);
  overflow: hidden;
  border-top: 1px solid rgba(17,29,49,.05);
  border-bottom: 1px solid rgba(17,29,49,.06);
}

.is-precision-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.is-precision-section .is-container {
  position: relative;
  z-index: 2;
}

.is-precision-head {
  max-width: 1040px;
  margin: 0 auto 44px;
  text-align: center;
}

.is-precision-head h2 {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 900;
  color: #111d31;
  letter-spacing: -1px;
  margin-bottom: 22px;
}

.is-precision-head p {
  max-width: 980px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

.is-precision-visual-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.is-precision-visual-card {
  position: relative;
  height: 360px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.10);
}

.is-precision-visual-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

.is-precision-visual-card:hover img {
  transform: scale(1.05);
}

.is-precision-visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17,29,49,.56) 0%, rgba(17,29,49,.18) 48%, rgba(17,29,49,0) 100%),
    linear-gradient(180deg, rgba(17,29,49,0) 45%, rgba(17,29,49,.45) 100%);
  z-index: 1;
  pointer-events: none;
}

.is-precision-visual-overlay {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  color: #ffffff;
}

.is-precision-visual-overlay h3 {
  max-width: 360px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 900;
  margin-bottom: 10px;
}

.is-precision-visual-overlay span {
  display: block;
  max-width: 460px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

.is-precision-feature-row {
  max-width: 1160px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.is-precision-feature-row div {
  min-height: 58px;
  padding: 0 18px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(43,82,123,.12);
  color: #203b5c;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 12px 28px rgba(17,29,49,.06);
}

/* =====================================================
   PRODUCT SHOWCASE
===================================================== */

.is-products-section {
  position: relative;
  padding: 92px 56px 100px;
  background: #ffffff;
  overflow: hidden;
}

.is-products-section::before {
  content: "";
  position: absolute;
  right: -180px;
  top: -120px;
  width: 520px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(126,181,232,.14) 0%,
    rgba(126,181,232,.06) 42%,
    rgba(126,181,232,0) 72%
  );
  pointer-events: none;
}


.is-products-section .is-container {
  position: relative;
  z-index: 2;
}

.is-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;

}

.is-product-card {
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.08);
  overflow: hidden;
  transition: all .28s ease;
}

.is-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(17,29,49,.13);
}

.is-product-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  background: #edf3f8;
}

.is-product-info {
  padding: 22px 20px;
}

.is-product-info h3 {
  color: #111d31;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 900;
  margin-bottom: 8px;
}

.is-product-info p {
  font-size: 14px;
  line-height: 1.65;
  color: #58687d;
}

.is-inline-quote {
  max-width: 980px;
  margin: 48px auto 0;
  padding: 24px 28px;
  background: #edf3f8;
  border: 1px solid rgba(43,82,123,.12);
  box-shadow: 0 18px 46px rgba(17,29,49,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.is-inline-quote strong {
  display: block;
  font-size: 18px;
  line-height: 1.35;
  color: #111d31;
  font-weight: 900;
}

.is-inline-quote p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: #58687d;
}

.is-inline-quote a {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  background: #2b527b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  box-shadow: 0 14px 28px rgba(43,82,123,.22);
  transition: all .25s ease;
}

.is-inline-quote a:hover {
  transform: translateY(-2px);
  background: #203b5c;
}

/* =====================================================
   FAQ
===================================================== */

.is-faq-section {
  padding: 92px 56px 100px;
  background: #edf3f8;
}

.is-faq-list {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.is-faq-item {
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 12px 32px rgba(17,29,49,.06);
  overflow: hidden;
}

.is-faq-item summary {
  cursor: pointer;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 900;
  color: #111d31;
  list-style: none;
}

.is-faq-item summary::-webkit-details-marker {
  display: none;
}

.is-faq-item summary::after {
  content: "+";
  float: right;
  color: #2b527b;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

.is-faq-item[open] summary::after {
  content: "−";
}

.is-faq-item p {
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.76;
  color: #58687d;
}

/* =====================================================
   INQUIRY FORM
===================================================== */

.is-inquiry-section {
  padding: 96px 56px 110px;
  background:
    radial-gradient(circle at 14% 18%, rgba(43,82,123,.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
}

.is-inquiry-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 46px;
  align-items: center;
}

.is-inquiry-copy h2 {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 900;
  color: #111d31;
  letter-spacing: -1px;
}

.is-inquiry-copy p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.86;
  color: #58687d;
}

.is-form-card {
  padding: 42px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 22px 60px rgba(17,29,49,.09);
}

.is-form {
  display: grid;
  gap: 16px;
}

.is-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.is-form input,
.is-form textarea {
  width: 100%;
  border: 1px solid rgba(17,29,49,.10);
  background: #f6f9fc;
  border-radius: 12px;
  padding: 0 16px;
  color: #111d31;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all .25s ease;
}

.is-form input {
  height: 54px;
}

.is-form textarea {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}

.is-form input::placeholder,
.is-form textarea::placeholder {
  color: #8a98aa;
}

.is-form input:focus,
.is-form textarea:focus {
  border-color: rgba(43,82,123,.45);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(43,82,123,.08);
}

.is-form button {
  width: 190px;
  height: 56px;
  border: none;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(43,82,123,.24);
  transition: all .25s ease;
}

.is-form button:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {
  .ip-hero-layout,
  .category-intro-layout,
  .is-inquiry-layout {
    grid-template-columns: 1fr;
  }

  .ip-hero-layout {
    gap: 38px;
  }

  .ip-hero-title {
    font-size: 46px;
  }

  .category-intro-title {
    font-size: 42px;
  }

  .ip-simple-nav {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 0;
  }

  .ip-simple-nav-title {
    padding-right: 0;
    border-right: none;
  }
.is-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .ip-breadcrumb-section {
    margin-top: 72px;
    padding: 18px 22px;
  }

  .ip-hero {
    padding: 58px 22px 66px;
  }

  .ip-hero-title {
    font-size: 36px;
    letter-spacing: -1.2px;
  }

  .ip-hero-text {
    font-size: 16px;
  }

  .ip-hero-actions {
    flex-direction: column;
  }

  .ip-primary-btn,
  .ip-secondary-btn {
    width: 100%;
  }

  .ip-hero-card {
    padding: 30px 24px;
  }

  .ip-simple-nav-section {
    padding: 0 22px;
  }

  .ip-simple-nav {
    min-height: auto;
    padding: 18px 0;
  }

  .ip-simple-nav-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ip-simple-nav-link {
    width: 100%;
    min-width: 0;
  }
.category-intro-section,
  .is-precision-section,
  .is-products-section,
  .is-faq-section,
  .is-inquiry-section {
    padding: 72px 22px 82px;
  }

  .category-intro-layout {
    gap: 34px;
  }

  .category-intro-image {
    height: 220px;
  }

  .category-intro-title,
  .is-section-head h2,
  .is-inquiry-copy h2 {
    font-size: 32px;
  }

  .is-product-grid,
  .is-form-row {
    grid-template-columns: 1fr;
  }
.is-inline-quote {
    flex-direction: column;
    align-items: flex-start;
  }

  .is-inline-quote a {
    width: 100%;
  }

  .is-form-card {
    padding: 30px 24px;
  }

  .is-form button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .ip-hero-title {
    font-size: 32px;
  }

  .ip-simple-nav-links {
    grid-template-columns: 1fr;
  }

  .category-intro-title,
  .is-section-head h2,
  .is-inquiry-copy h2 {
    font-size: 29px;
  }

  .category-intro-card {
    padding: 14px;
  }

  .category-intro-cta h3 {
    font-size: 21px;
  }
}

@media (max-width: 860px) {
  .is-precision-section {
    padding: 72px 22px 82px;
  }

  .is-precision-head h2 {
    font-size: 32px;
  }

  .is-precision-head p {
    font-size: 15px;
  }

  .is-precision-visual-grid {
    grid-template-columns: 1fr;
  }

  .is-precision-visual-card {
    height: 300px;
  }

  .is-precision-feature-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .is-precision-visual-card {
    height: 260px;
  }

  .is-precision-visual-overlay {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .is-precision-visual-overlay h3 {
    font-size: 24px;
  }

  .is-precision-feature-row {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   COMMODITY HERO HEIGHT FIX
===================================================== */

.commodity-page .ip-hero {
  padding: 72px 56px 78px;
}

.commodity-page .ip-hero-layout {
  align-items: center;
}

.commodity-page .ip-hero-copy {
  max-width: 660px;
}

.commodity-page .ip-hero-title {
  margin-bottom: 24px;
}

.commodity-page .ip-hero-text {
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 1.78;
}

.commodity-page .ip-hero-tags {
  margin-top: 28px;
}

.commodity-page .ip-hero-card {
  align-self: center;
}

.commodity-page .ip-hero-card-text {
  font-size: 15px;
  line-height: 1.78;
}
@media (max-width: 860px) {
  .commodity-page .ip-hero {
    padding: 58px 22px 66px;
  }

  .commodity-page .ip-hero-text {
    font-size: 15px;
    line-height: 1.72;
  }
}

/* =====================================================
   COMMODITY - FOLDING PHONE HINGE AXIS WIDE
===================================================== */

.category-wide-section {
  position: relative;
  padding: 86px 56px 96px;
  background:
    radial-gradient(circle at 16% 18%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #edf3f8 0%, #f6f9fc 100%);
  overflow: hidden;
  border-top: 1px solid rgba(17,29,49,.05);
  border-bottom: 1px solid rgba(17,29,49,.06);
}

.category-wide-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.category-wide-section .category-container {
  position: relative;
  z-index: 2;
}

.category-wide-head {
   max-width: 1040px;
  margin: 0 auto 48px;
  text-align: center;
}

.category-wide-head h2 {
  margin-bottom: 22px;
  color: #111d31;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1.4px;
}

.category-wide-head p {
  max-width: 980px;
  margin: 0 auto 10px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.75;
}


.commodity-hinge-head {
  max-width: 1320px;
  margin: 0 auto 48px;
  text-align: center;
}

.commodity-hinge-head h2 {
  margin-bottom: 22px;
  color: #111d31;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1.4px;
}

.commodity-hinge-head p {
  max-width: 10400px;
  margin: 0 auto 10px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.75;
}

.category-visual-card {
  position: relative;
  max-width: 1160px;
  height: 460px;
  margin: 0 auto;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.10); border-radius: 10px;
}

.category-visual-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.category-visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(17,29,49,.62) 0%, rgba(17,29,49,.24) 45%, rgba(17,29,49,0) 100%),
    linear-gradient(180deg, rgba(17,29,49,0) 44%, rgba(17,29,49,.50) 100%)
}


.category-feature-row {
   max-width: 1160px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.category-feature-row div {
  min-height: 58px;
  padding: 0 18px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 12px 30px rgba(17,29,49,.06);
  color: #203b5c;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 860px) {
  .category-wide-section {
    padding: 72px 22px 82px;
  }

  .category-wide-head {
    margin-bottom: 34px;
  }

  .category-wide-head h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .category-wide-head p {
    font-size: 15px;
    line-height: 1.72;
  }

  .category-visual-card {
    height: auto;
  }

  .category-visual-card img {
    height: auto;
  }


  .category-feature-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .category-feature-row {
    grid-template-columns: 1fr;
  }
}/* =====================================================
   COMMODITY - GOLF CLUB HEAD / ALTERNATIVE LAYOUT
===================================================== */

.category-split-section {
  position: relative;
  padding: 96px 56px 106px;
  background:
    radial-gradient(circle at 18% 24%, rgba(126,181,232,.12), transparent 34%),
    radial-gradient(circle at 86% 74%, rgba(43,82,123,.08), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.category-split-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.category-split-section .category-container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
}

.category-split-layout {
   display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 64px;
  align-items: center;
}

/* left content */
.category-split-content {
  max-width: 600px;
}

.category-split-content h2 {
  margin-bottom: 26px;
  color: #111d31;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -1.5px;
}

.category-split-content p {
  margin-bottom: 18px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.82;
}

.category-feature-list {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.category-feature-list div {
  min-height: 76px;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(43,82,123,.12);
  box-shadow: 0 12px 28px rgba(17,29,49,.06);
  display: flex;
  align-items: center;
  gap: 15px;
}

.category-feature-list span {
  color: #2b527b;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.category-feature-list strong {
  color: #203b5c;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 900;
}

/* right visual */
.category-media-panel {
  position: relative;
}

.category-split-image-card {
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  border-radius: 10px;
  background: #dfe7f0;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 58px rgba(17,29,49,.12);
}

.category-split-image-card img {
  width: 100%;
  height: auto;
  display: block;
}


@media (max-width: 860px) {
  .category-split-section {
    padding: 72px 22px 86px;
  }

  .category-split-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .category-split-content {
    max-width: 100%;
    text-align: center;
  }

  .category-split-content h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .category-split-content p {
    font-size: 15px;
    line-height: 1.72;
  }

  .category-feature-list {
    grid-template-columns: 1fr;
  }

  .category-feature-list div {
    justify-content: center;
  }
	.category-split-image-card {
    max-width: 100%;
  }
}
/* =====================================================
   COMMODITY - AMORPHOUS ALLOY RINGS
===================================================== */

.commodity-ring-section {
  position: relative;
  padding: 88px 56px 96px;
  background:
    radial-gradient(circle at 16% 18%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #edf3f8 0%, #f6f9fc 100%);
  overflow: hidden;
  border-top: 1px solid rgba(17,29,49,.05);
  border-bottom: 1px solid rgba(17,29,49,.06);
}

.commodity-ring-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.commodity-ring-section .category-container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
}

/* Head */
.commodity-ring-head {
  max-width: 1320px;
  margin: 0 auto 44px;
  text-align: center;
}

.commodity-ring-head h2 {
  margin-bottom: 22px;
  color: #111d31;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -1.4px;
}

.commodity-ring-lead {
  max-width: 980px;
  margin: 0 auto 12px;
  color: #58687d;
  font-size: 17px;
  line-height: 1.78;
}

.commodity-ring-sub {
  max-width: 920px;
  margin: 0 auto;
  color: #6a7b90;
  font-size: 15px;
  line-height: 1.7;
}

/* Two images */
.commodity-ring-image-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.commodity-ring-image-card {
  overflow: hidden;
  border-radius: 10px;
  background: #dfe7f0;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.10);
}

.commodity-ring-image-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tags */
.commodity-ring-tags {
  max-width: 1220px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.commodity-ring-tags div {
  min-height: 58px;
  padding: 0 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 12px 28px rgba(17,29,49,.05);
  color: #203b5c;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* =====================================================
   TECHNOLOGY PAGE - PROCESS FLOW
===================================================== */

.technology-page {
  background: #f6f8fb;
}

.tech-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* Breadcrumb */
.tech-breadcrumb-section {
  margin-top: 82px;
  padding: 14px 56px;
  background: #ffffff;
  border-bottom: 1px solid rgba(17,29,49,.08);
}

.tech-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #58687d;
  font-size: 14px;
  font-weight: 800;
}

.tech-breadcrumb a {
  color: #2b527b;
}

.tech-breadcrumb span {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
}

.tech-breadcrumb strong {
  color: #111d31;
}

/* Hero */
.tech-process-hero {
  position: relative;
  padding: 86px 56px 92px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.tech-process-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.tech-process-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 68px;
  align-items: center;
}

.tech-process-hero-copy {
  max-width: 760px;
}

.tech-process-hero-copy h1 {
  max-width: 820px;
  margin-bottom: 26px;
  color: #111d31;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -1.8px;
}

.tech-process-hero-copy p {
  margin-bottom: 18px;
  color: #58687d;
  font-size: 17px;
  line-height: 1.8;
}

.tech-process-tags {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tech-process-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  color: #203b5c;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17,29,49,.05);
}

.tech-process-hero-card {
  padding: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 28px 70px rgba(17,29,49,.12);
}

.tech-process-hero-num {
  margin-bottom: 18px;
  color: #2b527b;
  font-size: 50px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
}

.tech-process-hero-title {
  margin-bottom: 14px;
  color: #111d31;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 900;
}

.tech-process-hero-text {
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

/* Process Section */
.tech-process-section {
  position: relative;
  padding: 98px 56px 108px;
  background:
    radial-gradient(circle at 18% 20%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.tech-process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.tech-process-section .tech-container {
  position: relative;
  z-index: 2;
}

.tech-process-head {
  max-width: 980px;
  margin: 0 auto 56px;
  text-align: center;
}

.tech-process-head h2 {
  margin-bottom: 22px;
  color: #111d31;
  font-size: 48px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -1.2px;
}

.tech-process-head p {
  max-width: 860px;
  margin: 0 auto;
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

/* Flow Cards */
.tech-process-flow-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.tech-process-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 22px 58px rgba(17,29,49,.08);
  transition: all .28s ease;
}

.tech-process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 76px rgba(17,29,49,.13);
}

.tech-process-image {
  height: 230px;
  overflow: hidden;
  background: #dfe7f0;
}

.tech-process-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tech-process-content {
  position: relative;
  padding: 28px 26px 30px;
}

.tech-process-step {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-process-content h3 {
  margin-bottom: 14px;
  color: #111d31;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 900;
}

.tech-process-content p {
  color: #58687d;
  font-size: 15px;
  line-height: 1.72;
}

/* Accuracy Bar */
.tech-process-accuracy {
  max-width: 1080px;
  margin: 58px auto 0;
  padding: 28px 32px;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  box-shadow: 0 20px 50px rgba(17,29,49,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.tech-process-accuracy strong {
  display: block;
  margin-bottom: 6px;
  color: #111d31;
  font-size: 20px;
  font-weight: 900;
}

.tech-process-accuracy p {
  margin: 0;
  color: #58687d;
  font-size: 15px;
  line-height: 1.6;
}

.tech-process-accuracy a {
  min-width: 190px;
  height: 52px;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 30px rgba(43,82,123,.22);
  transition: all .25s ease;
}

.tech-process-accuracy a:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.tech-process-accuracy a span {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
/* =====================================================
   TECHNOLOGY - PROCESS FLOW COMPACT LAYOUT
===================================================== */

.tech-process-main {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 34px;
  align-items: stretch;
}

/* Left overview image */
.tech-process-overview {
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 2;
  align-self: start;
}

.tech-process-overview-card {
  width: 100%;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.10);
  height: auto;
  min-height: 0;
  display: block;
}

.tech-process-overview-card img {
 width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Right 4 steps */
.tech-process-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.tech-process-card {
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.07);
  transition: all .28s ease;
}

.tech-process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 64px rgba(17,29,49,.12);
}

.tech-process-image {
  height: 150px;
  overflow: hidden;
  background: #dfe7f0;
}

.tech-process-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tech-process-content {
  position: relative;
  padding: 22px 22px 24px;
}

.tech-process-step {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-process-content h3 {
  margin-bottom: 10px;
  color: #111d31;
  font-size: 21px;
  line-height: 1.18;
  font-weight: 900;
}

.tech-process-content p {
  color: #58687d;
  font-size: 14px;
  line-height: 1.66;
}
@media (max-width: 1080px) {
  .tech-process-main {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tech-process-overview,
  .tech-process-overview-card {
    height: auto;
    min-height: 0;
  }

  .tech-process-overview-card img {
    height: auto;
    object-fit: contain;
  }
}


/* =====================================================
   TECHNOLOGY PAGE - EXCELLENT MATERIAL PROPERTIES
===================================================== */

.material-properties-page {
  background: #f6f8fb;
}

.tech-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* Breadcrumb */
.tech-breadcrumb-section {
  margin-top: 82px;
  padding: 14px 56px;
  background: #ffffff;
  border-bottom: 1px solid rgba(17,29,49,.08);
}

.tech-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #58687d;
  font-size: 14px;
  font-weight: 800;
}

.tech-breadcrumb a {
  color: #2b527b;
}

.tech-breadcrumb span {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
}

.tech-breadcrumb strong {
  color: #111d31;
}

/* Hero */
.tech-material-hero {
  position: relative;
  padding: 86px 56px 92px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.tech-material-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.tech-material-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 68px;
  align-items: center;
}

.tech-material-hero-copy {
  max-width: 760px;
}

.tech-material-hero-copy h1 {
  max-width: 820px;
  margin-bottom: 26px;
  color: #111d31;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -1.8px;
}

.tech-material-hero-copy p {
  margin-bottom: 18px;
  color: #58687d;
  font-size: 17px;
  line-height: 1.8;
}

.tech-material-tags {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tech-material-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  color: #203b5c;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17,29,49,.05);
}

.tech-material-hero-card {
  padding: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 28px 70px rgba(17,29,49,.12);
}

.tech-material-hero-num {
  margin-bottom: 18px;
  color: #2b527b;
  font-size: 50px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
}

.tech-material-hero-title {
  margin-bottom: 14px;
  color: #111d31;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 900;
}

.tech-material-hero-text {
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

/* Main Section */
.tech-material-section {
  position: relative;
  padding: 98px 56px 108px;
  background:
    radial-gradient(circle at 18% 20%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.tech-material-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.tech-material-section .tech-container {
  position: relative;
  z-index: 2;
}

/* Section Head */
.tech-material-head {
  max-width: 980px;
  margin: 0 auto 56px;
  text-align: center;
}

.tech-material-head h2 {
  margin-bottom: 22px;
  color: #111d31;
  font-size: 48px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -1.2px;
}

.tech-material-head p {
  max-width: 860px;
  margin: 0 auto;
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

/* Showcase */
.tech-material-showcase {
  max-width: 1320px;
  margin: 0 auto;
}

/* Large Chart Image */
.tech-material-chart-card {
  width: 100%;
  padding: 0;
  border-radius: 16px;
  background: transparent;
  border: none;
  box-shadow: 0 24px 64px rgba(17,29,49,.10);
  overflow: hidden;
}

.tech-material-chart-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Feature Cards - 5 Items */
.tech-material-feature-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

.tech-material-feature-card {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 20px 52px rgba(17,29,49,.07);
  transition: all .28s ease;
}

.tech-material-feature-card:nth-child(1),
.tech-material-feature-card:nth-child(2),
.tech-material-feature-card:nth-child(3) {
  grid-column: span 2;
}

.tech-material-feature-card:nth-child(4),
.tech-material-feature-card:nth-child(5) {
  grid-column: span 3;
}

.tech-material-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 68px rgba(17,29,49,.12);
}

.tech-material-feature-num {
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-material-feature-card h3 {
  margin-bottom: 14px;
  color: #111d31;
  font-size: 23px;
  line-height: 1.22;
  font-weight: 900;
}

.tech-material-feature-card p {
  color: #58687d;
  font-size: 15px;
  line-height: 1.72;
}

/* Bottom Note */
.tech-material-note {
  max-width: 1080px;
  margin: 46px auto 0;
  padding: 28px 32px;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  box-shadow: 0 20px 50px rgba(17,29,49,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.tech-material-note strong {
  display: block;
  margin-bottom: 6px;
  color: #111d31;
  font-size: 20px;
  font-weight: 900;
}

.tech-material-note p {
  margin: 0;
  color: #58687d;
  font-size: 15px;
  line-height: 1.6;
}

.tech-material-note a {
  min-width: 190px;
  height: 52px;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 30px rgba(43,82,123,.22);
  transition: all .25s ease;
}

.tech-material-note a:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.tech-material-note a span {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
/* =====================================================
   TECHNOLOGY PAGE - MATERIAL PROPERTIES RESPONSIVE
===================================================== */

@media (max-width: 1080px) {
  .tech-material-hero-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .tech-material-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-material-feature-card:nth-child(1),
  .tech-material-feature-card:nth-child(2),
  .tech-material-feature-card:nth-child(3),
  .tech-material-feature-card:nth-child(4),
  .tech-material-feature-card:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 860px) {
  .tech-breadcrumb-section {
    margin-top: 72px;
    padding: 14px 22px;
  }

  .tech-material-hero {
    padding: 64px 22px 72px;
  }

  .tech-material-hero-copy h1 {
    font-size: 38px;
    letter-spacing: -1.2px;
  }

  .tech-material-hero-copy p {
    font-size: 15px;
    line-height: 1.72;
  }

  .tech-material-hero-card {
    padding: 30px 24px;
  }

  .tech-material-hero-num {
    font-size: 38px;
  }

  .tech-material-section {
    padding: 72px 22px 82px;
  }

  .tech-material-head {
    margin-bottom: 38px;
  }

  .tech-material-head h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .tech-material-head p {
    font-size: 15px;
    line-height: 1.72;
  }

  .tech-material-chart-card {
    border-radius: 14px;
  }

  .tech-material-chart-card img {
    border-radius: 14px;
  }

  .tech-material-feature-grid {
    margin-top: 26px;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tech-material-feature-card {
    padding: 24px 22px 26px;
  }

  .tech-material-feature-card h3 {
    font-size: 21px;
  }

  .tech-material-feature-card p {
    font-size: 14px;
    line-height: 1.68;
  }

  .tech-material-note {
    flex-direction: column;
    text-align: center;
  }

  .tech-material-note a {
    width: 100%;
    max-width: 260px;
  }
}
/* =====================================================
   TECHNOLOGY PAGE - RELIABLE PERFORMANCE TEST
===================================================== */

.performance-test-page {
  background: #f6f8fb;
}

/* Hero */
.tech-test-hero {
  position: relative;
  padding: 86px 56px 92px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.tech-test-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.tech-test-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 68px;
  align-items: center;
}

.tech-test-hero-copy {
  max-width: 760px;
}

.tech-test-hero-copy h1 {
  max-width: 820px;
  margin-bottom: 26px;
  color: #111d31;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -1.8px;
}

.tech-test-hero-copy p {
  margin-bottom: 18px;
  color: #58687d;
  font-size: 17px;
  line-height: 1.8;
}

.tech-test-tags {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tech-test-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  color: #203b5c;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17,29,49,.05);
}

.tech-test-hero-card {
  padding: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 28px 70px rgba(17,29,49,.12);
}

.tech-test-hero-num {
  margin-bottom: 18px;
  color: #2b527b;
  font-size: 50px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
}

.tech-test-hero-title {
  margin-bottom: 14px;
  color: #111d31;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 900;
}

.tech-test-hero-text {
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

/* Main Section */
.tech-test-section {
  position: relative;
  padding: 98px 56px 108px;
  background:
    radial-gradient(circle at 18% 20%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.tech-test-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.tech-test-section .tech-container {
  position: relative;
  z-index: 2;
}

/* Section Head */
.tech-test-head {
  max-width: 980px;
  margin: 0 auto 56px;
  text-align: center;
}

.tech-test-head h2 {
  margin-bottom: 22px;
  color: #111d31;
  font-size: 48px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -1.2px;
}

.tech-test-head p {
  max-width: 860px;
  margin: 0 auto;
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

/* Testing Grid */
.tech-test-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.tech-test-card {
  position: relative;
  min-height: 260px;
  padding: 32px 30px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 20px 52px rgba(17,29,49,.07);
  transition: all .28s ease;
  overflow: hidden;
}

.tech-test-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,181,232,.18), transparent 70%);
  pointer-events: none;
}

.tech-test-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 68px rgba(17,29,49,.12);
}

.tech-test-num {
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-test-content h3 {
  margin-bottom: 14px;
  color: #111d31;
  font-size: 23px;
  line-height: 1.22;
  font-weight: 900;
}

.tech-test-content p {
  color: #58687d;
  font-size: 15px;
  line-height: 1.72;
}

/* Bottom Note */
.tech-test-note {
  max-width: 1080px;
  margin: 46px auto 0;
  padding: 28px 32px;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  box-shadow: 0 20px 50px rgba(17,29,49,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.tech-test-note strong {
  display: block;
  margin-bottom: 6px;
  color: #111d31;
  font-size: 20px;
  font-weight: 900;
}

.tech-test-note p {
  margin: 0;
  color: #58687d;
  font-size: 15px;
  line-height: 1.6;
}

.tech-test-note a {
  min-width: 190px;
  height: 52px;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 30px rgba(43,82,123,.22);
  transition: all .25s ease;
}

.tech-test-note a:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.tech-test-note a span {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* =====================================================
   TECHNOLOGY PAGE - PERFORMANCE TEST RESPONSIVE
===================================================== */

@media (max-width: 1080px) {
  .tech-test-hero-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

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

@media (max-width: 860px) {
  .tech-test-hero {
    padding: 64px 22px 72px;
  }

  .tech-test-hero-copy h1 {
    font-size: 38px;
    letter-spacing: -1.2px;
  }

  .tech-test-hero-copy p {
    font-size: 15px;
    line-height: 1.72;
  }

  .tech-test-hero-card {
    padding: 30px 24px;
  }

  .tech-test-hero-num {
    font-size: 38px;
  }

  .tech-test-section {
    padding: 72px 22px 82px;
  }

  .tech-test-head {
    margin-bottom: 38px;
  }

  .tech-test-head h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .tech-test-head p {
    font-size: 15px;
    line-height: 1.72;
  }

  .tech-test-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tech-test-card {
    min-height: auto;
    padding: 26px 24px;
  }

  .tech-test-content h3 {
    font-size: 21px;
  }

  .tech-test-content p {
    font-size: 14px;
    line-height: 1.68;
  }

  .tech-test-note {
    flex-direction: column;
    text-align: center;
  }

  .tech-test-note a {
    width: 100%;
    max-width: 260px;
  }
}
/* =====================================================
   NEWS & BLOG PAGE
===================================================== */

.blog-page {
  background: #f6f8fb;
}

.blog-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* =====================================================
   BLOG HERO
===================================================== */

.blog-hero {
  margin-top: 82px;
  position: relative;
  padding: 106px 56px 112px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.blog-hero-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  text-align: left;
}

.blog-hero-content h1 {
  max-width: 900px;
  margin-bottom: 28px;
  color: #111d31;
  font-size: 64px;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -2px;
}

.blog-hero-content p {
  max-width: 820px;
  color: #58687d;
  font-size: 18px;
  line-height: 1.82;
}

.blog-hero-tags {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.blog-hero-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  color: #203b5c;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17,29,49,.05);
}

/* =====================================================
   BLOG SECTION HEAD
===================================================== */

.blog-section-head {
  max-width: 900px;
  margin: 0 auto 48px;
  text-align: center;
}

.blog-section-head h2 {
  margin-bottom: 16px;
  color: #111d31;
  font-size: 46px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -1.2px;
}

.blog-section-head p {
  max-width: 760px;
  margin: 0 auto;
  color: #58687d;
  font-size: 16px;
  line-height: 1.76;
}

/* =====================================================
   BLOG LIST SECTION
===================================================== */

.blog-list-section {
  position: relative;
  padding: 92px 56px 110px;
  background:
    radial-gradient(circle at 18% 20%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.blog-list-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.blog-list-section .blog-container {
  position: relative;
  z-index: 2;
}

/* =====================================================
   COMPACT BLOG GRID
===================================================== */

.blog-compact-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-compact-card {
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.07);
  transition: all .28s ease;
}

.blog-compact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 68px rgba(17,29,49,.12);
}

.blog-compact-image {
  height: 170px;
  display: block;
  overflow: hidden;
  background: #dfe7f0;
}

.blog-compact-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}

.blog-compact-card:hover .blog-compact-image img {
  transform: scale(1.05);
}

.blog-compact-body {
  padding: 22px 22px 24px;
}

.blog-compact-meta {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #2b527b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.blog-compact-body h3 {
  margin-bottom: 12px;
  color: #111d31;
  font-size: 21px;
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: -0.3px;
}

.blog-compact-body h3 a {
  color: inherit;
  transition: color .25s ease;
}

.blog-compact-body h3 a:hover {
  color: #2b527b;
}

.blog-compact-body p {
  color: #58687d;
  font-size: 14px;
  line-height: 1.68;
}

/* =====================================================
   PAGINATION
===================================================== */

.blog-pagination {
  margin-top: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.blog-pagination a {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(43,82,123,.13);
  color: #203b5c;
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}

.blog-pagination a.active,
.blog-pagination a:hover {
  background: #203b5c;
  color: #ffffff;
  border-color: #203b5c;
}

.blog-pagination .next {
  gap: 8px;
  padding: 0 18px;
}

.blog-pagination .next span {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* =====================================================
   NEWS & BLOG RESPONSIVE
===================================================== */

@media (max-width: 1080px) {
  .blog-compact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .blog-hero {
    margin-top: 72px;
    padding: 72px 22px 82px;
  }

  .blog-hero-content h1 {
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  .blog-hero-content p {
    font-size: 15px;
    line-height: 1.72;
  }

  .blog-list-section {
    padding: 72px 22px 82px;
  }

  .blog-section-head {
    margin-bottom: 38px;
  }

  .blog-section-head h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .blog-section-head p {
    font-size: 15px;
    line-height: 1.72;
  }

  .blog-compact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog-compact-image {
    height: auto;
  }

  .blog-compact-image img {
    height: auto;
  }

  .blog-compact-body {
    padding: 22px 20px 24px;
  }

  .blog-compact-body h3 {
    font-size: 20px;
  }

  .blog-pagination {
    flex-wrap: wrap;
    margin-top: 42px;
  }
}
/* =====================================================
   BLOG SHOW PAGE
===================================================== */

.blog-show-page {
  background: #f6f8fb;
}

.blog-show-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* Breadcrumb */
.blog-show-breadcrumb-section {
  margin-top: 82px;
  padding: 14px 56px;
  background: #ffffff;
  border-bottom: 1px solid rgba(17,29,49,.08);
}

.blog-show-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #58687d;
  font-size: 14px;
  font-weight: 800;
}

.blog-show-breadcrumb a {
  color: #2b527b;
}

.blog-show-breadcrumb span {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
}

.blog-show-breadcrumb strong {
  color: #111d31;
}

/* Hero */
.blog-show-hero {
  position: relative;
  padding: 88px 56px 96px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.blog-show-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.blog-show-hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.blog-show-meta {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #2b527b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.blog-show-hero-content h1 {
  max-width: 980px;
  margin-bottom: 26px;
  color: #111d31;
  font-size: 58px;
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -1.8px;
}

.blog-show-hero-content p {
  max-width: 860px;
  color: #58687d;
  font-size: 18px;
  line-height: 1.8;
}

/* Body Section */
.blog-show-section {
  position: relative;
  padding: 86px 56px 108px;
  background:
    radial-gradient(circle at 18% 20%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.blog-show-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.blog-show-section .blog-show-container {
  position: relative;
  z-index: 2;
}

/* Layout */
.blog-show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 42px;
  align-items: start;
}

.blog-show-main {
  min-width: 0;
}

/* Cover */
.blog-show-cover {
  overflow: hidden;
  border-radius: 10px;
  background: #dfe7f0;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.09);
}

.blog-show-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* Article Content */
.blog-show-content {
  margin-top: 34px;
  padding: 54px 58px;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.08);
}

.blog-show-content p {
  margin-bottom: 22px;
  color: #58687d;
  font-size: 17px;
  line-height: 1.88;
}

.blog-show-content .blog-show-lead {
  color: #203b5c;
  font-size: 19px;
  line-height: 1.82;
  font-weight: 700;
}

.blog-show-content h2 {
  margin: 46px 0 20px;
  color: #111d31;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.blog-show-content h3 {
  margin-bottom: 12px;
  color: #111d31;
  font-size: 22px;
  line-height: 1.24;
  font-weight: 900;
}

.blog-show-content ul {
  margin: 24px 0 34px;
  padding-left: 22px;
}

.blog-show-content li {
  margin-bottom: 12px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.75;
}

.blog-show-highlight {
  margin: 36px 0;
  padding: 28px 30px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, #ffffff 0%, #edf3f8 100%);
  border-left: 5px solid #2b527b;
  box-shadow: 0 16px 40px rgba(17,29,49,.06);
}

.blog-show-highlight strong {
  display: block;
  margin-bottom: 10px;
  color: #111d31;
  font-size: 18px;
  font-weight: 900;
}

.blog-show-highlight p {
  margin: 0;
  font-size: 16px;
}

.blog-show-image {
  margin: 36px 0;
  overflow: hidden;
  border-radius: 14px;
  background: #dfe7f0;
  border: 1px solid rgba(17,29,49,.08);
}

.blog-show-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Feature List */
.blog-show-feature-list {
  margin: 34px 0 42px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.blog-show-feature-item {
  padding: 26px 24px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 16px 38px rgba(17,29,49,.06);
}

.blog-show-feature-item div {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-show-feature-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.68;
}

/* Article CTA */
.blog-show-cta {
  margin-top: 34px;
  padding: 30px 34px;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(43,82,123,.14);
  box-shadow: 0 20px 50px rgba(17,29,49,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.blog-show-cta strong {
  display: block;
  margin-bottom: 8px;
  color: #111d31;
  font-size: 21px;
  font-weight: 900;
}

.blog-show-cta p {
  margin: 0;
  color: #58687d;
  font-size: 15px;
  line-height: 1.6;
}

.blog-show-cta a,
.blog-show-sidebar-cta a {
  min-width: 150px;
  height: 50px;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 30px rgba(43,82,123,.22);
  transition: all .25s ease;
}

.blog-show-cta a:hover,
.blog-show-sidebar-cta a:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.blog-show-cta a span,
.blog-show-sidebar-cta a span {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Sidebar */
.blog-show-sidebar {
  position: sticky;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.blog-show-sidebar-card,
.blog-show-sidebar-cta {
  padding: 30px 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 20px 52px rgba(17,29,49,.07);
}

.blog-show-sidebar-card h3,
.blog-show-sidebar-cta h3 {
  margin-bottom: 20px;
  color: #111d31;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 900;
}

.blog-show-topic-list {
  display: flex;
  flex-direction: column;
}

.blog-show-topic-list a {
  position: relative;
  padding: 14px 22px 14px 0;
  border-bottom: 1px solid rgba(17,29,49,.08);
  color: #203b5c;
  font-size: 15px;
  font-weight: 800;
  transition: all .25s ease;
}

.blog-show-topic-list a::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: .45;
}

.blog-show-topic-list a:hover {
  color: #2b527b;
  padding-left: 8px;
}

.blog-show-sidebar-cta {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.90), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
}

.blog-show-sidebar-cta p {
  margin-bottom: 24px;
  color: #58687d;
  font-size: 15px;
  line-height: 1.72;
}

/* Related Articles */
.blog-show-related {
  margin-top: 82px;
}

.blog-show-related-head {
  margin-bottom: 34px;
  text-align: center;
}

.blog-show-related-head h2 {
  color: #111d31;
  font-size: 42px;
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: -1px;
}

.blog-show-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-show-related-card {
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.07);
  transition: all .28s ease;
}

.blog-show-related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 68px rgba(17,29,49,.12);
}

.blog-show-related-card img {
  width: 100%;
  height: 170px;
  display: block;
  object-fit: cover;
  background: #dfe7f0;
}

.blog-show-related-card div {
  padding: 22px 22px 24px;
}

.blog-show-related-card span {
  display: block;
  margin-bottom: 10px;
  color: #2b527b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.blog-show-related-card h3 {
  color: #111d31;
  font-size: 20px;
  line-height: 1.28;
  font-weight: 900;
}

.blog-show-related-card h3 a {
  color: inherit;
}
@media (max-width: 1080px) {
  .blog-show-layout {
    grid-template-columns: 1fr;
  }

  .blog-show-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-show-sidebar-cta {
    grid-column: 1 / -1;
  }

  .blog-show-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .blog-show-breadcrumb-section {
    margin-top: 72px;
    padding: 14px 22px;
  }

  .blog-show-hero {
    padding: 64px 22px 72px;
  }

  .blog-show-hero-content h1 {
    font-size: 38px;
    letter-spacing: -1.2px;
  }

  .blog-show-hero-content p {
    font-size: 15px;
    line-height: 1.72;
  }

  .blog-show-section {
    padding: 72px 22px 82px;
  }

  .blog-show-content {
    margin-top: 26px;
    padding: 34px 24px;
    border-radius: 16px;
  }

  .blog-show-content p {
    font-size: 15px;
    line-height: 1.76;
  }

  .blog-show-content .blog-show-lead {
    font-size: 16px;
    line-height: 1.72;
  }

  .blog-show-content h2 {
    margin: 36px 0 16px;
    font-size: 28px;
  }

  .blog-show-feature-list {
    grid-template-columns: 1fr;
  }

  .blog-show-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-show-cta a {
    width: 100%;
  }

  .blog-show-sidebar {
    grid-template-columns: 1fr;
  }

  .blog-show-related {
    margin-top: 62px;
  }

  .blog-show-related-head h2 {
    font-size: 32px;
  }

  .blog-show-related-grid {
    grid-template-columns: 1fr;
  }

  .blog-show-related-card img {
    height: auto;
  }
}
/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-page {
  background: #edf3f8;
}

.contact-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* =====================================================
   CONTACT PAGE - BANNER
===================================================== */

.contact-banner {
  margin-top: 82px;
  position: relative;
  padding: 106px 56px 112px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.contact-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.contact-banner .contact-container {
  position: relative;
  z-index: 2;
}

.contact-banner-content {
  max-width: 900px;
  text-align: left;
}

.contact-banner-content h1 {
  max-width: 900px;
  margin-bottom: 28px;
  color: #111d31;
  font-size: 64px;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -2px;
}

.contact-banner-content p {
  max-width: 820px;
  color: #58687d;
  font-size: 18px;
  line-height: 1.82;
}

.contact-banner-tags {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-banner-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  color: #203b5c;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17,29,49,.05);
}

/* =====================================================
   CONTACT PAGE - GET IN TOUCH
===================================================== */

.contact-get-section {
  position: relative;
  padding: 88px 56px 108px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.88), transparent 34%),
    radial-gradient(circle at 84% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.contact-get-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.contact-get-section .contact-container {
  position: relative;
  z-index: 2;
}

/* Head */
.contact-get-head {
  max-width: 760px;
  margin: 0 auto 54px;
  text-align: center;
}

.contact-get-head h1 {
  margin-bottom: 20px;
  color: #111d31;
  font-size: 56px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -1.6px;
}

.contact-get-head p {
  color: #58687d;
  font-size: 17px;
  line-height: 1.78;
}

/* Layout */
.contact-get-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
  align-items: stretch;
}

/* =====================================================
   CONTACT INFORMATION CARD
===================================================== */

.contact-get-info-card,
.contact-get-form-card {
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.08);
}

.contact-get-info-card {
  padding: 44px 38px;
}

.contact-get-info-card h2 {
  margin-bottom: 16px;
  color: #111d31;
  font-size: 30px;
  line-height: 1.16;
  font-weight: 900;
}

.contact-get-intro {
  max-width: 460px;
  margin-bottom: 38px;
  color: #58687d;
  font-size: 15px;
  line-height: 1.72;
}

.contact-get-info-list {
  display: flex;
  flex-direction: column;
}

.contact-get-info-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid rgba(17,29,49,.08);
}

.contact-get-info-item:last-child {
  border-bottom: none;
}

.contact-get-icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-get-info-item h3 {
  margin-bottom: 8px;
  color: #111d31;
  font-size: 16px;
  font-weight: 900;
}

.contact-get-info-item p {
  margin: 0;
  color: #58687d;
  font-size: 15px;
  line-height: 1.65;
}

/* =====================================================
   CONTACT FORM CARD
===================================================== */

.contact-get-form-card {
  padding: 42px;
}

.contact-get-form {
  width: 100%;
}

.contact-get-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.contact-get-form input,
.contact-get-form textarea {
  width: 100%;
  border: 1px solid rgba(43,82,123,.16);
  border-radius: 10px;
  background: #f8fbfe;
  color: #111d31;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: all .25s ease;
}

.contact-get-form input {
  height: 54px;
  padding: 0 16px;
}

.contact-get-form textarea {
  min-height: 170px;
  padding: 16px;
  resize: vertical;
  margin-bottom: 28px;
}

.contact-get-form input::placeholder,
.contact-get-form textarea::placeholder {
  color: #8292a8;
}

.contact-get-form input:focus,
.contact-get-form textarea:focus {
  border-color: rgba(43,82,123,.45);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(43,82,123,.08);
}

.contact-get-form button {
  min-width: 190px;
  height: 54px;
  border: none;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 30px rgba(43,82,123,.22);
  transition: all .25s ease;
}

.contact-get-form button:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.contact-get-form button span {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* =====================================================
   CONTACT PAGE RESPONSIVE
===================================================== */

@media (max-width: 1080px) {
  .contact-get-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .contact-banner {
    margin-top: 72px;
    padding: 72px 22px 82px;
  }

  .contact-banner-content h1 {
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  .contact-banner-content p {
    font-size: 15px;
    line-height: 1.72;
  }

  .contact-banner-tags {
    margin-top: 28px;
  }

  .contact-banner-tags span {
    font-size: 12px;
  }

  .contact-get-section {
    padding: 72px 22px 82px;
  }

  .contact-get-head {
    margin-bottom: 38px;
  }

  .contact-get-head h1 {
    font-size: 38px;
    letter-spacing: -1.2px;
  }

  .contact-get-head p {
    font-size: 15px;
    line-height: 1.72;
  }

  .contact-get-layout {
    gap: 26px;
  }

  .contact-get-info-card,
  .contact-get-form-card {
    padding: 30px 24px;
  }

  .contact-get-info-card h2 {
    font-size: 26px;
  }

  .contact-get-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  .contact-get-form textarea {
    min-height: 150px;
  }

  .contact-get-form button {
    width: 100%;
  }
}
/* =====================================================
   FAQS PAGE
===================================================== */

.faq-page {
  background: #f6f8fb;
}

.faq-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* Banner */
.faq-banner {
  margin-top: 82px;
  position: relative;
  padding: 106px 56px 112px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.faq-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.faq-banner .faq-container {
  position: relative;
  z-index: 2;
}

.faq-banner-content {
  max-width: 920px;
  text-align: left;
}

.faq-banner-content h1 {
  max-width: 920px;
  margin-bottom: 28px;
  color: #111d31;
  font-size: 64px;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -2px;
}

.faq-banner-content p {
  max-width: 820px;
  color: #58687d;
  font-size: 18px;
  line-height: 1.82;
}

.faq-banner-tags {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.faq-banner-tags span {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,82,123,.14);
  color: #203b5c;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(17,29,49,.05);
}

/* Main */
.faq-main-section {
  position: relative;
  padding: 96px 56px 110px;
  background:
    radial-gradient(circle at 18% 20%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.faq-main-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.faq-main-section .faq-container {
  position: relative;
  z-index: 2;
}

.faq-section-head {
  max-width: 920px;
  margin: 0 auto 52px;
  text-align: center;
}

.faq-section-head h2 {
  margin-bottom: 18px;
  color: #111d31;
  font-size: 48px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -1.2px;
}

.faq-section-head p {
  max-width: 780px;
  margin: 0 auto;
  color: #58687d;
  font-size: 16px;
  line-height: 1.76;
}

/* FAQ List */
.faq-list {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 18px 46px rgba(17,29,49,.06);
  overflow: hidden;
}

.faq-item summary {
  position: relative;
  padding: 24px 70px 24px 28px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: center;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: #203b5c;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary span {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #203b5c;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item summary h3 {
  color: #111d31;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
}

.faq-answer {
  padding: 0 70px 30px 94px;
}

.faq-answer p {
  margin-bottom: 14px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.78;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* CTA */
.faq-cta {
  max-width: 1080px;
  margin: 42px auto 0;
  padding: 30px 34px;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(43,82,123,.14);
  box-shadow: 0 20px 50px rgba(17,29,49,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.faq-cta strong {
  display: block;
  margin-bottom: 8px;
  color: #111d31;
  font-size: 21px;
  font-weight: 900;
}

.faq-cta p {
  margin: 0;
  color: #58687d;
  font-size: 15px;
  line-height: 1.6;
}

.faq-cta a {
  min-width: 150px;
  height: 50px;
  border-radius: 8px;
  background: #2b527b;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 14px 30px rgba(43,82,123,.22);
  transition: all .25s ease;
}

.faq-cta a:hover {
  transform: translateY(-3px);
  background: #203b5c;
}

.faq-cta a span {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (max-width: 860px) {
  .faq-banner {
    margin-top: 72px;
    padding: 72px 22px 82px;
  }

  .faq-banner-content h1 {
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  .faq-banner-content p {
    font-size: 15px;
    line-height: 1.72;
  }

  .faq-main-section {
    padding: 72px 22px 82px;
  }

  .faq-section-head {
    margin-bottom: 38px;
  }

  .faq-section-head h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .faq-section-head p {
    font-size: 15px;
    line-height: 1.72;
  }

  .faq-item summary {
    padding: 22px 56px 22px 20px;
    grid-template-columns: 38px 1fr;
    gap: 14px;
  }

  .faq-item summary::after {
    right: 20px;
    font-size: 24px;
  }

  .faq-item summary span {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .faq-item summary h3 {
    font-size: 17px;
  }

  .faq-answer {
    padding: 0 22px 26px 72px;
  }

  .faq-answer p {
    font-size: 14px;
    line-height: 1.68;
  }

  .faq-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
  }

  .faq-cta a {
    width: 100%;
  }
}
/* =====================================================
   PRIVACY POLICY PAGE
===================================================== */

.privacy-page {
  background: #f6f8fb;
}

.privacy-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* =====================================================
   PRIVACY BANNER
===================================================== */

.privacy-banner {
  margin-top: 82px;
  position: relative;
  padding: 106px 56px 112px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.privacy-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.privacy-banner .privacy-container {
  position: relative;
  z-index: 2;
}

.privacy-banner-content {
  max-width: 900px;
  text-align: left;
}

.privacy-banner-content h1 {
  max-width: 900px;
  margin-bottom: 28px;
  color: #111d31;
  font-size: 64px;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -2px;
}

.privacy-banner-content p {
  max-width: 820px;
  color: #58687d;
  font-size: 18px;
  line-height: 1.82;
}

/* =====================================================
   PRIVACY CONTENT SECTION
===================================================== */

.privacy-section {
  position: relative;
  padding: 96px 56px 110px;
  background:
    radial-gradient(circle at 18% 20%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.privacy-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.privacy-section .privacy-container {
  position: relative;
  z-index: 2;
}

.privacy-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 58px 64px;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 24px 60px rgba(17,29,49,.08);
}

.privacy-updated {
  display: inline-flex;
  margin-bottom: 34px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #edf3f8;
  border: 1px solid rgba(43,82,123,.12);
  color: #203b5c;
  font-size: 13px;
  font-weight: 900;
}

.privacy-content h2 {
  margin: 42px 0 16px;
  color: #111d31;
  font-size: 28px;
  line-height: 1.22;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.privacy-content h2:first-of-type {
  margin-top: 0;
}

.privacy-content p {
  margin-bottom: 18px;
  color: #58687d;
  font-size: 16px;
  line-height: 1.82;
}

.privacy-content p:last-child {
  margin-bottom: 0;
}

.privacy-content a {
  color: #2b527b;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================
   PRIVACY RESPONSIVE
===================================================== */

@media (max-width: 860px) {
  .privacy-banner {
    margin-top: 72px;
    padding: 72px 22px 82px;
  }

  .privacy-banner-content h1 {
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  .privacy-banner-content p {
    font-size: 15px;
    line-height: 1.72;
  }

  .privacy-section {
    padding: 72px 22px 82px;
  }

  .privacy-content {
    padding: 34px 24px;
    border-radius: 16px;
  }

  .privacy-updated {
    margin-bottom: 28px;
    font-size: 12px;
  }

  .privacy-content h2 {
    margin: 34px 0 14px;
    font-size: 23px;
  }

  .privacy-content p {
    font-size: 14px;
    line-height: 1.72;
  }
}
/* =====================================================
   SITEMAP PAGE
===================================================== */

.sitemap-page {
  background: #f6f8fb;
}

.sitemap-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* =====================================================
   SITEMAP BANNER
===================================================== */

.sitemap-banner {
  margin-top: 82px;
  position: relative;
  padding: 106px 56px 112px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.95), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(126,181,232,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #dfe9f3 100%);
  overflow: hidden;
}

.sitemap-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.sitemap-banner .sitemap-container {
  position: relative;
  z-index: 2;
}

.sitemap-banner-content {
  max-width: 900px;
  text-align: left;
}

.sitemap-banner-content h1 {
  max-width: 900px;
  margin-bottom: 28px;
  color: #111d31;
  font-size: 64px;
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -2px;
}

.sitemap-banner-content p {
  max-width: 820px;
  color: #58687d;
  font-size: 18px;
  line-height: 1.82;
}

/* =====================================================
   SITEMAP CONTENT
===================================================== */

.sitemap-section {
  position: relative;
  padding: 96px 56px 110px;
  background:
    radial-gradient(circle at 18% 20%, rgba(43,82,123,.08), transparent 34%),
    radial-gradient(circle at 86% 80%, rgba(126,181,232,.13), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
  overflow: hidden;
}

.sitemap-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .10;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120,145,170,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,145,170,.16) 1px, transparent 1px);
  background-size: 56px 56px;
}

.sitemap-section .sitemap-container {
  position: relative;
  z-index: 2;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sitemap-card {
  min-height: 320px;
  padding: 34px 30px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,29,49,.08);
  box-shadow: 0 20px 52px rgba(17,29,49,.07);
  transition: all .28s ease;
}
.sitemap-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 68px rgba(17,29,49,.12);
}

.sitemap-card h2 {
  margin-bottom: 24px;
  color: #111d31;
  font-size: 26px;
  line-height: 1.18;
  font-weight: 900;
}
.sitemap-card-note {
  margin-top: 22px;
  color: #58687d;
  font-size: 14px;
  line-height: 1.65;
}
.sitemap-link-list {
  display: flex;
  flex-direction: column;
}

.sitemap-link-list a {
  position: relative;
  padding: 14px 24px 14px 0;
  border-bottom: 1px solid rgba(17,29,49,.08);
  color: #203b5c;
  font-size: 15px;
  font-weight: 800;
  transition: all .25s ease;
}

.sitemap-link-list a:last-child {
  border-bottom: none;
}

.sitemap-link-list a::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: .45;
  transition: all .25s ease;
}

.sitemap-link-list a:hover {
  color: #2b527b;
  padding-left: 8px;
}

.sitemap-link-list a:hover::after {
  right: -2px;
  opacity: 1;
}

/* =====================================================
   SITEMAP RESPONSIVE
===================================================== */

@media (max-width: 1080px) {
  .sitemap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .sitemap-banner {
    margin-top: 72px;
    padding: 72px 22px 82px;
  }

  .sitemap-banner-content h1 {
    font-size: 40px;
    letter-spacing: -1.2px;
  }

  .sitemap-banner-content p {
    font-size: 15px;
    line-height: 1.72;
  }

  .sitemap-section {
    padding: 72px 22px 82px;
  }

  .sitemap-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sitemap-card {
    padding: 28px 24px;
  }

  .sitemap-card h2 {
    font-size: 23px;
  }

  .sitemap-link-list a {
    font-size: 14px;
  }
}