/* 하드앤소프트 — 인터랙션·비주얼 레이어 (tokens 는 style.css) */

/* 스크롤 진행 바 */
.progress { position: absolute; left: 24px; bottom: -1px; height: 2px; border-radius: 2px; width: calc(var(--scroll, 0) * (100% - 48px)); background: var(--dot); }

/* ───────── Hero: 도트 필드 + 3D 씬 ───────── */
.hero-fx { position: relative; overflow: hidden; }
.dotfield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero-fx > .wrap { position: relative; z-index: 1; }
.hero-fx .lead, .hero-fx h1 { position: relative; }

.scene { position: relative; height: clamp(380px, 40vw, 500px); perspective: 1400px; }
.scene .layer { position: absolute; transform: translate3d(calc(var(--px, 0) * var(--d) * 1px), calc(var(--py, 0) * var(--d) * 1px), 0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.scene .layer > * { animation: bob 7s ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.scene .tilt { transform: rotateY(-14deg) rotateX(8deg) rotateZ(1deg); transform-style: preserve-3d; }
.l-browser { --d: 10; top: 6%; right: 0; width: 88%; }
.l-browser .browser { max-width: none; box-shadow: var(--shadow); }
.l-phone { --d: 26; --delay: -2s; left: 0; bottom: 2%; width: 30%; min-width: 120px; }
.l-phone .phone { width: 100%; box-shadow: var(--shadow); }
.l-chat { --d: 34; --delay: -4s; right: 2%; bottom: 4%; width: 54%; }
.l-chat .bubble { background: var(--bg); border: 1.5px solid var(--ink); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.55; display: grid; gap: 8px; }
.l-chat .bubble .q { justify-self: end; background: var(--ink); color: var(--bg); padding: 6px 10px; border-radius: 12px 12px 3px 12px; }
.l-chat .bubble .src { justify-self: start; font-size: 11px; font-weight: 600; background: var(--dot); color: var(--dot-ink); padding: 1px 8px; border-radius: 999px; }
.l-badge { --d: 18; --delay: -1s; left: 10%; top: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow); white-space: nowrap; }
.pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 0 var(--dot); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.l-code { --d: 22; --delay: -3s; right: -2%; top: -2%; }
.codechip { font: 600 12px/1.5 ui-monospace, Consolas, monospace; background: var(--ink); color: var(--bg); border-radius: 10px; padding: 9px 12px; box-shadow: var(--shadow); white-space: nowrap; }
.codechip b { color: var(--dot); font-weight: 600; }
.bars.grow i { transform-origin: bottom; animation: grow 2.8s ease-in-out infinite alternate; }
.bars.grow i:nth-child(2) { animation-delay: -.6s; } .bars.grow i:nth-child(3) { animation-delay: -1.2s; } .bars.grow i:nth-child(4) { animation-delay: -1.8s; } .bars.grow i:nth-child(5) { animation-delay: -2.2s; } .bars.grow i:nth-child(6) { animation-delay: -.3s; }
@keyframes grow { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@media (max-width: 900px) { .scene { height: 360px; margin-top: 8px; } .l-code { display: none; } }
@media (max-width: 480px) { .scene { height: 320px; } .l-chat { width: 70%; } .l-badge { left: 0; } }

/* ───────── 기술 스택 마퀴 ───────── */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: 18px; background: var(--bg); position: relative; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee .track { display: flex; width: max-content; gap: 0; animation: slide 48s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee span { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; letter-spacing: -.02em; padding-inline: 22px; display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; color: var(--muted); transition: color .2s; }
.marquee span:hover { color: var(--ink); }
.marquee span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ───────── 벤토 그리드 ───────── */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cell { --mx: 50%; --my: 50%; position: relative; overflow: hidden; border: 1.5px solid var(--line); border-radius: 22px; padding: 24px; background: var(--bg); display: grid; gap: 8px; align-content: start; min-height: 240px; transition: border-color .2s, transform .25s; }
.cell::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--dot) 22%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; }
.cell:hover { border-color: var(--ink); transform: translateY(-3px); }
.cell:hover::after { opacity: 1; }
.cell .en { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
.cell h3 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.cell p { color: var(--muted); font-size: 15px; max-width: 26em; }
.cell .viz { margin-top: 14px; position: relative; z-index: 0; }
.c-saas { grid-column: span 4; }
.c-ai { grid-column: span 2; grid-row: span 2; }
.c-app, .c-mvp { grid-column: span 2; }
.c-care, .c-consult { grid-column: span 3; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-saas, .c-ai, .c-care, .c-consult { grid-column: span 2; } .c-ai { grid-row: auto; } .c-app, .c-mvp { grid-column: span 1; } }
@media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bento > .cell { grid-column: auto; } }

/* SaaS 셀 */
.saas-viz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: end; }
.live { display: grid; gap: 2px; }
.live b { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.live small { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.live small i { width: 7px; height: 7px; border-radius: 50%; background: #3BB273; animation: ping 2s infinite; }
.spark { width: 100%; height: 90px; overflow: visible; }
.spark .area { fill: color-mix(in srgb, var(--dot) 28%, transparent); }
.spark .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 0; animation: draw 5s ease-in-out infinite; }
.spark .end { fill: var(--dot); stroke: var(--ink); stroke-width: 2; }
.spark .grid { stroke: var(--line); stroke-width: 1; }
@keyframes draw { 0% { stroke-dashoffset: 600; } 40%, 100% { stroke-dashoffset: 0; } }

/* AI 셀 */
.c-ai .chat { max-width: none; font-size: 13.5px; }
.c-ai .chat .q, .c-ai .chat .a { max-width: 92%; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* APP 셀: 화면이 넘어가는 폰 */
.mini-phone { width: 128px; height: 210px; margin-inline: auto; border: 1.5px solid var(--ink); border-radius: 22px; overflow: hidden; position: relative; background: var(--bg); }
.mini-phone .screens { display: grid; animation: screens 9s infinite; }
.mini-phone .scr { height: 208px; padding: 18px 12px; display: grid; gap: 8px; align-content: start; }
.mini-phone .ok { width: 44px; height: 44px; border-radius: 50%; background: var(--dot); display: grid; place-items: center; font-weight: 900; color: var(--dot-ink); justify-self: center; margin-top: 28px; }
@keyframes screens { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-208px); } 66%, 94% { transform: translateY(-416px); } 100% { transform: translateY(0); } }

/* MVP 셀: 체크리스트 */
.ticks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.ticks-list li { display: flex; align-items: center; gap: 10px; }
.ticks-list li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ink); font-size: 12px; font-weight: 900; background: var(--dot); color: var(--dot-ink); animation: tick 8s infinite; animation-delay: calc(var(--i) * .7s); }
.ticks-list li.later { color: var(--muted); text-decoration: line-through; }
.ticks-list li.later::before { content: ""; background: transparent; border-style: dashed; animation: none; }
@keyframes tick { 0%, 6% { background: transparent; color: transparent; } 12%, 100% { background: var(--dot); color: var(--dot-ink); } }

/* CARE 셀: 심전도 */
.pulse-viz { display: grid; gap: 10px; }
.ekg { width: 100%; height: 70px; }
.ekg path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 520; animation: ekg 3.2s linear infinite; }
@keyframes ekg { from { stroke-dashoffset: 1040; } to { stroke-dashoffset: 0; } }
.status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.status-row span { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface); display: inline-flex; align-items: center; gap: 6px; }
.status-row span i { width: 7px; height: 7px; border-radius: 50%; background: #3BB273; }
.status-row span.warn i { background: var(--dot); }

/* CONSULT 셀: 포스트잇 */
.notes { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.note-card { width: 120px; min-height: 92px; padding: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.4; border-radius: 4px; background: var(--dot); color: var(--dot-ink); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .4); transform: rotate(var(--r)); transition: transform .25s; }
.note-card.plain { background: var(--surface); color: var(--ink); }
.note-card small { display: block; font-weight: 500; font-size: 12px; margin-top: 6px; opacity: .7; }
.cell:hover .note-card { transform: rotate(0) translateY(-4px); }

/* ───────── 스케치 → 완성 비교 슬라이더 ───────── */
.ba { --pos: 50%; position: relative; border-radius: 20px; overflow: hidden; border: 1.5px solid var(--ink); background: var(--bg); aspect-ratio: 4 / 3.2; max-width: 100%; user-select: none; touch-action: pan-y; }
.ba-layer { position: absolute; inset: 0; padding: 22px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); background: var(--bg); }
.ba-before { background: repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--line) 70%, transparent) 23px 24px), var(--bg); }
.ba-before * { border-color: var(--muted) !important; color: var(--muted); }
.sk { border: 2px dashed; border-radius: 10px; }
.sk-title { font-size: 15px; font-weight: 600; font-style: italic; }
.sk-img { height: 90px; position: relative; overflow: hidden; }
.sk-img::before, .sk-img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; height: 2px; background: var(--muted); transform: translate(-50%, -50%) rotate(18deg); }
.sk-img::after { transform: translate(-50%, -50%) rotate(-18deg); }
.sk-list { display: grid; gap: 10px; align-content: start; }
.sk-row { height: 36px; display: flex; align-items: center; padding-inline: 12px; font-size: 13px; font-style: italic; }
.sk-btn { height: 44px; border-radius: 22px; display: grid; place-items: center; font-style: italic; font-weight: 600; font-size: 14px; }
.ui-title { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 17px; }
.ui-title i { width: 30px; height: 30px; border-radius: 50%; background: var(--dot); }
.ui-hero { height: 90px; border-radius: 14px; background: linear-gradient(120deg, var(--ink), color-mix(in srgb, var(--ink) 70%, var(--dot))); color: var(--bg); padding: 14px 16px; display: grid; align-content: end; }
.ui-hero b { font-size: 18px; } .ui-hero span { font-size: 12.5px; opacity: .75; }
.ui-list { display: grid; gap: 8px; align-content: start; }
.ui-row { height: 40px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; padding-inline: 14px; font-size: 13.5px; font-weight: 600; }
.ui-row em { font-style: normal; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.ui-row.on { background: var(--ink); color: var(--bg); }
.ui-row.on em { background: var(--dot); color: var(--dot-ink); }
.ui-btn { height: 44px; border-radius: 22px; background: var(--dot); color: var(--dot-ink); display: grid; place-items: center; font-weight: 800; font-size: 14.5px; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--ink); transform: translateX(-1px); pointer-events: none; }
.ba-handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--dot); color: var(--dot-ink); border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 18px; }
.ba-tag { position: absolute; top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); z-index: 2; pointer-events: none; }
.ba-tag.l { left: 12px; } .ba-tag.r { right: 12px; background: var(--dot); color: var(--dot-ink); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba input[type=range]:focus-visible + .ba-handle::after { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ───────── 팀 네트워크 그래프 ───────── */
.netgraph { width: 100%; max-width: 480px; margin-inline: auto; display: block; overflow: visible; }
.netgraph .edge { stroke: var(--ink); stroke-width: 1.5; }
.netgraph .flow { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 6; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.netgraph .n-team { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; transition: fill .2s; }
.netgraph g.node:hover .n-team { fill: var(--dot); }
.netgraph .n-pm { fill: var(--ink); }
.netgraph .n-client { fill: var(--dot); stroke: var(--ink); stroke-width: 1.5; }
.netgraph text { font-family: var(--font-ko); font-size: 12px; font-weight: 700; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.netgraph text.on-ink { fill: var(--bg); font-size: 15px; font-weight: 800; }
.netgraph text.cap { font-size: 11px; font-weight: 500; fill: var(--muted); }
.netgraph .packet { fill: var(--dot); stroke: var(--ink); stroke-width: 1; }

/* 진행 방식: 스크롤 따라 켜짐 */
.process li::before { transition: color .4s, border-color .4s; }
.process.js li::before { color: color-mix(in srgb, var(--ink) 30%, transparent); }
.process.js li.lit::before { color: var(--ink); border-bottom-color: var(--dot); border-bottom-width: 3px; }

/* ───────── 서브 페이지 히어로 비주얼 ───────── */
.phero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .phero-grid { grid-template-columns: 1fr; } }

/* 서비스: 궤도 */
.orbit { --size: min(360px, calc(100vw - 48px)); --r: calc(var(--size) / 2 - 30px); position: relative; width: var(--size); height: var(--size); margin-inline: auto; overflow: clip; }
.orbit .ring { position: absolute; inset: 0; border: 1.5px dashed var(--line); border-radius: 50%; animation: spin 50s linear infinite; }
.orbit .ring.inner { inset: 22%; border-style: solid; animation-duration: 18s; animation-direction: reverse; }
.orbit .ring.inner::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--dot); border: 1.5px solid var(--ink); }
.orbit .sats { position: absolute; inset: 0; animation: spin 50s linear infinite; }
.orbit .sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1deg)); }
.orbit .sat b { display: block; width: 0; height: 0; animation: spin 50s linear infinite reverse; }
.orbit .sat b span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-size: 14px; font-weight: 800; padding: 8px 14px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--ink); white-space: nowrap; box-shadow: var(--shadow); }
.orbit .sat.hot b span { background: var(--dot); color: var(--dot-ink); border-color: var(--dot); }
.orbit .core { position: absolute; inset: 36%; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; text-align: center; font: 800 clamp(14px, 2vw, 17px)/1 var(--font-logo); letter-spacing: -.02em; box-shadow: var(--shadow); }
.orbit .core i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); margin-left: 2px; }
@keyframes spin { to { rotate: 360deg; } }

/* 지원사업: 서류 더미 */
.docs { position: relative; height: 420px; max-width: 420px; width: 100%; margin-inline: auto; }
.doc { position: absolute; left: 50%; top: 50%; width: 200px; height: 260px; margin: -130px 0 0 -100px; background: var(--bg); border: 1.5px solid var(--ink); border-radius: 10px; padding: 18px 16px; display: grid; gap: 9px; align-content: start; box-shadow: var(--shadow); transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.doc b { font-size: 15px; font-weight: 800; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); margin-bottom: 4px; }
.doc .sig { margin-top: 10px; height: 28px; border-bottom: 1.5px solid var(--ink); position: relative; }
.doc .sig::after { content: "(인)"; position: absolute; right: 0; bottom: 4px; font-size: 11px; color: var(--muted); }
.d1 { --x: -54px; --y: -66px; --r: -5deg; } .d2 { --x: -18px; --y: -24px; --r: -1.5deg; } .d3 { --x: 18px; --y: 18px; --r: 1.5deg; } .d4 { --x: 54px; --y: 60px; --r: 5deg; }
.docs:hover .d1 { --x: -70px; --y: -84px; } .docs:hover .d2 { --x: -24px; --y: -30px; } .docs:hover .d3 { --x: 24px; --y: 24px; } .docs:hover .d4 { --x: 70px; --y: 78px; }
.stamp { position: absolute; right: 6%; bottom: 4%; width: 104px; height: 104px; border-radius: 50%; background: var(--dot); color: var(--dot-ink); border: 3px double var(--ink); display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 17px; line-height: 1.15; transform: rotate(-14deg); animation: stampIn 1s cubic-bezier(.3, 1.6, .5, 1) .4s both; z-index: 2; box-shadow: var(--shadow); }
@keyframes stampIn { from { transform: rotate(-14deg) scale(1.5); } to { transform: rotate(-14deg) scale(1); } }
@media (max-width: 480px) { .doc { width: 160px; height: 210px; margin: -105px 0 0 -80px; } .docs { height: 290px; } .docs { height: 360px; } .d1 { --x: -36px; --y: -54px; } .d2 { --x: -12px; --y: -20px; } .d3 { --x: 12px; --y: 14px; } .d4 { --x: 36px; --y: 48px; } }

/* 모두의창업: 퍼널 */
.funnel-card { background: var(--ink); color: var(--bg); border-radius: 22px; padding: clamp(20px, 3vw, 30px); display: grid; gap: 16px; box-shadow: var(--shadow); }
.funnel-card .fc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.funnel-card .fc-top span { font-size: 13px; font-weight: 600; opacity: .75; }
.funnel-card .fc-top b { font-size: clamp(30px, 4vw, 42px); font-weight: 900; letter-spacing: -.03em; color: var(--dot); font-variant-numeric: tabular-nums; }
.funnel { width: 100%; height: auto; display: block; overflow: visible; }
.funnel .lv { fill: color-mix(in srgb, var(--bg) 14%, var(--ink)); stroke: color-mix(in srgb, var(--bg) 30%, var(--ink)); stroke-width: 1; }
.funnel .lv.hi { fill: var(--dot); stroke: var(--dot); }
.funnel text { font-family: var(--font-ko); fill: var(--bg); font-size: 14px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.funnel text.dark { fill: var(--dot-ink); }
.funnel text.sm { font-size: 11.5px; font-weight: 500; opacity: .8; }
.funnel .drop { fill: var(--dot); }
.funnel-card .fc-note { font-size: 13.5px; opacity: .78; line-height: 1.6; }

/* R&D: 게이지 */
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 460px; margin-inline: auto; width: 100%; }
.gauge { border: 1.5px solid var(--line); border-radius: 18px; padding: 16px 10px 14px; display: grid; justify-items: center; gap: 6px; background: var(--bg); }
.gauge svg { width: 100%; max-width: 110px; height: auto; transform: rotate(-90deg); }
.gauge .bgc { fill: none; stroke: var(--line); stroke-width: 9; }
.gauge .val { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: calc(276.5 * (1 - var(--v))); animation: gauge 1.8s cubic-bezier(.2, .8, .2, 1) .3s both; }
.gauge.hit .val { stroke: var(--dot); }
.gauge .tgt { stroke: var(--ink); stroke-width: 3; }
@keyframes gauge { from { stroke-dashoffset: 276.5; } }
.gauge b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: -4px; }
.gauge span { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.4; }
@media (max-width: 420px) { .gauges { gap: 8px; } .gauge { padding-inline: 4px; } .gauge b { font-size: 16px; } }

/* 회사소개: 튀어오르는 마침표 */
.biglogo { font-family: var(--font-logo); font-weight: 800; line-height: .82; letter-spacing: -.03em; font-size: clamp(84px, 13vw, 160px); display: inline-grid; justify-items: start; margin-inline: auto; }
.biglogo .w { white-space: nowrap; }
.biglogo .and { font-weight: 500; font-size: .16em; letter-spacing: 1em; margin-top: .6em; line-height: 1; }
.biglogo .bd { display: inline-block; vertical-align: baseline; width: .2em; height: .2em; border-radius: 50%; background: var(--dot); margin-left: .06em; animation: bounce 4.5s cubic-bezier(.3, 0, .5, 1) infinite; }
@keyframes bounce {
  0% { transform: translateY(-2.2em); } 14% { transform: translateY(0); } 22% { transform: translateY(-.7em); } 30% { transform: translateY(0); } 35% { transform: translateY(-.22em); } 40%, 92% { transform: translateY(0); } 100% { transform: translateY(-2.2em); }
}
.logo-stage { display: grid; place-items: center; padding-block: 20px; }

/* 움직임 줄이기: 모든 애니메이션은 기본 상태가 최종 모습 */
@media (prefers-reduced-motion: reduce) {
  .marquee .track { flex-wrap: wrap; width: auto; }
  .marquee .track [aria-hidden] { display: none; }
}
.netgraph text.on-dot { fill: var(--dot-ink); font-weight: 800; }