:root {
  color-scheme: dark;
  --bg: #090f18;
  --bg-deep: #070c14;
  --surface: #101c2a;
  --surface-soft: #132235;
  --line: rgba(129, 178, 223, .16);
  --line-bright: rgba(88, 184, 255, .37);
  --text: #f4f8ff;
  --muted: #a7b6c9;
  --muted-dim: #8195ae;
  --blue: #49a9ff;
  --cyan: #59dcf2;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: "Segoe UI Variable", "Segoe UI", Inter, Arial, sans-serif; font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: #4cbfff; color: #08111d; }
:focus-visible { outline: 2px solid #76d5ff; outline-offset: 4px; }
[hidden] { display: none !important; }
.shell { width: min(100% - 3rem, 1320px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 1rem; padding: .7rem 1rem; background: var(--blue); color: #07111b; border-radius: .5rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }
.gradient-text { background: linear-gradient(105deg, #64def4 8%, #44a5ff 65%, #688dff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { margin: 0 0 1rem; color: #78caff; font-size: .75rem; font-weight: 800; letter-spacing: .25em; line-height: 1.5; }
.eyebrow-line { display: inline-block; width: 1.6rem; height: 1px; vertical-align: middle; margin-right: .8rem; background: #7aceff; }
.accent-period { color: var(--blue); }
.dot { margin-inline: .24rem; color: #6aaed9; }

.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(123, 172, 221, .13); background: rgba(8, 15, 25, .84); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.header-inner { height: 76px; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .85rem; white-space: nowrap; }
.brand-mark { display: inline-block; font-family: Arial, sans-serif; font-size: 2.55rem; font-weight: 950; line-height: 1; letter-spacing: -.1em; padding-right: .1em; color: #55baff; text-shadow: 0 0 27px rgba(56, 166, 255, .25); }
.brand-name { font-weight: 800; font-size: .96rem; letter-spacing: .19em; }
.site-nav { display: flex; align-items: center; justify-content: center; gap: 1.8rem; margin-left: auto; margin-right: auto; height: 100%; }
.nav-link { display: inline-flex; align-items: center; height: 100%; position: relative; color: #c3cedd; font-size: .87rem; transition: color .2s ease; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: center; transition: transform .2s ease; }
.nav-link:hover, .nav-link.is-active { color: #6bc5ff; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.header-contact { white-space: nowrap; border: 1px solid var(--line-bright); color: #d8efff; border-radius: 9px; padding: .58rem .85rem; font-size: .84rem; font-weight: 700; transition: background .2s, border-color .2s; }
.header-contact:hover { background: rgba(80, 173, 255, .1); border-color: #69bdff; }
.header-contact span { margin-left: .45rem; color: var(--blue); }
.menu-toggle { display: none; }

.hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 50% 65% at 78% 41%, rgba(12, 93, 162, .35), transparent 76%), radial-gradient(ellipse 50% 60% at 6% 85%, rgba(12, 39, 69, .48), transparent 72%), #0a121d; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .36; background-image: linear-gradient(rgba(83, 168, 243, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 168, 243, .06) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to right, transparent 5%, #000 70%); }
.hero-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(20, 118, 218, .14); filter: blur(95px); top: -220px; right: 0; z-index: -1; }
.hero-grid { min-height: 630px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: min(5vw, 80px); padding-block: 80px 84px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(3.25rem, 5.1vw, 5.1rem); font-weight: 800; line-height: 1.075; letter-spacing: -.055em; }
.hero-lede { max-width: 600px; margin: 1.55rem 0 0; color: #ced9e8; font-size: clamp(1.07rem, 1.28vw, 1.22rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .88rem; margin-top: 2.3rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; min-height: 52px; padding: .78rem 1.45rem; border-radius: 10px; font-size: .9rem; font-weight: 750; line-height: 1.2; transition: transform .22s, box-shadow .22s, background .22s, border-color .22s; }
.button:hover:not(:disabled) { transform: translateY(-3px); }
.button-primary { border: 1px solid #6cd6ff; color: #071321; background: linear-gradient(110deg, #4c9eff, #55dbf1); box-shadow: 0 10px 28px rgba(31, 152, 255, .2), inset 0 1px rgba(255, 255, 255, .35); }
.button-primary:hover:not(:disabled) { box-shadow: 0 16px 32px rgba(31, 152, 255, .35); }
.button-outline { border: 1px solid rgba(105, 188, 253, .68); background: rgba(10, 27, 44, .62); color: #e9f7ff; }
.button-outline:hover { background: rgba(39, 103, 151, .22); border-color: #80d5ff; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; margin-top: 3.7rem; color: #aabbd0; font-size: .85rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: .55rem; }
.meta-symbol { color: #56b6ff; font-size: 1.12rem; font-weight: 750; }
.hero-visual { position: relative; width: 100%; min-width: 0; }
.visual-frame { position: relative; aspect-ratio: 1.18; max-height: 530px; overflow: visible; border-radius: 21px; background: #122437; border: 1px solid rgba(104, 174, 231, .3); box-shadow: 0 30px 100px rgba(0, 0, 0, .52), 0 0 90px rgba(24, 135, 248, .12); transform: perspective(1100px) rotateY(-3deg) rotateX(1.5deg); }
.visual-frame > img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; object-position: 58% center; }
.visual-shade { position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(90deg, rgba(7, 20, 35, .52), transparent 47%), linear-gradient(0deg, rgba(7, 17, 28, .4), transparent 35%); pointer-events: none; }
.visual-chip { position: absolute; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid rgba(110, 193, 255, .35); border-radius: 12px; background: rgba(8, 23, 39, .88); box-shadow: 0 12px 35px rgba(0, 0, 0, .22); backdrop-filter: blur(12px); color: #dfeeff; font-size: .86rem; line-height: 1.3; }
.visual-chip-top { top: 12%; left: -8%; }
.visual-chip-bottom { right: -4%; bottom: 13%; }
.visual-chip small { display: block; color: #7cb8e9; font-size: .65rem; font-weight: 800; letter-spacing: .15em; margin-bottom: .14rem; }
.visual-chip strong { font-size: 1rem; }
.visual-chip-bottom strong { color: #72cdff; font-weight: 650; }
.chip-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 8px; background: rgba(69, 160, 255, .14); color: #5bbbff; font-family: Georgia, serif; font-size: 1.55rem; }
.chip-pulse { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #51c9ff; box-shadow: 0 0 0 5px rgba(81, 201, 255, .12), 0 0 16px #51c9ff; }
.visual-caption { position: absolute; right: 0; bottom: -2.1rem; color: #5c86a8; font-size: .68rem; font-weight: 750; letter-spacing: .24em; }
.hero-module-cells { position: absolute; z-index: 1; top: 34%; left: 4%; width: 37%; display: grid; grid-template-columns: 1fr; gap: .5rem; }
.hero-module-cell { min-width: 0; display: grid; align-content: start; gap: .2rem; padding: .58rem .7rem; border: 1px solid rgba(104, 174, 231, .28); border-radius: 10px; background: rgba(7, 23, 39, .86); box-shadow: 0 10px 25px rgba(0, 0, 0, .18); backdrop-filter: blur(10px); color: #dcecff; }
.hero-module-cell > span { color: #54bafb; font-size: 1.12rem; line-height: 1; }
.hero-module-cell strong { font-size: .79rem; line-height: 1.25; }
.hero-module-cell small { color: #98b2c9; font-size: .69rem; line-height: 1.3; }
@media (max-width: 600px) { .hero-module-cells { top: 30%; left: 3%; width: 42%; gap: .32rem; } .hero-module-cell { padding: .35rem .4rem; border-radius: 7px; } .hero-module-cell > span { font-size: .85rem; } .hero-module-cell strong { font-size: .64rem; } .hero-module-cell small { font-size: .57rem; } }
@media (max-width: 420px) { .hero-module-cell small { display: none; } }
.hero-bottom-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(80, 173, 255, .2), transparent); }

.section { padding-block: 105px; scroll-margin-top: 75px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.1rem; }
.section-heading h2, .about-copy h2, .tools-layout h2, .contact-copy h2 { margin: 0; font-size: clamp(2.3rem, 3.5vw, 3.65rem); line-height: 1.12; letter-spacing: -.045em; }
.section-intro { max-width: 360px; margin: 0 0 .4rem; color: var(--muted); font-size: 1rem; }
.projects-section { background: radial-gradient(circle at 2% 90%, rgba(31, 86, 151, .12), transparent 36%), #090f18; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.project-card { position: relative; min-height: 350px; isolation: isolate; overflow: hidden; border: 1px solid rgba(113, 173, 225, .26); border-radius: 14px; background: #102032; box-shadow: inset 0 1px rgba(255, 255, 255, .04); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.project-card:hover { transform: translateY(-5px); border-color: rgba(111, 196, 255, .65); box-shadow: var(--shadow); }
.project-card-featured { grid-column: span 7; min-height: 420px; }
.project-card-road { grid-column: span 5; min-height: 420px; }
.project-card-md, .project-card-kr { grid-column: span 6; }
.project-card > img { position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; transition: transform .7s ease; }
.project-card:hover > img { transform: scale(1.045); }
.project-card-overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8, 18, 30, .98) 0%, rgba(8, 18, 30, .87) 38%, rgba(8, 18, 30, .35) 78%), linear-gradient(0deg, rgba(5, 14, 25, .58), transparent 70%); }
.project-card-road .project-card-overlay { background: linear-gradient(90deg, rgba(8, 18, 30, .98), rgba(8, 18, 30, .76) 48%, rgba(8, 18, 30, .25)), linear-gradient(0deg, rgba(5, 14, 25, .58), transparent 75%); }
.project-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: inherit; padding: 1.7rem; }
.project-card-featured .project-content { padding: 2rem; }
.card-topline { display: flex; justify-content: space-between; align-items: start; gap: .7rem; }
.project-index { color: rgba(219, 235, 251, .55); font-size: .78rem; font-weight: 700; letter-spacing: .16em; }
.status-pill { display: inline-flex; align-items: center; gap: .46rem; width: max-content; max-width: 100%; border: 1px solid rgba(91, 188, 248, .32); border-radius: 100px; padding: .4rem .69rem; background: rgba(7, 31, 52, .62); color: #91d6ff; font-size: .73rem; font-weight: 750; line-height: 1.1; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #61d9ef; box-shadow: 0 0 8px #53cdf8; }
.project-bottom { max-width: min(100%, 460px); }
.category { display: block; color: #78c7ff; font-size: .68rem; font-weight: 850; letter-spacing: .15em; line-height: 1.5; }
.project-bottom h3 { margin: .55rem 0 .45rem; font-size: clamp(1.7rem, 2.3vw, 2.4rem); letter-spacing: -.04em; line-height: 1.16; }
.project-card-featured h3 { font-size: 3.2rem; }
.project-bottom p { max-width: 410px; margin: 0 0 1.4rem; color: #c7d4e3; font-size: .96rem; line-height: 1.55; }
.card-link { display: inline-flex; align-items: center; gap: .7rem; color: #e7f5ff; font-size: .88rem; font-weight: 750; border-bottom: 1px solid rgba(95, 190, 255, .62); padding-bottom: .28rem; transition: gap .2s, color .2s; }
.card-link span { color: #6ecbff; }
.card-link:hover { gap: 1rem; color: #6ed3ff; }
.image-note { margin: .85rem 0 0; color: #7d92aa; font-size: .76rem; text-align: right; }

.development-section { background: radial-gradient(ellipse 50% 20% at 50% 0%, rgba(37, 103, 175, .13), transparent), #0b1522; border-top: 1px solid rgba(121, 165, 213, .1); border-bottom: 1px solid rgba(121, 165, 213, .1); }
.section-heading-stacked { align-items: end; }
.progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.progress-card { display: flex; flex-direction: column; min-height: 330px; border: 1px solid var(--line); border-radius: 14px; padding: 1.75rem; background: linear-gradient(135deg, rgba(22, 44, 69, .7), rgba(13, 25, 40, .9) 62%); box-shadow: inset 0 1px rgba(255, 255, 255, .035); transition: border-color .25s, transform .25s; }
.progress-card:hover { border-color: rgba(91, 180, 250, .52); transform: translateY(-3px); }
.progress-top { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.progress-number { color: #547a9d; font-weight: 800; letter-spacing: .14em; font-size: .83rem; }
.progress-card h3 { margin: 1.1rem 0 .55rem; font-size: 1.55rem; letter-spacing: -.035em; }
.progress-work { margin: 0; min-height: 3.75rem; color: #c9d4e2; font-size: .95rem; }
.progress-work span { display: block; margin-bottom: .22rem; color: #79b7e0; font-size: .66rem; font-weight: 850; letter-spacing: .14em; }
.progress-measure { margin-top: auto; padding-top: 1.4rem; }
.progress-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; color: #bbc9d9; font-size: .84rem; }
.progress-label strong { color: #83d5ff; font-weight: 700; }
.progress-track { width: 100%; height: 9px; border-radius: 100px; border: 1px solid rgba(88, 159, 217, .17); background: repeating-linear-gradient(115deg, rgba(72, 138, 187, .16) 0 4px, rgba(27, 56, 84, .25) 4px 9px), #132a3e; }
.progress-facts { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin-top: .8rem; color: #91a6bc; font-size: .76rem; }
.progress-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; border-top: 1px solid var(--line); margin-top: 1.35rem; padding-top: 1rem; color: #8299ae; font-size: .76rem; }
.text-link { border: 0; padding: 0; background: transparent; color: #78c9ff; font-weight: 750; font-size: .8rem; white-space: nowrap; }
.text-link span { margin-left: .3rem; }
.text-link:hover { color: #b9e9ff; }
.roadmap { scroll-margin-top: 95px; margin-top: 6.2rem; }
.roadmap-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.roadmap-heading h3 { margin: 0; font-size: clamp(1.9rem, 2.65vw, 2.55rem); letter-spacing: -.04em; line-height: 1.15; }
.roadmap-heading p:last-child { margin: 0 0 .2rem; color: var(--muted); }
.project-tabs { display: flex; width: 100%; gap: .55rem; overflow-x: auto; padding: 0 0 .8rem; scrollbar-color: #38628a #142336; }
.project-tab { flex: 0 0 auto; min-height: 43px; border: 1px solid var(--line); border-radius: 8px; padding: .6rem 1rem; background: rgba(17, 34, 52, .65); color: #a8bbcf; font-size: .86rem; font-weight: 750; transition: background .2s, color .2s, border-color .2s; }
.project-tab:hover { border-color: #54aeec; color: #d7efff; }
.project-tab[aria-selected="true"] { border-color: #52abed; background: rgba(50, 138, 218, .18); color: #8cdaff; }
.roadmap-panel { min-height: 380px; border: 1px solid rgba(101, 172, 227, .25); border-radius: 14px; padding: 2rem; background: linear-gradient(145deg, rgba(19, 40, 62, .88), rgba(11, 23, 37, .94)); }
.detail-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.detail-header h4 { margin: .35rem 0 0; font-size: 1.75rem; line-height: 1.2; letter-spacing: -.035em; }
.detail-header h4 span { display: block; margin-top: .2rem; color: #b5c7d8; font-size: .91rem; font-weight: 450; letter-spacing: normal; }
.version-row, .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1.55rem; }
.version-row > div, .metric-grid > div { min-width: 0; border: 1px solid rgba(123, 177, 220, .15); border-radius: 9px; padding: 1rem; background: rgba(8, 20, 33, .44); }
.version-row small, .metric-grid small, .history-box small { display: block; margin-bottom: .35rem; color: #7eb6db; font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.version-row strong, .metric-grid strong { color: #e5f2ff; font-size: .84rem; font-weight: 650; }
.metric-grid { grid-template-columns: repeat(4, 1fr); }
.detail-progress { margin-top: 1.45rem; }
.detail-progress span { display: block; margin-top: .5rem; color: #88a0b7; font-size: .78rem; text-align: right; }
.milestone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 1.8rem; }
.milestone-column { border-top: 1px solid rgba(115, 175, 223, .25); padding-top: 1rem; }
.milestone-column h5 { margin: 0 0 .7rem; color: #dcefff; font-size: .88rem; }
.milestone-column ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.milestone-column li { display: flex; align-items: start; gap: .57rem; color: #acbfd3; font-size: .86rem; line-height: 1.45; }
.milestone-symbol { flex: 0 0 1.2rem; text-align: center; font-weight: 850; }
.milestone-symbol.done { color: #5ad7d0; }.milestone-symbol.current { color: #54b8ff; }.milestone-symbol.planned { color: #869db8; font-size: 1.15rem; line-height: 1.1; }
.history-box { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.history-box p { margin: 0; color: #a5b9cc; font-size: .86rem; }.history-box > span { color: #5ebcf4; }

.about-section { background: radial-gradient(ellipse 50% 70% at 0% 50%, rgba(22, 62, 109, .12), transparent), var(--bg); }
.about-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: min(7vw, 100px); align-items: center; }
.about-copy h2 { max-width: 530px; }
.about-copy > p:last-child { max-width: 560px; margin: 1.5rem 0 0; color: #bdcddd; font-size: 1.06rem; line-height: 1.8; }
.areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.area-card { min-height: 180px; border: 1px solid var(--line); border-radius: 13px; padding: 1.35rem; background: linear-gradient(145deg, rgba(22, 39, 58, .9), rgba(13, 24, 37, .93)); transition: transform .25s, border-color .25s; }
.area-card:hover { transform: translateY(-4px); border-color: rgba(81, 171, 239, .46); }
.area-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; margin-bottom: 1rem; color: #65bfff; background: rgba(48, 143, 224, .12); border: 1px solid rgba(77, 169, 244, .24); font-family: Consolas, monospace; font-weight: 700; font-size: 1.1rem; }
.area-card h3 { margin: 0 0 .25rem; font-size: 1rem; }.area-card p { margin: 0; color: #a9bbcd; font-size: .88rem; line-height: 1.55; }
.tools-section { padding-top: 40px; background: var(--bg); }
.tools-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: center; border-top: 1px solid var(--line); padding-top: 85px; }
.tools-layout p:last-child { max-width: 440px; margin: 1rem 0 0; color: var(--muted); }
.tech-list { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-start; }
.tech-list span { border: 1px solid rgba(102, 171, 228, .27); border-radius: 8px; padding: .78rem 1.02rem; background: rgba(21, 42, 63, .58); color: #d5e8f8; font-size: .9rem; font-weight: 650; transition: border-color .2s, background .2s; }
.tech-list span:hover { border-color: #58b2ee; background: rgba(39, 95, 147, .2); }
.stats-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 55% 100% at 50% 50%, rgba(25, 73, 125, .14), transparent), #0b1623; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 2.7rem; }
.stats-grid > div { min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .3rem 1rem; text-align: center; border-right: 1px solid var(--line); }
.stats-grid > div:last-child { border-right: 0; }
.stats-grid strong { color: #58b7ff; font-size: clamp(2.45rem, 3vw, 3.2rem); line-height: 1; letter-spacing: -.05em; }
.stats-grid span { margin-top: .45rem; color: #b4c6d8; font-size: .86rem; }
.stats-grid .pending-stat { color: #4d7697; }.stats-grid small { display: block; color: #8098af; font-size: .71rem; }

.contact-section { background: radial-gradient(ellipse 40% 50% at 94% 80%, rgba(27, 90, 154, .12), transparent), var(--bg-deep); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: min(8vw, 110px); align-items: start; }
.contact-copy h2 { max-width: 520px; }.contact-copy > p:nth-of-type(2) { max-width: 440px; margin: 1.5rem 0 0; color: #b4c5d7; font-size: 1.02rem; }
.contact-links { display: grid; gap: .7rem; max-width: 430px; margin-top: 2rem; }
.contact-links > span { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: .75rem 0; font-size: .93rem; font-weight: 650; }
.contact-links small { color: #859bb1; font-size: .77rem; font-weight: 450; }
.form-card { border: 1px solid rgba(104, 175, 230, .23); border-radius: 15px; padding: 2rem; background: linear-gradient(145deg, #14253a, #0e1a2a); box-shadow: var(--shadow); }
.form-card h3 { margin: 0; font-size: 1.55rem; letter-spacing: -.03em; }.form-card > p { margin: .4rem 0 1.5rem; color: #a6bbce; font-size: .88rem; }
.form-field { display: grid; align-content: start; gap: .42rem; margin-bottom: 1rem; }.form-field label { color: #d9e7f4; font-size: .86rem; font-weight: 650; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid rgba(119, 173, 215, .25); border-radius: 8px; padding: .83rem .95rem; background: #0b1725; color: var(--text); outline: none; transition: border-color .2s, box-shadow .2s; }
.form-field textarea { resize: vertical; min-height: 120px; }.form-field input::placeholder, .form-field textarea::placeholder { color: #7289a0; }
.form-field input:focus, .form-field textarea:focus { border-color: #58bcf9; box-shadow: 0 0 0 3px rgba(65, 166, 244, .12); }
.form-submit { width: 100%; margin-top: .35rem; }.form-submit:disabled { opacity: .52; cursor: not-allowed; box-shadow: none; }
.form-note { margin: .65rem 0 0; color: #8fa5ba; font-size: .77rem; text-align: center; }
.site-footer { border-top: 1px solid var(--line); background: #0a111b; }
.footer-layout { display: flex; align-items: center; gap: 1.5rem; min-height: 104px; }
.footer-layout .brand-mark { font-size: 2.1rem; }.footer-layout .brand-name { font-size: .85rem; }
.footer-layout p { margin: 0 auto 0 0; color: #8095ac; font-size: .8rem; }.footer-layout > span { color: #8297ac; font-size: .79rem; }.back-top { color: #7ac9fa; font-size: .8rem; font-weight: 700; white-space: nowrap; }.back-top:hover { color: #b4e9ff; }

@media (max-width: 1100px) {
  .site-nav { gap: 1rem; }.header-contact { display: none; }
  .hero-grid { gap: 2.2rem; min-height: 570px; }.hero h1 { font-size: clamp(3rem, 5.2vw, 4.3rem); }
  .project-bottom { max-width: 95%; }.project-card-overlay { background: linear-gradient(90deg, rgba(8, 18, 30, .96), rgba(8, 18, 30, .72) 59%, rgba(8, 18, 30, .28)), linear-gradient(0deg, rgba(5, 14, 25, .5), transparent 75%); }
}
@media (max-width: 800px) {
  .shell { width: min(100% - 2.25rem, 720px); }
  .header-inner { height: 67px; }.menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--line-bright); border-radius: 8px; background: rgba(23, 53, 82, .45); padding: 10px; }.menu-toggle span { height: 2px; border-radius: 2px; background: #a9d8fb; width: 100%; transition: transform .2s, opacity .2s; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; inset: 66px 0 auto; height: auto; margin: 0; padding: .6rem 1.125rem 1rem; background: rgba(8, 19, 31, .98); border-bottom: 1px solid var(--line-bright); box-shadow: 0 20px 30px rgba(0, 0, 0, .3); }.site-nav.is-open { display: grid; gap: 0; }.nav-link { height: 44px; padding: .35rem .5rem; }.nav-link::after { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 72px 75px; }.hero h1 { max-width: 670px; font-size: clamp(3rem, 7vw, 4.8rem); }.hero-meta { margin-top: 2.5rem; }.hero-visual { width: min(100% - 1.5rem, 650px); margin: 0 auto; }.visual-frame { aspect-ratio: 1.65; transform: none; }.visual-chip-top { left: -3%; }.visual-chip-bottom { right: -3%; }
  .section { padding-block: 80px; }.section-heading { align-items: start; flex-direction: column; gap: .7rem; }.section-intro { max-width: 560px; }
  .project-card-featured, .project-card-road, .project-card-md, .project-card-kr { grid-column: span 6; min-height: 390px; }
  .project-content, .project-card-featured .project-content { padding: 1.35rem; }.project-card-featured h3 { font-size: 2.3rem; }
  .project-bottom p { font-size: .9rem; }.category { font-size: .63rem; }.project-card-overlay, .project-card-road .project-card-overlay { background: linear-gradient(0deg, rgba(7, 17, 28, .98) 5%, rgba(7, 17, 28, .72) 55%, rgba(7, 17, 28, .24) 100%); }
  .progress-card { padding: 1.25rem; }.progress-footer { align-items: start; flex-direction: column; }
  .roadmap { margin-top: 4.6rem; }.milestone-grid { gap: 1rem; }
  .about-layout, .tools-layout { grid-template-columns: 1fr; gap: 2.4rem; }.tools-layout { padding-top: 70px; }.contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }.contact-copy h2 { max-width: 700px; }
}
@media (max-width: 600px) {
  .shell { width: min(100% - 2rem, 480px); }.brand-name { font-size: .85rem; }.brand-mark { font-size: 2.25rem; }
  .hero-grid { padding-block: 59px 65px; }.hero .eyebrow { font-size: .62rem; letter-spacing: .16em; }.eyebrow-line { display: none; }.hero h1 { font-size: clamp(2.65rem, 11vw, 3.55rem); line-height: 1.08; }.hero-lede { font-size: 1rem; line-height: 1.6; }.hero-actions { gap: .7rem; margin-top: 1.8rem; }.hero-actions .button { flex: 1 1 auto; gap: .65rem; padding-inline: 1rem; }.hero-meta { gap: .5rem 1rem; font-size: .77rem; }
  .hero-visual { width: 100%; }.visual-frame { aspect-ratio: 1.35; }.visual-chip { padding: .5rem .6rem; font-size: .72rem; }.visual-chip-top { left: .5rem; top: .7rem; }.visual-chip-bottom { right: .5rem; bottom: .7rem; }.visual-chip small { font-size: .56rem; }.visual-chip strong { font-size: .82rem; }.chip-icon { width: 31px; height: 31px; }.visual-caption { display: none; }
  .section { padding-block: 68px; }.section-heading h2, .about-copy h2, .tools-layout h2, .contact-copy h2 { font-size: clamp(2.25rem, 10vw, 3rem); }.eyebrow { font-size: .69rem; letter-spacing: .18em; }
  .project-grid { gap: 14px; }.project-card-featured, .project-card-road, .project-card-md, .project-card-kr { grid-column: span 12; min-height: 360px; }.project-card-featured { min-height: 400px; }.project-bottom { max-width: 100%; }.project-bottom p { font-size: .91rem; }.project-card-featured h3 { font-size: 2.8rem; }
  .progress-grid { grid-template-columns: 1fr; gap: 14px; }.progress-card { min-height: 322px; padding: 1.3rem; }.progress-footer { flex-direction: row; }.roadmap-heading { display: block; }.roadmap-heading p:last-child { margin-top: .6rem; }.roadmap-panel { padding: 1.25rem; }.detail-header { flex-direction: column; }.version-row, .metric-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }.version-row > div, .metric-grid > div { padding: .75rem; }.milestone-grid { grid-template-columns: 1fr; gap: .8rem; }.milestone-column { padding-top: .8rem; }.milestone-column ul { gap: .35rem; }
  .areas-grid { gap: .7rem; }.area-card { padding: 1rem; min-height: 180px; }.area-card h3 { font-size: .92rem; }.area-card p { font-size: .81rem; }.tech-list span { font-size: .82rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); padding-block: 1.5rem; }.stats-grid > div:nth-child(2) { border-right: 0; }.stats-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.stats-grid > div { min-height: 115px; }
  .form-card { padding: 1.35rem; }.footer-layout { flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding-block: 1.4rem; }.footer-layout p { order: 3; flex: 1 0 100%; }.footer-layout > span { order: 4; }.back-top { order: 5; }
}
@media (max-width: 380px) {
  .hero-actions .button { flex-basis: 100%; }.hero-meta { flex-direction: column; }.project-bottom p { font-size: .86rem; }.status-pill { font-size: .66rem; }.progress-footer { flex-direction: column; }.areas-grid { grid-template-columns: 1fr; }.area-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Active portfolio: status, dashboard and project detail */
.status-pill--stable { border-color: rgba(85, 220, 164, .37); background: rgba(30, 104, 73, .24); color: #8ce8b8; }
.status-pill--stable .status-dot { background: #78dfa7; box-shadow: 0 0 8px #70d7a0; }
.status-pill--active { border-color: rgba(85, 181, 255, .4); background: rgba(26, 105, 173, .22); color: #9bd9ff; }
.status-pill--ongoing { border-color: rgba(242, 171, 93, .4); background: rgba(129, 76, 32, .24); color: #ffc38c; }
.status-pill--ongoing .status-dot { background: #f7ad65; box-shadow: 0 0 8px #e99b50; }
.status-pill--planned { border-color: rgba(154, 170, 188, .3); background: rgba(85, 103, 121, .15); color: #adb9c7; }
.card-topline { justify-content: flex-end; }
.project-card:hover { box-shadow: 0 24px 70px rgba(0, 0, 0, .3), 0 0 28px rgba(57, 159, 248, .13); }
.dashboard-legend { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; margin: -.25rem 0 1.45rem; }
.legend { display: inline-flex; align-items: center; gap: .48rem; color: #91a6bc; font-size: .77rem; }
.legend::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #99a8b8; }
.legend--stable::before { background: #69d8a1; }.legend--active::before { background: #55b8ff; }.legend--ongoing::before { background: #f3af70; }.legend--planned::before { background: #92a0af; }
.progress-grid { gap: 20px; }
.progress-card { position: relative; overflow: hidden; min-height: 350px; border-color: rgba(110, 170, 221, .21); padding: 1.8rem; background: radial-gradient(circle at 100% 0%, rgba(57, 130, 201, .12), transparent 46%), linear-gradient(145deg, #14263a, #0d1a2a 75%); }
.progress-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #418fca; opacity: .75; }
.progress-card--active { border-color: rgba(80, 177, 249, .42); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 0 34px rgba(36, 132, 224, .07); }
.progress-card--active::before { background: linear-gradient(#53d2ff, #367ef3); }
.progress-card--ongoing::before { background: linear-gradient(#f4b373, #a96536); }
.progress-card:hover { box-shadow: 0 15px 42px rgba(0,0,0,.19), 0 0 28px rgba(48, 155, 246, .13); }
.progress-kind { color: #739fbe; font-size: .69rem; font-weight: 850; letter-spacing: .16em; }
.progress-card h3 { margin-top: 1.5rem; font-size: clamp(1.6rem, 2.2vw, 2.15rem); }
.progress-work { min-height: 3.6rem; }
.dashboard-counts { display: flex; gap: .6rem; margin-top: auto; padding-top: 1.2rem; }
.dashboard-counts > div { flex: 1; min-width: 0; border: 1px solid rgba(99, 167, 224, .19); border-radius: 9px; background: rgba(5, 18, 30, .42); padding: .55rem .8rem; }
.dashboard-counts strong { display: block; color: #e7f5ff; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; }
.dashboard-counts span { display: block; color: #96acc0; font-size: .75rem; }
.count-scope { margin: .55rem 0 0; color: #88a3b8; font-size: .73rem; }
.dashboard-highlight { display: flex; align-items: baseline; gap: .85rem; margin-top: auto; padding-top: 1.5rem; }
.dashboard-highlight strong { color: #8bd6ff; font-size: 1.65rem; line-height: 1; letter-spacing: -.04em; }
.dashboard-highlight span { max-width: 240px; color: #9eb5ca; font-size: .77rem; }
.progress-footer { margin-top: 1.25rem; }
.progress-footer time { display: inline-block; margin-left: .2rem; color: #b9cadb; }
.roadmap-panel { min-height: 0; overflow: hidden; padding: 0 0 2rem; background: linear-gradient(145deg, #122336, #0c1929); }
.project-tab[aria-selected="true"] { box-shadow: 0 0 18px rgba(55, 158, 245, .16); }
.detail-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 310px; overflow: hidden; border-bottom: 1px solid var(--line); }
.detail-hero > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.detail-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(9, 23, 39, .98) 0%, rgba(9, 23, 39, .89) 36%, rgba(9, 23, 39, .2) 85%), linear-gradient(0deg, rgba(7, 18, 29, .5), transparent 60%); }
.detail-hero-copy { max-width: 660px; padding: 2.5rem; }
.detail-hero h4 { margin: .45rem 0 .75rem; font-size: clamp(2.7rem, 4.5vw, 4.7rem); line-height: 1.08; letter-spacing: -.05em; }
.detail-hero h4 small { display: block; margin-top: .25rem; color: #bad0e2; font-size: .42em; font-weight: 550; letter-spacing: -.015em; }
.detail-hero p { max-width: 580px; margin: 0 0 1.35rem; color: #d1dfec; font-size: 1rem; line-height: 1.65; }
.detail-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.6rem 2rem 0; }
.detail-meta-grid > div { min-width: 0; border: 1px solid rgba(105, 165, 214, .18); border-radius: 8px; padding: .85rem 1rem; background: rgba(5, 18, 31, .36); }
.detail-meta-grid small { display: block; margin-bottom: .34rem; color: #75b6df; font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.detail-meta-grid strong { color: #dfeefa; font-size: .86rem; font-weight: 650; }
.detail-gallery, .detail-block, .milestone-grid, .detail-stat-grid, .detail-history, .scoped-progress { margin-inline: 2rem; }
.detail-gallery { margin-top: 2.1rem; }
.detail-gallery h5, .detail-block h5, .detail-history h5, .scoped-progress h5 { margin: 0; font-size: 1.2rem; letter-spacing: -.025em; }
.detail-gallery figure { position: relative; overflow: hidden; width: min(100%, 780px); aspect-ratio: 2.15; margin: .9rem 0 0; border: 1px solid rgba(114, 174, 224, .22); border-radius: 10px; background: #0b1927; }
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.detail-gallery figcaption { position: absolute; right: .8rem; bottom: .7rem; border-radius: 5px; padding: .3rem .5rem; background: rgba(7, 18, 30, .82); color: #d4e6f5; font-size: .69rem; }
.detail-block { margin-top: 2.3rem; }
.detail-block-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.detail-block-heading > span, .detail-block-heading > time { color: #8baac3; font-size: .8rem; }
.phase-roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.phase-roadmap li { position: relative; min-height: 105px; border-top: 2px solid rgba(121, 160, 192, .27); padding-top: 1rem; }
.phase-roadmap li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border: 2px solid #67829a; border-radius: 50%; background: #11263a; }
.phase-roadmap .phase-current { border-color: #55b6ff; }
.phase-roadmap .phase-current::before { border-color: #6bc7ff; background: #66c2fa; box-shadow: 0 0 0 6px rgba(83, 178, 245, .14), 0 0 18px rgba(83, 178, 245, .5); }
.phase-roadmap li span { display: block; margin-bottom: .2rem; color: #7191ab; font-size: .7rem; font-weight: 850; letter-spacing: .15em; }
.phase-roadmap li strong { display: block; color: #e2f1fc; font-size: .97rem; }.phase-roadmap li small { color: #8ba4b9; font-size: .76rem; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 2.1rem; }
.detail-stat-grid--single { grid-template-columns: minmax(190px, 1fr) 2fr 2fr; }
.detail-stat-grid > div { border: 1px solid rgba(96, 158, 208, .2); border-radius: 9px; padding: 1rem; background: rgba(7, 24, 39, .52); }
.detail-stat-grid strong { display: block; color: #7bcfff; font-size: 1.38rem; line-height: 1.25; }
.detail-stat-grid span { display: block; margin-top: .25rem; color: #9eb3c6; font-size: .78rem; }
.detail-history { margin-top: 2.1rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.detail-history ol { margin: .95rem 0 0; padding: 0; list-style: none; }
.detail-history li { display: grid; grid-template-columns: 125px 1fr; gap: 1rem; align-items: baseline; }
.detail-history time { color: #78bcdf; font-size: .8rem; font-weight: 750; }.detail-history p { margin: 0; color: #b6c9d9; font-size: .89rem; }
.scoped-progress { margin-top: 2.2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.scoped-progress .metric-grid { margin-top: 1rem; }
.verified-progress { height: 10px; overflow: hidden; margin-top: 1rem; border-radius: 100px; background: #1a344b; border: 1px solid rgba(89, 169, 229, .22); }
.verified-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #387ff0, #60d1f5); box-shadow: 0 0 18px rgba(70, 183, 250, .5); transition: width 1.15s cubic-bezier(.2,.65,.2,1); }
.roadmap-panel.is-active .verified-progress-fill { width: var(--progress); }
.scoped-progress > p { margin: .7rem 0 0; color: #91a8bc; font-size: .8rem; }
.activity-section { background: radial-gradient(ellipse 40% 55% at 0% 30%, rgba(24, 88, 154, .12), transparent), #09121e; }
.activity-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: min(8vw, 110px); align-items: start; }
.activity-heading h2 { margin: 0; font-size: clamp(2.3rem, 3.5vw, 3.65rem); line-height: 1.12; letter-spacing: -.045em; }.activity-heading > p:last-child { max-width: 340px; color: #aebfd0; }
.activity-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0 0 0 1.65rem; list-style: none; }
.activity-timeline::before { content: ""; position: absolute; top: .6rem; bottom: 1.5rem; left: .4rem; width: 1px; background: linear-gradient(#65c0f6, rgba(73, 142, 201, .11)); }
.activity-timeline li { position: relative; display: grid; grid-template-columns: 115px 1fr; gap: 1.1rem; border-bottom: 1px solid rgba(113, 163, 203, .17); padding: 0 0 1.4rem; margin-bottom: 1.4rem; }
.activity-timeline li:last-child { border-bottom: 0; margin-bottom: 0; }
.activity-timeline li::before { content: ""; position: absolute; top: .55rem; left: -1.55rem; width: 9px; height: 9px; border-radius: 50%; background: #67caff; box-shadow: 0 0 0 5px rgba(86, 183, 243, .13), 0 0 15px rgba(83, 178, 245, .38); }
.activity-timeline time { color: #7cbce3; font-size: .83rem; white-space: nowrap; }.activity-timeline strong { display: block; color: #e6f4ff; font-size: .96rem; }.activity-timeline p { margin: .25rem 0 0; color: #aebfd1; font-size: .88rem; }
.stats-grid { grid-template-columns: repeat(3, 1fr); }
.stats-grid strong { color: #67c1ff; }
.contact-section { padding-block: 65px; }.contact-compact { text-align: center; }.contact-compact h2 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.045em; }.contact-compact p:last-child { max-width: 520px; margin: .8rem auto 0; color: #9cafc2; font-size: .9rem; }
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  html.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
}
@media (max-width: 800px) {
  .progress-card { padding: 1.35rem; min-height: 330px; }
  .detail-hero-copy { padding: 1.9rem; }.detail-meta-grid { margin-inline: 1.4rem; }
  .detail-gallery, .detail-block, .milestone-grid, .detail-stat-grid, .detail-history, .scoped-progress { margin-inline: 1.4rem; }
  .activity-layout { grid-template-columns: 1fr; gap: 2rem; }
  .activity-heading > p:last-child { max-width: 550px; }
}
@media (max-width: 600px) {
  .dashboard-legend { gap: .42rem .9rem; }.legend { font-size: .7rem; }
  .progress-card { min-height: 330px; }.progress-footer { flex-direction: row; }
  .detail-hero { min-height: 395px; align-items: end; }.detail-hero::before { background: linear-gradient(0deg, rgba(7, 19, 32, .98) 2%, rgba(7, 19, 32, .84) 45%, rgba(7, 19, 32, .09) 100%); }.detail-hero > img { object-position: 65% top; }.detail-hero-copy { padding: 1.3rem; }.detail-hero h4 { font-size: 2.8rem; }.detail-hero p { font-size: .91rem; }
  .detail-meta-grid { grid-template-columns: 1fr; margin: 1rem 1rem 0; gap: .55rem; }.detail-meta-grid > div { padding: .7rem .8rem; }
  .detail-gallery, .detail-block, .milestone-grid, .detail-stat-grid, .detail-history, .scoped-progress { margin-inline: 1rem; }
  .detail-gallery figure { aspect-ratio: 1.5; }.phase-roadmap { grid-template-columns: repeat(2, 1fr); gap: .7rem; }.phase-roadmap li { min-height: 88px; }
  .detail-stat-grid, .detail-stat-grid--single { grid-template-columns: 1fr; }.detail-history li { grid-template-columns: 1fr; gap: .2rem; }.detail-history p { margin-bottom: .5rem; }
  .scoped-progress .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.scoped-progress .metric-grid > div { padding: .7rem; }
  .activity-timeline li { grid-template-columns: 1fr; gap: .25rem; }.activity-timeline time { font-size: .78rem; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }.stats-grid > div, .stats-grid > div:nth-child(-n+2) { min-height: 96px; border-bottom: 0; border-right: 1px solid var(--line); }.stats-grid > div:last-child { border-right: 0; }.stats-grid span { font-size: .73rem; }
}
@media (max-width: 380px) {
  .dashboard-counts strong { font-size: 1rem; }.progress-footer { flex-direction: column; }
  .stats-grid > div { padding-inline: .35rem; }.stats-grid strong { font-size: 2.1rem; }
}

/* Scoped project metrics, completed releases and swappable media */
.project-card-expanded { grid-column: span 6; }
.project-card-kr { grid-column: span 12; }
.progress-card--stable { border-color: rgba(101, 217, 156, .29); background: radial-gradient(circle at 100% 0%, rgba(58, 137, 102, .1), transparent 48%), linear-gradient(145deg, #14263a, #0d1a2a 75%); }
.progress-card--stable::before { background: linear-gradient(#79dfa9, #357f5b); }
.progress-card--stable:hover { border-color: rgba(115, 226, 170, .53); box-shadow: 0 15px 42px rgba(0,0,0,.19), 0 0 26px rgba(92, 205, 143, .09); }
.release-checks { display: grid; gap: .37rem; margin: auto 0 0; padding: 1rem 0 0; list-style: none; color: #9ce6bb; font-size: .91rem; font-weight: 650; }
.availability-label { color: #a5cbb4; }
.release-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2rem; margin: 1.8rem 2rem 0; padding: 1.15rem 1.3rem; border: 1px solid rgba(96, 205, 151, .22); border-radius: 9px; background: rgba(29, 99, 70, .11); }
.release-detail .release-checks { padding: 0; margin: 0 auto 0 0; }
.workshop-button[aria-disabled="true"] { color: #a9c7db; background: rgba(17, 43, 65, .65); border-color: rgba(105, 175, 226, .28); cursor: default; }
.workshop-button[aria-disabled="true"]:hover { transform: none; background: rgba(17, 43, 65, .65); border-color: rgba(105, 175, 226, .28); }
.lex-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: auto; padding-top: 1.2rem; }
.lex-metrics > div { min-width: 0; padding: .72rem .65rem; border: 1px solid rgba(99, 167, 224, .19); border-radius: 9px; background: rgba(5, 18, 30, .42); }
.lex-metrics span, .lex-metrics small { display: block; color: #a4b9cb; font-size: .74rem; line-height: 1.35; }
.lex-metrics strong { display: block; margin: .35rem 0 .2rem; color: #e7f5ff; font-size: 1.17rem; line-height: 1.1; white-space: nowrap; }
.lex-metrics small { color: #89dcb5; }
.dashboard-package { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem; margin-top: auto; padding-top: 1.4rem; }
.dashboard-package > span { flex: 1 0 100%; color: #88b7d5; font-size: .7rem; font-weight: 850; letter-spacing: .13em; }
.dashboard-package strong { color: #8bd6ff; font-size: 1.7rem; line-height: 1; letter-spacing: -.04em; }
.dashboard-package small { color: #a6bcce; font-size: .79rem; }
.scoped-dashboard-progress { margin-top: auto; padding-top: 1.2rem; }
.scoped-dashboard-progress > div:first-child { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.scoped-dashboard-progress > div:first-child span { color: #d1e6f5; font-weight: 750; }
.scoped-dashboard-progress > div:first-child strong { color: #8bd6ff; font-size: 1.38rem; }
.scoped-dashboard-progress p { margin: .1rem 0 0; color: #aac4d9; font-size: .9rem; }
.scoped-dashboard-progress .verified-progress { margin-top: .6rem; }
.scoped-dashboard-progress .verified-progress-fill { width: var(--progress); }
.scoped-dashboard-progress small { display: block; margin-top: .5rem; color: #a7bfd1; }
.scoped-dashboard-progress small strong { color: #e5f3fc; }
.motion-ready .progress-card:not(.is-visible) .scoped-dashboard-progress .verified-progress-fill { width: 0; }
.phase-roadmap--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem; }
.phase-roadmap--short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phase-roadmap .phase-done { border-color: #6aca97; }
.phase-roadmap .phase-done::before { border-color: #6aca97; background: #6aca97; box-shadow: 0 0 0 5px rgba(86, 190, 130, .12); }
.detail-gallery .gallery-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .8rem; margin-top: .9rem; }
.detail-gallery .gallery-items figure { width: 100%; margin: 0; }
.detail-gallery .gallery-items figure[data-orientation="portrait"] { aspect-ratio: .8; max-width: 380px; }
.detail-gallery .gallery-items figure[data-orientation="portrait"] img { object-fit: contain; }
.roadmap-panel[data-project-panel="lex"] .detail-hero > img { width: 57%; left: auto; object-fit: cover; object-position: right center; background: #0b1828; }
@media (max-width: 600px) { .roadmap-panel[data-project-panel="lex"] .detail-hero > img { width: 100%; object-position: 66% center; } }
.detail-history > p { margin: .8rem 0 0; color: #b6c9d9; font-size: .89rem; }
@media (max-width: 800px) {
  .project-card-expanded { grid-column: span 6; min-height: 390px; }
  .project-card-kr { grid-column: span 12; }
  .release-detail { margin-inline: 1.4rem; }
  .phase-roadmap--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .project-card-expanded, .project-card-kr { grid-column: span 12; min-height: 370px; }
  .lex-metrics { grid-template-columns: 1fr; gap: .4rem; }
  .lex-metrics > div { display: grid; grid-template-columns: 1fr auto; column-gap: .7rem; align-items: baseline; padding: .55rem .7rem; }
  .lex-metrics strong { margin: 0; font-size: 1rem; }
  .lex-metrics small { grid-column: 1 / -1; }
  .release-detail { margin-inline: 1rem; }
  .phase-roadmap--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Earlier community websites, visually separate from current development */
.web-projects-section { border-top: 1px solid rgba(121, 165, 213, .1); background: radial-gradient(circle at 92% 18%, rgba(29, 91, 153, .13), transparent 35%), #0a1420; }
.project-card-road > img, .project-card-expanded > img, .project-card-md > img, .project-card-kr > img { object-fit: contain; object-position: right center; background: #0b1828; }
.roadmap-panel[data-project-panel="road56"] .detail-hero > img,
.roadmap-panel[data-project-panel="expanded"] .detail-hero > img,
.roadmap-panel[data-project-panel="millennium"] .detail-hero > img,
.roadmap-panel[data-project-panel="kaiserreich"] .detail-hero > img { object-fit: contain; object-position: right center; background: #0b1828; }
.detail-gallery .gallery-items figure a { display: block; width: 100%; height: 100%; }
.roadmap-panel[data-project-panel="road56"] .detail-gallery figure,
.roadmap-panel[data-project-panel="expanded"] .detail-gallery figure,
.roadmap-panel[data-project-panel="millennium"] .detail-gallery figure,
.roadmap-panel[data-project-panel="kaiserreich"] .detail-gallery figure { max-width: 499px; aspect-ratio: 1; }
.hero-copy > .eyebrow { margin-bottom: .55rem; }
.hero-identity { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 1rem; color: #d9eaf8; font-size: .93rem; font-weight: 750; }
.hero-identity span { border: 1px solid rgba(99, 178, 233, .3); border-radius: 100px; padding: .22rem .65rem; background: rgba(48, 115, 172, .13); color: #83cdf6; font-size: .75rem; font-weight: 650; }
.web-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.web-project-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid rgba(113, 173, 225, .24); border-radius: 14px; background: linear-gradient(155deg, #14263a, #0e1b2a); box-shadow: inset 0 1px rgba(255,255,255,.04); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.web-project-card:hover { transform: translateY(-5px); border-color: rgba(102, 189, 249, .58); box-shadow: 0 22px 52px rgba(0,0,0,.25), 0 0 25px rgba(53, 154, 236, .1); }
.web-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: #09131f; }
.web-card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(9, 20, 33, .2), transparent 50%); }
.web-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .55s ease; }
.web-project-card:hover .web-card-media img { transform: scale(1.035); }
.web-card-body { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding: 1.45rem; }
.status-pill--past { border-color: rgba(154, 170, 188, .3); background: rgba(89, 105, 126, .16); color: #bfccda; }
.web-card-body > .category { margin-top: 1.2rem; }
.web-card-body h3 { margin: .45rem 0 .1rem; font-size: clamp(1.45rem, 1.8vw, 1.85rem); line-height: 1.17; letter-spacing: -.035em; }
.web-project-community { margin: .35rem 0 .75rem !important; color: #8cc9ed !important; font-size: .81rem !important; font-weight: 700; }
.web-card-body > p:not(.web-project-community) { margin: 0 0 1.5rem; color: #c0d1e0; font-size: .94rem; line-height: 1.6; }
.web-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: auto; }
.web-visit-link { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(94, 176, 233, .36); border-radius: 7px; padding: .48rem .68rem; background: rgba(49, 125, 190, .12); color: #a9d9f7; font-size: .82rem; font-weight: 750; transition: background .2s, border-color .2s, transform .2s; }
.web-visit-link:hover { transform: translateY(-2px); border-color: #73c7fc; background: rgba(60, 150, 225, .2); }
.web-project-details { display: grid; gap: .7rem; margin-top: 1.5rem; }
.web-project-detail { overflow: hidden; border: 1px solid rgba(105, 165, 214, .19); border-radius: 11px; background: #0d1b2a; scroll-margin-top: 96px; }
.web-project-detail[open] { border-color: rgba(93, 183, 244, .5); box-shadow: 0 0 29px rgba(42, 139, 223, .09); }
.web-project-detail > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.35rem; color: #dbeaf7; font-weight: 750; list-style: none; cursor: pointer; transition: background .2s ease; }
.web-project-detail > summary::-webkit-details-marker { display: none; }
.web-project-detail > summary:hover, .web-project-detail[open] > summary { background: rgba(52, 118, 177, .13); }
.web-project-detail > summary > span { color: #7dcaff; font-size: .77rem; white-space: nowrap; }
.web-detail-content { border-top: 1px solid var(--line); padding-bottom: 2rem; }
.web-detail-intro { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; padding: 2rem; background: radial-gradient(circle at 90% 10%, rgba(63, 145, 216, .12), transparent 50%); }
.web-detail-intro h3 { margin: .5rem 0 .5rem; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.13; letter-spacing: -.045em; }
.web-detail-intro p { margin: 0; color: #bcd0e2; }
.web-detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0 2rem; }
.web-detail-facts > div { border: 1px solid rgba(105, 165, 214, .18); border-radius: 8px; padding: 1rem; background: rgba(5, 18, 31, .35); }
.web-detail-facts small { display: block; margin-bottom: .4rem; color: #7dbfe6; font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.web-detail-facts p { margin: 0; color: #d2e0ed; font-size: .91rem; }
.web-detail-gallery h4 { margin: 0; font-size: 1.2rem; letter-spacing: -.025em; }
.web-detail-gallery .gallery-items { grid-template-columns: 1fr; gap: 1.1rem; }
.web-detail-gallery .gallery-items figure { width: 100%; max-width: none; aspect-ratio: auto; }
.web-detail-gallery .gallery-items figure a { display: block; }
.web-detail-gallery .gallery-items img { display: block; width: 100%; height: auto; object-fit: contain; }
.web-detail-gallery figcaption { left: .8rem; right: auto; }
.web-detail-visit { margin: 1.5rem 2rem 0; }
.fan-note { margin: 1.1rem 2rem 0; color: #9eb4c7; font-size: .87rem; }
@media (max-width: 1050px) {
  .web-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .web-project-grid { grid-template-columns: 1fr; gap: 14px; }
  .web-card-media { aspect-ratio: 1.8; }
  .web-card-body { padding: 1.25rem; }
  .web-detail-intro { display: block; padding: 1.25rem; }
  .web-detail-intro .status-pill { margin-top: 1rem; }
  .web-detail-facts { grid-template-columns: 1fr; gap: .6rem; margin-inline: 1rem; }
  .web-detail-facts > div { padding: .8rem; }
  .web-detail-gallery { margin-inline: 1rem; }
  .web-detail-visit { margin-inline: 1rem; }
  .fan-note { margin-inline: 1rem; }
  .web-project-detail > summary { padding: .85rem 1rem; font-size: .9rem; }
  .web-project-detail > summary > span { font-size: .7rem; }
}

/* The Murra name in the existing identity */
.brand-alias { color: #7bcaff; letter-spacing: .08em; }
.progress-grid > .progress-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.detail-meta-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-external-links { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 2rem 0; }
.workshop-button, .workshop-button[aria-disabled="true"] { border-color: rgba(102, 198, 255, .68); color: #d9f1ff; background: rgba(40, 134, 209, .23); box-shadow: 0 0 20px rgba(50, 151, 239, .12); }
.workshop-button[aria-disabled="true"]:hover { transform: none; border-color: rgba(102, 198, 255, .68); background: rgba(40, 134, 209, .23); }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .header-inner { gap: .6rem; }
  .site-header .brand { gap: .55rem; }
  .site-header .brand-mark { font-size: 2.05rem; }
  .site-header .brand-name { font-size: .72rem; letter-spacing: .1em; }
.footer-layout .brand-name { font-size: .78rem; letter-spacing: .11em; }
.visitor-counter { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; color: #90b5d2 !important; }
.visitor-counter[hidden] { display: none; }
.visitor-counter strong { color: #7bcfff; font-size: 1rem; font-variant-numeric: tabular-nums; }
  .detail-meta-grid--two { grid-template-columns: 1fr; }
  .detail-external-links { margin-inline: 1rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid > div { border-right: 1px solid var(--line); border-bottom: 0; }
  .stats-grid > div:nth-child(even) { border-right: 0; }
  .stats-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Project case studies and verified, scoped figures */
.case-overview, .case-process, .case-current, .project-numbers { margin: 1.85rem 2rem 0; }
.case-overview { border-left: 2px solid rgba(95, 194, 255, .68); border-radius: 0 9px 9px 0; padding: 1rem 1.25rem; background: rgba(45, 116, 178, .08); }
.case-overview h5, .case-process h5, .case-current h5, .project-numbers h5, .release-detail h5 { margin: 0; color: #e7f5ff; font-size: 1.2rem; letter-spacing: -.025em; }
.case-overview p, .case-current p { max-width: 850px; margin: .45rem 0 0; color: #b6c9d9; font-size: .91rem; line-height: 1.65; }
.case-process ol { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.case-process li { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid rgba(103, 171, 225, .25); border-radius: 8px; padding: .62rem .82rem; background: rgba(10, 27, 44, .62); color: #d1e4f2; font-size: .83rem; font-weight: 650; }
.case-process li::before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #71c7f8; box-shadow: 0 0 8px rgba(92, 188, 245, .48); }
.case-current { border-top: 1px solid var(--line); padding-top: 1.15rem; }
.project-numbers .detail-stat-grid { margin: 1rem 0 0; }
.project-numbers .detail-stat-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 410px; }
.project-numbers .detail-stat-grid > div { min-width: 0; min-height: 118px; display: flex; flex-direction: column; justify-content: center; padding: 1.1rem 1.2rem; background: linear-gradient(145deg, rgba(16, 42, 67, .75), rgba(8, 23, 39, .78)); }
.project-numbers .detail-stat-grid strong, .project-numbers .metric-grid strong { color: #84d5ff; font-size: clamp(1.55rem, 2.25vw, 2.05rem); font-weight: 800; line-height: 1.15; letter-spacing: -.045em; }
.project-numbers .metric-grid > div { min-width: 0; min-height: 104px; display: flex; flex-direction: column; justify-content: center; }
.project-numbers .metric-grid strong { display: block; }
.project-numbers.scoped-progress { padding-top: 1.2rem; }
.release-detail { display: block; }
.release-detail-body { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: .7rem; }

/* Journey through community work, localization and LEX */
.journey-wrap { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); align-items: start; gap: min(7vw, 100px); margin-top: clamp(4rem, 7vw, 5.5rem); border-top: 1px solid var(--line); padding-top: 3rem; }
.journey-heading h3 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.15; letter-spacing: -.045em; }
.journey-list { position: relative; display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.journey-list::before { content: ""; position: absolute; top: 1rem; bottom: 1rem; left: calc(1rem + 21px); width: 1px; background: linear-gradient(#56bafa, rgba(98, 170, 228, .13)); }
.journey-list li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 1rem; border: 1px solid rgba(111, 168, 219, .19); border-radius: 11px; padding: .85rem 1rem; background: linear-gradient(145deg, rgba(22, 42, 63, .78), rgba(11, 25, 41, .9)); transition: border-color .24s ease, transform .24s ease; }
.journey-list li:hover { border-color: rgba(110, 194, 248, .5); transform: translateX(3px); }
.journey-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(104, 185, 246, .42); border-radius: 50%; background: #102d49; color: #78cafa; font-size: 1.1rem; font-weight: 700; }
.journey-list h4 { margin: 0; color: #e8f4ff; font-size: .94rem; }
.journey-list p { margin: .18rem 0 0; color: #a9bfd0; font-size: .82rem; line-height: 1.5; }

/* Two workflows with a horizontal line on desktop and a vertical line on mobile */
.workflow-section { border-top: 1px solid var(--line); background: radial-gradient(ellipse 60% 70% at 96% 10%, rgba(30, 104, 179, .13), transparent), #0b1522; }
.workflow-grid { display: grid; gap: 1.1rem; }
.workflow-card { min-width: 0; border: 1px solid rgba(112, 174, 227, .22); border-radius: 14px; padding: 1.5rem 1.7rem; background: linear-gradient(145deg, #14263a, #0c1a2a); transition: border-color .25s ease, box-shadow .25s ease; }
.workflow-card:hover { border-color: rgba(103, 190, 247, .52); box-shadow: 0 0 28px rgba(51, 141, 219, .08); }
.workflow-card h3 { margin: 0 0 1.15rem; color: #e6f4ff; font-size: 1.12rem; letter-spacing: -.02em; }
.workflow-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.workflow-steps::before { content: ""; position: absolute; z-index: 0; top: 1.8rem; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, #3982cc, #69c4f9, rgba(83, 188, 249, .25)); transform-origin: left; transition: transform .85s ease; }
.workflow-steps li { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: .55rem; padding: .45rem .2rem .25rem; text-align: center; }
.workflow-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid rgba(100, 184, 243, .47); border-radius: 50%; background: #123251; color: #8dd9ff; font-size: 1.15rem; font-weight: 750; box-shadow: 0 0 0 5px rgba(42, 113, 177, .11); transition: background .25s ease, box-shadow .25s ease; }
.workflow-steps li:hover .workflow-icon { background: #1a4a75; box-shadow: 0 0 0 6px rgba(69, 154, 222, .15), 0 0 16px rgba(73, 178, 252, .22); }
.workflow-steps strong { color: #cadfee; font-size: .83rem; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
html.motion-ready .workflow-card:not(.is-visible) .workflow-steps::before { transform: scaleX(0); }
.project-card-coldwar, .project-card-blackice { grid-column: span 6; min-height: 360px; }
.project-card-coldwar .project-content { justify-content: space-between; }
.project-card-blackice .project-content { justify-content: flex-end; }
.project-card-coldwar > img, .project-card-blackice > img,
.roadmap-panel[data-project-panel="coldwar"] .detail-hero > img,
.roadmap-panel[data-project-panel="blackice"] .detail-hero > img { object-fit: contain; object-position: right center; background: #0b1828; }
.roadmap-panel[data-project-panel="coldwar"] .detail-gallery figure,
.roadmap-panel[data-project-panel="blackice"] .detail-gallery figure { max-width: 499px; aspect-ratio: 1; }

/* Show the real app screens inside the existing project section. */
.lex-showcase { display: grid; grid-template-columns: minmax(230px,.85fr) minmax(0,1.5fr); align-items: center; gap: clamp(1.2rem,4vw,3.5rem); margin-top: 2.2rem; padding: clamp(1.2rem,3vw,2.6rem); border: 1px solid rgba(94,167,233,.3); border-radius: 16px; background: radial-gradient(circle at 75% 5%,rgba(31,145,244,.14),transparent 48%),#0e1d2e; }
.lex-showcase-intro h3 { margin: .55rem 0; font-size: clamp(1.65rem,3vw,2.5rem); letter-spacing: -.04em; }
.lex-showcase-intro p { max-width: 38ch; color: #b5c8d9; line-height: 1.6; }
.lex-showcase-intro .card-link { display: inline-flex; margin-top: 1rem; }
.lex-showcase-frames { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: clamp(.45rem,1.3vw,1.25rem); max-width: 650px; margin-inline: auto; }
.lex-showcase-frames figure { min-width: 0; margin: 0; text-align: center; }
.lex-showcase-frames figure:nth-child(2) { transform: translateY(-.9rem); }
.lex-showcase-frames a { display: block; overflow: hidden; aspect-ratio: 1440/3120; border: 3px solid #203b55; border-radius: 18px; background: #071624; box-shadow: 0 16px 28px rgba(0,0,0,.27); transition: border-color .2s ease, box-shadow .2s ease; }
.lex-showcase-frames a:hover,.lex-showcase-frames a:focus-visible { border-color: #43b9fc; box-shadow: 0 0 24px rgba(49,161,252,.25); }
.lex-showcase-frames img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lex-showcase-frames figcaption { padding-top: .7rem; color: #bdd3e6; font-size: .82rem; }
.gallery-kind { position: absolute; top: .7rem; left: .7rem; z-index: 2; padding: .32rem .55rem; border: 1px solid rgba(95,183,255,.45); border-radius: 6px; background: rgba(5,20,34,.9); color: #d7eeff; font-size: .76rem; font-weight: 600; }
.collaboration-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; margin-top: 2rem; }
.collaboration-steps > div { min-width: 0; padding: 1.25rem; border: 1px solid rgba(112,171,222,.2); border-radius: 10px; background: #0e1c2b; }
.collaboration-steps span { display: block; margin-bottom: .8rem; color: #42b7fc; font-weight: 700; letter-spacing: .12em; }
.collaboration-steps strong { display: block; font-size: 1.05rem; }
.collaboration-steps p { margin: .45rem 0 0; color: #b8c9da; line-height: 1.55; }
@media(max-width:760px){.lex-showcase { grid-template-columns: 1fr; }.lex-showcase-frames { width: min(100%,520px); }.collaboration-steps { grid-template-columns: 1fr; }.lex-showcase-frames figcaption { font-size: .7rem; }}
.project-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.25rem; }
.project-filter { min-height: 42px; padding: .55rem 1rem; border: 1px solid rgba(108,174,230,.31); border-radius: 999px; background: #0e1c2b; color: #c0d4e8; font: inherit; font-size: .88rem; cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.project-filter:hover,.project-filter:focus-visible { border-color: #44b9fb; color: white; }
.project-filter.is-active { border-color: #48baf9; background: #103b5b; color: #f5fbff; box-shadow: 0 0 16px rgba(49,153,244,.17); }
.project-grid[data-filter="app"] .project-card-featured { grid-column: 1/-1; }
@media(max-width:520px){.project-filter { flex: 1 1 calc(50% - .6rem); }}
/* Give the longer localization titles a full card before the tablet becomes too narrow. */
@media (min-width: 601px) and (max-width: 720px) {
  .project-card-featured, .project-card-road, .project-card-md, .project-card-kr, .project-card-expanded, .project-card-coldwar, .project-card-blackice { grid-column: 1 / -1; min-height: 345px; }
  .project-bottom { max-width: min(100%, 520px); }
}
.project-card h3, .detail-hero h4 { overflow-wrap: anywhere; }
.form-feedback { overflow-wrap: anywhere; }

/* Full-size gallery keeps each original image available without leaving the project. */
html.gallery-open { overflow: hidden; }
.media-viewer { width: min(96vw, 1200px); max-width: none; max-height: min(94dvh, 1050px); padding: 0; overflow: hidden; border: 1px solid rgba(104, 189, 249, .42); border-radius: 16px; background: #091522; color: var(--text); box-shadow: 0 30px 90px rgba(0, 0, 0, .72); }
.media-viewer::backdrop { background: rgba(1, 7, 13, .88); backdrop-filter: blur(7px); }
.media-viewer-inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(94dvh, 1050px); }
.media-viewer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem .9rem; border-bottom: 1px solid var(--line); color: #aac6dc; font-size: .88rem; }
.media-viewer-close, .media-viewer-arrow { border: 1px solid rgba(113, 181, 235, .38); border-radius: 9px; background: #152c42; color: #e9f7ff; font: inherit; font-weight: 700; }
.media-viewer-close { min-height: 42px; padding: .4rem .85rem; }
.media-viewer-close span { margin-left: .5rem; font-size: 1.45rem; line-height: .6; vertical-align: -.12em; }
.media-viewer-stage { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; min-height: 0; padding: .5rem; }
.media-viewer-stage img { display: block; width: 100%; max-height: min(76dvh, 880px); min-height: 0; object-fit: contain; }
.media-viewer-arrow { width: 44px; height: 56px; justify-self: center; font-size: 2rem; line-height: 1; }
.media-viewer-close:hover, .media-viewer-arrow:hover { border-color: #6ac5ff; background: #20415e; }
.media-viewer-caption { margin: 0; min-height: 2.6rem; padding: .5rem 1rem .75rem; text-align: center; color: #c1d7e8; font-size: .91rem; }
.lex-gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .3rem; }
.lex-gallery-filters button { min-height: 42px; padding: .5rem .85rem; border: 1px solid rgba(108, 174, 230, .34); border-radius: 999px; background: #10243a; color: #c2d9ea; font: inherit; font-size: .85rem; cursor: pointer; }
.lex-gallery-filters button:hover, .lex-gallery-filters button:focus-visible { border-color: #64c4ff; }
.lex-gallery-filters button[aria-pressed="true"] { border-color: #56baff; background: #124366; color: #f5fbff; box-shadow: 0 0 17px rgba(49, 153, 244, .14); }
@media (max-width: 600px) {
  .media-viewer { width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .media-viewer-inner { height: 100%; max-height: 100dvh; }
  .media-viewer-toolbar { padding: max(.5rem, env(safe-area-inset-top)) .8rem .55rem; }
  .media-viewer-stage { grid-template-columns: 42px minmax(0, 1fr) 42px; padding: .25rem; }
  .media-viewer-stage img { max-height: 80dvh; }
  .media-viewer-arrow { width: 38px; height: 50px; }
  .media-viewer-caption { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .lex-gallery-filters button { flex: 1 1 auto; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .workflow-track { overflow-x: auto; scrollbar-color: #376791 #102438; }
  .workflow-steps { min-width: 850px; padding-bottom: .45rem; }
}
@media (max-width: 800px) {
  .journey-wrap { display: block; }
  .journey-list { margin-top: 1.5rem; }
  .workflow-steps { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .workflow-steps::before { top: 1.2rem; bottom: 1.2rem; left: 1.55rem; right: auto; width: 1px; height: auto; transform-origin: top; }
  .workflow-steps li { flex-direction: row; align-items: center; gap: .9rem; padding: .45rem .25rem; text-align: left; }
  .workflow-steps strong { font-size: .9rem; }
  html.motion-ready .workflow-card:not(.is-visible) .workflow-steps::before { transform: scaleY(0); }
}
@media (max-width: 600px) {
  .project-card-coldwar, .project-card-blackice { grid-column: span 12; min-height: 360px; }
  .case-overview, .case-process, .case-current, .project-numbers { margin-inline: 1rem; }
  .case-overview { padding: .9rem 1rem; }
  .project-numbers .detail-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .project-numbers .detail-stat-grid > div { min-height: 92px; }
  .project-numbers .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-numbers .metric-grid strong { font-size: 1.55rem; }
  .release-detail { margin-inline: 1rem; }
  .release-detail-body { align-items: flex-start; flex-direction: column; }
  .journey-wrap { margin-top: 3.3rem; padding-top: 2.3rem; }
  .journey-list li { gap: .7rem; }
  .workflow-card { padding: 1.2rem; }
}

/* Support and social links share the existing dark blue card language. */
.support-section { padding-block: clamp(2.5rem, 5vw, 5rem); }
.support-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 3vw, 2.7rem); border: 1px solid rgba(92, 180, 243, .35); border-radius: 16px; background: radial-gradient(circle at 85% 20%, rgba(31, 139, 235, .18), transparent 45%), linear-gradient(135deg, #142b44, #0b192a); box-shadow: 0 20px 55px rgba(0, 0, 0, .18); }
.support-panel h2, .contact-intro h2 { margin: .3rem 0 .6rem; }
.support-panel p:not(.eyebrow), .contact-intro p:not(.eyebrow) { max-width: 40rem; margin: 0; color: #aabfd1; line-height: 1.65; }
.support-panel .button { flex: none; }
.contact-layout { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.55fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.social-card { min-width: 0; min-height: 90px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; gap: .2rem; border: 1px solid rgba(113, 173, 225, .25); border-radius: 12px; padding: 1rem 3rem 1rem 1.15rem; background: linear-gradient(145deg, rgba(22, 42, 63, .86), rgba(11, 25, 41, .94)); color: #eaf4fc; transition: transform .25s, border-color .25s, box-shadow .25s; }
.social-card:hover { transform: translateY(-3px); border-color: rgba(100, 190, 250, .62); box-shadow: 0 0 24px rgba(39, 140, 230, .1); }
.social-card > span:first-child { color: #83a9c5; font-size: .81rem; }
.social-card strong { font-size: 1rem; overflow-wrap: anywhere; }
.social-card > span:last-child { position: absolute; right: 1.2rem; color: #69c7ff; font-size: 1.25rem; }
.copy-handle { position: absolute; right: .8rem; padding: .38rem .55rem; border: 1px solid rgba(95, 177, 233, .38); border-radius: 6px; background: rgba(45, 130, 200, .13); color: #a9d9f7; font: inherit; font-size: .76rem; cursor: pointer; }
.copy-handle:hover, .copy-handle:focus-visible { border-color: #73c7fc; }
@media (max-width: 800px) { .support-panel, .contact-layout { display: grid; grid-template-columns: 1fr; } .support-panel .button { justify-self: start; } }
@media (max-width: 480px) { .social-grid { grid-template-columns: 1fr; } .support-panel .button { width: 100%; } }
.contact-form { grid-column: 2; max-width: none; width: 100%; }
.contact-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-form .form-submit { width: auto; min-width: 190px; }
.contact-form .form-note { text-align: left; line-height: 1.55; }
.form-feedback { margin: .85rem 0 0; border: 1px solid rgba(89, 196, 155, .4); border-radius: 8px; padding: .8rem 1rem; color: #ade9d2; background: rgba(32, 143, 111, .12); }
.form-feedback--error { border-color: rgba(247, 142, 124, .45); color: #f2b2a6; background: rgba(179, 72, 62, .12); }
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 800px) { .contact-form { grid-column: 1; } }
@media (max-width: 600px) { .contact-form-fields { grid-template-columns: 1fr; gap: 0; } .contact-form .form-submit { width: 100%; } }
.form-field-hint { display: block; color: #91acc0; font-size: .8rem; line-height: 1.45; }
/* Services follow the portfolio's existing restrained card treatment. */
.services-section { border-top: 1px solid var(--line); background: radial-gradient(circle at 85% 5%, rgba(31, 114, 201, .1), transparent 32%), #0b1522; }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.service-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid rgba(113, 173, 225, .25); border-radius: 14px; padding: clamp(1.3rem, 2vw, 1.8rem); background: linear-gradient(145deg, rgba(21, 42, 64, .92), rgba(11, 25, 41, .98)); box-shadow: inset 0 1px rgba(255,255,255,.04); transition: border-color .25s, transform .25s, box-shadow .25s; }
.service-card:hover { border-color: rgba(100, 190, 250, .58); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.22), 0 0 25px rgba(53,154,236,.08); }
.service-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 1.25rem; border: 1px solid rgba(83, 179, 249, .35); border-radius: 11px; color: #70c9fb; background: rgba(42, 144, 226, .12); font-size: 1.25rem; font-weight: 700; }
.service-card h3 { margin: 0 0 .65rem; font-size: 1.18rem; line-height: 1.25; }
.service-card > p { margin: 0 0 1.5rem; color: #a9bfd1; line-height: 1.65; }
.service-price { display: grid; gap: .35rem; margin-top: auto; padding-top: 1.05rem; border-top: 1px solid rgba(111, 168, 219, .21); }
.service-price strong { color: #a8e1ff; font-size: 1rem; }
.service-price small { color: #91a9bf; font-size: .8rem; line-height: 1.5; }
.services-footer { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; margin-top: 1.8rem; }
.services-footer p { max-width: 44rem; margin: 0; color: #9eb6c9; line-height: 1.6; }
.services-footer .button { flex: none; }
@media (max-width: 1320px) { .site-nav { gap: 1.15rem; } .header-contact { display: none; } }
@media (max-width: 1000px) { .site-nav { gap: .75rem; } .nav-link { font-size: .81rem; } .brand-name { font-size: .84rem; letter-spacing: .12em; } .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .services-footer { align-items: flex-start; flex-direction: column; } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } .service-card { min-height: 0; } .services-footer .button { width: 100%; } }
@media (min-width: 801px) and (max-width: 1000px) {
  .header-inner { height: 67px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--line-bright); border-radius: 8px; background: rgba(23,53,82,.45); padding: 10px; }
  .menu-toggle span { height: 2px; border-radius: 2px; background: #a9d8fb; width: 100%; }
  .site-nav { display: none; position: absolute; inset: 66px 0 auto; height: auto; margin: 0; padding: .6rem 1.125rem 1rem; background: rgba(8,19,31,.98); border-bottom: 1px solid var(--line-bright); box-shadow: 0 20px 30px rgba(0,0,0,.3); }
  .site-nav.is-open { display: grid; gap: 0; }
  .nav-link { height: 44px; padding: .35rem .5rem; font-size: .87rem; }
  .nav-link::after { display: none; }
}
/* Both Road to 56 detail covers occupy the same frame despite different title lengths. */
.roadmap-panel[data-project-panel="road56"] .detail-hero,
.roadmap-panel[data-project-panel="expanded"] .detail-hero { min-height: 450px; }
@media (max-width: 600px) {
  .roadmap-panel[data-project-panel="road56"] .detail-hero,
  .roadmap-panel[data-project-panel="expanded"] .detail-hero { min-height: 500px; }
}

/* LEX module cards orbit the product image like the two original callouts. */
.hero-module-cells { inset: 0; width: auto; display: block; pointer-events: none; }
.hero-module-cell { position: absolute; width: 37%; padding: .66rem .8rem; transition: transform .25s ease, border-color .25s ease; }
.hero-module-cell:nth-child(1) { top: 34%; left: -4%; transform: rotate(-2deg); }
.hero-module-cell:nth-child(2) { top: 53%; left: 9%; width: 33%; transform: rotate(1.5deg); }
.hero-module-cell:nth-child(3) { top: 72%; left: -2%; width: 39%; transform: rotate(-1deg); }
.visual-frame:hover .hero-module-cell:nth-child(1) { transform: translateY(-3px) rotate(-2deg); }
.visual-frame:hover .hero-module-cell:nth-child(2) { transform: translateY(-3px) rotate(1.5deg); }
.visual-frame:hover .hero-module-cell:nth-child(3) { transform: translateY(-3px) rotate(-1deg); }
@media (max-width: 600px) {
  .hero-module-cells { inset: 0; width: auto; }
  .hero-module-cell { padding: .42rem .5rem; }
  .hero-module-cell:nth-child(1) { top: 34%; left: 1%; width: 41%; }
  .hero-module-cell:nth-child(2) { top: 51%; left: 10%; width: 39%; }
  .hero-module-cell:nth-child(3) { top: 69%; left: 1%; width: 44%; }
}

/* Data slots retain the existing surfaces and hide genuinely absent fields. */
[data-project-field]:empty { display: none; }
.project-status-slot { min-width: 0; max-width: 100%; }
.project-status-slot .status-pill { white-space: normal; }
@media (min-width: 721px) {
  .lex-metrics:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The new project uses the complete row at every breakpoint. */
.project-card-wildwest { grid-column: 1 / -1; min-width: 0; min-height: 380px; }
.project-card-wildwest .project-bottom { max-width: 580px; }
@media (max-width: 720px) { .project-card-wildwest { min-height: 360px; } }

/* New releases reuse the existing two-column project grid. */
.project-card-new-release { grid-column: span 6; min-width: 0; }
.project-wordmark { position: absolute; right: 6%; top: 15%; color: #69caff; font-size: clamp(2rem, 4vw, 4rem); font-weight: 900; line-height: 1.05; opacity: .32; text-align: right; }
.project-wordmark span { color: #fff; }
@media (max-width: 760px) { .project-card-new-release { grid-column: 1 / -1; } }

.project-card-coldwar .card-topline { min-width: 0; }
.project-card-coldwar .status-pill { white-space: normal; overflow-wrap: anywhere; }

/* Language switch uses the existing dark/blue visual language. */
.language-switch { display: inline-flex; flex-shrink: 0; padding: 3px; gap: 2px; border: 1px solid var(--line-bright); border-radius: 9px; background: rgba(16,36,58,.65); }
.language-switch button { color: var(--muted); font: inherit; font-size: .75rem; font-weight: 750; padding: .45rem .55rem; min-height: 34px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; transition: color .2s, background .2s; }
.language-switch button[aria-pressed="true"] { color: #d8efff; background: rgba(64,165,255,.2); box-shadow: inset 0 0 0 1px rgba(83,185,255,.22); }
.language-switch button:hover { color: white; background: rgba(64,165,255,.15); }
.language-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.site-header .header-inner { gap: 1.1rem; }
@media (max-width: 1450px) { .header-contact { display: none; } }
@media (max-width: 1000px) { .language-switch { order: 1; margin-left: auto; } .site-header .menu-toggle { order: 2; margin-left: 0; flex-shrink: 0; } .site-nav { order: 3; } }
@media (max-width: 480px) { .site-header .header-inner { gap: .4rem; } .language-switch button { padding: .35rem .38rem; } .site-header .brand-name { font-size: .65rem; letter-spacing: .06em; } .site-header .brand { gap: .45rem; } }
html[lang="en"] .project-card h3, html[lang="en"] .detail-header h4 { overflow-wrap: anywhere; }