:root {
  --ink: #071119;
  --ink-2: #0b1a25;
  --panel: #102532;
  --panel-2: #142f3c;
  --line: rgba(164, 219, 220, .18);
  --text: #edf6f4;
  --muted: #9bb2b5;
  --cyan: #6df4df;
  --green: #a9ea79;
  --gold: #d6b36a;
  --white: #f6fbf8;
  --max: 1240px;
  --radius: 4px;
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--body); line-height: 1.55; }
body::selection { background: var(--cyan); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.eyebrow { color: var(--cyan); font-size: .72rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.section { padding: 110px 0; border-top: 1px solid rgba(164, 219, 220, .12); }
.section--tight { padding: 76px 0; }
.section--dark { background: #091821; }
.section--gold { background: #111923; }
.section-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 48px; }
.section-heading h2, .page-title h1 { margin: 10px 0 0; max-width: 720px; color: var(--white); font: 650 clamp(2rem, 4vw, 4.8rem)/.98 var(--display); letter-spacing: 0; }
.section-heading p { max-width: 400px; color: var(--muted); margin: 0; }
.body-copy { color: var(--muted); font-size: 1.02rem; max-width: 680px; }
.section > .wrap > .body-copy { font-size: 1.24rem; line-height: 1.7; }
.business-lede { max-width: 860px; font-size: clamp(1.34rem, 1.8vw, 1.55rem); line-height: 1.62; color: #c7d2cf; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 46px; padding: 0 19px; border: 1px solid var(--cyan); border-radius: var(--radius); background: var(--cyan); color: var(--ink); font-weight: 800; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); background: var(--green); border-color: var(--green); }
.button--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.button--ghost:hover { background: rgba(109, 244, 223, .08); color: var(--cyan); border-color: var(--cyan); }
.button--gold { background: var(--gold); border-color: var(--gold); color: #101820; }
.button--small { min-height: 38px; padding: 0 14px; font-size: .82rem; }
.button .arrow { font-size: 1.1em; }

.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(164, 219, 220, .15); background: rgba(7, 17, 25, .9); backdrop-filter: blur(18px); }
.nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; gap: 11px; align-items: center; font-size: .88rem; font-weight: 800; letter-spacing: .18em; }
.brand-mark { position: relative; width: 27px; height: 27px; border: 1px solid var(--cyan); transform: rotate(45deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--cyan); }
.brand-mark::before { width: 7px; height: 7px; left: 9px; top: 9px; }
.brand-mark::after { width: 1px; height: 34px; left: 12px; top: -4px; opacity: .5; }
.nav-links { display: flex; gap: 38px; align-items: center; color: #c7d5d5; font-size: .86rem; }
.nav-links a:hover, .nav-links a.active { color: var(--cyan); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-toggle, .menu-toggle { border: 1px solid var(--line); background: transparent; color: var(--text); min-height: 38px; padding: 0 11px; border-radius: 3px; }
.lang-toggle:hover, .menu-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
.menu-toggle { display: none; font-size: 1.2rem; }

.hero { position: relative; min-height: 720px; overflow: hidden; display: flex; align-items: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,17,25,.98) 10%, rgba(7,17,25,.78) 44%, rgba(7,17,25,.17) 100%), radial-gradient(circle at 78% 30%, rgba(40, 140, 131, .13), transparent 32%); pointer-events: none; }
.hero-content { position: relative; z-index: 2; width: 48%; padding: 90px 0; }
.hero h1 { max-width: 690px; margin: 16px 0 22px; font: 700 clamp(3.2rem, 7vw, 7.4rem)/.88 var(--display); letter-spacing: 0; color: var(--white); }
.hero h1 span { color: var(--cyan); }
.hero-lede { max-width: 530px; font-size: 1.15rem; color: #c4d2d2; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-note { display: flex; gap: 58px; margin-top: 52px; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; }
.hero-note strong { display: block; color: var(--white); font-size: 1.3rem; letter-spacing: 0; }

.scene { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(145deg, #0d2835 0%, #07141e 68%); }
.scene::after { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(109,244,223,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(109,244,223,.13) 1px, transparent 1px); background-size: 54px 54px; transform: perspective(420px) rotateX(58deg) scale(1.5); transform-origin: bottom center; }
.scene-haze { position: absolute; width: 60vw; height: 60vw; right: -12vw; top: -12vw; border-radius: 50%; border: 1px solid rgba(109,244,223,.14); box-shadow: 0 0 100px rgba(109,244,223,.1), inset 0 0 90px rgba(109,244,223,.06); }
.scene-stage { position: absolute; z-index: 2; right: 8%; bottom: 9%; width: min(670px, 60vw); height: 450px; transform: perspective(900px) rotateX(50deg) rotateZ(-34deg); transform-style: preserve-3d; }
.stage-floor { position: absolute; inset: 14% 2% 3%; border: 1px solid rgba(109,244,223,.36); background: rgba(17,55,66,.39); box-shadow: 0 0 50px rgba(109,244,223,.15); }
.rack-bank { position: absolute; inset: 7% 9% 17%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; transform: translateZ(25px); }
.rack { position: relative; border: 1px solid rgba(171,231,218,.4); background: linear-gradient(90deg, #173d4a, #0c202b); box-shadow: 14px 16px 0 rgba(2,10,17,.32); }
.rack::before { content: ""; position: absolute; inset: 8px 7px; background: repeating-linear-gradient(180deg, rgba(122,245,224,.7) 0 3px, transparent 3px 19px); opacity: .62; }
.rack::after { content: ""; position: absolute; width: 6px; height: 6px; right: 7px; top: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 20px var(--cyan), 0 40px var(--gold); animation: blink 2.2s infinite alternate; }
.topology { position: absolute; inset: -16% -9% 0; z-index: 4; }
.topology span { position: absolute; display: block; height: 1px; transform-origin: left center; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 9px var(--cyan); animation: pulse-line 3s infinite ease-in-out; }
.topology span:nth-child(1) { width: 260px; left: 22%; top: 65%; transform: rotate(-31deg); }
.topology span:nth-child(2) { width: 380px; left: 38%; top: 43%; transform: rotate(18deg); animation-delay: .6s; }
.topology span:nth-child(3) { width: 280px; left: 45%; top: 77%; transform: rotate(-8deg); animation-delay: 1.4s; }
.topology span:nth-child(4) { width: 180px; left: 67%; top: 25%; transform: rotate(73deg); animation-delay: 2s; }
.flow-orb { position: absolute; z-index: 5; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 20px 7px rgba(169,234,121,.55); animation: travel 6s infinite linear; }
.flow-orb.one { left: 42%; top: 48%; }
.flow-orb.two { left: 70%; top: 66%; animation-delay: 2s; }
.cycle { position: absolute; z-index: 5; right: 10%; bottom: 6%; display: flex; gap: 4px; font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; color: #b7d7d3; }
.cycle span { padding: 6px 8px; border: 1px solid rgba(109,244,223,.25); background: rgba(7,17,25,.6); animation: cycle 8s infinite; }
.cycle span:nth-child(2) { animation-delay: 2s; }.cycle span:nth-child(3) { animation-delay: 4s; }.cycle span:nth-child(4) { animation-delay: 6s; }
@keyframes blink { to { opacity: .38; } }
@keyframes pulse-line { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes travel { 0% { transform: translate(0,0); opacity: 0; } 12% { opacity: 1; } 50% { transform: translate(90px,-50px); } 88% { opacity: 1; } 100% { transform: translate(200px,15px); opacity: 0; } }
@keyframes cycle { 0%,100% { color: #b7d7d3; border-color: rgba(109,244,223,.25); } 12%,24% { color: var(--ink); border-color: var(--cyan); background: var(--cyan); } }

.signal-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d222d; }
.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.signal { padding: 24px 20px; border-right: 1px solid var(--line); }.signal:last-child { border-right: 0; }
.signal b { display: block; color: var(--white); font-size: 1.12rem; }.signal span { color: var(--muted); font-size: .76rem; }
.capability { min-height: 270px; padding: 26px; border: 1px solid var(--line); background: rgba(16,37,48,.58); transition: border .2s, transform .2s; }.capability:hover { transform: translateY(-4px); border-color: var(--cyan); }
.capability-index { color: var(--green); font: 1.2rem var(--display); }.capability h3 { margin: 48px 0 10px; font-size: 1.2rem; }.capability p { margin: 0; color: var(--muted); font-size: .9rem; }
.module-card { position: relative; min-height: 255px; padding: 25px; background: #f0f7f2; color: var(--ink); overflow: hidden; }.module-card:nth-child(2) { background: #bceee3; }.module-card:nth-child(3) { background: #d8e9bf; }.module-card:nth-child(4) { background: #d6b36a; }
.module-card .number { font: 1.3rem var(--display); opacity: .55; }.module-card h3 { max-width: 180px; margin: 46px 0 10px; font: 650 1.5rem/.98 var(--display); }.module-card p { max-width: 260px; margin: 0; font-size: .83rem; opacity: .75; }.module-card .card-arrow { position: absolute; right: 20px; bottom: 18px; font-size: 1.4rem; }
.industry-list { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }.industry { min-height: 170px; padding: 22px; border-right: 1px solid var(--line); }.industry:last-child { border: 0; }.industry h3 { font-size: .95rem; }.industry p { color: var(--muted); font-size: .79rem; }

.page-hero { padding: 92px 0 84px; background: linear-gradient(120deg, #0b1b26, #0c2531 55%, #132d31); border-bottom: 1px solid var(--line); }.page-title { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end; }.page-title h1 { font-size: clamp(3rem, 6.3vw, 6.8rem); }.page-title .body-copy { margin-bottom: 3px; }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.metric { padding: 28px 22px; border-right: 1px solid var(--line); }.metric:last-child { border: 0; }.metric strong { display: block; color: var(--cyan); font: 2rem var(--display); }.metric span { color: var(--muted); font-size: .78rem; }
.feature-list { border-top: 1px solid var(--line); }.feature-item { display: grid; grid-template-columns: 80px 1fr 1.2fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }.feature-item .num { color: var(--green); font-size: .78rem; }.feature-item h3 { margin: 0; font-size: 1.2rem; }.feature-item p { margin: 0; color: var(--muted); font-size: .9rem; }
.matrix { overflow: auto; border: 1px solid var(--line); }.matrix table { width: 100%; border-collapse: collapse; min-width: 650px; }.matrix th, .matrix td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .86rem; }.matrix th { color: var(--cyan); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(109,244,223,.06); }.matrix tr:last-child td { border: 0; }.matrix td:first-child { color: var(--white); font-weight: 700; }.matrix td:not(:first-child) { color: var(--muted); }
.estimator { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; }.estimator-panel { padding: 30px; border: 1px solid var(--line); background: #0c202b; }.estimator-panel h3 { margin: 0 0 24px; font-size: 1.3rem; }.form-field { display: grid; gap: 8px; margin-bottom: 17px; }.form-field label { color: #c7d8d6; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.form-field select, .form-field input, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 2px; padding: 13px 14px; background: #07151d; color: var(--text); outline: 0; }.form-field select:focus, .form-field input:focus, .form-field textarea:focus { border-color: var(--cyan); }.form-field textarea { min-height: 100px; resize: vertical; }#contact-form { scroll-margin-top: 20px; }.range-value { color: var(--cyan); font-weight: 800; }.range { width: 100%; accent-color: var(--cyan); }
.estimate-output { display: grid; align-content: space-between; min-height: 100%; background: linear-gradient(145deg, #163d42, #0c222c); }.estimate-output .output-label { color: var(--green); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }.estimate-output h3 { margin: 10px 0 15px; max-width: 420px; color: var(--white); font: 650 clamp(2rem, 4vw, 3.9rem)/.95 var(--display); }.estimate-output p { color: #c3d7d3; }.output-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }.tag { padding: 6px 9px; border: 1px solid rgba(169,234,121,.4); color: var(--green); font-size: .72rem; }
.location-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }.location { min-height: 370px; position: relative; padding: 28px; border: 1px solid var(--line); background: linear-gradient(145deg, #132c38, #09161f); overflow: hidden; }.location::before { content: ""; position: absolute; width: 300px; height: 300px; right: -80px; bottom: -110px; border-radius: 50%; border: 1px solid rgba(109,244,223,.27); box-shadow: 0 0 0 35px rgba(109,244,223,.05), 0 0 0 70px rgba(109,244,223,.03); }.location h3 { position: relative; margin: 75px 0 7px; font: 650 2.5rem var(--display); }.location p { position: relative; max-width: 320px; color: var(--muted); }.location .location-code { position: absolute; right: 22px; top: 22px; color: var(--cyan); font-size: .72rem; letter-spacing: .12em; }.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.trust { padding: 20px; border: 1px solid var(--line); }.trust strong { display: block; color: var(--green); font-size: 1.5rem; }.trust span { color: var(--muted); font-size: .78rem; }
.gold-note { color: var(--gold); }.portfolio-item { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid rgba(214,179,106,.3); background: rgba(214,179,106,.05); }.portfolio-item .portfolio-type { color: var(--gold); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }.portfolio-item h3 { margin: 32px 0 0; font: 650 1.7rem/.98 var(--display); }.portfolio-item p { margin: 8px 0 0; color: var(--muted); font-size: .82rem; }.framework { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(214,179,106,.34); border-bottom: 1px solid rgba(214,179,106,.34); }.framework-step { min-height: 180px; padding: 22px; border-right: 1px solid rgba(214,179,106,.34); }.framework-step:last-child { border: 0; }.framework-step b { color: var(--gold); font: 1.5rem var(--display); }.framework-step h3 { font-size: .95rem; }.framework-step p { color: var(--muted); font-size: .78rem; }
.portal { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }.portal-login { padding: 30px; border: 1px solid rgba(214,179,106,.4); background: #111923; }.portal-login h3 { margin-top: 0; font: 650 2rem var(--display); }.portal-status { display: none; margin-top: 16px; padding: 10px; border-left: 2px solid var(--green); color: var(--green); font-size: .8rem; }.portal-status.show { display: block; }.reports { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.report { min-height: 150px; padding: 22px; border: 1px solid rgba(214,179,106,.22); background: rgba(214,179,106,.04); }.report .report-meta { color: var(--gold); font-size: .7rem; }.report h4 { margin: 28px 0 0; font-size: .95rem; }.report span { color: var(--muted); font-size: .77rem; }
.about-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }.about-statement { color: var(--white); font: 650 clamp(2rem, 4vw, 4.2rem)/.98 var(--display); }.timeline { border-left: 1px solid var(--cyan); }.timeline-item { position: relative; padding: 0 0 34px 32px; }.timeline-item::before { content: ""; position: absolute; width: 9px; height: 9px; left: -5px; top: 7px; background: var(--cyan); }.timeline-item strong { color: var(--cyan); font: 1.5rem var(--display); }.timeline-item h3 { margin: 3px 0 4px; font-size: 1rem; }.timeline-item p { margin: 0; color: var(--muted); font-size: .86rem; }.ecosystem { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); }.eco { min-height: 190px; padding: 22px 18px; border-right: 1px solid var(--line); }.eco:last-child { border: 0; }.eco b { color: var(--cyan); font: 1.5rem var(--display); }.eco h3 { font-size: .9rem; }.eco p { color: var(--muted); font-size: .78rem; }
.cta-band { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding: 54px 0; }.cta-band h2 { margin: 0; color: var(--white); font: 650 2.7rem/.98 var(--display); }.cta-band p { max-width: 430px; color: var(--muted); }
.site-footer { padding: 55px 0 30px; border-top: 1px solid var(--line); background: #061018; }.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; }.footer-grid h4 { margin: 0 0 14px; color: var(--muted); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }.footer-grid a, .footer-grid p { display: block; margin: 7px 0; color: #b4c7c7; font-size: .82rem; }.footer-grid a:hover { color: var(--cyan); }.footer-bottom { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 36px; margin-top: 35px; color: #6f8588; font-size: .72rem; text-align: left; }.footer-bottom::before { content: ""; position: absolute; top: 0; left: 0; width: min(100%, 380px); height: 1px; transform: none; background: rgba(164,219,220,.1); }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 40; transform: translateY(20px); opacity: 0; pointer-events: none; padding: 14px 16px; border: 1px solid var(--cyan); background: #0d272e; color: var(--white); font-size: .84rem; transition: .25s; }.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 960px) {
  .nav-links { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 18px 24px 24px; border-bottom: 1px solid var(--line); background: #071119; flex-direction: column; align-items: stretch; gap: 0; }.nav-links.open { display: flex; }.nav-links a { padding: 13px 0; border-bottom: 1px solid rgba(164,219,220,.1); }.menu-toggle { display: block; }
  .hero { min-height: 820px; align-items: start; }.hero-content { width: 75%; padding-top: 80px; }.scene { opacity: .7; }.scene-stage { right: -6%; bottom: 10%; width: 740px; }
  .grid-4, .industry-list { grid-template-columns: repeat(2, 1fr); }.industry { border-bottom: 1px solid var(--line); }.industry:nth-child(even) { border-right: 0; }.page-title, .about-layout, .portal { grid-template-columns: 1fr; gap: 28px; }.page-title h1 { max-width: 800px; }.location-grid, .estimator { grid-template-columns: 1fr; }.ecosystem { grid-template-columns: repeat(3, 1fr); }.eco:nth-child(3) { border-right: 0; }.eco:nth-child(-n+3) { border-bottom: 1px solid var(--line); }.framework { grid-template-columns: repeat(2, 1fr); }.framework-step:nth-child(2) { border-right: 0; }.framework-step:nth-child(-n+2) { border-bottom: 1px solid rgba(214,179,106,.34); }.footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }.footer-grid > :first-child { grid-column: 1 / -1; }.section-heading { align-items: start; flex-direction: column; gap: 12px; }
}
@media (max-width: 620px) {
  .wrap { width: min(100% - 32px, var(--max)); }.nav { height: 68px; }.nav-links { top: 68px; }.brand { font-size: .75rem; }.lang-toggle { font-size: .72rem; }.hero { min-height: 780px; }.hero-content { width: calc(100% - 32px); padding-top: 65px; }.hero h1 { font-size: clamp(3rem, 16vw, 5.3rem); }.hero-lede { font-size: 1rem; }.hero-note { gap: 14px; flex-wrap: wrap; margin-top: 35px; }.scene { opacity: .46; }.scene-stage { right: -35%; bottom: 4%; width: 650px; height: 400px; }.cycle { right: 4%; bottom: 3%; transform: scale(.8); transform-origin: right bottom; }.signal-grid, .metric-row { grid-template-columns: repeat(2, 1fr); }.signal:nth-child(2), .metric:nth-child(2) { border-right: 0; }.signal:nth-child(-n+2), .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.grid-2, .grid-3, .grid-4, .industry-list, .trust-grid, .reports, .ecosystem { grid-template-columns: 1fr; }.industry, .eco { border-right: 0; border-bottom: 1px solid var(--line); }.industry:last-child, .eco:last-child { border-bottom: 0; }.section { padding: 76px 0; }.section-heading h2 { font-size: 2.6rem; }.page-hero { padding: 65px 0; }.page-title h1 { font-size: clamp(3rem, 15vw, 5rem); }.feature-item { grid-template-columns: 40px 1fr; gap: 14px; }.feature-item p { grid-column: 2; }.metric strong { font-size: 1.6rem; }.estimator-panel { padding: 22px; }.location { min-height: 290px; }.location h3 { margin-top: 55px; }.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }.footer-grid > :first-child { grid-column: 1 / -1; }.footer-bottom, .cta-band { flex-direction: column; align-items: start; }.cta-band h2 { font-size: 2.3rem; }
  .nav-actions > .button { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

@media screen and (max-width: 620px) {
  html, body { overflow-x: hidden; }
  .nav-actions > .button { display: none !important; }
  .hero-content { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
}

/* VEXEL Malaysia layer */
.brand small{display:block;color:var(--muted);font-size:.46rem;letter-spacing:.18em;margin-top:2px}.brand-mark{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--cyan);color:var(--cyan);font:700 1rem var(--display);transform:rotate(45deg)}.brand-mark::first-letter{transform:rotate(-45deg)}
.hero-grid{position:absolute;inset:0;opacity:.55;background-image:linear-gradient(rgba(109,244,223,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(109,244,223,.11) 1px,transparent 1px);background-size:54px 54px;transform:perspective(450px) rotateX(58deg) scale(1.6);transform-origin:bottom center}.hero-grid span{position:absolute;width:320px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 11px var(--cyan);transform-origin:left}.hero-grid span:nth-child(1){left:66%;top:34%;transform:rotate(34deg)}.hero-grid span:nth-child(2){left:69%;top:54%;width:440px;transform:rotate(-17deg)}.hero-grid span:nth-child(3){left:76%;top:65%;width:300px;transform:rotate(11deg)}.hero-grid span:nth-child(4){left:58%;top:68%;width:240px;transform:rotate(-49deg)}.hero-grid i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 24px 8px rgba(169,234,121,.5);animation:float 5s infinite}.hero-grid i:nth-last-child(1){left:71%;top:47%}.hero-grid i:nth-last-child(2){left:83%;top:62%;animation-delay:1.7s}@keyframes float{50%{transform:translate(90px,-45px);opacity:.45}}
.hero-console{position:absolute;z-index:1;right:7%;bottom:12%;width:min(450px,40vw);height:420px;padding:18px;border:1px solid rgba(109,244,223,.4);background:rgba(4,18,26,.35);box-shadow:0 0 80px rgba(109,244,223,.13);transform:rotate(-8deg);clip-path:polygon(0 14%,87% 0,100% 82%,14% 100%)}.console-top,.console-data{display:flex;justify-content:space-between;color:#9ccbc4;font-size:.6rem;letter-spacing:.12em}.console-data{position:absolute;left:45px;right:35px;bottom:36px;display:grid;gap:10px}.console-data b{float:right;color:var(--lime)}.orb{position:absolute;top:94px;left:105px;width:220px;height:220px;border:1px solid rgba(109,244,223,.48);border-radius:50%;box-shadow:0 0 40px rgba(109,244,223,.13),inset 0 0 40px rgba(109,244,223,.08);animation:spin 12s linear infinite}.orb:before,.orb:after{content:"";position:absolute;inset:20px;border:1px solid rgba(109,244,223,.3);border-radius:50%;transform:rotate(55deg) scaleX(.45)}.orb:after{transform:rotate(-55deg) scaleX(.45)}.orb-core{position:absolute;top:67px;left:67px;width:84px;height:84px;display:grid;place-items:center;text-align:center;border:1px solid var(--cyan);border-radius:50%;background:#0c2a35;color:var(--cyan);font:700 1.6rem/.9 var(--display)}.orb-core small{font:700 .5rem var(--body);letter-spacing:.18em}@keyframes spin{to{transform:rotate(360deg)}}.console-line{position:absolute;left:35px;right:35px;bottom:21px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.capability-grid .capability{position:relative;color:var(--ink);min-height:300px;overflow:hidden}.capability--mint{background:#c4f0df}.capability--blue{background:#b9ddea}.capability--lime{background:#d5eaa3}.capability--gold{background:#d8b76e}.capability-grid .capability h3{max-width:180px;margin-top:78px;font-size:1.7rem;line-height:.95}.capability-grid .capability p{max-width:235px}.card-arrow{position:absolute;right:18px;bottom:16px;font-size:1.4rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:end}.split h2{margin:11px 0 0;color:var(--white);font:650 clamp(2.4rem,4.2vw,4.7rem)/.92 var(--display)}.text-link{display:inline-flex;gap:12px;margin-top:25px;color:var(--cyan);font-weight:800}.route-map{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;margin-top:70px}.route-node{display:grid;gap:8px;min-height:145px;padding:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.route-node b{color:var(--cyan);font:1.5rem var(--display)}.route-node span{color:var(--muted);font-size:.78rem}.route-node.active{border-color:var(--cyan);background:rgba(109,244,223,.06)}.route-link{height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}.process-list{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-list>div{min-height:190px;padding:21px 18px;border-right:1px solid var(--line)}.process-list>div:last-child{border:0}.process-list span{color:var(--lime);font:1.35rem var(--display)}.process-list p{color:var(--muted);font-size:.78rem}.placeholder{color:var(--gold)}.footer-note{display:block;color:var(--gold)!important;margin-top:13px!important}.legal-copy{max-width:860px;color:var(--muted)}.legal-copy h2{margin-top:38px;color:var(--white);font:650 2rem var(--display)}.legal-copy strong{color:var(--white)}.cookie-banner{position:fixed;z-index:30;right:22px;bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:25px;max-width:750px;padding:16px 18px;border:1px solid var(--line);background:rgba(7,17,26,.96);box-shadow:0 12px 40px rgba(0,0,0,.25);font-size:.78rem}.cookie-banner p{max-width:450px;margin:3px 0 0;color:var(--muted)}.cookie-actions{display:flex;gap:8px;flex-shrink:0}
@media(max-width:980px){.hero-content{width:72%}.hero-console{right:-8%;opacity:.72}.process-list{grid-template-columns:repeat(3,1fr)}.process-list>div:nth-child(3){border-right:0}.process-list>div:nth-child(-n+3){border-bottom:1px solid var(--line)}.footer-grid>div:first-child{grid-column:1/-1}.split{grid-template-columns:1fr;gap:28px}.route-map{grid-template-columns:1fr;gap:0}.route-link{width:1px;height:35px;margin-left:23px;background:linear-gradient(180deg,var(--cyan),transparent)}}
@media(max-width:620px){.hero{min-height:830px;align-items:flex-start}.hero-content{width:100%;padding-top:70px}.hero-note{gap:18px;flex-wrap:wrap;margin-top:35px}.hero-console{right:-35%;bottom:4%;width:500px;height:370px;opacity:.45}.signal-grid,.capability-grid,.process-list{grid-template-columns:1fr}.capability-grid .capability h3{margin-top:55px}.process-list>div{border-right:0!important;border-bottom:1px solid var(--line)}.process-list>div:last-child{border-bottom:0}.cookie-banner{left:16px;right:16px;bottom:16px;display:block}.cookie-actions{margin-top:12px}.cookie-actions .button{flex:1}}

/* Soft, low-saturation VEXEL palette */
:root{--ink:#101a20;--ink-2:#17242a;--panel:#213238;--panel-2:#2a3b40;--line:rgba(205,220,216,.16);--text:#e7ece8;--muted:#a8b5b5;--cyan:#a6d8cf;--green:#c8d7b4;--gold:#cbbb99;--white:#f3f4ef}
body{background:var(--ink)}
body::selection{background:var(--cyan);color:#17242a}
.eyebrow,.nav-links a:hover,.nav-links a.active,.text-link{color:var(--cyan)}
.button{border-color:var(--cyan);background:var(--cyan);color:#17242a}
.button:hover{background:var(--green);border-color:var(--green)}
.button--ghost:hover{background:rgba(166,216,207,.08);color:var(--cyan);border-color:var(--cyan)}
.button--gold{background:var(--gold);border-color:var(--gold);color:#252a28}
.site-header{border-bottom-color:rgba(205,220,216,.13);background:rgba(16,26,32,.92)}
.brand-mark{border-color:var(--cyan);color:var(--cyan)}
.brand-mark::before,.brand-mark::after{background:var(--cyan)}
.hero{background:linear-gradient(112deg,#101a20 0%,#17272e 58%,#294044 100%)}
.hero::before{background:linear-gradient(90deg,rgba(16,26,32,.98) 10%,rgba(16,26,32,.78) 44%,rgba(16,26,32,.18) 100%),radial-gradient(circle at 78% 30%,rgba(166,216,207,.1),transparent 32%)}
.hero-lede{color:#c7d2cf}
.hero-note{color:var(--muted)}
.hero-note strong{color:var(--white)}
.section{border-top-color:rgba(205,220,216,.1)}
.section--dark{background:#142329}
.section--gold{background:#272c2c}
.capability-grid .capability{color:#1e2b2f;border-color:rgba(255,255,255,.22)}
.capability--mint{background:#d5e9e1}
.capability--blue{background:#d3e1e7}
.capability--lime{background:#dce5c5}
.capability--gold{background:#ded5bd}
.capability-grid .capability p{color:#647477}
.capability-index{color:#9dbd9b}
.page-hero{background:linear-gradient(120deg,#17242a,#263b40 60%,#3a4d4a)}
.feature-item,.process-list,.route-node{border-color:rgba(205,220,216,.14)}
.process-list span{color:var(--green)}
.cta-band .gold-note,.gold-note{color:var(--gold)}
.site-footer{background:#0c151a;border-top-color:rgba(205,220,216,.12)}
.footer-grid a:hover{color:var(--cyan)}

/* Reference-led monochrome treatment: one accent, one surface */
:root{--ink:#0a0c11;--ink-2:#0e1117;--panel:#12161d;--panel-2:#171b23;--line:rgba(143,154,173,.24);--text:#edf0f4;--muted:#8f99ad;--cyan:#c7b47e;--green:#d8c998;--gold:#c7b47e;--white:#f3f4f7}
body,.section,.section--dark,.section--gold,.site-footer,.page-hero{background:var(--ink)}
.section,.site-header,.site-footer{border-color:var(--line)}
.eyebrow,.gold-note,.text-link,.nav-links a:hover,.nav-links a.active{color:var(--cyan)}
.button,.button--gold{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.button:hover,.button--gold:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.button--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.button--ghost:hover{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.site-header{background:rgba(10,12,17,.94)}
.hero{background:var(--ink)}
.hero::before{background:radial-gradient(circle at 78% 28%,rgba(199,180,126,.065),transparent 30%)}
.hero-lede,.body-copy{color:#b6bdc9}
.page-hero{background:var(--ink)}
.capability-grid{gap:0;border:1px solid var(--line)}
.capability-grid .capability{min-height:300px;background:transparent!important;color:var(--white);border:0;border-right:1px solid var(--line);transition:background .2s,color .2s}
.capability-grid .capability:last-child{border-right:0}
.capability-grid .capability:hover{background:#10141b!important;transform:none}
.capability-grid .capability h3{color:var(--white)}
.capability-grid .capability p{color:var(--muted)}
.capability-grid .capability-index,.capability-grid .card-arrow{color:var(--cyan)}
.capability--mint,.capability--blue,.capability--lime,.capability--gold{background:transparent}
.feature-item,.process-list,.route-node,.matrix{border-color:var(--line)}
.process-list span{color:var(--cyan)}
.route-node.active{border-color:var(--cyan);background:rgba(199,180,126,.045)}
.route-link{background:linear-gradient(90deg,var(--cyan),transparent)}
.footer-grid a:hover{color:var(--cyan)}
.placeholder{color:#c99b72}
@media(max-width:620px){.capability-grid .capability{border-right:0;border-bottom:1px solid var(--line)}.capability-grid .capability:last-child{border-bottom:0}}

/* Final accent: dusty lavender, distinct from the reference site's orange */
.placeholder{color:#c7b47e}
.company-address{display:block;line-height:1.65}

/* Wide editorial hero layout */
.hero{min-height:calc(100svh - 76px);align-items:center}
.hero-content{width:min(var(--max),calc(100% - 96px));padding:120px 0 112px;margin-left:auto;margin-right:auto}
.hero h1{max-width:1080px;margin:18px 0 28px;font:650 clamp(4rem,8vw,8.8rem)/.86 var(--display);letter-spacing:0}
.hero h1 em{font:inherit;font-style:normal;color:var(--cyan)}
.hero-lede{max-width:680px;font-size:1.08rem}
.hero-actions{margin-top:36px}
.hero-note{gap:72px;margin-top:64px}
@media(max-width:960px){.hero-content{width:min(var(--max),calc(100% - 64px));padding:100px 0}.hero h1{max-width:900px;font-size:clamp(3.7rem,9vw,7rem)}.hero-note{gap:38px}}
@media(max-width:620px){.hero{min-height:calc(100svh - 68px)}.hero-content{width:calc(100% - 32px);padding:74px 0 72px}.hero h1{font-size:clamp(3.25rem,16vw,5.4rem);line-height:.88}.hero-lede{font-size:1rem}.hero-note{gap:22px;margin-top:42px}}