@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root { font-family: 'DM Sans', sans-serif; color: #18283a; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible, .project-card:focus-visible { outline: 3px solid #4a96c8; outline-offset: 5px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.container { max-width: 1240px; width: calc(100% - 112px); margin: 0 auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
.site-header { height: 91px; border-bottom: 1px solid #e7eef5; background: #fff; position: sticky; top: 0; z-index: 30; }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand img { width: 39px; height: 48px; object-fit: contain; }
.brand > span { font-family: 'Manrope', sans-serif; font-size: 31px; font-weight: 800; line-height: 1.1; letter-spacing: -1.3px; color: #143d5d; }
.brand-bottom { display: block; font-family: 'DM Sans', sans-serif; letter-spacing: 2.1px; font-size: 9px; margin-top: 5px; font-weight: 600; }
.navigation { display: flex; align-items: center; gap: 30px; }
.navigation a { font-size: 14px; font-weight: 500; color: #617285; position: relative; transition: color .2s; }
.navigation a:hover, .navigation a.nav-active { color: #1c557c; }
.navigation a.nav-active:after { content: ''; width: 4px; height: 4px; background: #2f7aa8; border-radius: 50%; position: absolute; bottom: -12px; left: 50%; }
.button { min-height: 47px; padding: 13px 21px; display: inline-flex; justify-content: center; align-items: center; gap: 14px; border-radius: 7px; border: 1px solid transparent; font-size: 14px; font-weight: 600; transition: background .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.button:hover { transform: translateY(-2px); box-shadow: 0 5px 14px #11405c13; }
.button-dark { background: #163f5e; color: white; }
.button-dark:hover { background: #266894; }
.button-outline { background: transparent; border-color: #cfdae5; color: #2e4c6a; }
.button-outline:hover { background: #e4eef8; }
.header-cta { min-height: 41px; padding: 10px 16px; }
.menu-toggle { display: none; border: none; background: transparent; padding: 8px; }
.hero { background: linear-gradient(110deg, #f6faff 25%, #eaf3fb 100%); padding: 66px 0 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.06fr 1fr; gap: 54px; align-items: center; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 11px; letter-spacing: 1.2px; font-weight: 600; color: #2d5f87; background: #e3eef7; border: 1px solid #d5e4f0; border-radius: 5px; }
.status-dot { height: 6px; width: 6px; background: #2b7eab; border-radius: 50%; box-shadow: 0 0 0 3px #2b7eab14; }
h1 { font-size: clamp(40px, 4.55vw, 65px); letter-spacing: -3.1px; line-height: 1.16; font-weight: 750; margin: 23px 0 22px; }
h1 > span { color: #357ba8; }
h1 > .t-id, h1 > .t-en, h2 > .t-id, h2 > .t-en { color: inherit; }
html:not([lang="en"]) .t-en, html[lang="en"] .t-id { display: none !important; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.social-links { display: flex; align-items: center; gap: 8px; }
.social-links a { width: 44px; height: 44px; border: 1px solid #cfdae5; border-radius: 50%; display: grid; place-items: center; color: #163f5e; }
.social-links a:hover { background: #e3eef7; color: #1c557c; }
.footer-brand .social-links { margin-top: 18px; }
.lang-switch { display: flex; align-items: center; border: 1px solid #cfdae5; border-radius: 999px; padding: 2px; background: #fff; flex-shrink: 0; }
.lang-switch button { border: 0; background: transparent; color: #4a637d; min-height: 29px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.lang-switch button[aria-pressed="true"] { background: #163f5e; color: #fff; }
.hero-copy > p { font-size: 15px; line-height: 1.85; color: #667486; max-width: 440px; }
.hero-actions { display: flex; gap: 11px; margin-top: 28px; }
.hero-assurance { display: flex; align-items: center; margin-top: 33px; gap: 10px; }
.assurance-icon { color: #2f6a93; display: flex; align-items: center; }
.hero-assurance > span:nth-child(2) { font-size: 11px; color: #557496; line-height: 1.6; }
.hero-assurance strong { color: #2e5274; font-weight: 600; }
.hero-assurance small { display: block; font-size: 11px; margin-top: 5px; }
.ecoxpert { font-size: 20px; color: #2d8ab4; font-weight: 700; letter-spacing: -.7px; border-left: 1px solid #d0dce9; padding-left: 17px; margin-left: 7px; }
.ecoxpert > span { display: block; font-size: 7px; letter-spacing: .1px; text-align: center; font-weight: 500; margin-top: 2px; }
.hero-visual { position: relative; padding: 0 0 21px; margin-left: 10px; }
.image-frame { position: relative; height: 458px; border-radius: 13px; overflow: hidden; margin-left: 24px; margin-right: 10px; background: #204451; }
.image-frame > img { height: 100%; width: 100%; object-fit: cover; object-position: 48% 50%; filter: saturate(.65); }
.photo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0c3d5e33, #0a385e1a 40%, #062b4ae0 100%); }
.image-caption { position: absolute; top: 26px; left: 27px; color: #e8f4ff; font-size: 10px; letter-spacing: 1.4px; display: flex; align-items: center; gap: 7px; }
.tiny-square { width: 5px; height: 5px; background: #b5dbf0; }
.image-bottom { position: absolute; left: 28px; right: 27px; bottom: 31px; display: flex; align-items: end; justify-content: space-between; color: #e4eef8; }
.image-bottom > span { font-family: 'Manrope'; font-size: 23px; line-height: 1.5; letter-spacing: -.6px; }
.image-bottom strong { font-weight: 600; }
.image-bottom > svg { margin-bottom: 8px; }
.floating-card { position: absolute; border: 1px solid #e2e9f4; box-shadow: 0 12px 35px #11405c12; background: #fffffff5; border-radius: 9px; }
.integration-card { top: 40px; right: -18px; padding: 16px; display: flex; align-items: center; gap: 12px; }
.float-icon { width: 42px; height: 42px; border-radius: 8px; background: #e5eff8; color: #356a93; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.integration-card strong { display: block; font-size: 13px; font-weight: 600; }
.integration-card div > span { display: block; font-size: 11px; color: #6d7a8d; margin-top: 5px; line-height: 1.5; }
.float-check { border-radius: 50%; background: #d7e8f8; color: #3f8fb8; display: flex; padding: 3px; margin-left: 12px; }
.system-card { bottom: 110px; left: -16px; width: 263px; padding: 15px 16px 10px; }
.system-card-top { display: flex; gap: 7px; align-items: center; }
.float-icon.small { width: 26px; height: 26px; border-radius: 5px; }
.system-card-top > span:nth-child(2) { font-size: 11px; font-weight: 600; }
.live-label { font-size: 6px; margin-left: auto; display: flex; align-items: center; gap: 3px; color: #2f81ad; background: #dfebf7; padding: 4px; border-radius: 3px; }
.live-label i { width: 3px; height: 3px; border-radius: 50%; background: #3f95c4; }
.system-main { margin: 12px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.system-main strong { font-size: 15px; letter-spacing: -.4px; }
.system-main > span { font-size: 9px; color: #4d9ac5; display: flex; align-items: center; gap: 3px; }
.mini-chart { display: flex; height: 52px; align-items: end; gap: 7px; border-bottom: 1px solid #dde7f1; padding: 0 2px; background: repeating-linear-gradient(0deg, transparent, transparent 17px, #ecf0e8 18px); }
.mini-chart span { flex: 1; height: var(--bar-height); border-radius: 3px 3px 0 0; background: #bad5ec; }
.mini-chart span:nth-child(n+8) { background: #7cb1d8; }
.system-footer { display: flex; justify-content: space-between; font-size: 9px; color: #6c798b; padding-top: 9px; }
.visual-corner { position: absolute; right: 11px; bottom: 0; font-size: 9px; letter-spacing: 1.5px; color: #7791b0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 31px 0 33px; border-top: 1px solid #d7e2ee; margin-top: 47px; }
.stats > div { padding-left: 42px; border-left: 1px solid #d0dce9; }
.stats > div:first-child { padding-left: 0; border: none; }
.stats strong { font-family: 'Manrope'; font-size: 31px; letter-spacing: -1.2px; font-weight: 650; line-height: 1.25; }
.stats strong > span { color: #33678f; font-size: 25px; margin-left: 2px; }
.stats > div:nth-child(3) strong > span { font-size: 16px; letter-spacing: -.4px; }
.stats p { font-size: 13px; color: #657488; margin-top: 7px; line-height: 1.6; }
.stat-cert { font-family: 'Manrope'; display: flex; gap: 9px; font-size: 25px; font-weight: 650; align-items: center; line-height: 1.6; }
.stat-cert svg { color: #3a779a; }
.clients { text-align: center; padding: 37px 0 32px; }
.clients > p { font-size: 13px; color: #73839a; line-height: 1.6; }
.client-logos { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 30px 20px 21px; }
.client-logo { flex: 1; display: flex; align-items: center; justify-content: center; height: 58px; }
.client-logo img { width: 130px; height: 45px; object-fit: contain; opacity: 1; filter: none; }
.client-logo img[src$="bayer.svg"] { width: 53px; height: 53px; }
.client-logo img[src$="intiland.svg"] { height: 56px; }
.clients > small { font-size: 10px; color: #8a92a2; line-height: 1.6; }
.section-space { padding: 76px 0; }
.solutions { background: #f6faff; border-top: 1px solid #eef4fb; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 34px; }
.section-label { display: inline-flex; align-items: center; gap: 7px; color: #4d7a9a; letter-spacing: 1.7px; font-size: 11px; font-weight: 600; margin-bottom: 14px; }
.section-label > span:not(.t-id):not(.t-en) { width: 5px; height: 5px; background: #5e8eb4; }
h2 { font-size: 38px; font-weight: 650; line-height: 1.3; letter-spacing: -1.65px; }
h2 > span { color: #607890; }
.section-heading > p { font-size: 15px; color: #6d798a; line-height: 1.8; padding-bottom: 4px; max-width: 430px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { border: 1px solid #d5e1ee; background: #fff; border-radius: 10px; padding: 27px 25px 23px; transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px #17486a10; }
.service-card.mint { background: #e5eff8; border-color: #d4e4f1; }
.service-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.service-icon { width: 48px; height: 48px; border-radius: 9px; background: #d2e3f0; color: #336590; display: flex; align-items: center; justify-content: center; }
.blue .service-icon { background: #e9f0f3; color: #507686; }
.sand .service-icon { background: #f4f0e7; color: #9a8763; }
.service-number { font-size: 12px; color: #8b96b0; font-family: 'Manrope'; }
.service-card h3 { font-size: 18px; letter-spacing: -.5px; margin-bottom: 13px; font-weight: 700; }
.service-card > p { font-size: 14px; line-height: 1.8; color: #69768c; min-height: 76px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 18px 0; min-height: 42px; align-content: flex-start; }
.service-tags > span { font-size: 10px; border: 1px solid #d5e1ee; padding: 6px 9px; border-radius: 4px; color: #5a7a9a; font-weight: 500; }
.service-features { display: grid; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid #d6e3f0; }
.service-features > span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #537294; line-height: 1.5; }
.service-features svg { color: #628aaf; }
.text-link { background: transparent; border: none; padding: 0; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 14px; color: #2d5d87; }
.text-link:hover { color: #1a4a6c; }
.service-card .text-link { display: flex; width: 100%; justify-content: space-between; margin-top: 18px; }
.solutions-note { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #7d8694; margin-top: 25px; line-height: 1.6; }
.solutions-note > svg { color: #5a83a5; }
.solutions-note a { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #426991; font-weight: 500; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.about-art { position: relative; padding: 0 24px 32px 0; }
.about-pattern { border-radius: 12px; background: #e0ecf6; height: 342px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px; color: #7e9aba; background-image: linear-gradient(#5d7fa50a 1px, transparent 1px), linear-gradient(90deg, #5d7fa50a 1px, transparent 1px); background-size: 28px 28px; }
.about-pattern > span { font-size: 11px; letter-spacing: 2.5px; line-height: 1.8; text-align: center; }
.legacy-card { position: absolute; left: 28px; bottom: 0; right: 0; background: #fff; border: 1px solid #d9e4f0; border-radius: 9px; box-shadow: 0 10px 30px #2a558010; padding: 23px 27px; }
.legacy-card > span { font-size: 10px; letter-spacing: 1.5px; color: #6a839f; }
.legacy-card strong { display: flex; align-items: center; gap: 30px; font-family: 'Manrope'; font-size: 29px; font-weight: 650; color: #2e5f88; margin: 8px 0; }
.legacy-card strong svg { color: #8aa6c5; }
.legacy-card p { font-size: 13px; color: #6f7e96; line-height: 1.7; }
.about-copy h2 { margin-bottom: 19px; }
.about-copy > p { font-size: 15px; color: #7c8778; line-height: 1.8; margin-bottom: 13px; }
.about-points { display: grid; gap: 11px; margin: 20px 0 24px; }
.about-points > span { font-size: 13px; display: flex; align-items: center; gap: 8px; color: #376286; line-height: 1.6; }
.about-points svg { color: #5e8db0; }
.projects { background: #f6faff; }
.project-filters { display: flex; gap: 8px; margin-bottom: 27px; flex-wrap: wrap; }
.project-filters > button { background: transparent; border: 1px solid #d9e4f0; border-radius: 6px; font-size: 12px; padding: 10px 17px; color: #657890; transition: background .2s; font-weight: 500; }
.project-filters > button.active { background: #1f577c; border-color: #1f577c; color: #fff; }
.project-filters > button:not(.active):hover { background: #e0ebf6; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.project-card { border: 1px solid #e1e7dc; border-radius: 10px; overflow: hidden; padding: 0; text-align: left; background: #fff; transition: box-shadow .2s; cursor: pointer; color: inherit; font: inherit; width: 100%; }
.project-card:hover { box-shadow: 0 12px 25px #1c4a7212; }
.project-image { height: 209px; position: relative; overflow: hidden; }
.project-image img { height: 100%; width: 100%; object-fit: cover; filter: saturate(.6); transition: transform .5s; }
.project-card:hover img { transform: scale(1.05); }
.project-image:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #123f5e2a, transparent); }
.project-category { position: absolute; top: 15px; left: 15px; z-index: 1; background: #fffffff0; padding: 6px 9px; border-radius: 4px; color: #3d546a; font-size: 10px; font-weight: 500; }
.project-arrow { position: absolute; right: 14px; bottom: 14px; z-index: 1; background: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.project-content { padding: 20px; }
.project-content > span { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; letter-spacing: .7px; color: #7689a8; line-height: 1.5; }
.project-content > span > span { font-size: 11px; letter-spacing: 0; font-weight: 500; }
.project-content h3 { font-size: 18px; font-weight: 650; letter-spacing: -.5px; margin: 11px 0 8px; }
.project-content > p { color: #6c7a92; font-size: 14px; line-height: 1.75; min-height: 44px; }
.project-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #4a7295; border-top: 1px solid #e4eaf6; padding-top: 13px; margin-top: 18px; font-weight: 500; }
.projects-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 26px; }
.projects-bottom > small { color: #7c869e; font-size: 11px; line-height: 1.7; }
.projects-bottom .button { font-size: 12px; min-height: 42px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team-card { border: 1px solid #d9e4f0; border-radius: 11px; overflow: hidden; padding: 0 0 23px; background: #fff; transition: transform .25s, box-shadow .25s; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px #13425f10; }
.team-portrait { position: relative; aspect-ratio: 4 / 4.7; margin-bottom: 22px; overflow: hidden; background: #dfe6ee; }
.team-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .5s; }
.team-card:hover .team-portrait img { transform: scale(1.025); }
.team-portrait-badge { position: absolute; bottom: 12px; left: 12px; background: #ffffffed; border: 1px solid #ffffffa0; border-radius: 4px; padding: 7px 10px; display: flex; align-items: center; gap: 6px; color: #2d5c85; font-size: 8px; letter-spacing: 1px; font-weight: 600; }
.team-card h3, .team-card > p, .team-card > .team-role { margin-left: 18px; margin-right: 18px; }
.team-role { display: block; line-height: 1.6; min-height: 29px; }
.team-card h3 { font-size: 18px; font-weight: 650; letter-spacing: -.3px; margin-bottom: 6px; }
.team-role { font-size: 11px; color: #518aab; font-weight: 500; }
.team-card > p { font-size: 14px; line-height: 1.8; color: #6f7e96; margin-top: 15px; }
.contact-section { padding-bottom: 65px; }
.contact-box { padding: 45px 48px; background: #13425f; border-radius: 12px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.contact-box > div:first-child, .contact-box > button { z-index: 1; }
.section-label.light { color: #a9c6e2; }
.section-label.light > span:not(.t-id):not(.t-en) { background: #a9c6e2; }
.contact-box h2 { font-size: 31px; line-height: 1.4; color: #f3f6fb; letter-spacing: -1.2px; }
.contact-box h2 > span { color: #a8cde3; }
.contact-box h2 > .t-id, .contact-box h2 > .t-en { color: inherit; }
.contact-box p { font-size: 14px; color: #b0c5d9; margin-top: 16px; line-height: 1.75; max-width: 450px; }
.button-mint { background: #b9d7f0; color: #2f5a78; padding: 14px 22px; }
.button-mint:hover { background: #d7e8f8; }
.contact-orbit { position: absolute; width: 430px; height: 430px; right: -150px; top: -80px; border: 1px solid #9fc4de17; border-radius: 50%; box-shadow: 0 0 0 45px #9fc4de09, 0 0 0 90px #9fc4de06, 0 0 0 135px #9fc4de05; }
.footer { border-top: 1px solid #e4eaf6; padding-top: 47px; }
.footer-main { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.95fr) minmax(0,1.25fr); gap: 56px; padding-bottom: 40px; align-items: start; }
.footer-main > .footer-brand,
.footer-main > .footer-nav,
.footer-main > .footer-contact { padding-top: 0px; display: flex; flex-direction: column; }
.footer-brand .brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand .brand img { width: 31px; height: 39px; flex-shrink: 0; }
.footer-brand .brand > span { font-size: 27px; line-height: 1; display: inline-flex; flex-direction: column; justify-content: center; }
.footer-brand .brand-bottom { font-size: 7px; letter-spacing: 1.8px; line-height: 1; margin-top: 3px; }
.footer-brand > p { font-size: 13px; line-height: 1.8; color: #677f9c; margin-top: 16px; }
.footer-cert { display: flex; gap: 8px; align-items: center; font-size: 11px; color: #5d82a5; margin-top: 19px; line-height: 1.6; font-weight: 500; }
.footer h4 { font-size: 13px; font-weight: 650; margin: 0 0 14px; padding-top: 6px; color: #2e4052; letter-spacing: .2px; }
.footer-nav { display: flex; flex-direction: column; gap: 0px; font-size: 13px; color: #6a829e; line-height: 1.6; }
.footer-nav h4 { color: inherit; }
.footer-nav a { min-height: 42px; display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 6px; margin: 0; width: 100%; box-sizing: border-box; }
.footer-nav a:hover { color: #21456e; background: #f3f8fc; }
.footer-contact a { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #637e9d; margin-bottom: 0px; line-height: 1.55; min-height: 42px; padding: 6px 10px; border-radius: 6px; width: 100%; box-sizing: border-box; }
.footer-contact a:hover { background: #f3f8fc; color: #1c4a70; }
.footer-contact > address > a:not(:last-of-type) { margin-bottom: 2px; }
.footer-contact p { display: flex; align-items: start; gap: 9px; font-size: 12px; color: #637e9d; line-height: 1.85; padding: 4px 4px 2px; margin: 4px 0 10px; }
.footer-contact strong { display: block; color: #2e4052; font-size: 12px; font-weight: 650; letter-spacing: .2px; margin-bottom: 2px; }
.footer-map { margin-top: 10px; }
.footer-map iframe { display: block; width: 100%; height: 168px; border: 1px solid #d9e4f0; border-radius: 8px; }
.footer-map a { margin-top: 8px; margin-bottom: 0; min-height: auto; padding: 4px 2px; }
.footer-map a:hover { background: transparent; text-decoration: underline; }
.footer-contact p svg { flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid #dde9f5; padding: 22px 0; font-size: 12px; color: #7488a6; line-height: 1.7; font-weight: 500; }
.footer-bottom > span:last-child { display: flex; gap: 7px; align-items: center; }
.footer-dot { padding: 0 5px; }
.modal { padding: 0; border: 1px solid #dce7d9; border-radius: 15px; width: min(560px, calc(100% - 32px)); max-height: 90vh; box-shadow: 0 30px 90px #0f345a40; color: #2e4052; }
.modal::backdrop { background: #0d32586d; backdrop-filter: blur(5px); }
.modal-close { position: absolute; top: 15px; right: 15px; width: 33px; height: 33px; border-radius: 50%; background: white; border: 1px solid #dce5ef; display: flex; align-items: center; justify-content: center; z-index: 2; }
.modal-project-image { width: 100%; height: 220px; object-fit: cover; }
.modal-content { padding: 32px; }
.modal-content h2 { font-size: 28px; margin-bottom: 12px; }
.modal-content > p { font-size: 13px; color: #607a90; line-height: 1.8; }
.modal-content dl { margin: 24px 0; }
.modal-content dl > div { margin-bottom: 17px; }
.modal-content dt { font-size: 10px; color: #6788a5; margin-bottom: 5px; }
.modal-content dd { font-size: 12px; margin: 0; line-height: 1.8; }
.photo-disclaimer { display: block; font-size: 9px; color: #7e93ae; margin-bottom: 23px; }
.consultation { padding-top: 42px; }
.consultation form { display: grid; gap: 15px; margin-top: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consultation label { font-size: 11px; font-weight: 500; display: flex; flex-direction: column; gap: 7px; }
.consultation input, .consultation select, .consultation textarea { width: 100%; background: #f9fbff; border: 1px solid #d5e1ee; padding: 11px 12px; border-radius: 6px; font-size: 11px; outline-color: #628aaf; color: #2c4766; }
.consultation input::placeholder, .consultation textarea::placeholder { color: #8e9aae; }
.consultation textarea { resize: vertical; }
.modal-whatsapp { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 9px; color: #7589a5; padding-top: 22px; }
.modal-whatsapp a { display: inline-flex; align-items: center; gap: 5px; color: #3a7797; font-weight: 600; }
.form-feedback { font-size: 10px; line-height: 1.8; color: #417fa1; background: #e5eef9; border-radius: 5px; padding: 10px; }
@media (min-width: 1600px) { .hero { padding-top: 80px; } .hero-grid { gap: 75px; } }
@media (max-width: 1100px) {
  .container { width: calc(100% - 70px); }
  .navigation { gap: 20px; }
  .navigation a { font-size: 11px; }
  .brand > span { font-size: 27px; }
  .hero-grid { gap: 30px; }
  h1 { font-size: 49px; letter-spacing: -2.4px; }
  .hero-copy > p { font-size: 12px; }
  .hero-actions .button { font-size: 10px; padding: 12px 14px; gap: 9px; }
  .image-frame { height: 420px; }
  .integration-card { right: -5px; padding: 12px; }
  .system-card { left: -6px; width: 240px; }
  .stats > div { padding-left: 28px; }
  .stat-cert { font-size: 22px; }
  .hero-assurance .ecoxpert { display: none; }
  .client-logos { padding-left: 0; padding-right: 0; }
  .about-grid { gap: 48px; }
  .service-card { padding: 22px 20px; }
  .service-card h3 { font-size: 15px; }
  .service-features > span { font-size: 9px; }
  .footer-main { gap: 40px; }
}
@media (max-width: 800px) {
  .site-header { height: 76px; }
  .container { width: calc(100% - 44px); }
  .menu-toggle { display: block; }
  .nav-wrap { gap: 15px; }
  .header-cta { font-size: 10px; min-height: 37px; padding: 9px 12px; }
  .navigation { display: none; position: absolute; top: 75px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #dce4f0; padding: 20px 25px; flex-direction: column; align-items: start; box-shadow: 0 12px 20px #1a4a720a; }
  .navigation.open { display: flex; }
  .navigation a { font-size: 13px; width: 100%; padding: 5px; }
  .navigation a.nav-active:after { display: none; }
  .hero { padding-top: 42px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  h1 { font-size: 39px; letter-spacing: -1.8px; }
  .eyebrow-pill { font-size: 7px; }
  .hero-actions { flex-direction: column; align-items: start; gap: 8px; margin-top: 21px; }
  .hero-assurance { margin-top: 23px; }
  .hero-assurance > span:nth-child(2) { font-size: 7px; }
  .image-frame { height: 380px; margin-left: 0; margin-right: 0; }
  .integration-card { top: 24px; right: -7px; gap: 7px; padding: 10px; }
  .integration-card strong { font-size: 9px; }
  .integration-card div > span { font-size: 6px; }
  .integration-card .float-icon { width: 30px; height: 30px; }
  .integration-card .float-check { margin-left: 0; }
  .system-card { width: 215px; left: -12px; bottom: 105px; padding: 12px; }
  .system-card-top > span:nth-child(2) { font-size: 8px; }
  .system-main strong { font-size: 12px; }
  .image-caption { left: 17px; top: 17px; font-size: 6px; }
  .image-bottom { left: 18px; right: 18px; bottom: 24px; }
  .image-bottom > span { font-size: 17px; }
  .visual-corner { font-size: 5px; }
  .stats { margin-top: 35px; }
  .stats > div { padding-left: 18px; }
  .stats strong { font-size: 25px; }
  .stats p { font-size: 8px; }
  .stat-cert { font-size: 17px; }
  .stat-cert svg { width: 21px; }
  .client-logos { gap: 20px; }
  .schneider { font-size: 18px; }
  .schneider b { font-size: 13px; padding-left: 19px; }
  .intiland { font-size: 23px; }
  .logo-lines { font-size: 33px; }
  .daikin { font-size: 20px; }
  .daikin-mark { border-bottom-width: 21px; border-right-width: 12px; width: 20px; }
  .biznet { font-size: 23px; }
  .bayer { width: 37px; height: 37px; font-size: 7px; }
  .telkom { font-size: 17px; }
  .telkom span { font-size: 14px; }
  .section-space { padding: 53px 0; }
  h2 { font-size: 30px; }
  .section-heading > p { font-size: 10px; max-width: 260px; }
  .service-grid { gap: 12px; }
  .service-card { padding: 19px 15px; }
  .service-card h3 { min-height: 40px; font-size: 14px; }
  .service-card > p { font-size: 10px; min-height: 90px; }
  .service-tags { min-height: 55px; }
  .service-tags > span { font-size: 6px; }
  .service-features > span { font-size: 8px; align-items: start; }
  .service-features svg { flex-shrink: 0; width: 12px; }
  .service-card .text-link { font-size: 9px; }
  .solutions-note { font-size: 8px; }
  .solutions-note a { display: none; }
  .about-grid { gap: 35px; }
  .about-copy > p { font-size: 10px; }
  .about-points > span { font-size: 9px; }
  .project-grid { gap: 12px; }
  .project-image { height: 155px; }
  .project-content { padding: 15px; }
  .project-content h3 { font-size: 14px; }
  .project-content > span { font-size: 5px; }
  .project-content > p { font-size: 9px; min-height: 46px; }
  .project-meta { font-size: 7px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 27px; }
  .contact-box { padding: 33px 29px; }
  .contact-box h2 { font-size: 25px; }
  .contact-box .button { font-size: 10px; padding: 12px; gap: 9px; }
  .footer-main { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.2fr); gap: 28px; padding-bottom: 32px; }
  .footer-contact a, .footer-contact p { font-size: 13px !important; }
  .footer-cert { font-size: 10px; }
  .footer-nav a { min-height: 44px; padding: 6px 8px; }
  .footer-contact a { min-height: 44px; padding: 6px 8px; }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 40px); }
  .brand > span { font-size: 25px; }
  .brand img { width: 31px; height: 40px; }
  .brand-bottom { font-size: 6px; letter-spacing: 1.8px; }
  .header-cta { padding: 9px; font-size: 9px; gap: 5px; }
  .nav-wrap { gap: 8px; }
  .menu-toggle { padding: 5px; }
  .menu-toggle svg { width: 21px; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  h1 { font-size: clamp(43px, 10.5vw, 60px); letter-spacing: -2.3px; }
  .hero-copy > p { font-size: 13px; max-width: 350px; }
  .eyebrow-pill { font-size: 8px; }
  .hero-actions { flex-direction: row; gap: 9px; }
  .hero-actions .button { font-size: 10px; padding: 12px; gap: 8px; }
  .hero-assurance > span:nth-child(2) { font-size: 8px; }
  .hero-assurance .ecoxpert { display: block; font-size: 16px; padding-left: 12px; }
  .hero-visual { margin-left: 10px; margin-right: 10px; }
  .image-frame { height: 375px; }
  .image-caption { font-size: 7px; left: 22px; top: 22px; }
  .integration-card { padding: 13px; right: -13px; top: 27px; gap: 9px; }
  .integration-card strong { font-size: 11px; }
  .integration-card div > span { font-size: 8px; }
  .integration-card .float-icon { height: 36px; width: 36px; }
  .system-card { left: -16px; bottom: 99px; width: 242px; padding: 14px; }
  .system-card-top > span:nth-child(2) { font-size: 9px; }
  .system-main strong { font-size: 14px; }
  .image-bottom > span { font-size: 22px; }
  .image-bottom { left: 23px; right: 23px; }
  .visual-corner { font-size: 6px; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 25px; margin-top: 27px; padding: 27px 0; }
  .stats > div { padding-left: 24px; }
  .stats > div:nth-child(3) { padding-left: 0; border: none; }
  .stats strong { font-size: 30px; }
  .stats p { font-size: 10px; }
  .stat-cert { font-size: 23px; }
  .clients { padding: 29px 0 25px; }
  .clients > p { font-size: 10px; }
  .client-logos { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; gap: 25px 20px; padding: 27px 0 22px; }
  .section-heading { display: block; margin-bottom: 26px; }
  .section-heading > p { margin-top: 17px; font-size: 11px; max-width: none; }
  h2 { font-size: 32px; }
  .desktop-break { display: none; }
  .service-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card { padding: 25px; }
  .service-top { margin-bottom: 19px; }
  .service-card h3 { min-height: 0; font-size: 19px; }
  .service-card > p { font-size: 12px; min-height: 0; }
  .service-tags { min-height: 0; margin: 17px 0; }
  .service-tags > span { font-size: 9px; }
  .service-features > span { font-size: 11px; }
  .service-card .text-link { font-size: 11px; }
  .solutions-note { line-height: 1.8; align-items: start; font-size: 9px; }
  .solutions-note svg { flex-shrink: 0; }
  .about-grid { grid-template-columns: 1fr; gap: 38px; }
  .about-pattern { height: 300px; }
  .about-copy > p { font-size: 12px; }
  .about-points > span { font-size: 11px; }
  .project-filters { gap: 6px; }
  .project-filters > button { font-size: 9px; padding: 8px 10px; }
  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .project-image { height: 215px; }
  .project-category { font-size: 10px; }
  .project-content { padding: 21px; }
  .project-content > span { font-size: 8px; }
  .project-content h3 { font-size: 19px; }
  .project-content > p { font-size: 11px; min-height: 0; }
  .project-meta { font-size: 10px; }
  .projects-bottom { flex-direction: column; align-items: start; gap: 19px; }
  .team-grid { gap: 27px 20px; }
  .team-card h3 { font-size: 13px; }
  .team-role { font-size: 8px; line-height: 1.6; display: block; min-height: 25px; }
  .team-card > p { font-size: 10px; }
  .contact-section { padding-bottom: 45px; }
  .contact-box { display: block; padding: 31px 25px; }
  .contact-box h2 { font-size: 27px; letter-spacing: -1px; }
  .contact-box .section-label { font-size: 7px; letter-spacing: 1px; }
  .contact-box > div:first-child { position: relative; }
  .contact-box .button { position: relative; margin-top: 24px; padding: 13px 18px; font-size: 11px; }
  .contact-box p { line-height: 1.8; }
  .footer { padding-top: 35px; }
  /* FOOTER HP (<= 600px) — 1 KOLOM PENUH, LEBIH PADAT, copyright RATA TENGAH! */
  .footer-main {
    grid-template-columns: 100% !important;
    grid-template-rows: auto auto auto !important;
    grid-auto-flow: row !important;
    gap: 22px 0 !important;   /* ← KECILKAN JARAK ANTAR BLOK (BRAND → NAV → CONTACT) dari 40px jadi 22px = LEBIH PADAT! */
    padding-bottom: 20px !important;
  }
  .footer-brand, .footer-nav, .footer-contact { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; }

  /* FOOTER EXPLORE LINKS (About Us → BMS → Projects → Team) : JARAK ANTAR LINK DIKURANGI AGAR TIDAK BANYAK BLANK SPACE! */
  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0px !important;
    font-size: 13px !important;
    color: #6a829e;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .footer-nav h4 {
    margin-bottom: 4px !important;
    padding-top: 0 !important;
  }
  .footer-main .footer-nav a,
  .footer-main .footer-contact a {
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .footer-contact a, .footer-contact p { font-size: 13px !important; gap: 8px !important; line-height: 1.5 !important; overflow-wrap: anywhere; margin-bottom: 0 !important; }
  .footer-contact p { margin-top: 3px !important; margin-bottom: 0 !important; }
  .footer-contact strong { margin-bottom: 4px !important; padding-bottom: 0 !important; }
  .footer-contact svg { width: 16px !important; min-width: 16px !important; flex-shrink: 0 !important; }

  /* 🔴 COPYRIGHT & FOOTER BOTTOM: RATA TENGAH SEMUA! BUKAN LAGI ALIGN KIRI! */
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;    /* ← RATA TENGAH HORIZONTAL! */
    text-align: center !important;    /* ← TEKS RATA TENGAH! */
    gap: 8px !important;
    line-height: 1.7 !important;
    padding: 20px 12px 24px 12px !important;
    border-top: 1px solid #e1e8de !important;
  }
  .footer-bottom > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;    /* ← SETIAP CHILD copyright & engineering tag = TENGAH! */
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .footer-bottom > span:last-child {
    display: inline-flex !important;
    justify-content: center !important;
    gap: 7px !important;
    align-items: center !important;
  }
  .modal-content { padding: 25px; }
  .consultation { padding-top: 40px; }
  .modal-content h2 { font-size: 25px; }
  .form-row { grid-template-columns: 1fr; gap: 15px; }
}

/* ========================================================
   SCROLL FADE-IN + PAGE TRANSITION (Apple taste smooth)
   Easing: cubic-bezier(.22, 1, .36, 1) — natural, tidak kaku
   ======================================================== */

/* Page transition: fade in saat load, fade out sebelum pindah halaman */
/* Safety Belt: Jika JS gagal jalan (error) / NoScript — halaman TETAP TERLIHAT */
body.page-fade.no-js { opacity: 1 !important; transform: none !important; }
/* Animasi fade-in hanya JIKA JS berjalan (.js-enabled ditambahkan dari site.js) */
body.page-fade.js-enabled {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
body.page-fade.js-enabled.is-loaded {
  opacity: 1;
  transform: none;
}
body.page-fade.js-enabled.is-leaving {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition-duration: 0.35s !important;
}

/* Fade-in saat scroll ke bawah (section & kartu) */
.fade-in {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delay untuk kartu di dalam section (service/project/team) */
.fade-in.delay-1 { transition-delay: 0.08s; }
.fade-in.delay-2 { transition-delay: 0.16s; }
.fade-in.delay-3 { transition-delay: 0.24s; }
.fade-in.delay-4 { transition-delay: 0.32s; }
.fade-in.delay-5 { transition-delay: 0.40s; }
.fade-in.delay-6 { transition-delay: 0.48s; }

/* Accessibility: user dengan prefers-reduced-motion = TIDAK ADA animasi (wajib!) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body.page-fade,
  body.page-fade.is-loaded,
  body.page-fade.is-leaving,
  body.page-fade.js-enabled,
  body.page-fade.js-enabled.is-loaded,
  body.page-fade.js-enabled.is-leaving,
  .fade-in,
  .fade-in.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   HP MOBILE FIX: Horizontal Overflow + Header Kepadatan
   (max-width: 820px) = breakpoint tablet/HP
   ============================================================ */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  body { position: relative; width: 100%; }

  /* 1. HEADER ACTIONS — Sembunyikan social (YT/IG) + tombol Diskusikan CTA di HP
        (Social + Diskusikan ADA di dalam mobile drawer nav ketika klik burger)
        HANYA sisakan toggle bahasa ID/EN agar header tidak overflow 72px */
  .header-actions a[href*="youtu" i],
  .header-actions a[href*="instagram" i],
  .header-actions a[href*="ig-" i],
  .header-actions a[aria-label*="YouTube" i],
  .header-actions a[aria-label*="Instagram" i],
  .header-actions a[aria-label*="youtube" i],
  .header-actions a[aria-label*="instagram" i],
  .header-actions .header-cta,
  .header-actions .button-dark.header-cta {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
  }
  .header-actions {
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
  }

  /* 2. CONTACT ORBIT (LINGKARAN DEKORATIF KONTAK)
        Dikecilkan + digeser agar tidak keluar kanan viewport yang menyebabkan overflow 130px */
  .contact-orbit {
    width: 260px !important;
    height: 260px !important;
    right: -90px !important;
    top: -30px !important;
    box-shadow:
      0 0 0 28px #b8d4a308,
      0 0 0 56px #9fc4de06,
      0 0 0 84px #b8d4a304 !important;
  }
  .contact-section {
    position: relative !important;
    overflow-x: hidden !important; /* Double safety: apapun di luar contact-section → dipotong */
  }

  /* 3. CONTAINER GLOBAL: JANGAN SAMPAI ADA PADDING KIRI-KANAN BERLEBIH */
  .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* 4. FONT MOBILE SCALE UP (HP tidak shrink kecil! Sesuai standar ideal 14-15px body paragraph) */
  .eyebrow-pill { font-size: 11px !important; padding: 9px 12px !important; letter-spacing: 1.2px !important; }
  .section-label { font-size: 11px !important; letter-spacing: 1.7px !important; }
  .hero-copy > p { font-size: 15px !important; line-height: 1.8 !important; max-width: 100% !important; }
  .button { font-size: 14px !important; min-height: 48px !important; padding: 13px 20px !important; }
  .section-heading > p { font-size: 15px !important; line-height: 1.8 !important; max-width: 100% !important; }
  .service-card h3 { font-size: 18px !important; margin-bottom: 10px !important; }
  .service-card > p { font-size: 14px !important; line-height: 1.8 !important; min-height: auto !important; }
  .service-tags > span { font-size: 10px !important; padding: 6px 9px !important; font-weight: 500 !important; }
  .service-features > span { font-size: 12px !important; line-height: 1.5 !important; }
  .text-link { font-size: 13px !important; font-weight: 600 !important; }
  .solutions-note, .solutions-note a { font-size: 12px !important; line-height: 1.6 !important; }
  .legacy-card p { font-size: 13px !important; line-height: 1.7 !important; }
  .about-copy > p { font-size: 15px !important; line-height: 1.8 !important; }
  .about-points > span { font-size: 13px !important; line-height: 1.6 !important; }
  .project-filters > button { font-size: 12px !important; padding: 10px 17px !important; font-weight: 500 !important; }
  .project-category { font-size: 10px !important; font-weight: 500 !important; }
  .project-content > span { font-size: 9px !important; line-height: 1.5 !important; }
  .project-content > span > span { font-size: 11px !important; font-weight: 500 !important; }
  .project-content h3 { font-size: 18px !important; }
  .project-content > p { font-size: 14px !important; line-height: 1.75 !important; min-height: auto !important; }
  .project-meta { font-size: 12px !important; font-weight: 500 !important; }
  .projects-bottom .button { font-size: 12px !important; }
  .projects-bottom > small { font-size: 11px !important; line-height: 1.7 !important; }
  .team-card h3 { font-size: 18px !important; }
  .team-role { font-size: 11px !important; font-weight: 500 !important; }
  .team-card > p { font-size: 14px !important; line-height: 1.8 !important; }
  .contact-box p { font-size: 14px !important; line-height: 1.75 !important; max-width: 100% !important; }
  .stats p { font-size: 13px !important; line-height: 1.6 !important; }
  .clients > p { font-size: 13px !important; line-height: 1.6 !important; }
  .clients > small { font-size: 10px !important; line-height: 1.6 !important; }
  .hero-assurance > span:nth-child(2) { font-size: 11px !important; line-height: 1.6 !important; }
  .hero-assurance small { font-size: 11px !important; }

  /* 4b. BMS LANDING FONT SCALE UP (HP tidak kecil! Semua class BMS !important) */
  .breadcrumbs { font-size: 12px !important; line-height: 1.6 !important; }
  .bms-hero-copy > p { font-size: 15px !important; line-height: 1.8 !important; max-width: 100% !important; }
  .bms-hero-copy .button { font-size: 14px !important; min-height: 48px !important; padding: 14px 18px !important; }
  .bms-cert > span { font-size: 13px !important; line-height: 1.5 !important; font-weight: 600 !important; }
  .bms-cert small { font-size: 11px !important; line-height: 1.6 !important; }
  .bms-visual-top > span:first-child { font-size: 11px !important; letter-spacing: 1.2px !important; font-weight: 500 !important; }
  .bms-visual-badge { font-size: 10px !important; padding: 6px 10px !important; font-weight: 600 !important; }
  .bms-core strong { font-size: 21px !important; letter-spacing: -.6px !important; }
  .bms-core > span { font-size: 12px !important; line-height: 1.5 !important; }
  .bms-node > span { font-size: 12px !important; line-height: 1.55 !important; }
  .bms-visual-bottom { font-size: 11px !important; line-height: 1.5 !important; }
  .bms-visual-bottom > span:last-child { font-size: 9px !important; letter-spacing: 1px !important; font-weight: 500 !important; }
  .bms-platforms > span:first-child { font-size: 11px !important; letter-spacing: 1.2px !important; font-weight: 500 !important; }
  .bms-platforms > strong { font-size: 15px !important; font-weight: 650 !important; }
  .bms-platforms small { font-size: 11px !important; font-weight: 500 !important; }
  .bms-capability h3 { font-size: 18px !important; }
  .bms-capability p { font-size: 14px !important; line-height: 1.8 !important; }
  .bms-process-grid h3 { font-size: 19px !important; }
  .bms-process-grid p { font-size: 14px !important; line-height: 1.8 !important; }
  .bms-industries > div:first-child > p { font-size: 15px !important; line-height: 1.8 !important; max-width: 100% !important; }
  .bms-industry-list h3 { font-size: 17px !important; }
  .bms-industry-list p { font-size: 13px !important; line-height: 1.7 !important; }
  .bms-share .text-link { font-size: 13px !important; font-weight: 600 !important; }
  .bms-share > div > span { font-size: 12px !important; line-height: 1.6 !important; max-width: 100% !important; }

  /* ============================================================
     FOOTER MOBILE LAYOUT FIX (3 BUGS FIXED):
     1. Grid 1 KOLOM (vertikal), TIDAK ADA LAGI ada area kosong di kanan
     2. SEMUA link ≥ 44x44px (WCAG touch target)
     3. Footer bottom flex-direction:column — copyright + engineering done in Jakarta
     ============================================================ */

  /* 1. Footer Main Grid Footer HP = VERTIKAL 1 KOLOM (sekarang 3 blok di-stack vertikal, TIDAK ADA kosong 171px di kanan) */
  .footer-main {
    grid-template-columns: 1fr !important;   /* SATU KOLOM PENUH (362px / 100% width, BUKAN 171px SETENGAH! */
    grid-auto-flow: row !important;
    grid-template-rows: auto auto auto !important;   /* Tinggi OTOMATIS masing-masing blok! BUKAN fixed 186px / 423px yang aneh */
    gap: 22px 0 !important;   /* ← LEBIH PADAT: jarak vertikal antar blok Brand → Nav → Contact dari 40px → 22px! */
    padding: 0 0 20px 0 !important;
  }

  /* Setiap blok anak footer: 100% LEBAR (menghilangkan efek 171px setengah kolom */
  .footer-main > div,
  .footer-main > section,
  .footer-main > nav,
  .footer-main > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Footer Explore links lebih PADAT (kurangi jarak vertikal antar link Explore agar tidak banyak blank putih!) */
  .footer-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;       /* Tidak ada gap EXTRA diantara link, karena padding vertikal per link sudah cukup */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .footer-nav h4,
  .footer-nav h3,
  .footer-contact strong {
    margin-bottom: 4px !important;   /* Heading Explore / Contact → first link TIDAK JAUH LAGI! */
    padding-bottom: 0 !important;
  }

  /* 2. SEMUA LINK FOOTER: MINIMUM 40px TINGGI (Masih ✅ NYAMAN TEKAN, tapi LEBIH PADAT untuk TIDAK ADA BLANK SPACE!) */
  .footer-main a,
  .footer-main button,
  .footer-main [role="link"] {
    min-height: 40px !important;          /* LEBIH PADAT (44px→40px, masih memenuhi WCAG tap target!)  */
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;         /* padding vertikal 10px → 7px = lebih kompak! */
    border-radius: 6px !important;
    box-sizing: border-box !important;
    margin: 0 !important;                 /* HILANGKAN margin 2px vertikal TAMBAHAN yang bikin blank space */
    line-height: 1.5 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: background-color 160ms ease, color 160ms ease;
  }

  /* Hover/tekan state tap area visual jelas */
  .footer-main a:hover,
  .footer-main a:active,
  .footer-main a:focus-visible {
    background-color: #eaf0e7;
    outline: none;
  }

  /* ICON SOSIAL FOOTER (sebelumnya 34px ➔ SEKARANG 44x44px, TARGET WCAG JADI BESAR */
  .footer-main a[href*="youtu" i],
  .footer-main a[href*="instagram" i],
  .footer-main a[href*="linkedin" i],
  .footer-main a[href*="facebook" i],
  .footer-main a[aria-label*="YouTube" i],
  .footer-main a[aria-label*="Instagram" i],
  .footer-main a[aria-label*="LinkedIn" i],
  .footer-main a[aria-label*="Facebook" i],
  .footer-main a svg {
    min-width: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;   /* svg berada di tengah 44px, tidak geser */
  }

  /* 3. FOOTER BOTTOM (Copyright & Hak cipta + Engineering done in...) — 🔴 RATA TENGAH SEMUA! BUKAN KIRI! */
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;   /* Stack vertikal di HP, TIDAK side-by-side yang terlalu sempit! */
    justify-content: center !important;
    align-items: center !important;        /* ← RATA TENGAH HORIZONTAL (bukan lagi flex-start kiri!) */
    text-align: center !important;         /* ← TEKS TENGAH */
    gap: 8px !important;
    padding: 20px 12px 24px 12px !important;
    font-size: 10px !important;   /* naikkan font 8px → 10px agar tidak terlalu kecil! */
    line-height: 1.7 !important;
    border-top: 1px solid #e1e8de !important;   /* Garis tipis pemisah visual */
    margin-top: 10px;
  }
  .footer-bottom > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;       /* ← SETIAP CHILD copyright & engineering tag = RATA TENGAH JUGA! */
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
  }
  .footer-bottom > span:last-child {
    display: inline-flex !important;
    justify-content: center !important;
    gap: 7px !important;
    align-items: center !important;
  }

  /* HEADING / JUDUL blok footer (Navigasi, Kontak dll) → JARAK PERNAH TERLALU RAPET DENGAN LINK DI BAWAH NYA */
  .footer-main h3,
  .footer-main h4,
  .footer-main strong {
    display: block !important;
    margin: 0 0 8px 0 !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

.navigation > a:last-child { display: inline-flex; align-items: center; gap: 3px; }
.bms-hero { background: linear-gradient(110deg, #f6faff, #eef4fb); padding-bottom: 0; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 26px; font-size: 12px; line-height: 1.6; color: #6b7f96; }
.breadcrumbs > span { color: #2a4e73; font-weight: 500; }
.breadcrumbs a { padding: 6px 2px; min-height: 24px; }
.breadcrumbs a:hover { color: #163f5e; }
.bms-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; padding: 55px 0; }
.bms-hero-copy h1 { font-size: clamp(42px, 4.4vw, 62px); letter-spacing: -2.8px; }
.bms-hero-copy > p { max-width: 470px; font-size: 15px; line-height: 1.85; color: #6b7f96; }
.bms-cert { display: flex; gap: 12px; align-items: center; margin-top: 27px; color: #2a4e73; }
.bms-cert > span { font-size: 13px; line-height: 1.5; font-weight: 600; }
.bms-cert small { display: block; color: #7a8ea5; font-size: 11px; line-height: 1.6; margin-top: 5px; }
.bms-system-visual { background: #13425f; border: 1px solid #214b3c; border-radius: 16px; padding: 26px; color: #e7f1de; box-shadow: 0 25px 50px #13425f10; position: relative; overflow: hidden; background-image: linear-gradient(#d6e8c407 1px, transparent 1px), linear-gradient(90deg, #d6e8c407 1px, transparent 1px); background-size: 25px 25px; }
.bms-visual-top { display: flex; align-items: center; justify-content: space-between; }
.bms-visual-top > span:first-child { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1.4px; color: #9fb7d6; font-weight: 500; }
.bms-visual-badge { font-size: 10px; padding: 6px 10px; border: 1px solid #6b86a560; border-radius: 5px; color: #b6c8e4; letter-spacing: 1.1px; font-weight: 600; }
.bms-core { position: relative; margin: 32px auto 33px; padding: 26px; display: flex; flex-direction: column; align-items: center; border: 1px solid #5877a066; width: 220px; background: #163f5e; border-radius: 12px; }
.bms-core-icon { padding: 14px; background: #c9daef1a; color: #a9c3e3; border-radius: 14px; margin-bottom: 17px; }
.bms-core strong { font-family: 'Manrope', sans-serif; font-size: 22px; letter-spacing: -.6px; font-weight: 650; }
.bms-core > span { color: #97b3d3; font-size: 12px; line-height: 1.5; margin-top: 5px; }
.bms-core-line { position: absolute; width: 1px; height: 32px; bottom: -32px; background: #4c7aac; }
.bms-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; }
.bms-node { display: flex; align-items: center; gap: 11px; padding: 17px 15px; border: 1px solid #55739666; background: #1d4a6f; border-radius: 8px; color: #a6bfdd; }
.bms-node > span { font-size: 12px; line-height: 1.55; color: #c5d3ea; }
.bms-node > svg:last-child { margin-left: auto; color: #7397c4; }
.bms-visual-bottom { display: flex; align-items: center; gap: 6px; margin-top: 26px; padding-top: 15px; border-top: 1px solid #5a7aa050; font-size: 11px; line-height: 1.5; color: #94afc9; }
.bms-visual-bottom > span:last-child { margin-left: auto; font-size: 9px; letter-spacing: 1px; font-weight: 500; }
.bms-platforms { display: flex; align-items: center; gap: 36px; border-top: 1px solid #d9e2ee; padding: 28px 0; flex-wrap: wrap; }
.bms-platforms > span:first-child { font-size: 11px; letter-spacing: 1.3px; color: #7a8fa8; font-weight: 500; }
.bms-platforms > strong { font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.5; font-weight: 650; color: #2a4e73; }
.bms-platforms small { font-size: 11px; font-weight: 500; margin-left: 6px; color: #7991ae; }
.bms-platforms img { width: 108px; height: 36px; object-fit: contain; margin-left: auto; }
.bms-platform-divider { width: 1px; height: 26px; background: #dbe4d3; }
.bms-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bms-capability { padding: 29px; border: 1px solid #dde5f2; border-radius: 11px; background: #fefeff; }
.bms-capability .service-icon { width: 46px; height: 46px; background: #e6eef8; }
.bms-capability h3 { font-size: 18px; font-weight: 650; letter-spacing: -.4px; margin: 22px 0 13px; }
.bms-capability p { font-size: 14px; color: #6b7f96; line-height: 1.8; }
.bms-process { background: #f4f7ef; }
.bms-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.bms-step-number { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d7e2cd; padding-top: 19px; font-family: 'Manrope', sans-serif; font-size: 28px; color: #7d9a6d; }
.bms-step-number svg { color: #b0c1a0; }
.bms-process-grid article:last-child .bms-step-number svg { visibility: hidden; }
.bms-process-grid h3 { font-size: 19px; font-weight: 600; margin: 22px 0 12px; }
.bms-process-grid p { font-size: 14px; color: #6b7f96; line-height: 1.8; }
.bms-industries { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.bms-industries > div:first-child > p { font-size: 15px; line-height: 1.8; color: #6b7f96; margin: 20px 0 26px; max-width: 420px; }
.bms-industry-list > div { display: flex; gap: 19px; align-items: center; padding: 22px 0; border-bottom: 1px solid #e1e8d9; }
.bms-industry-list > div > span { color: #8ea17c; font-size: 11px; font-weight: 500; letter-spacing: .6px; }
.bms-industry-list h3 { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.bms-industry-list p { font-size: 13px; color: #6b7f96; margin-top: 9px; line-height: 1.7; }
.bms-industry-list > div > svg { margin-left: auto; color: #8aa578; }
.bms-share { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding-top: 26px; }
.bms-share .text-link { font-size: 13px; font-weight: 600; }
.bms-share > div { text-align: right; }
.bms-share > div > span { display: block; max-width: 260px; font-size: 12px; line-height: 1.6; color: #6c8b5d; margin-top: 9px; }
.not-found { padding-top: 90px; padding-bottom: 90px; }
@media (max-width: 1100px) {
  .navigation { gap: 18px; }
  .client-logo img { width: 110px; }
  .team-card h3, .team-card > p, .team-card > .team-role { margin-left: 15px; margin-right: 15px; }
  .bms-hero-grid { gap: 30px; }
  .bms-hero-copy .hero-actions { flex-wrap: wrap; }
  .bms-platforms { gap: 18px; }
  .bms-platforms > strong { font-size: 11px; }
  .bms-industries { gap: 45px; }
}
@media (max-width: 800px) {
  .client-logo img { width: 92px; height: 35px; }
  .client-logo img[src$="bayer.svg"] { width: 42px; height: 42px; }
  .client-logo img[src$="intiland.svg"] { height: 45px; }
  .bms-hero-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 35px; }
  .bms-hero-copy h1 { font-size: 45px; }
  .bms-hero-copy .hero-actions { flex-direction: row; }
  .bms-system-visual { max-width: 520px; width: 100%; margin: auto; }
  .bms-platforms { flex-wrap: wrap; gap: 16px; }
  .bms-platforms > span:first-child { width: 100%; }
  .bms-capability-grid { grid-template-columns: 1fr 1fr; }
  .bms-process-grid { grid-template-columns: 1fr 1fr; }
  .bms-industries { gap: 30px; }
  .bms-industries h2 { font-size: 28px; }
}
@media (max-width: 600px) {
  .client-logo { height: 52px; width: 100%; }
  .client-logo img { width: 102px; }
  .team-portrait { aspect-ratio: 4 / 5; margin-bottom: 17px; }
  .team-card { padding-bottom: 18px; }
  .team-card h3, .team-card > p, .team-card > .team-role { margin-left: 12px; margin-right: 12px; }
  .team-card h3 { font-size: 18px; }
  .team-card > p { font-size: 14px; line-height: 1.8; }
  .team-portrait-badge { left: 10px; bottom: 10px; font-size: 8px; padding: 7px 9px; letter-spacing: 1.1px; font-weight: 500; }
  .team-portrait-badge svg { width: 13px; }
  .team-role { min-height: 32px; font-size: 11px; }
  .bms-hero-copy h1 { font-size: 38px; letter-spacing: -2.1px; }
  .bms-hero-copy > p { font-size: 15px; line-height: 1.8; max-width: 100%; }
  .bms-hero-copy .hero-actions { gap: 10px; }
  .bms-hero-copy .button { font-size: 14px; padding: 14px 18px; min-height: 48px; gap: 8px; }
  .bms-hero-copy .button svg { width: 16px; }
  .bms-system-visual { padding: 22px 18px; }
  .bms-visual-top > span:first-child { font-size: 11px; letter-spacing: 1.2px; font-weight: 500; }
  .bms-visual-badge { font-size: 10px; padding: 6px 10px; font-weight: 600; letter-spacing: 1px; }
  .bms-core { width: 210px; padding: 22px; }
  .bms-core strong { font-size: 21px; }
  .bms-core > span { font-size: 12px; line-height: 1.5; }
  .bms-node { padding: 15px 12px; gap: 10px; }
  .bms-node > span { font-size: 12px; line-height: 1.55; }
  .bms-visual-bottom { font-size: 11px; line-height: 1.5; }
  .bms-visual-bottom > span:last-child { font-size: 9px; letter-spacing: 1px; font-weight: 500; }
  .bms-platforms > span:first-child { width: 100%; font-size: 11px; letter-spacing: 1.2px; font-weight: 500; }
  .bms-platforms > strong { font-size: 15px; font-weight: 650; }
  .bms-platforms small { font-size: 11px; font-weight: 500; }
  .bms-platforms img { width: 96px; margin-left: 0; }
  .bms-capability-grid { grid-template-columns: 1fr; gap: 16px; }
  .bms-capability { padding: 26px; }
  .bms-capability h3 { font-size: 18px; }
  .bms-capability p { font-size: 14px; line-height: 1.8; }
  .bms-process-grid { grid-template-columns: 1fr; gap: 26px; }
  .bms-process-grid h3 { font-size: 19px; }
  .bms-process-grid p { font-size: 14px; line-height: 1.8; }
  .bms-industries { grid-template-columns: 1fr; gap: 24px; }
  .bms-industries h2 { font-size: 30px; }
  .bms-industries > div:first-child > p { font-size: 15px; line-height: 1.8; max-width: 100%; }
  .bms-industry-list > div > span { font-size: 11px; letter-spacing: .6px; font-weight: 500; }
  .bms-industry-list h3 { font-size: 17px; }
  .bms-industry-list p { font-size: 13px; line-height: 1.7; }
  .bms-share { flex-direction: column; gap: 18px; }
  .bms-share > div { text-align: left; }
  .bms-share .text-link { font-size: 13px; font-weight: 600; }
  .bms-share > div > span { font-size: 12px; line-height: 1.6; max-width: 100%; }
  .breadcrumbs { font-size: 12px; }
}

.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded='true'] .icon-menu { display: none; }
.menu-toggle[aria-expanded='true'] .icon-close { display: block; }

@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-actions .button {
    justify-content: center !important;
    width: 100% !important;
  }
  .hero-assurance {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  .ecoxpert {
    font-size: 15px !important;
    padding-left: 12px !important;
    margin-left: 0 !important;
    border-left: 1px solid #d0dce9 !important;
  }
  .hero-visual {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .floating-card.integration-card {
    right: 6px !important;
    top: 16px !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    max-width: calc(100% - 40px) !important;
  }
  .floating-card.integration-card .float-icon {
    width: 32px !important;
    height: 32px !important;
  }
  .floating-card.integration-card strong {
    font-size: 12px !important;
  }
  .floating-card.integration-card div > span {
    font-size: 9px !important;
  }
  .floating-card.integration-card .float-check {
    margin-left: auto !important;
    width: 20px !important;
    height: 20px !important;
    padding: 3px !important;
    flex-shrink: 0 !important;
  }
  .floating-card.integration-card .float-check svg {
    width: 14px !important;
    height: 14px !important;
  }
  .floating-card.system-card {
    left: 6px !important;
    bottom: 175px !important;
    width: calc(100% - 60px) !important;
    max-width: 260px !important;
    padding: 12px 13px 9px !important;
  }
  .image-bottom {
    left: 18px !important;
    right: 18px !important;
    bottom: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .image-bottom > svg {
    margin-bottom: 0 !important;
    align-self: flex-end !important;
  }
  .visual-corner {
    right: auto !important;
    left: 0 !important;
    width: 100% !important;
    text-align: right !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  .hero-copy > p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  .hero-copy > h1 {
    margin-right: 0 !important;
  }

  /* =====================================================
     HERO MOBILE RWD ENHANCEMENT (APPENDED IN WORKING BLOCK)
     ===================================================== */

  /* 1. URUTAN LAYOUT: HERO-VISUAL (GAMBAR) DI ATAS, COPY DI BAWAH
        (kebalikan desktop → user langsung lihat visual di viewport pertama) */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .hero-visual {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 0 !important;
  }
  .hero-copy {
    order: 2 !important;
  }

  /* 2. PADDING TOP HERO DIPERKECIL AGAR LEBIH PADAT (dari 66px → 32px) */
  .hero {
    padding-top: 32px !important;
  }

  /* 3. EYEBROW PILL COMPACT (lawan @820px 11px → 9px) */
  .eyebrow-pill {
    font-size: 9px !important;
    padding: 7px 11px !important;
    letter-spacing: 1.1px !important;
  }

  /* 4. H1 DIMENSI SESUAIKAN */
  .hero-copy h1 {
    font-size: clamp(38px, 10vw, 50px) !important;
    letter-spacing: -2.0px !important;
    line-height: 1.05 !important;
  }

  /* 5. PARAGRAF HERO COPY COMPACT 13px (lawan @820px 15px) */
  .hero-copy > p {
    font-size: 13px !important;
    line-height: 1.75 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    margin-top: 14px !important;
  }

  /* 6. BUTTONS MIN-HEIGHT 44px (WCAG compliant, lawan @820px 48px) */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  .hero-actions .button {
    font-size: 12px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* 7. HERO-ASSURANCE COMPACT (lawan @820px 11px → 9px) */
  .hero-assurance {
    margin-top: 20px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .hero-assurance > span:nth-child(2) {
    font-size: 9px !important;
    line-height: 1.55 !important;
  }
  .hero-assurance small {
    font-size: 9px !important;
    line-height: 1.5 !important;
    margin-top: 3px !important;
  }
  .ecoxpert {
    font-size: 14px !important;
  }

  /* 8. IMAGE FRAME HEIGHT DIPERKECIL 375px → 280px */
  .image-frame {
    height: 280px !important;
  }
  .image-caption {
    font-size: 6.5px !important;
    left: 18px !important;
    top: 18px !important;
  }
  .image-bottom {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .image-bottom > span {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  .image-bottom > svg {
    width: 26px !important;
    height: 26px !important;
    margin-bottom: 0 !important;
    align-self: flex-end !important;
  }

  /* 9. FLOATING CARDS REPOSITION + COMPACT SIZE */
  .floating-card.integration-card {
    right: 8px !important;
    top: 12px !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    max-width: calc(100% - 32px) !important;
    width: 235px !important;
  }
  .floating-card.integration-card .float-icon {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
  }
  .floating-card.integration-card .float-icon svg {
    width: 17px !important;
    height: 17px !important;
  }
  .floating-card.integration-card strong {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }
  .floating-card.integration-card div > span {
    font-size: 8px !important;
    line-height: 1.4 !important;
  }
  .floating-card.integration-card .float-check {
    width: 18px !important;
    height: 18px !important;
    padding: 2.5px !important;
    flex-shrink: 0 !important;
  }
  .floating-card.integration-card .float-check svg {
    width: 13px !important;
    height: 13px !important;
  }

  .floating-card.system-card {
    left: 8px !important;
    bottom: 105px !important;
    width: calc(100% - 56px) !important;
    max-width: 240px !important;
    padding: 10px 11px 7px !important;
  }
  .system-card-top {
    gap: 6px !important;
  }
  .system-card-top .float-icon.small {
    width: 15px !important;
    height: 15px !important;
  }
  .system-card-top > span:nth-child(2) {
    font-size: 8px !important;
    line-height: 1.4 !important;
  }
  .system-card-top .live-label {
    font-size: 7.5px !important;
  }
  .system-main {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    gap: 4px !important;
  }
  .system-main strong {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }
  .system-main > span {
    font-size: 8.5px !important;
  }
  .system-main > span svg {
    width: 11px !important;
    height: 11px !important;
  }
  .mini-chart {
    height: 38px !important;
    gap: 2.5px !important;
    margin-top: 4px !important;
    margin-bottom: 5px !important;
  }
  .mini-chart > span {
    width: 11px !important;
  }
  .system-footer {
    gap: 6px !important;
    padding-top: 4px !important;
  }
  .system-footer > span {
    font-size: 7px !important;
    padding: 3px 5px !important;
  }

  /* 10. STATS GRID LEBIH PADAT */
  .stats {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 18px !important;
    margin-top: 22px !important;
    padding: 22px 0 !important;
  }
  .stats > div {
    padding-left: 20px !important;
  }
  .stats strong {
    font-size: 27px !important;
    line-height: 1.1 !important;
  }
  .stats p {
    font-size: 11px !important;
    line-height: 1.55 !important;
    margin-top: 5px !important;
  }
  .stat-cert {
    font-size: 21px !important;
    gap: 7px !important;
  }
  .stat-cert svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* 11. VISUAL CORNER COMPACT */
  .visual-corner {
    font-size: 5.5px !important;
    letter-spacing: 0.5px !important;
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
    text-align: right !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
}