/* =========================================================
   LINTEL — home
   ========================================================= */

/* ---------- hero ---------- */
.h-hero { position: relative; height: calc(100vh - 2 * var(--frame)); min-height: 60rem; display: flex; flex-direction: column; }
.h-hero-img { position: relative; flex: 1; margin-top: var(--header-h); overflow: hidden; cursor: crosshair; user-select: none; touch-action: pan-y; }
.h-hero-stage { position: absolute; left: 50%; top: 50%; width: min(150rem, 96%, calc((100vh - 30rem) * 2.27)); aspect-ratio: 1000 / 440; transform: translate(-50%, -50%); }
.h-hero-art, .h-hero-blue { position: absolute; inset: 0; }
.h-hero-art canvas { width: 100%; height: 100%; }
.h-hero-blue { color: var(--ink); clip-path: inset(50% 50% 50% 50%); background-color: var(--bg); background-image: var(--grid-bg); background-size: 3.2rem 3.2rem; }
.h-hero-blue svg { width: 100%; height: 100%; }
.h-hero-blue .ln-main { stroke-width: 1.1; }
.h-hero-blue .ln-sub { stroke-width: .6; opacity: .7; }
.h-hero-blue .ln-tree { stroke-width: .5; }
.h-hero-blue .dimline { stroke: var(--brand); stroke-width: .6; }
.h-hero-sel { position: absolute; border: var(--b) dashed var(--brand); pointer-events: none; opacity: 0; }
.h-hero-sel.on { opacity: 1; }
.h-hero-sel-dim { position: absolute; left: 0; top: -1.8rem; color: var(--brand); white-space: nowrap; }
.h-hero-tags { position: absolute; inset: 0; pointer-events: none; }
.h-tag { position: absolute; pointer-events: auto; transform: translate(-50%, -50%); }
.h-tag-dot { position: relative; width: 1.4rem; height: 1.4rem; background: var(--brand); animation: fadeLoop 1.6s ease-in-out infinite; cursor: pointer; }
.h-tag-card { position: absolute; left: -.6rem; bottom: -.6rem; width: 24rem; background: var(--brand); color: #fff; padding: .9rem 1rem 1rem; clip-path: inset(calc(100% - 1.4rem) calc(100% - 1.4rem) 0 0); transition: clip-path .6s var(--ease-out); pointer-events: none; transform: translate(0, 0); }
.h-tag-card .mono { opacity: .85; margin-bottom: .4rem; display: flex; justify-content: space-between; }
.h-tag-card b { display: block; font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; }
.h-tag.flip .h-tag-card { left: auto; right: -.6rem; clip-path: inset(calc(100% - 1.4rem) 0 0 calc(100% - 1.4rem)); }
.h-tag.up .h-tag-card { bottom: auto; top: -.6rem; clip-path: inset(0 calc(100% - 1.4rem) calc(100% - 1.4rem) 0); }
.h-tag.active .h-tag-card, .h-tag:hover .h-tag-card { clip-path: inset(0 0 0 0); }
.h-tag.active .h-tag-dot, .h-tag:hover .h-tag-dot { animation: none; opacity: 0; }
.h-tag-dot { transition: opacity .3s; }
.h-tag.hidden-tag { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.4); transition: opacity .3s, transform .4s var(--ease-out); }
.h-tag.show-tag { opacity: 1; transition: opacity .3s, transform .5s var(--ease-out); }
.h-hero-cross { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.h-hero-img:hover .h-hero-cross { opacity: 1; }
.h-hero-cross i { position: absolute; background: var(--brand); opacity: .55; }
.h-hero-cross .cx { top: 0; bottom: 0; width: var(--b); left: 0; }
.h-hero-cross .cy { left: 0; right: 0; height: var(--b); top: 0; }
.h-hero-coord { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: .2rem; color: var(--brand); pointer-events: none; opacity: 0; transition: opacity .3s; padding: .8rem; }
.h-hero-hint { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; flex-direction: column; background: var(--ink); color: var(--bg); padding: .5rem .7rem; opacity: 0; transition: opacity .3s; }
.h-hero-img:hover .h-hero-coord, .h-hero-img:hover .h-hero-hint { opacity: 1; }
.h-hero-img.dragging .h-hero-hint { opacity: 0; }
.h-hero-count { position: absolute; right: 3.2rem; top: 2.8rem; color: var(--ink); opacity: 0; transition: opacity .4s; display: flex; align-items: center; gap: .6rem; }
.h-hero-count.on { opacity: 1; }

.h-hero-bot { position: relative; display: grid; grid-template-columns: 7fr 3.4fr 1.6fr; grid-template-rows: 1fr auto; min-height: 17rem; }
.h-hero-title { padding: 2.4rem 2.4rem 1.6rem; display: flex; align-items: flex-end; }
.h-hero-title .h1 { font-size: 6.4rem; }
.h-hero-sub { position: relative; padding: 1.6rem 1.6rem; }
.h-hero-sub p { max-width: 48rem; }
.h-hero-btn { position: relative; }
.h-discover { position: absolute; inset: 0; padding: 1.6rem 1.2rem; color: var(--brand); display: block; overflow: hidden; isolation: isolate; }
.h-discover::before { content: ''; position: absolute; inset: 0; background: var(--brand); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-out); z-index: -1; }
.h-discover:hover::before { transform: scaleY(1); }
.h-discover:hover { color: #fff; }
.h-discover .roll { position: relative; display: block; overflow: hidden; height: 1.3em; }
.h-discover .roll span { display: block; transition: transform .6s var(--ease-out); }
.h-discover .roll span + span { position: absolute; top: 100%; left: 0; }
.h-discover:hover .roll span { transform: translateY(-100%); }
.h-discover .arr { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.8rem; transition: transform .5s var(--ease-out); }
.h-discover:hover .arr { transform: translate(.3rem, .3rem); }
.h-hero-marquee { grid-column: 2 / 4; position: relative; height: 3.2rem; display: flex; align-items: center; color: var(--muted); border-left: var(--b) solid var(--line); }
.h-hero-marquee .marquee-track span { padding: 0 1.8rem; }
@media (max-width: 991px) {
  .h-hero { height: auto; min-height: 0; }
  .h-hero-img { height: 62vh; flex: none; }
  .h-hero-stage { width: 128%; }
  .h-hero-bot { grid-template-columns: 1fr 1fr; }
  .h-hero-title { grid-column: 1 / 3; }
  .h-hero-title .h1 { font-size: 4.2rem; }
  .h-hero-btn { min-height: 9rem; }
  .h-hero-marquee { grid-column: 1 / 3; border-left: 0; }
  .h-hero-hint, .h-hero-coord, .h-hero-cross { display: none; }
}

/* ---------- intro ---------- */
.h-intro { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.h-intro > * { min-width: 0; }
.h-intro-img { position: relative; grid-row: span 2; min-height: 92vh; overflow: hidden; }
.h-intro-img .ink-wrap { position: absolute; inset: 0; }
.h-intro-body { padding: 8rem 4rem 6rem 8rem; display: flex; flex-direction: column; gap: 3.2rem; align-items: flex-start; }
.h-intro-text { font-size: 3.6rem; line-height: 1.02; max-width: 60rem; }
.h-intro-partners { position: relative; align-self: end; }
.h-intro-plabel { position: relative; display: flex; justify-content: space-between; align-items: center; height: 4.4rem; padding-left: 1.6rem; }
.h-intro-ctl { display: flex; height: 100%; }
.h-intro-ctl .ctl { height: 100%; width: 4.4rem; }
.h-intro-logos { position: relative; overflow: hidden; }
.h-intro-track { display: flex; transition: transform .9s var(--ease-out); }
.h-logo { position: relative; flex: 0 0 20%; height: 10rem; display: grid; place-items: center; color: var(--ink-2); filter: grayscale(1); opacity: .8; transition: opacity .3s, color .3s; }
.h-logo:hover { opacity: 1; color: var(--ink); }
.h-logo .ln.v { right: 0; left: auto; }
.pmark { display: flex; align-items: center; gap: .8rem; }
.pmark svg { width: 2.4rem; height: 2.4rem; }
.pmark b { display: block; font-size: 1.3rem; letter-spacing: .04em; font-weight: 600; line-height: 1; }
.pmark small { display: block; font-size: 1rem; color: var(--muted); letter-spacing: .02em; margin-top: .2rem; }
.h-intro-cap { position: relative; padding: .8rem 1.6rem; color: var(--muted); }
@media (max-width: 767px) {
  .h-intro { grid-template-columns: 1fr; }
  .h-intro-img { min-height: 60vh; grid-row: auto; }
  .h-intro-body { padding: 4rem 1.6rem; }
  .h-intro-text { font-size: 2.6rem; }
  .h-logo { flex-basis: 50%; }
}

/* ---------- problems ---------- */
.h-problem { position: relative; }
.h-problem-head { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding: 2.4rem 1.6rem 4rem; align-items: end; }
.h-problem-head .h2 { margin-top: 1.2rem; }
.h-problem-sub { max-width: 40rem; justify-self: end; }
.h-problem-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.h-pitem { position: relative; display: flex; flex-direction: column; cursor: default; }
.h-pitem-head { display: flex; justify-content: space-between; padding: 1.2rem 1.6rem; color: var(--ink); }
.h-pitem-label { display: flex; align-items: center; gap: .8rem; }
.h-pitem-label .sq { width: 0; transition: width .4s var(--ease-out); }
.h-pitem-label span:last-child { transition: transform .5s var(--ease-out); }
.h-pitem-img { position: relative; height: 22rem; display: grid; place-items: center; color: var(--dim); transition: color .5s; }
.h-pitem-img::after { content: ''; position: absolute; inset: 0; background-image: var(--grid-bg); background-size: 6.4rem 6.4rem; background-position: center; opacity: 0; transition: opacity .4s; pointer-events: none; }
.h-pitem-img .plus { transform: scale(0); transition: transform .45s var(--ease-out); }
.h-pitem-img svg { width: 70%; max-width: 26rem; }
.pglyph .sol { stroke: currentColor; }
.pglyph .dsh { stroke-dasharray: 3 3; }
.pglyph polygon { fill: var(--bg); }
.pglyph .f-l { fill: color-mix(in srgb, var(--bg) 92%, var(--ink)); }
.pglyph .f-r { fill: color-mix(in srgb, var(--bg) 84%, var(--ink)); }
.h-pitem-body { position: relative; padding: 2.4rem 1.6rem 3.2rem; min-height: 22rem; }
.h-pitem-body .h6 { margin-bottom: 2.4rem; }
.h-pitem-body p { max-width: 30rem; }
@media (hover: hover) and (min-width: 992px) {
  .h-pitem:hover .h-pitem-img { color: var(--ink); }
  .h-pitem:hover .h-pitem-img::after { opacity: 1; }
  .h-pitem:hover .h-pitem-img .plus { transform: scale(1); }
  .h-pitem:hover .h-pitem-label .sq { width: .6rem; }
  .h-pitem:hover .pglyph .dsh { animation: dashmove 1.2s linear infinite; }
  .h-pitem:hover .pglyph .drop { animation: drop 1.6s var(--ease-out) infinite; }
  .h-pitem:hover .pglyph .scan { animation: spin 3s linear infinite; transform-origin: 100px 70px; }
  .h-pitem:hover .pglyph .top { animation: lift 1.6s ease-in-out infinite; }
}
@keyframes dashmove { to { stroke-dashoffset: -12; } }
@keyframes drop { 0% { transform: translateY(-10px); opacity: .2; } 60%, 100% { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lift { 50% { transform: translateY(-6px); } }
@media (max-width: 991px) {
  .h-problem-head { grid-template-columns: 1fr; }
  .h-problem-sub { justify-self: start; }
  .h-problem-grid { grid-template-columns: 1fr 1fr; }
  .h-pitem { border-bottom: var(--b) solid var(--line); }
  .h-pitem-img { color: var(--ink); }
}
@media (max-width: 600px) { .h-problem-grid { grid-template-columns: 1fr; } }

/* ---------- map ---------- */
.h-map { position: relative; }
.h-map-pin { position: relative; height: calc(100vh - 2 * var(--frame)); overflow: hidden; display: flex; }
.h-map-stage { position: relative; flex: 1; }
.h-map-words { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.h-map-words .h2 { grid-area: 1 / 1; font-size: 6rem; text-align: center; }
.h-map-words .char { display: inline-block; }
.h-map-plan { position: absolute; left: 50%; top: 52%; height: 86%; aspect-ratio: 720 / 760; transform: translate(-50%, -50%); color: var(--ink); }
.plan-svg { width: 100%; height: 100%; overflow: visible; }
.plan-svg .pl-outline rect { vector-effect: non-scaling-stroke; }
.plan-svg .pl-fill { color: #3a3a38; }
.plan-svg .pl-open .win { fill: var(--bg); stroke-width: .6; }
.plan-svg .pl-open .swing { stroke-dasharray: 3 3; stroke-width: .7; }
.plan-svg .pl-open .stair-box { stroke-width: .8; }
.plan-svg .pl-furn { opacity: .75; }
.plan-svg .pl-furn .thin { stroke-width: .5; }
.plan-svg .pl-dims { color: var(--muted); }
.plan-svg .pl-dims text { fill: var(--muted); stroke: none; font: 500 10px 'Geist Mono', monospace; text-anchor: middle; }
.plan-svg .pl-dims text.room { fill: var(--ink-2); font-size: 9px; letter-spacing: .04em; }
.plan-svg .pl-issue { cursor: pointer; }
.plan-svg .pl-issue rect { fill: var(--brand); transition: transform .4s var(--ease-out); transform-box: fill-box; transform-origin: center; }
.plan-svg .pl-issue text { fill: #fff; font: 600 9px 'Geist Mono', monospace; text-anchor: middle; pointer-events: none; }
.plan-svg .pl-issue:hover rect, .plan-svg .pl-issue.active rect { transform: scale(1.25); }
.plan-svg .pl-issue.fixed rect { fill: var(--ink); }
.plan-svg .pl-issue .pulse { fill: none; stroke: var(--brand); animation: pulse 1.8s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.plan-svg .pl-fix { opacity: 0; pointer-events: none; }
.plan-svg .pl-fix .fix-wall-gap { fill: var(--bg); }
.plan-svg .pl-fix .fix-leaf { stroke: var(--ink); stroke-width: 1.4; }
.plan-svg .pl-fix .swing { stroke: var(--brand); stroke-dasharray: 3 3; }
.plan-svg .pl-fix .turn { stroke: var(--brand); stroke-dasharray: 4 3; fill: rgba(248, 65, 15, .06); }
.plan-svg .pl-fix .rail { stroke: var(--brand); stroke-width: 2.2; }
.h-map-card { position: absolute; left: 1.6rem; bottom: 1.6rem; width: 22rem; background-color: var(--bg); border: var(--b) solid var(--ink); z-index: 3; }
.h-map-card-head { background: var(--ink); color: var(--bg); padding: .6rem .8rem; }
.h-map-card-body { padding: .9rem .8rem 1rem; display: flex; flex-direction: column; gap: 1.4rem; min-height: 11rem; justify-content: space-between; }
.h-map-card-bar { height: .4rem; background: var(--line-soft); }
.h-map-card-bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.h-map-pop { position: absolute; z-index: 5; width: 30rem; background-color: var(--bg); background-image: var(--grain); border: var(--b) solid var(--ink); box-shadow: .8rem .8rem 0 rgba(40, 40, 40, .12); opacity: 0; pointer-events: none; transform: translateY(1rem); transition: opacity .35s, transform .5s var(--ease-out); }
.h-map-pop.show { opacity: 1; pointer-events: auto; transform: none; }
.h-map-pop-head { display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--bg); padding: .6rem .8rem; }
.h-map-pop-x { color: var(--bg); font-size: 1.6rem; line-height: 1; }
.h-map-pop-body { padding: 1.2rem 1.2rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
.h-map-pop-fix { display: flex; flex-direction: column; gap: .3rem; padding: .8rem; background: rgba(40, 40, 40, .05); color: var(--ink); }
.h-map-pop-acts { display: flex; gap: .4rem; padding: 0 1.2rem 1.2rem; }
.h-map-pop-acts .btn { flex: 1; }
.h-map-pop.done .h-map-pop-acts { display: none; }
.h-map-panel { position: relative; width: 0; overflow: hidden; display: flex; flex-direction: column; flex: none; }
.h-map-panel > * { width: 44rem; }
.h-map-panel-label { padding: 1.6rem; }
.h-map-panel-mid { padding: 1.6rem; margin-top: auto; display: flex; flex-direction: column; gap: 1.6rem; }
.h-map-feats { margin-top: 2.4rem; }
.h-map-feats li { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.6rem; }
.h-map-feats i { width: 2.4rem; height: 2.4rem; color: var(--ink-2); }
.hexi { width: 100%; height: 100%; }
@media (max-width: 991px) {
  .h-map-pin { flex-direction: column; height: auto; }
  .h-map-stage { height: 90vh; flex: none; }
  .h-map-panel { width: auto !important; }
  .h-map-panel > * { width: auto; }
  .h-map-words .h2 { font-size: 3.4rem; padding: 0 2rem; }
  .h-map-plan { height: auto; width: 92%; }
  .h-map-pop { left: 1.6rem !important; right: 1.6rem; top: auto !important; bottom: 14rem; width: auto; }
}

/* ---------- platform ---------- */
.h-platform { position: relative; }
.h-plat-row { position: relative; display: grid; grid-template-columns: 3fr 5fr 3fr; min-height: 56rem; }
.h-plat-left { position: relative; padding: 1.6rem; display: flex; flex-direction: column; justify-content: space-between; }
.h-plat-left .h4 { margin-top: auto; padding-top: 2rem; }
.h-plat-mid { position: relative; display: grid; place-items: center; padding: 4rem 3.2rem; overflow: hidden; }
.h-plat-right { position: relative; padding: 1.6rem; display: flex; flex-direction: column; justify-content: center; gap: 3.2rem; }
.h-plat-right p { max-width: 36rem; }
.h-plat-more { position: relative; display: flex; justify-content: space-between; align-items: center; height: 4.4rem; padding-left: 0; color: var(--ink); margin: 0 -1.6rem; padding-left: 1.6rem; overflow: hidden; }
.h-plat-more .roll { position: relative; display: block; overflow: hidden; height: 1.3em; }
.h-plat-more .roll span { display: block; transition: transform .6s var(--ease-out); }
.h-plat-more .roll span + span { position: absolute; top: 100%; left: 0; }
.h-plat-more:hover .roll span { transform: translateY(-100%); }
.h-plat-more .ctl { height: 100%; border-left: var(--b) solid var(--line); }
.h-plat-more:hover .ctl::after { transform: translateX(0); }
.h-plat-more:hover .ctl { color: #fff; }
@media (max-width: 991px) {
  .h-plat-row { grid-template-columns: 1fr; }
  .h-plat-left { min-height: 14rem; }
  .h-plat-left .ln.v, .h-plat-mid .ln.v { display: none; }
  .h-plat-mid { padding: 2rem 1.6rem; }
}

/* ---------- UI mockups ---------- */
.mock { position: relative; width: 100%; max-width: 62rem; font-family: 'Geist', sans-serif; }
.mock .mono { letter-spacing: 0; }
.mock-win { position: relative; background: #fbfaf6; border: var(--b) solid var(--ink); }
.mock-bar { display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--bg); padding: .5rem .8rem; font: 500 1rem 'Geist Mono', monospace; text-transform: uppercase; }
.mock-bar i { display: inline-block; width: .6rem; height: .6rem; background: var(--brand); margin-right: .5rem; }
.mock-canvas { position: relative; height: 34rem; overflow: hidden; background-image: var(--grid-bg); background-size: 2.4rem 2.4rem; color: var(--ink); }
.mock-canvas .plan-mini { position: absolute; left: 4%; top: 6%; height: 88%; width: auto; }
.mock-canvas .plan-mini .hi { fill: var(--brand); opacity: 0; transition: opacity .6s; }
.mock-canvas.lit .plan-mini .hi { opacity: .85; }
.mock-tools { position: absolute; left: .8rem; top: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.mock-tools span { width: 2.2rem; height: 2.2rem; border: var(--b) solid var(--line); background: #fbfaf6; }
.mock-chat-panel { position: absolute; right: 1.2rem; top: 1.2rem; bottom: 1.2rem; width: 46%; display: flex; flex-direction: column; background: #fbfaf6; border: var(--b) solid var(--ink); box-shadow: .6rem .6rem 0 rgba(40, 40, 40, .1); }
.mock-msgs { flex: 1; padding: .8rem; display: flex; flex-direction: column; gap: .6rem; overflow: hidden; justify-content: flex-end; }
.msg { max-width: 92%; font-size: 1.15rem; line-height: 1.35; padding: .6rem .7rem; border: var(--b) solid var(--line); background: var(--bg); color: var(--ink); opacity: 0; transform: translateY(.6rem); transition: opacity .4s, transform .5s var(--ease-out); }
.msg.in { opacity: 1; transform: none; }
.msg.me { align-self: flex-end; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.msg.ai b { color: var(--brand); font-weight: 600; }
.msg .t { display: block; font: 500 .9rem 'Geist Mono', monospace; opacity: .55; margin-top: .3rem; }
.msg .acts { display: flex; gap: .4rem; margin-top: .6rem; }
.msg .acts button { font: 500 .95rem 'Geist Mono', monospace; text-transform: uppercase; padding: .4rem .6rem; border: var(--b) solid var(--ink); }
.msg .acts button.ok { background: var(--brand); color: #fff; border-color: var(--brand); }
.msg .acts button:hover { filter: brightness(.92); }
.typing { display: inline-flex; gap: .3rem; }
.typing i { width: .4rem; height: .4rem; background: currentColor; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
.mock-input { display: flex; border-top: var(--b) solid var(--line); }
.mock-input input { flex: 1; border: 0; background: transparent; padding: .7rem .8rem; font-size: 1.1rem; outline: 0; color: var(--ink); min-width: 0; }
.mock-input button { width: 3.2rem; display: grid; place-items: center; border-left: var(--b) solid var(--line); }
.mock-input button svg { width: 1.2rem; }
.mock-input button:hover { background: var(--brand); color: #fff; }

.mock-dash .mock-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; padding: .8rem; background: #fbfaf6; }
.stat { border: var(--b) solid var(--line); padding: .7rem .8rem; }
.stat .mono { font-size: .95rem; color: var(--muted); display: flex; justify-content: space-between; text-transform: uppercase; }
.stat .mono i { width: .6rem; height: .6rem; display: inline-block; }
.stat b { display: block; font-size: 2.4rem; font-weight: 600; color: var(--ink); letter-spacing: -.03em; margin-top: .6rem; }
.dash-col { grid-column: span 2; border: var(--b) solid var(--line); }
.dash-col h5 { display: flex; justify-content: space-between; font: 500 1rem 'Geist Mono', monospace; text-transform: uppercase; color: var(--ink); padding: .6rem .8rem; border-bottom: var(--b) solid var(--line); }
.dash-col h5 a { color: var(--brand); }
.act-row { display: flex; gap: .8rem; align-items: center; padding: .7rem .8rem; border-bottom: var(--b) solid var(--line-soft); font-size: 1.15rem; color: var(--ink); }
.act-row .ic { width: 2.6rem; height: 2.6rem; border: var(--b) solid var(--line); display: grid; place-items: center; flex: none; color: var(--ink-2); }
.act-row .ic svg { width: 1.6rem; }
.act-row small { display: block; color: var(--muted); font-size: 1rem; }
.act-row .st { margin-left: auto; font: 500 .9rem 'Geist Mono', monospace; text-transform: uppercase; display: flex; align-items: center; gap: .3rem; color: var(--muted); }
.act-row .st i { width: .5rem; height: .5rem; background: var(--brand); }
.act-row .st.ok i { background: #3c7a4a; }
.appr-row { padding: .7rem .8rem; border-bottom: var(--b) solid var(--line-soft); font-size: 1.15rem; color: var(--ink); }
.appr-row .top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.appr-row .bar { height: .4rem; background: var(--line-soft); margin-top: .6rem; }
.appr-row .bar i { display: block; height: 100%; background: var(--ink); width: 0; transition: width 1.2s var(--ease-out); }
.appr-row button { font: 500 .9rem 'Geist Mono', monospace; text-transform: uppercase; padding: .35rem .6rem; background: var(--brand); color: #fff; flex: none; }
.appr-row button:hover { background: var(--ink); }
.appr-row.done button { background: var(--ink); pointer-events: none; }
.appr-row.done .bar i { width: 100% !important; background: #3c7a4a; }

/* ---------- why ---------- */
.h-why { position: relative; }
.h-why-head { display: grid; grid-template-columns: 7fr 5fr; }
.h-why-title { position: relative; padding: 2.4rem 1.6rem 4rem; }
.h-why-title .h2 { margin-top: 1.2rem; }
.h-why-sub { padding: 2.4rem 1.6rem; display: flex; flex-direction: column; gap: 2rem; justify-content: flex-end; }
.h-why-sub p { max-width: 44rem; }
.h-why-main { position: relative; background-image: var(--grid-bg); background-size: 6.4rem 6.4rem; }
.h-why-divider { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--b); background: var(--line); }
.h-why-scan { position: sticky; top: 50vh; height: 0; z-index: 4; pointer-events: none; }
.h-why-scan i { position: absolute; left: 1.6rem; right: 1.6rem; top: 0; height: var(--b); background: var(--brand); transform-origin: left; }
.h-why-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 92vh; align-items: center; }
.h-why-bar { position: sticky; top: calc(50vh - 2.4rem); align-self: start; margin-top: calc(46vh - 2.4rem); z-index: 5; display: grid; grid-template-columns: 14rem 1fr auto; align-items: center; gap: 1.6rem; height: 4.8rem; padding: 0 1.6rem; background: var(--ink); color: var(--bg); margin-left: 1.6rem; margin-right: 1.6rem; opacity: .14; transition: opacity .5s; }
.h-why-bar b { color: var(--bg); }
.h-why-item.active .h-why-bar { opacity: 1; }
.h-why-img { position: relative; width: 46rem; height: 46rem; justify-self: center; }
.h-why-item[data-side="r"] .h-why-bar { grid-column: 2; grid-row: 1; }
.h-why-rail { position: sticky; top: calc(50vh - 2.4rem); height: 0; z-index: 5; pointer-events: none; }
.h-why-rail .h-why-bar { position: absolute; top: 0; margin: 0; width: calc(50% - 3.2rem); left: 1.6rem; opacity: 0; transform: translateY(.6rem); transition: opacity .45s, transform .6s var(--ease-out); }
.h-why-rail .h-why-bar.side-r { left: auto; right: 1.6rem; }
.h-why-rail .h-why-bar.on { opacity: 1; transform: none; }
.h-why-main.has-rail .h-why-item[data-side="l"] .h-why-img { grid-column: 2; grid-row: 1; }
.h-why-main.has-rail .h-why-item[data-side="r"] .h-why-img { grid-column: 1; grid-row: 1; }
.h-why-item[data-side="r"] .h-why-img { grid-column: 1; grid-row: 1; }
.h-why-art { position: absolute; inset: 1.6rem; }
.h-why-art canvas, .h-why-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.why-tag { position: absolute; background: var(--brand); color: #fff; padding: .8rem .9rem; width: 17rem; transform-origin: left top; }
.why-tag b { display: block; font-weight: 600; font-size: 1.3rem; text-transform: uppercase; line-height: 1.1; margin-top: .3rem; }
.why-card { position: absolute; background: #fbfaf6; border: var(--b) solid var(--ink); width: 21rem; font-size: 1.2rem; color: var(--ink); }
.why-card .mock-bar { padding: .4rem .6rem; font-size: .9rem; }
.why-card .in { padding: .6rem; }
.why-card .in .c-brand { font: 500 .9rem 'Geist Mono', monospace; text-transform: uppercase; }
.why-card .in b { display: block; font-weight: 600; text-transform: uppercase; margin: .2rem 0 .4rem; font-size: 1.15rem; }
.why-card .in .fix { background: rgba(40, 40, 40, .06); padding: .5rem; margin-top: .4rem; }
.why-sheet { position: absolute; background: #fbfaf6; border: var(--b) solid var(--ink-2); padding: .4rem; }
.why-sheet .plan-mini { width: 100%; height: auto; color: var(--ink); }
.why-sheet .cap { display: flex; justify-content: space-between; font: 600 1rem 'Geist', sans-serif; text-transform: uppercase; color: var(--ink); border-top: var(--b) solid var(--line); padding-top: .4rem; margin-top: .4rem; }
.why-sheet .st { font: 500 .85rem 'Geist Mono', monospace; color: var(--muted); }
.why-sheet .st.ok { color: #3c7a4a; }
.why-sheet .st.run { color: var(--brand); }
.why-net .pt { fill: var(--brand); }
.why-net .lk { stroke: var(--brand); stroke-dasharray: 3 3; fill: none; }
.why-net .base { color: var(--ink-2); }
.why-legend { position: absolute; right: 0; bottom: 0; background: var(--ink); color: var(--bg); font: 500 1.05rem 'Geist Mono', monospace; text-transform: uppercase; padding: .8rem .9rem; width: 16rem; line-height: 1.5; }
@media (max-width: 991px) {
  .h-why-head { grid-template-columns: 1fr; }
  .h-why-divider, .h-why-scan { display: none; }
  .h-why-item { grid-template-columns: 1fr; min-height: 0; padding: 3rem 0; }
  .h-why-bar { position: relative; top: auto; margin: 0 1.6rem 2rem; opacity: 1; grid-template-columns: 1fr auto; height: auto; padding: 1.2rem 1.6rem; }
  .h-why-bar span.t14 { grid-column: 1; grid-row: 2; }
  .h-why-item[data-side] .h-why-bar, .h-why-item[data-side] .h-why-img { grid-column: 1; grid-row: auto; }
  .h-why-img { width: min(36rem, 90vw); height: min(36rem, 90vw); }
}

/* ---------- use cases ---------- */
.h-use { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.h-use-img { position: relative; }
.h-use-stack { position: sticky; top: calc(var(--header-h) + var(--frame)); height: calc(100vh - var(--header-h) - 2 * var(--frame)); overflow: hidden; }
.h-use-slide { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.h-use-slide.on { clip-path: inset(0 0 0 0); z-index: 2; }
.h-use-slide canvas { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.h-use-num { position: absolute; left: 1.6rem; bottom: 1.6rem; z-index: 3; background: var(--ink); color: var(--bg); padding: .4rem .6rem; }
.h-use-right { display: flex; flex-direction: column; }
.h-use-title { padding: 6rem 1.6rem 6rem 8rem; }
.h-use-title .h2 { margin-top: 1.2rem; }
.h-use-list { margin-top: auto; }
.h-use-item { position: relative; cursor: pointer; }
.h-use-item .ln.h.b { left: 8rem; }
.h-use-head { display: grid; grid-template-columns: 6.4rem 1fr 4rem; align-items: center; padding: 1.8rem 1.6rem 1.8rem 1.6rem; }
.h-use-head .n { color: var(--muted); transition: color .3s; }
.h-use-head .h6 { font-size: 2.2rem; transition: transform .6s var(--ease-out); }
.h-use-head .pm { width: 1.4rem; height: 1.4rem; justify-self: end; color: var(--muted); transition: color .3s; }
.h-use-head .pm .pm-v { transition: transform .4s var(--ease-out); transform-origin: center; transform-box: fill-box; }
.h-use-item.active .pm .pm-v { transform: scaleY(0); }
.h-use-item:hover .n, .h-use-item.active .n { color: var(--brand); }
.h-use-item:hover .pm { color: var(--ink); }
.h-use-item:hover .h6 { transform: translateX(1rem); }
.h-use-body { overflow: hidden; }
.h-use-body p { padding: 0 1.6rem 2rem 8rem; max-width: 56rem; }
@media (max-width: 767px) {
  .h-use { grid-template-columns: 1fr; }
  .h-use-stack { position: relative; top: 0; height: 60vh; }
  .h-use-title { padding: 4rem 1.6rem; }
  .h-use-head { grid-template-columns: 4rem 1fr 3rem; }
  .h-use-body p { padding-left: 5.6rem; }
}