:root{color-scheme:dark;--ink:#eef5ff;--muted:#b5c6dc;--dark:#0a1221;--line:#2a415a;--cyan:#96e7ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--dark);color:var(--ink);font:16px/1.65 system-ui,sans-serif}a{color:inherit}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #38a9e3;outline-offset:4px}[hidden]{display:none!important}.mast,.locale,footer{width:min(1120px,calc(100% - 40px));margin:auto}.mast{display:flex;align-items:center;justify-content:space-between;padding:19px 0;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:12px;font-size:1.22rem;letter-spacing:.12em;font-weight:750;text-decoration:none}.brand img{filter:drop-shadow(0 0 10px #588aff85)}#language{border:1px solid #537495;background:#14263a;color:var(--ink);padding:6px 15px;border-radius:999px}nav{display:flex;gap:10px 26px;flex-wrap:wrap;padding:17px 0}nav a{text-decoration:none;color:var(--muted);font-size:.92rem}nav a:hover{color:var(--cyan)}.hero{position:relative;display:grid;grid-template-columns:1.7fr 1fr;align-items:center;overflow:hidden;min-height:325px;padding:clamp(24px,6vw,65px);border:1px solid #345471;border-radius:25px;background:radial-gradient(ellipse at 82% 48%,#243e77,transparent 68%),linear-gradient(120deg,#142238,#0c192f)}h1,h2,h3,p{margin-top:0}h1{max-width:16ch;margin-bottom:14px;font-size:clamp(2.25rem,6vw,4.8rem);line-height:1.04;letter-spacing:-.035em}h2{margin-bottom:10px;font-size:clamp(1.7rem,4vw,2.55rem);line-height:1.2}h3{line-height:1.25;margin-bottom:10px}p{color:var(--muted);max-width:68ch}.hero-copy p:last-child{margin-bottom:0}.eyebrow,.path span{font-size:.76rem;letter-spacing:.13em;font-weight:750;color:var(--cyan);margin-bottom:10px}.hero-mark{display:grid;place-items:center;justify-self:center;width:clamp(135px,21vw,245px);aspect-ratio:1;border:1px solid #7bc7ff55;border-radius:50%;box-shadow:0 0 0 15px #659fff13,0 0 0 35px #659fff0d}.hero-mark img{width:62%;height:auto;filter:drop-shadow(0 0 25px #68a4ff)}.paths,.cards{display:grid;gap:14px}.paths{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}.path{position:relative;display:grid;gap:4px;padding:18px 42px 18px 20px;border-radius:14px;border:1px solid #3a6081;background:#142b43;text-decoration:none}.path strong{font-size:1.25rem}.path span{margin:0}.path b{position:absolute;right:18px;top:20px}.path.wellness{background:#daede6;color:#102e28;border-color:#b0d9cd}.path.wellness span{color:#235a4b}.section{padding:35px 0;margin:20px 0;scroll-margin-top:16px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.card{padding:20px;border:1px solid var(--line);border-radius:15px;background:#142339}.card p{font-size:.94rem;margin-bottom:0}.number,.product-icon{display:inline-grid;place-items:center;width:35px;height:35px;margin-bottom:16px;border-radius:9px;background:#253e57;color:var(--cyan);font-weight:700}.cta{display:inline-block;margin-top:16px;padding:8px 15px;border-radius:8px;background:var(--cyan);color:#0c2237;font-weight:700;text-decoration:none}.products{color-scheme:light;padding:clamp(20px,5vw,42px);color:#14342d;background:#edf6f0;border-radius:23px}.products p{color:#3a554d}.products .eyebrow{color:#245d4e}.products .card{background:#fff;border-color:#cbded5}.product-icon{color:#235a4b;background:#d9eee4}.products a{display:inline-block;margin-top:12px;color:#174d3d;font-weight:650}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.filters button{border:1px solid #8eafa2;color:#183a30;background:#fff;border-radius:999px;padding:5px 12px}.filters button[aria-pressed=true]{background:#205445;color:#fff}.about{border-bottom:1px solid var(--line)}.contact{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:12px}.contact a{color:var(--cyan);overflow-wrap:anywhere}footer{border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:.86rem}@media(max-width:700px){.hero{grid-template-columns:1fr;gap:28px}.hero-mark{justify-self:start;margin:12px 0 10px 20px}.cards{grid-template-columns:1fr}.path strong{font-size:1.05rem}}@media(max-width:360px){.paths{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.brand-text {
  display: grid;
  gap: 3px;
  line-height: 1.15;
}

.brand-en {
  color: #e8c571;
  font-size: clamp(.68rem, 2.8vw, .83rem);
  font-weight: 700;
  letter-spacing: .045em;
}

@supports (background-clip: text) {
  .brand-en {
    background-image: linear-gradient(105deg, #c18b35, #fff0ba 42%, #e5bc61 70%, #f6d98c);
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .brand-en {
    background: none;
    color: LinkText;
  }
}
.line{display:block;overflow:hidden}
.line span{display:block;animation:arrive .85s cubic-bezier(.2,.7,.25,1) both}
.line+.line span{animation-delay:.13s}
.art{height:clamp(230px,35vw,470px);border-radius:8px;overflow:hidden;position:relative;display:grid;place-items:center;background:#122b2f}
.art svg{width:100%;height:100%;position:absolute}
.wire{fill:none;stroke:#c6fbb3;stroke-width:1.05;opacity:.64;stroke-dasharray:1050;animation:draw 1.8s ease-out both}
.wire:nth-child(even){stroke:#7fc5c2;animation-delay:.12s}
.art-label{position:absolute;bottom:16px;left:18px;color:#d1eddf;font:11px monospace;letter-spacing:.15em}
@keyframes arrive { from { transform:translateY(110%); opacity:.2; } }
@keyframes draw { from { stroke-dashoffset:1050; opacity:0; } }

body { color-scheme:light; background:#f3f2eb; color:#19252c; --muted:#435950; --line:#bec2bb; --cyan:#235a4b; }
.mast { border-color:var(--line); }
#language { color:#19252c; background:transparent; border-color:#737e77; }
nav a:hover { color:#172a22; }
.hero { grid-template-columns:1.05fr 1fr; gap:24px; padding:clamp(48px,8vw,116px) 0 42px; background:none; border:0; border-radius:0; }
.hero h1 { max-width:none; font-size:clamp(2.5rem,5.5vw,5.6rem); line-height:1.1; }
.hero .art { min-width:0; }
.locale[lang="en"] .hero h1 { font-size:clamp(2.25rem,5vw,5rem); }
#zh-it .card,#en-it .card { background:#e9eee9; }
#zh-it .number,#en-it .number { background:#dae6dc; }
.cta { background:#235a4b; color:white; }
@media (max-width:730px) {
  .hero { grid-template-columns:1fr; }
  .hero .art { height:270px; }
}
@media (prefers-reduced-motion:reduce) {
  .line span,.wire { animation:none; }
}

.art .wire {
  opacity: .23;
}
.kl-towers {
  fill: #163b3e;
  stroke: #d7f5d9;
  stroke-width: 1.45;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px #a1ffc16b);
  animation: skyline-arrive 1.1s .2s ease-out both;
}
@keyframes skyline-arrive {
  from { opacity: 0; transform: translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .kl-towers { animation: none; }
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: clamp(460px, 58vw, 680px);
  padding: clamp(24px, 6vw, 76px);
  border-radius: 20px;
  color: #f3f8ff;
  background: #081421 url("/kl-night.jpeg") right 25% / auto 120% no-repeat;
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #061121 4%, #061121eb 35%, #06112156 69%, #10294232),
    linear-gradient(0deg, #05101bba, transparent 55%);
  content: "";
}
.hero-copy p { color: #d4e2ef; }
.hero-copy .eyebrow { color: #9ae3ff; }
.hero-light {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 41%, #59cdff27 48%, #c2efff29 50%, transparent 58%);
  transform: translateX(-100%);
  animation: skyline-light 2.4s .35s ease-out both;
}
@keyframes skyline-light { to { transform: translateX(100%); } }
@media (max-width: 730px) {
  .hero {
    min-height: clamp(470px, 120vw, 600px);
    background-position: center top;
    background-size: cover;
  }
  .hero::before {
    background: linear-gradient(0deg, #061121 5%, #061121d9 33%, #06112126 75%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-light { animation: none; }
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(#73d9ff27 1px, transparent 1px),
    linear-gradient(90deg, #73d9ff27 1px, transparent 1px),
    radial-gradient(circle at 82% 20%, #3c85ff55, transparent 45%);
  background-size: 38px 38px, 38px 38px, 100% 100%;
  mask-image: linear-gradient(115deg, transparent 37%, #000 76%);
  content: "";
}
.hero-light {
  background: linear-gradient(112deg, transparent 38%, #367aff44 44%,
    #9af3ff6b 49%, #b6eaff90 50%, #5c6eff4a 52%, transparent 62%);
  animation-duration: 2.8s;
}

body {
  color-scheme: dark;
  color: #f0f6ff;
  --muted: #c0cce2;
  --line: #91a8db49;
  --cyan: #a5eeff;
  background-color: #080d22;
  background-image:
    radial-gradient(ellipse at 8% 14%, #482c8e 0%, transparent 38%),
    radial-gradient(ellipse at 94% 34%, #125689 0%, transparent 43%),
    radial-gradient(ellipse at 6% 68%, #652e67 0%, transparent 42%),
    radial-gradient(ellipse at 94% 92%, #135961 0%, transparent 37%),
    linear-gradient(135deg, #0a122a, #12112e 55%, #091522);
}
body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, #b4d9ff70 1px, transparent 1.5px);
  background-size: 32px 32px;
  mask-image: linear-gradient(125deg, #0009, transparent 60%, #0008);
  opacity: .38;
  content: "";
}
.mast, .locale, footer { position: relative; }
#language { color: #f0f6ff; border-color: #a7bcff79; background: #121a38; }
nav a:hover { color: #a5eeff; }
.hero { border: 1px solid #8cbcff70; box-shadow: 0 20px 60px #06091480; }
.path.tech { background: linear-gradient(120deg, #37265f, #153f61); border-color: #8ea8e780; }
.path.wellness { background: linear-gradient(120deg, #21445f, #175a58); color: #effffa; border-color: #83dac180; }
.path.wellness span { color: #a9ffe2; }
#zh-it .card, #en-it .card {
  background: linear-gradient(145deg, #262449, #131c36);
}
#zh-it .number, #en-it .number { background: #383468; }
.cta { background: #9ce8ff; color: #0b243a; }
.products {
  background: linear-gradient(132deg, #10333f, #22264c 70%, #312347);
  color: #f0faff;
  color-scheme: dark;
  border: 1px solid #9bd8ee5c;
}
.products .card { background: #112937; border-color: #8bd4df63; }
.products p { color: #c1d9e3; }
.products .eyebrow, .products a { color: #9df2dc; }
.product-icon { color: #b0ffeb; background: #245363; }
.filters button { color: #defbf3; background: #173746; border-color: #72adac; }
.filters button[aria-pressed=true] { color: #103932; background: #a6f4db; }