/* Independent AI-native concept. The original site on port 4173 is unchanged. */
:root { --ink: #141414; --body: #60666b; --line: #e3e6e7; --section-gutter: 64px; }
body { font-family: 'Pretendard Variable', Pretendard, sans-serif; }
@media (min-width: 901px) {
  .nav-item > .dropdown { top: calc(100% - 1px); }
}
.container { max-width: 1440px; padding-inline: 64px; }
/* One white canvas; aligned hairlines separate every main section and the footer. */
.header, #main > section, .footer { background: #fff; }
#main > section, .footer { position: relative; }
#main > section + section::before, .footer::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--section-gutter)), 1312px);
  height: 1px; background: var(--line); pointer-events: none;
}
.foundation { border-bottom: 0; }
#main > .foundation::before { content: none; }
.hero { padding-top: 100px; }
.hero h1 { font-size: clamp(34px, 4.2vw, 64px); font-weight: 500; line-height: 1.2; letter-spacing: normal; text-wrap: balance; }
.hero-bottom, html[lang=en] .hero-bottom { display: block; margin-top: 15px; margin-bottom: 30px; }
.hero-bottom p, html[lang=en] .hero-bottom p { max-width: none; font-size: clamp(18px, 1.65vw, 24px); line-height: 1.6; color: #7d7d7d; font-weight: 300; letter-spacing: normal; }
.hero-video { width: 100%; overflow: hidden; background: #fff; }
.hero-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #fff; pointer-events: none; }
.hero + .foundation { padding-top: 72px; }
.section { padding-block: 96px; }
h2 { font-weight: 500; font-size: clamp(30px, 3.25vw, 46px); letter-spacing: -.025em; line-height: 1.3; }
.section-heading { align-items: flex-end; gap: 40px; margin-bottom: 44px; }
.section-heading > p { max-width: 430px; font-size: 16px; line-height: 1.85; }
.foundation { gap: 80px; align-items: start; }
.foundation-copy { padding-top: 0; }
.foundation-copy .lead { font-weight: 400; color: #23292c; font-size: 24px; }
.foundation-copy > p + p { font-size: 16px; line-height: 1.9; }
.platform { background: #fff; }
/* Platform tabs: each layer has its own accent (shared with the cube). While pinned, the active tab
   fills with a soft wash from empty to full as the reader scrolls through that layer. */
#platform { --layer-0: #1aa9bb; --layer-1: #e04d70; --layer-2: #b84ad1; }
.layer-tab:nth-child(1) { --tab-accent: var(--layer-0); }
.layer-tab:nth-child(2) { --tab-accent: var(--layer-1); }
.layer-tab:nth-child(3) { --tab-accent: var(--layer-2); }
.layer-tab, .layer-tab.active { position: relative; isolation: isolate; padding: 18px 20px 18px 26px; border-left: 0; transition: background .2s, box-shadow .2s; }
.layer-tab::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; opacity: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--tab-accent) 3%, transparent), color-mix(in srgb, var(--tab-accent) 14%, transparent)); box-shadow: inset -2px 0 0 color-mix(in srgb, var(--tab-accent) 45%, transparent); transition: width .45s ease, opacity .3s; }
/* Without pinning there is no scroll progress, so the active tab is simply filled. Before main.js
   decides, the wash stays empty so a pinned page never flashes full on load. */
.layer-tab.active::before { opacity: 1; }
#platform.is-static .layer-tab.active::before { width: 100%; }
#platform.is-pinned .layer-tab.active::before { width: calc(var(--step, 0) * 100%); opacity: clamp(0, var(--step, 0) * 12, 1); transition: width .12s linear, opacity .12s linear; }
.layer-tab > span:first-child { transition: transform .35s ease; }
.layer-tab.active > span:first-child { transform: translateX(6px); }
.layer-tab strong { font-size: 22px; transition: color .3s; }
.layer-tab:not(.active) strong { color: #868c90; }
.layer-arrow { color: var(--ink); transition: transform .3s ease, color .3s; }
.layer-tab.active .layer-arrow { color: color-mix(in srgb, var(--tab-accent) 75%, var(--ink)); transform: rotate(45deg); }
@media (hover: hover) and (min-width: 901px) {
  .layer-tab:not(.active):hover { background: color-mix(in srgb, var(--tab-accent) 5%, #fff); }
  .layer-tab:not(.active):hover strong { color: var(--ink); }
  .layer-tab:not(.active):hover .layer-arrow { transform: translate(4px, -4px); }
}
#layer-panel > * { animation: layer-panel-in .5s ease both; }
#layer-panel > .tags { animation-delay: .08s; }
@keyframes layer-panel-in { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 901px) {
  #platform.is-pinned .platform-track::after { content: ''; display: block; height: calc(var(--platform-steps, 3) * 90vh); }
  #platform.is-pinned .platform-layout { position: sticky; top: var(--pin-top, 112px); }
  /* Two rows on the right: the caption reads first, then the cube it describes. The tab list sits in the
     cube's row and centres on the cube, so the two line up however long the caption runs. */
  #platform .platform-layout { grid-template-rows: auto auto; row-gap: 0; }
  #platform .platform-graphic { display: contents; }
  #platform .layer-panel { grid-column: 2; grid-row: 1; min-height: var(--caption-h); padding: 0 22px 14px; }
  #platform .layer-panel p { margin: 0; }
  #platform .layer-panel .tags:empty { display: none; }
  #platform .tesseract-stage { grid-column: 2; grid-row: 2; }
  #platform .layer-controls { grid-column: 1; grid-row: 2; align-self: center; }
  .layer-tab, .layer-tab.active { transition: background .2s, box-shadow .2s, padding .35s ease; }
  .layer-tab.active { padding-block: 36px; }
  /* Right after the hero snaps in, the heading, tabs and cube have to fit under the header together, so the
     cube's stage gives up height on shorter screens (main.js also lands a little lower to skip empty padding).
     Everything inside the stage is placed from --stage-h, which is exactly the old 420px layout at full size. */
  #platform {
    --caption-h: 120px;
    --stage-h: clamp(320px, calc(100vh - 439px - var(--caption-h)), 420px);
    --core: min(350px, calc(var(--stage-h) - 60px));
    --core-top: calc((var(--stage-h) - var(--core)) / 2);
  }
  #platform .section-heading { margin-bottom: 44px; }
  #platform .tesseract-stage { height: var(--stage-h); flex-basis: var(--stage-h); }
  #platform .tesseract-core { top: var(--core-top); width: var(--core); height: var(--core); margin-left: calc(var(--core) / -2); }
  #platform .tesseract-halo { top: calc(var(--core-top) + var(--core) * .043); width: calc(var(--core) - 10px); height: calc(var(--core) * .829); left: calc(50% - (var(--core) - 10px) / 2); }
  #platform .tesseract-shadow { top: calc(var(--core-top) + var(--core) * .809); width: calc(var(--core) * .543); left: calc(50% - var(--core) * .2714); }
  #platform .tesseract-stage :is(.orbit-c, .orbit-e) { top: calc(var(--stage-h) * .3143); }
  #platform .tesseract-stage :is(.orbit-f, .orbit-g) { top: calc(var(--stage-h) * .5952); }
}
/* Caption room = its longest layer at that width (2, 3 or 4 lines of text plus 14px), so the layout does not
   change height between layers. English runs one line longer. */
@media (min-width: 901px) { #platform { --caption-h: 126px; } html[lang=en] #platform { --caption-h: 154px; } }
@media (min-width: 1000px) { #platform { --caption-h: 98px; } html[lang=en] #platform { --caption-h: 126px; } }
@media (min-width: 1366px) { html[lang=en] #platform { --caption-h: 98px; } }
@media (min-width: 1440px) { #platform { --caption-h: 70px; } }
/* Laptop-height windows: tighten the heading too, so all of it still fits. */
@media (min-width: 901px) and (max-height: 820px) {
  #platform { --stage-h: clamp(290px, calc(100vh - 321px - var(--caption-h)), 420px); }
  #platform .section-heading { margin-bottom: 32px; }
  #platform .section-heading > p { margin-top: 24px; }
}
.layer-panel { min-height: 175px; }
.platform-graphic { min-height: 460px; }
.service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.service-card { border-top: 1px solid #cbd2d5; padding: 26px 0 0; scroll-margin-top: 125px; }
.service-card h3 { font-size: 21px; font-weight: 500; line-height: 1.4; margin-bottom: 18px; }
.service-card > p { font-size: 16px; font-weight: 500; line-height: 1.6; color: #30383c; margin-bottom: 13px; }
.service-detail { color: #687176; font-size: 15px; line-height: 1.85; }
.service-card .text-link { margin-top: 24px; }
.patients { background: #fff; }
.native-hospitals > .container > .text-link, .patients .text-link { margin-top: 34px; font-size: 14px; }
.scope-note { font-size: 12px; color: #7d8589; margin-top: 30px; }
.data-section { background: #fff; color: var(--ink); }
.data-section .section-heading > p { color: var(--body); }
/* Home data pipeline: main.js sets data-stage and .is-cycling while the section is on screen (wide screens, motion allowed).
   The wash lightens every zone but the current stage; its window slides between the zone edges of the artwork. */
@property --wash-from { syntax: '<percentage>'; inherits: false; initial-value: -10%; }
@property --wash-to { syntax: '<percentage>'; inherits: false; initial-value: 32%; }
.data-flow-art { position: relative; margin: 0 0 48px; overflow: hidden; border-radius: 8px; background: #e9edf0; isolation: isolate; }
.data-flow-art > img { display: block; width: 100%; height: auto; }
.data-flow-light { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.dfl-beam { fill: none; stroke-linecap: round; stroke-dasharray: 8 192; stroke-dashoffset: 10; animation: dfl-pass 4.4s linear var(--d) infinite; }
.dfl-beam-bloom { stroke: #6df4ff; stroke-width: 12; filter: url(#dfl-beam-glow); opacity: .7; }
.dfl-beam-core { stroke: #f2ffff; stroke-width: 2.4; }
.data-flow-light [data-glint] > * { opacity: 0; }
.dfl-panel { fill: url(#dfl-panel-light); }
.dfl-gate, .dfl-cube { fill: #b1faff; stroke: #d9ffff; stroke-width: 1.5; }
.dfl-cube { fill: #deffff; }
.dfl-node { fill: url(#dfl-node-light); }
.data-flow.is-cycling[data-stage="0"] [data-glint="0"] > *,
.data-flow.is-cycling[data-stage="1"] [data-glint="1"] > *,
.data-flow.is-cycling[data-stage="2"] [data-glint="2"] > * { animation: dfl-glint 2.5s ease-out var(--d) infinite; }
@keyframes dfl-pass { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -120; } }
@keyframes dfl-glint { 0%, 30%, 100% { opacity: 0; } 6% { opacity: .55; } 16% { opacity: .15; } }
.motion-paused .data-flow-light { display: none; }
@media (prefers-reduced-motion: reduce) { .data-flow-light { display: none; } }
.data-flow-wash {
  --wash-from: -10%; --wash-to: 32%;
  position: absolute; inset: 0; pointer-events: none; background: rgba(247, 249, 250, .62); opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wash-from) - 3%), transparent calc(var(--wash-from) + 3%), transparent calc(var(--wash-to) - 3%), #000 calc(var(--wash-to) + 3%));
  mask-image: linear-gradient(90deg, #000 calc(var(--wash-from) - 3%), transparent calc(var(--wash-from) + 3%), transparent calc(var(--wash-to) - 3%), #000 calc(var(--wash-to) + 3%));
  transition: opacity .6s ease, --wash-from 1s cubic-bezier(.4, 0, .2, 1), --wash-to 1s cubic-bezier(.4, 0, .2, 1);
}
.data-flow.is-cycling .data-flow-wash { opacity: 1; }
.data-flow[data-stage="1"] .data-flow-wash { --wash-from: 32%; --wash-to: 70.5%; }
.data-flow[data-stage="2"] .data-flow-wash { --wash-from: 70.5%; --wash-to: 110%; }
/* Columns follow the artwork's zones, so each step sits under the part of the picture it names. */
.data-steps { display: grid; grid-template-columns: 32fr 38.5fr 29.5fr; margin: 0; padding: 0; list-style: none; }
.data-step { position: relative; padding: 30px 32px 0 0; border-top: 1px solid #cbd2d5; transition: opacity .6s ease; }
.data-step::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #9aa5aa; transition: background .5s ease, box-shadow .5s ease; }
.data-step::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: #2b8796; transform: scaleX(0); transform-origin: left; opacity: 0; transition: opacity .4s ease; }
.data-step-index { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: .01em; color: #687176; transition: color .5s ease; }
.data-step h3 { font-size: 26px; line-height: 1.3; margin-bottom: 12px; }
.data-step > p { font-size: 18px; line-height: 1.55; color: #30383c; margin-bottom: 0; }
/* Plain text links here instead of the site's outlined button, so the three steps stay light. */
.data-step .text-link { margin-top: 18px; gap: 6px; padding: 0; border: 0; background: none; color: #2b8796; }
.data-step .text-link:hover { background: none; color: var(--ink); }
@media (min-width: 901px) {
  .data-flow.is-cycling .data-step:not(.is-on) { opacity: .45; }
  .data-flow.is-cycling .data-step.is-on::before { background: #5fd3e3; box-shadow: 0 0 0 3px rgba(95, 211, 227, .2); }
  .data-flow.is-cycling .data-step.is-on::after { opacity: 1; animation: data-rail 5s linear forwards; }
  .data-flow.is-held .data-step.is-on::after { animation: none; transform: none; }
  .data-flow.is-cycling .data-step.is-on .data-step-index { color: #2b8796; }
}
@keyframes data-rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .data-flow-art { margin-bottom: 30px; }
  .data-steps { grid-template-columns: 1fr; gap: 28px; }
  .data-step { padding: 22px 0 0; }
  .data-step-index { margin-bottom: 10px; }
  .data-step h3 { font-size: 21px; margin-bottom: 8px; }
  .data-step > p { font-size: 16px; }
  .data-step .text-link { margin-top: 10px; }
}
.contact-section { padding-block: 85px; background: #fff; }
.contact-section p { font-size: 16px; }
.footer-sitemap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-column h3 { font-size: 17px; }
.footer-column li { font-size: 14px; }
/* Desktop reference: full-width headings with a right-aligned reading column. */
@media (min-width: 901px) {
  :root { --section-gutter: 48px; }
  .container { padding-inline: 48px; }
  #main > section + section::before, .footer::before {
    width: min(calc(100% - 2 * var(--section-gutter)), 1344px);
  }
  .hero h1, html[lang=en] .hero h1 { font-size: clamp(42px, 3.9vw, 56px); font-weight: 500; }
  .hero-bottom, html[lang=en] .hero-bottom { margin-top: 28px; margin-bottom: 72px; }
  .hero-bottom p, html[lang=en] .hero-bottom p { font-size: 22px; line-height: 1.6; }
  .section { padding-block: 120px; }
  h2 { font-size: clamp(36px, 3.5vw, 50px); font-weight: 400; line-height: 1.3; letter-spacing: -.025em; }
  .section-heading { display: block; margin-bottom: 60px; }
  .section-heading h2 br, .foundation h2 br { display: none; }
  .section-heading > p { width: 70%; max-width: none; margin: 48px 0 0 auto; font-size: 22px; line-height: 1.6; }
  .section-heading > p br { display: none; }
  .foundation { display: block; }
  .foundation-copy { width: 70%; margin: 48px 0 0 auto; }
  .foundation-copy .lead { font-size: 24px; }
  .foundation-copy > p + p { font-size: 18px; line-height: 1.9; }
  .service-cards { display: block; width: 70%; margin-left: auto; }
  .service-card { padding: 52px 0; border-top: 1px solid #cbd2d5; }
  .service-card:first-child { border-top: 0; padding-top: 0; }
  .native-hospitals .service-card:first-child { padding-top: 28px; }
  .service-card:last-child { padding-bottom: 0; }
  .service-card h3 { font-size: 30px; font-weight: 400; line-height: 1.3; margin-bottom: 18px; }
  .service-card > p { font-size: 22px; font-weight: 400; line-height: 1.6; margin-bottom: 24px; }
  .service-detail { font-size: 16px; line-height: 2; max-width: 850px; }
  .native-hospitals > .container > .text-link, .patients .text-link { margin-left: 30%; margin-top: 52px; font-size: 16px; }
  .scope-note { width: 70%; margin-left: auto; margin-top: 42px; }
}
@media (max-width: 1100px) {
  :root { --section-gutter: 40px; }
  .container { padding-inline: 40px; }
  .hero { padding-top: 56px; }
  .foundation { gap: 44px; }
  .section-heading > p { max-width: 340px; font-size: 15px; }
  .service-cards { gap: 24px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .section-heading > p { max-width: none; font-size: 20px; }
}
@media (max-width: 900px) {
  .section { padding-block: 76px; }
  .section-heading { display: block; }
  .section-heading > p { max-width: none; margin-top: 22px; }
  .service-cards { display: block; }
  .service-card { padding: 32px 0; }
  .service-card:first-child { border-top: 0; padding-top: 0; }
  .service-card:last-child { padding-bottom: 0; }
  .service-card h3 { font-size: 19px; }
  .service-card > p, .service-detail { font-size: 14px; }
}
@media (max-width: 650px) {
  :root { --section-gutter: 22px; }
  .container { padding-inline: 22px; }
  .hero { padding-top: 42px; }
  .hero h1, html[lang=en] .hero h1 { font-size: 34px; line-height: 1.3; }
  .hero-bottom, html[lang=en] .hero-bottom { margin-top: 15px; margin-bottom: 30px; }
  .hero-bottom p, html[lang=en] .hero-bottom p { font-size: 18px; }
  .section { padding-block: 64px; }
  .hero + .foundation { padding-top: 56px; }
  .foundation-copy { padding-top: 24px; }
  .foundation-copy .lead { font-size: 22px; }
  .foundation-copy > p + p { font-size: 15px; }
  .section-heading { margin-bottom: 30px; }
  .section-heading > p br { display: none; }
  .platform-graphic { min-height: 435px; }
  .layer-panel { min-height: 185px; }
  .layer-tab strong { font-size: 25px; }
  .service-cards { grid-template-columns: 1fr; gap: 28px; }
  .service-card { padding-top: 22px; }
  .service-card h3 { font-size: 21px; margin-bottom: 12px; }
  .service-card > p { margin-bottom: 8px; font-size: 16px; }
  .service-detail { font-size: 15px; }
  .contact-section { padding-block: 60px; }
  .footer-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Platform introduction and mobile stage navigation. */
#platform .section-heading > p {
  width: 100%; max-width: none; margin-left: 0; text-align: left;
}
@media (min-width: 901px) {
  #platform .section-heading > p br { display: initial; }
}
@media (max-width: 900px) {
  #platform .platform-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #platform .platform-graphic { display: contents; }
  /* Layer buttons lead, then the caption, then the stage they describe. */
  #platform .tesseract-stage { grid-row: 3; }
  #platform .layer-controls {
    grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%;
  }
  #platform .layer-tab {
    justify-content: center; min-width: 0; min-height: 76px; padding: 12px 4px;
    text-align: center; border: 1px solid var(--line); border-radius: 6px; gap: 0;
  }
  #platform .layer-tab.active { padding: 12px 3px; border: 2px solid color-mix(in srgb, var(--tab-accent) 80%, var(--ink)); background: linear-gradient(180deg, color-mix(in srgb, var(--tab-accent) 10%, #fff), #fff); }
  #platform .layer-tab::before { display: none; }
  #platform .layer-tab strong { font-size: clamp(12px, 3.4vw, 20px); letter-spacing: -.025em; }
  #platform .layer-tab small { font-size: 12px; margin-top: 5px; }
  #platform .layer-arrow { display: none; }
  #platform .layer-tab > span:first-child { transform: none; }
  #platform .layer-panel { grid-row: 2; width: 100%; min-height: 0; padding: 0 4px; }
}
/* While the layers advance on their own, the active tab's underline fills over the time it stays. */
#platform.is-autoplaying .layer-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; transform-origin: left;
  background: color-mix(in srgb, var(--tab-accent) 75%, var(--ink)); animation: layer-autoplay var(--autoplay-ms, 8s) linear both;
}
@media (max-width: 900px) { #platform.is-autoplaying .layer-tab.active::after { left: 8px; right: 8px; bottom: 5px; } }
@keyframes layer-autoplay { from { scale: 0 1; } }

/* Cinematic home healthcare loop: stable framing and continuous connection. */
.patient-data-visual { margin:0; width:100%; }
.patient-data-media { position:relative; width:100%; aspect-ratio:1920 / 740; overflow:hidden; background:#e6dfd5; }
.patient-data-video { display:block; width:100%; height:100%; object-fit:contain; }
#bio .patient-data-visual { margin-bottom:46px; }
#bio .service-title-en { display: inline-block; margin-left: 12px; color: var(--body); font-size: 15px; font-weight: 500; letter-spacing: .01em; vertical-align: baseline; }
@media (max-width: 900px) {
  #bio .service-title-en { display: block; margin: 4px 0 0; font-size: 13px; }
}
/* Life Sciences card links stay light, as plain underlined text rather than the outlined button. */
#bio .service-card .text-link { gap: 30px; padding: 10px 0; border: 0; border-bottom: 1px solid #a3a7ae; background: none; }
#bio .service-card .text-link:hover { background: none; color: var(--purple); }
@media (max-width:650px) {
  #bio .patient-data-visual { margin-bottom:30px; }
}
.home-care-visual { position: relative; margin: 0 0 48px; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #102337; border-radius: 8px; isolation: isolate; }
.home-care-document-visual, .home-care-light-visual { background: #deded9; }
.home-care-visual > img, .home-care-visual > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-care-visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Home patients timeline under the home-care film. main.js adds .is-synced while the film plays, lights one step and moves --p along its rail. */
.care-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.care-step { position: relative; padding-top: 30px; border-top: 1px solid #cbd2d5; scroll-margin-top: 125px; transition: opacity .6s ease; }
.care-step::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #9aa5aa; transition: background .5s ease, box-shadow .5s ease; }
.care-step::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: #2b8796; transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: opacity .4s ease; }
.care-step-when { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: .01em; color: #687176; transition: color .5s ease; }
.care-step h3 { font-size: 26px; font-weight: 400; line-height: 1.3; margin-bottom: 14px; }
.care-step > p { font-size: 18px; line-height: 1.55; color: #30383c; margin-bottom: 14px; }
.care-step .service-detail { font-size: 15px; line-height: 1.85; }
.patients .link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 34px; }
.patients .link-row .text-link { margin: 0; }
.link-note { margin: 0; color: #687176; font-size: 13px; line-height: 1.5; }
@media (min-width: 901px) { .patients .link-row { margin-top: 52px; } .link-note { font-size: 14px; } }
@media (min-width: 901px) {
  .care-timeline.is-synced .care-step:not(.is-on) { opacity: .45; }
  .care-timeline.is-synced .care-step.is-on::before { background: #5fd3e3; box-shadow: 0 0 0 3px rgba(95,211,227,.2); }
  .care-timeline.is-synced .care-step.is-on::after { opacity: 1; }
  .care-timeline.is-synced .care-step.is-on .care-step-when { color: #2b8796; }
}
@media (max-width: 900px) {
  .care-timeline { grid-template-columns: 1fr; gap: 30px; }
  .care-step { padding-top: 22px; }
  .care-step-when { margin-bottom: 10px; }
  .care-step h3 { font-size: 21px; margin-bottom: 10px; }
  .care-step > p { font-size: 16px; margin-bottom: 8px; }
}
.home-care-trace { fill: none; stroke: #65daff; stroke-width: 1.8; opacity: .65; }
.home-care-stream use { fill: none; stroke: #9feaff; stroke-linecap: round; stroke-dasharray: 110 890; animation: home-care-flow 7s linear infinite; }
.home-care-aura { stroke-width: 9; filter: url(#home-care-glow); opacity: .9; }
.home-care-beam { stroke-width: 2.2; }
.home-care-node { fill: #c5f6ff; filter: drop-shadow(0 0 8px #44cfff); animation: home-care-pulse 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.home-care-node-end { animation-delay: 1.75s; }
@keyframes home-care-flow { to { stroke-dashoffset: -1000; } }
@keyframes home-care-pulse { 50% { opacity: .55; transform: scale(.75); } }
.motion-paused .home-care-visual * { animation-play-state: paused !important; }
@media (max-width: 600px) { .home-care-visual { margin-bottom: 30px; border-radius: 5px; } }
@media (prefers-reduced-motion: reduce) { .home-care-visual * { animation: none !important; } }

.home-care-data use { fill: none; stroke: #e5fbff; stroke-width: 3; stroke-dasharray: 2 35 4 58 2 899; filter: drop-shadow(0 0 5px #69e1ff); animation: home-care-flow 7s linear infinite; }
.home-care-data use:nth-child(2) { animation-delay: -2.33s; opacity: .7; }
.home-care-data use:nth-child(3) { animation-delay: -4.66s; opacity: .5; }

/* Shared typography for the landing page and Hospitals page. */
:root {
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --type-hero: clamp(34px, 4.2vw, 56px);
  --type-title: clamp(30px, 3.5vw, 48px);
  --type-subtitle: clamp(22px, 2.4vw, 30px);
  --type-intro: clamp(18px, 1.7vw, 22px);
  --type-body: 16px;
  --type-small: 14px;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: var(--type-body); font-weight: 400;
  line-height: 1.75; letter-spacing: 0; word-break: keep-all; overflow-wrap: break-word;
}
button, input, select, textarea { font-family: inherit; }
#main :where(h1, h2, h3, p, .service-detail, .hp-body, .simple-rows) {
  font-family: var(--font); letter-spacing: 0;
}
#main :is(h1, h2, h3) { color: var(--ink); font-weight: 500; text-wrap: balance; }
#main h1 { font-size: var(--type-hero); line-height: 1.25; letter-spacing: -.025em; }
#main h2 { font-size: var(--type-title); line-height: 1.35; letter-spacing: -.02em; }
#main :is(.service-card h3, .hp-product h3) {
  font-size: var(--type-subtitle); line-height: 1.4; letter-spacing: -.015em;
}
#main :is(.hp-feature-list h3, .hp-infrastructure-grid h3) {
  font-size: clamp(22px, 2vw, 26px); line-height: 1.4;
}
#main :where(.hero-bottom p, .section-heading > p, .foundation-copy > p,
  .service-card > p, .service-detail, .contact-section p,
  .hp-hero-copy > p, .hp-section-heading > p:last-child, .hp-product-lead,
  .hp-body, .hp-body p, .hp-feature-list p, .hp-infrastructure-grid p, .hp-contact p) {
  font-size: var(--type-body); font-weight: 400; line-height: 1.8; color: var(--body);
}
#main :is(.hero-bottom p, .section-heading > p, .foundation-copy .lead,
  .service-card > p, .hp-hero-copy > p, .hp-section-heading > p:last-child, .hp-product-lead) {
  font-size: var(--type-intro); line-height: 1.65;
}
#main :is(.service-card > p, .hp-product-lead, .foundation-copy .lead) { color: #30383c; }
#main .service-card > p { margin-block: 12px; }
#main :is(.service-detail, .hp-body) { max-width: 54em; }
#main :is(.scope-note, .hp-details li, .hp-infrastructure-grid .hp-feature-sub) {
  font-size: var(--type-small); font-weight: 400; line-height: 1.75;
}
.layer-tab strong { font-weight: 500; line-height: 1.35; letter-spacing: -.015em; }
.layer-tab small { font-weight: 400; line-height: 1.5; }
#main .layer-panel p { font-size: var(--type-body); line-height: 1.75; }
/* On phones the caption sits right under the layer buttons, so it steps down in size to read as their description. */
@media (max-width: 900px) { #main .layer-panel p { margin: 0; font-size: 13.5px; line-height: 1.7; } #platform .layer-panel .tags:empty { display: none; } }
/* Reserve room for the longest caption so the stage below does not jump when the layer changes. */
@media (max-width: 900px) { #platform .layer-panel { min-height: 69px; } }
@media (max-width: 420px) { #platform .layer-panel { min-height: 92px; } }
@media (max-width: 340px) { #platform .layer-panel { min-height: 115px; } }
.nav-toggle, .nav-page-link, .dropdown a, .button, .text-link { font-size: 14px; font-weight: 500; line-height: 1.5; }
.footer-column h3 { font-size: 16px; font-weight: 500; line-height: 1.5; }
.footer-column li, .footer p, .footer-legal, .footer-bottom { font-size: 13px; line-height: 1.75; }
@media (max-width: 650px) {
  :root { --type-intro: 18px; }
  #main h1 { font-size: clamp(32px, 8.5vw, 38px); }
  #main h2 { font-size: clamp(28px, 7.5vw, 32px); }
  #main .section-heading > p br { display: none; }
  .nav-toggle, .nav-page-link { font-size: 16px; }
}

/* Hero inquiry button under the lead (the hero itself uses jaewith's split-hero rules further down). */
.hero-actions { margin-top: 36px; }
.hero-actions .button { width: auto; }

/* Latest stories follow the existing home sections, before the footer. */
.home-stories{padding-block:96px;color:var(--ink)}
.home-stories-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px}
.home-stories-heading h2{font-size:clamp(32px,3.2vw,48px);font-weight:500;line-height:1.35;letter-spacing:-.03em;word-break:keep-all}
.home-stories-heading p{max-width:720px;margin-top:20px;color:var(--body);font-size:16px;line-height:1.85;word-break:keep-all}
.home-stories-link{flex-shrink:0;display:inline-flex;align-items:center;gap:20px;padding-bottom:8px;border-bottom:1px solid currentColor;font-size:14px}
.home-stories-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:28px}
.home-stories-grid>a{min-width:0;display:block;text-decoration:none;color:inherit}
.home-stories-grid figure{margin:0;aspect-ratio:1.6;overflow:hidden;border-radius:14px;background:#f3f4ef}
.home-stories-grid img{width:100%;height:100%;object-fit:cover;display:block}
.home-stories-grid time{display:block;font-size:13px;color:var(--body);margin-top:22px}
.home-stories-grid h3{font-size:24px;line-height:1.45;font-weight:500;letter-spacing:-.025em;margin-top:12px;word-break:keep-all;overflow-wrap:anywhere}
.home-stories-grid p{font-size:15px;line-height:1.85;color:var(--body);margin-top:14px;overflow-wrap:anywhere}
.home-stories-grid>a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.home-stories a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.home-story-placeholder{display:grid;place-items:center;height:100%;color:var(--ink);font-size:28px}
@media(max-width:900px){.home-stories{padding-block:64px}.home-stories-heading{display:block;margin-bottom:32px}.home-stories-link{margin-top:24px}.home-stories-grid{grid-template-columns:1fr;gap:40px}.home-stories-grid h3{font-size:25px}.home-stories-heading p{font-size:15px}}

/* Imported hospital solutions, before the existing hospital workflow section. */
#main .service-cards-rich h3 { font-size: clamp(21px, 1.9vw, 26px); }
.service-cards-label { margin: 0; padding-top: 0; border-top: 0; color: var(--ink); }
@media (max-width: 900px) { .service-cards-label { margin-bottom: 20px; } }
.service-cards-rich .service-media { margin: 0 0 22px; overflow: hidden; border-radius: 14px; background: #f3f6f7; aspect-ratio: 3 / 2; }
.service-cards-rich .service-media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .service-cards-rich .service-card:hover .service-media :is(img, video) { transform: scale(1.04); } }
#main .service-body > p { margin-block: 10px; color: #30383c; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; }
#main .service-cards-rich .service-detail { font-size: 15px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.service-tags li { padding: 5px 12px; border: 1px solid #d9e3e6; border-radius: 999px; background: #f6f9fa; color: #44545b; font-size: 13px; line-height: 1.4; }
.text-link { gap: 24px; padding: 11px 18px; border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.text-link:hover { background: var(--ink); color: #fff; }
.service-cards-rich .text-link { margin-top: 30px; }
@media (min-width: 901px) {
  .service-cards-rich { width: auto; margin-left: 0; }
  .service-cards-rich .service-card { display: grid; grid-template-columns: 30% 70%; align-items: start; padding: 0; border-top: 0; }
  .service-cards-rich .service-media { margin: 52px 48px 0 0; aspect-ratio: 4 / 3; }
  .service-cards-rich .service-body { padding: 52px 0; border-top: 1px solid #cbd2d5; }
  .service-cards-rich .service-card:first-child .service-media { margin-top: 28px; }
  .service-cards-rich .service-card:first-child .service-body { padding-top: 28px; border-top: 0; }
  .service-cards-rich .service-card:last-child .service-body { padding-bottom: 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .service-cards-rich .service-card { grid-template-columns: 36% 64%; }
  .service-cards-rich .service-media { margin-right: 36px; }
}
@media (max-width: 650px) {
  .service-tags { gap: 6px; margin-top: 20px; }
  .service-tags li { padding: 5px 11px; }
}

/* Small label above a home section title. */
.section-eyebrow { margin: 0 0 20px; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: .02em; line-height: 1.5; }
@media (max-width: 900px) { .section-eyebrow { margin-bottom: 14px; font-size: 13px; } }

/* English name set small beside a Korean card title. */
.service-title-en { display: inline-block; margin-left: 12px; color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: .01em; vertical-align: baseline; }
@media (max-width: 900px) { .service-title-en { display: block; margin: 4px 0 0; font-size: 13px; } }

@media (prefers-reduced-motion: reduce) { .service-cards-rich .service-media :is(img, video) { transition: none; transform: none; } }

#main .home-solutions .service-cards-label { margin: 0 0 44px; font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }



/* Preserve the illustration's coordinate system while the outer hero responds to the viewport. */
.hero-network-standalone { position: relative; isolation: isolate; width: 100%; margin: 0; aspect-ratio: 8 / 5; overflow: hidden; background: #fff; mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 93%, transparent); }
.hero-network-standalone .hero-network-art { position: absolute; width: 132%; aspect-ratio: 2 / 1; left: -30%; top: 50%; transform: translateY(-50%); }
.hero-network-standalone .hero-network-art img,
.hero-network-standalone .hero-network-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.hero-network-standalone svg { pointer-events: none; }
.hero-network-standalone .hc-world { position: absolute; inset: 0; }
.hero-network-standalone .hc-core { z-index: 2; }
.hero-network-standalone .hero-network-art > svg .hn-cube,
.hero-network-standalone .hero-network-art > svg .hn-halo { visibility: hidden; }
@media (max-width: 900px) {
  .hero-network-standalone { aspect-ratio: 5 / 4; }
  .hero-network-standalone .hero-network-art { width: 160%; left: -52%; }
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding-block: clamp(40px, 6vw, 88px);
}
.hero-split .hero-copy { min-width: 0; }
.hero-split .hero-bottom,
html[lang=en] .hero-split .hero-bottom { margin: 24px 0 0; }
.hero-split .hero-network { min-width: 0; }
@media (min-width: 1024px) {
  .hero-split {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: clamp(640px, calc(100svh - 88px), 960px);
    padding-inline: max(48px, calc((100% - 1344px) / 2));
    overflow: clip;
  }
  .hero-split .hero-copy {
    position: relative;
    z-index: 2;
    width: 36%;
    max-width: 520px;
  }
  #main .hero-split h1 { font-size: clamp(38px, 3.6vw, 52px); line-height: 1.28; }
  #main .hero-split .hero-bottom p { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.75; }
  /* Let the floor extend beyond the illustration, while keeping the text area quiet. */
  .hero-split .hero-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background: transparent;
    mask-image: linear-gradient(to right, transparent 28%, rgb(0 0 0 / .05) 36%, #000 52%),
      linear-gradient(to bottom, transparent, #000 7%, #000 90%, transparent);
    mask-composite: intersect;
  }
  .hero-split .hero-network-art {
    width: min(112%, 2100px);
    left: auto;
    right: -10%;
  }
}
@media (min-width: 651px) and (max-width: 1023px) {
  .hero-split .hero-copy { max-width: 760px; }
  .hero-split .hero-network { max-width: 760px; justify-self: center; aspect-ratio: 8 / 5; }
}
@media (max-width: 650px) {
  .hero-split { gap: 20px; }
  .hero-split .hero-bottom,
  html[lang=en] .hero-split .hero-bottom { margin-top: 20px; }
}

/* Platform layout and stage progression from the 4193 concept. */
#platform { --layer-0: #1aa9bb; --layer-1: #e04d70; --layer-2: #b84ad1; }
.layer-tab:nth-child(1) { --tab-accent: var(--layer-0); }
.layer-tab:nth-child(2) { --tab-accent: var(--layer-1); }
.layer-tab:nth-child(3) { --tab-accent: var(--layer-2); }
.layer-tab, .layer-tab.active { position: relative; isolation: isolate; padding: 18px 20px 18px 26px; border-left: 0; transition: background .2s, box-shadow .2s; }
.layer-tab::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; opacity: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--tab-accent) 3%, transparent), color-mix(in srgb, var(--tab-accent) 14%, transparent)); box-shadow: inset -2px 0 0 color-mix(in srgb, var(--tab-accent) 45%, transparent); transition: width .45s ease, opacity .3s; }
/* Without pinning there is no scroll progress, so the active tab is simply filled. Before main.js
   decides, the wash stays empty so a pinned page never flashes full on load. */
.layer-tab.active::before { opacity: 1; }
#platform.is-static .layer-tab.active::before { width: 100%; }
#platform.is-pinned .layer-tab.active::before { width: calc(var(--step, 0) * 100%); opacity: clamp(0, var(--step, 0) * 12, 1); transition: width .12s linear, opacity .12s linear; }
.layer-tab > span:first-child { transition: transform .35s ease; }
.layer-tab.active > span:first-child { transform: translateX(6px); }
.layer-tab strong { font-size: 22px; transition: color .3s; }
.layer-tab:not(.active) strong { color: #868c90; }
.layer-arrow { color: var(--ink); transition: transform .3s ease, color .3s; }
.layer-tab.active .layer-arrow { color: color-mix(in srgb, var(--tab-accent) 75%, var(--ink)); transform: rotate(45deg); }
@media (hover: hover) and (min-width: 901px) {
  .layer-tab:not(.active):hover { background: color-mix(in srgb, var(--tab-accent) 5%, #fff); }
  .layer-tab:not(.active):hover strong { color: var(--ink); }
  .layer-tab:not(.active):hover .layer-arrow { transform: translate(4px, -4px); }
}
#layer-panel > * { animation: layer-panel-in .5s ease both; }
#layer-panel > .tags { animation-delay: .08s; }
@keyframes layer-panel-in { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 901px) {
  #platform.is-pinned .platform-track::after { content: ''; display: block; height: calc(var(--platform-steps, 3) * 90vh); }
  #platform.is-pinned .platform-layout { position: sticky; top: var(--pin-top, 112px); }
  /* Two rows on the right: the caption reads first, then the cube it describes. The tab list sits in the
     cube's row and centres on the cube, so the two line up however long the caption runs. */
  #platform .platform-layout { grid-template-rows: auto auto; row-gap: 0; }
  #platform .platform-graphic { display: contents; }
  #platform .layer-panel { grid-column: 2; grid-row: 1; min-height: var(--caption-h); padding: 0 22px 14px; }
  #platform .layer-panel p { margin: 0; }
  #platform .layer-panel .tags:empty { display: none; }
  #platform .tesseract-stage { grid-column: 2; grid-row: 2; }
  #platform .layer-controls { grid-column: 1; grid-row: 2; align-self: center; }
  .layer-tab, .layer-tab.active { transition: background .2s, box-shadow .2s, padding .35s ease; }
  .layer-tab.active { padding-block: 36px; }
  /* Right after the hero snaps in, the heading, tabs and cube have to fit under the header together, so the
     cube's stage gives up height on shorter screens (main.js also lands a little lower to skip empty padding).
     Everything inside the stage is placed from --stage-h, which is exactly the old 420px layout at full size. */
  #platform {
    --caption-h: 120px;
    --stage-h: clamp(320px, calc(100vh - 439px - var(--caption-h)), 420px);
    --core: min(350px, calc(var(--stage-h) - 60px));
    --core-top: calc((var(--stage-h) - var(--core)) / 2);
  }
  #platform .section-heading { margin-bottom: 44px; }
  #platform .tesseract-stage { height: var(--stage-h); flex-basis: var(--stage-h); }
  #platform .tesseract-core { top: var(--core-top); width: var(--core); height: var(--core); margin-left: calc(var(--core) / -2); }
  #platform .tesseract-halo { top: calc(var(--core-top) + var(--core) * .043); width: calc(var(--core) - 10px); height: calc(var(--core) * .829); left: calc(50% - (var(--core) - 10px) / 2); }
  #platform .tesseract-shadow { top: calc(var(--core-top) + var(--core) * .809); width: calc(var(--core) * .543); left: calc(50% - var(--core) * .2714); }
  #platform .tesseract-stage :is(.orbit-c, .orbit-e) { top: calc(var(--stage-h) * .3143); }
  #platform .tesseract-stage :is(.orbit-f, .orbit-g) { top: calc(var(--stage-h) * .5952); }
}
/* Caption room = its longest layer at that width (2, 3 or 4 lines of text plus 14px), so the layout does not
   change height between layers. English runs one line longer. */
@media (min-width: 901px) { #platform { --caption-h: 126px; } html[lang=en] #platform { --caption-h: 154px; } }
@media (min-width: 1000px) { #platform { --caption-h: 98px; } html[lang=en] #platform { --caption-h: 126px; } }
@media (min-width: 1366px) { html[lang=en] #platform { --caption-h: 98px; } }
@media (min-width: 1440px) { #platform { --caption-h: 70px; } }
/* Laptop-height windows: tighten the heading too, so all of it still fits. */
@media (min-width: 901px) and (max-height: 820px) {
  #platform { --stage-h: clamp(290px, calc(100vh - 321px - var(--caption-h)), 420px); }
  #platform .section-heading { margin-bottom: 32px; }
  #platform .section-heading > p { margin-top: 24px; }
}

/* Platform introduction and mobile stage navigation. */
#platform .section-heading > p {
  width: 100%; max-width: none; margin-left: 0; text-align: left;
}
@media (min-width: 901px) {
  #platform .section-heading > p br { display: initial; }
}
@media (max-width: 900px) {
  #platform .platform-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #platform .platform-graphic { display: contents; }
  /* Layer buttons lead, then the caption, then the stage they describe. */
  #platform .tesseract-stage { grid-row: 3; }
  #platform .layer-controls {
    grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%;
  }
  #platform .layer-tab {
    justify-content: center; min-width: 0; min-height: 76px; padding: 12px 4px;
    text-align: center; border: 1px solid var(--line); border-radius: 6px; gap: 0;
  }
  #platform .layer-tab.active { padding: 12px 3px; border: 2px solid color-mix(in srgb, var(--tab-accent) 80%, var(--ink)); background: linear-gradient(180deg, color-mix(in srgb, var(--tab-accent) 10%, #fff), #fff); }
  #platform .layer-tab::before { display: none; }
  #platform .layer-tab strong { font-size: clamp(12px, 3.4vw, 20px); letter-spacing: -.025em; }
  #platform .layer-tab small { font-size: 12px; margin-top: 5px; }
  #platform .layer-arrow { display: none; }
  #platform .layer-tab > span:first-child { transform: none; }
  #platform .layer-panel { grid-row: 2; width: 100%; min-height: 0; padding: 0 4px; }
}
/* While the layers advance on their own, the active tab's underline fills over the time it stays. */
#platform.is-autoplaying .layer-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; transform-origin: left;
  background: color-mix(in srgb, var(--tab-accent) 75%, var(--ink)); animation: layer-autoplay var(--autoplay-ms, 8s) linear both;
}
@media (max-width: 900px) { #platform.is-autoplaying .layer-tab.active::after { left: 8px; right: 8px; bottom: 5px; } }
@keyframes layer-autoplay { from { scale: 0 1; } }


#platform .layer-panel { text-align: left; }
@media (min-width: 901px) { #platform .section-heading { display: block; } #platform .section-heading > p { margin-top: 24px; } }
@media (max-width: 900px) { #platform .layer-panel { min-height: 120px; } }
@media (prefers-reduced-motion: reduce) { #platform .layer-tab::before, #platform .layer-tab > span { transition: none; } #layer-panel > * { animation: none; } }

/* Keep all three layer selectors together underneath the cube on every screen. */
#platform .platform-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 24px; max-width: 900px; margin-inline: auto; }
#platform .platform-graphic { display: contents; }
#platform .layer-panel { grid-column: 1; grid-row: 1; width: 100%; padding-inline: 0; }
#platform .tesseract-stage { grid-column: 1; grid-row: 2; }
#platform .layer-controls { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; align-self: start; }
#platform .layer-tab, #platform .layer-tab.active { min-width: 0; min-height: 88px; padding: 16px 12px; justify-content: center; text-align: center; border: 1px solid var(--line); border-radius: 6px; }
#platform .layer-tab.active { border-color: color-mix(in srgb, var(--tab-accent) 80%, var(--ink)); background: color-mix(in srgb, var(--tab-accent) 6%, #fff); }
#platform .layer-tab::before { display: none; }
#platform .layer-tab > span:first-child { transform: none; }
#platform .layer-arrow { display: none; }
#platform .layer-tab strong { font-size: clamp(16px, 2vw, 22px); }
#platform .layer-tab small { font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) {
  #platform .layer-controls { gap: 8px; }
  #platform .layer-tab, #platform .layer-tab.active { min-height: 82px; padding: 12px 4px; }
  #platform .layer-tab strong { font-size: clamp(12px, 3.4vw, 20px); }
  #platform .layer-tab small { font-size: 12px; }
}
.bio-ontol-visual {
  margin: 48px 0;
}
.bio-ontol-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}


#main .section-eyebrow { width: auto; max-width: none; margin: 0 0 20px; color: var(--body); font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; }
@media (max-width: 900px) { #main .section-eyebrow { margin-bottom: 14px; font-size: 13px; } }
.patients-app-visual .patients-app-screens { overflow: hidden; }
.patients-app-screens text { font-family: Arial, sans-serif; letter-spacing: -.2px; }
.patients-app-screen { opacity: 0; transition: opacity 650ms ease-in-out; }
.patients-app-screen.is-active { opacity: 1; }
.ontol-record-popup { transform: translateY(28px); transition: transform 600ms cubic-bezier(.16,1,.3,1); }
.patients-app-screen.is-active .ontol-record-popup { transform: translateY(0); }
.ontol-answer-line, .ontol-question-enter { opacity: 1; }
.patients-app-screen.is-active .ontol-answer-line { animation: ontol-response 360ms ease-out both; animation-delay: var(--line-delay, 0ms); }
.patients-app-screen.is-active .ontol-question-enter { animation: ontol-response 450ms ease-out both; }
.patients-app-visual:not(.is-app-playing) .ontol-answer-line,
.patients-app-visual:not(.is-app-playing) .ontol-question-enter { animation-play-state: paused; }
@keyframes ontol-response { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.ontol-typing-dot { animation: ontol-typing 1100ms ease-in-out infinite; animation-play-state: paused; }
.is-app-playing .patients-app-screen.is-active .ontol-typing-dot { animation-play-state: running; }
@keyframes ontol-typing { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .patients-app-screen { transition: none; }
  .ontol-record-popup { transition: none; transform: none; }
  .ontol-typing-dot { animation: none; }
  .patients-app-screen.is-active .ontol-answer-line,
  .patients-app-screen.is-active .ontol-question-enter { animation: none; }
}