/* ============================================================
   Lingque — intelligent customer operations page (layered on style.css)
   ============================================================ */

/* ---------- Hero ---------- */
.lg-hero::before {
  background:
    radial-gradient(900px 600px at 78% 40%, rgba(47, 107, 255, 0.26), transparent 60%),
    radial-gradient(520px 380px at 64% 88%, rgba(60, 211, 255, 0.10), transparent 70%),
    radial-gradient(600px 400px at 10% 10%, rgba(156, 140, 255, 0.10), transparent 70%),
    linear-gradient(180deg, #050d26 0%, var(--ink) 100%);
}
.lg-hero__inner { display: grid; grid-template-columns: 1fr 0.92fr; gap: 64px; align-items: center; min-height: 640px; padding-bottom: 24px; }
.lg-hero__title { font-size: clamp(34px, 3.8vw, 54px); }
.lg-mark { display: flex; width: fit-content; align-items: center; gap: 12px; margin: 4px 0 18px; font: 600 24px/1 var(--f-display); color: var(--ice); letter-spacing: -0.02em; }
.lg-mark b { margin-right: 6px; font-family: var(--f-local), sans-serif; font-weight: 700; background: linear-gradient(100deg, #8fe3ff, var(--blue-hi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-mark__glyph { display: grid; place-items: center; width: 34px; height: 34px; }
.lg-mark__glyph img { width: 31px; height: 34px; filter: drop-shadow(0 6px 16px rgba(47, 107, 255, 0.55)); }

.lg-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin-top: 26px; }
.lg-four li { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 10px 14px; border-radius: 12px; border: 1px solid var(--line-strong); border-left: 2px solid var(--cyan); background: rgba(47, 107, 255, 0.07); }
.lg-four b { color: var(--ice); font-size: 15px; font-weight: 600; }
.lg-four span { color: var(--mute); font-size: 12.5px; }
.lg-hero .hero__ctas { margin-top: 28px; }
.lg-hero .hero__stats { margin-top: 40px; }

.lg-hero__visual { position: relative; padding: 10px 0 40px; }
.lg-card { border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: rgba(5, 12, 34, 0.88); backdrop-filter: blur(14px); overflow: hidden; box-shadow: 0 50px 90px -40px rgba(47, 107, 255, 0.7), 0 0 0 1px rgba(60, 211, 255, 0.06) inset; transform: perspective(1600px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
.lg-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.lg-card__head small { display: block; font-size: 10.5px; letter-spacing: .1em; color: var(--cyan); }
.lg-card__head b { font-size: 15px; color: var(--ice); font-weight: 600; }
.lg-card__state { flex: none; padding: 4px 9px; border-radius: 6px; font-size: 11px; color: var(--ok); background: rgba(92, 242, 176, 0.1); border: 1px solid rgba(92, 242, 176, 0.35); }
.lg-card__chain { position: relative; display: grid; gap: 8px; padding: 12px 18px 14px; }
.lg-card__chain::before { content: ""; position: absolute; left: 30px; top: 22px; bottom: 24px; width: 2px; background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px); background-size: 2px 16px; animation: flowDown .8s linear infinite; }
.lg-card__chain li { position: relative; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; padding: 9px 12px 9px 28px; border-radius: 10px; border: 1px solid var(--line); background: rgba(16, 32, 78, 0.5); animation: lineIn .45s var(--ease) both; }
.lg-card__chain li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.lg-card__chain li:nth-child(2) { animation-delay: .1s; }
.lg-card__chain li:nth-child(3) { animation-delay: .2s; }
.lg-card__chain li:nth-child(4) { animation-delay: .3s; }
.lg-card__chain li:nth-child(5) { animation-delay: .4s; }
.lg-card__chain span { font-size: 10.5px; letter-spacing: .06em; color: var(--mute); }
.lg-card__chain b { font-size: 13px; font-weight: 500; color: var(--ice); line-height: 1.4; }
.lg-card__ab { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; padding: 0 18px 14px; }
.lg-card__ab small { font-size: 10.5px; color: var(--mute); }
.lg-card__split { display: flex; height: 22px; border-radius: 7px; overflow: hidden; font: 500 10.5px/22px var(--f-mono); color: #fff; }
.lg-card__split i { width: var(--v); font-style: normal; text-align: center; background: var(--blue); }
.lg-card__split i:nth-child(2) { background: #7a64ff; }
.lg-card__split i.is-ctl { background: rgba(255, 255, 255, 0.12); color: var(--mute); }
.lg-card__foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.lg-card__foot div { display: grid; gap: 3px; padding: 12px 18px; }
.lg-card__foot div + div { border-left: 1px solid var(--line); }
.lg-card__foot small { font-size: 10.5px; color: var(--mute); }
.lg-card__foot b { font-size: 15px; font-weight: 500; color: var(--ice); }
.is-good { color: var(--ok) !important; }

.lg-float { position: absolute; left: -36px; bottom: 0; display: flex; gap: 12px; align-items: center; max-width: 340px; padding: 12px 16px 12px 12px; border-radius: 14px; border: 1px solid rgba(255, 198, 92, 0.5); background: rgba(12, 16, 36, 0.94); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.8); animation: lgToast 7s var(--ease) 1.4s infinite both; }
.lg-float__ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--warn); color: #1a1300; font-size: 14px; }
.lg-float b { display: block; font-size: 13px; font-weight: 600; color: var(--ice); }
.lg-float span:not(.lg-float__ico) { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
@keyframes lgToast { 0% { opacity: 0; transform: translateY(14px); } 8%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(6px); } }

/* ---------- Shared chips ---------- */
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-chips i { font-style: normal; font-size: 12px; line-height: 1.3; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.6); color: var(--text); }

/* ---------- CDP + MA value ---------- */
.lg-val { display: grid; grid-template-columns: minmax(0, 1.75fr) 150px minmax(0, .62fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.lg-val__lbl { display: block; margin-bottom: 12px; font-size: 10.5px; letter-spacing: .14em; color: var(--cyan); }
html.is-local .lg-val__lbl { font-family: var(--f-body); letter-spacing: .06em; font-size: 12px; }
.lg-val__data, .lg-val__biz { padding: 18px; border-radius: var(--r-lg); border: 1px dashed rgba(60, 211, 255, 0.4); background: rgba(4, 10, 28, 0.5); }
.lg-val__in { display: grid; grid-template-columns: minmax(0, 1fr) 40px 140px; align-items: stretch; }
.lg-src { padding: 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.35); }
.lg-src h5 { margin-bottom: 10px; font-size: 13.5px; color: var(--ice); text-align: center; }
.lg-src__g { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.lg-src__g b { padding-top: 4px; font-size: 12.5px; color: var(--cyan); font-weight: 600; }
.lg-src__g .lg-chips i { font-size: 11.5px; padding: 3px 8px; }
.lg-val__flow { position: relative; }
.lg-val__flow::before { content: ""; position: absolute; left: 6px; right: 8px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flowRight .8s linear infinite; }
.lg-val__flow::after { content: ""; position: absolute; right: 2px; top: 50%; margin-top: -5px; border-block: 5px solid transparent; border-left: 8px solid var(--cyan); }
.lg-val__block { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 18px 12px; border-radius: 14px; text-align: center; }
.lg-val__block > b { font: 600 28px/1 var(--f-display); color: #fff; letter-spacing: -0.02em; }
.lg-val__block small { font-size: 12px; color: #c4d2f5; }
.lg-val__block ul { display: grid; gap: 6px; width: 100%; margin-top: 12px; }
.lg-val__block li { padding: 6px 8px; border-radius: 8px; background: rgba(4, 10, 28, 0.45); font-size: 12px; color: var(--ice); }
.lg-val__block--cdp { border: 1px solid rgba(60, 211, 255, 0.55); background: linear-gradient(160deg, rgba(47, 107, 255, 0.55), rgba(47, 107, 255, 0.15)); box-shadow: 0 20px 50px -20px rgba(47, 107, 255, 0.8); }
.lg-val__block--ma { height: calc(100% - 26px); border: 1px solid rgba(156, 140, 255, 0.6); background: linear-gradient(160deg, rgba(120, 100, 255, 0.5), rgba(47, 107, 255, 0.12)); box-shadow: 0 20px 50px -20px rgba(120, 100, 255, 0.8); }
.lg-val__pipe { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 0 14px; text-align: center; font-size: 12px; line-height: 1.35; color: var(--text); }
.lg-val__pipe i { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, #b8acff 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: flowRight .8s linear infinite; }
.lg-val__pipe i::after { content: ""; position: absolute; right: -4px; top: -4px; border-block: 5px solid transparent; border-left: 8px solid #b8acff; }
.lg-val__out { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-left: 26px; }
.lg-val__out li { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.45); }
.lg-val__out li::before { content: ""; position: absolute; left: -26px; top: 50%; width: 26px; height: 1px; background: rgba(156, 140, 255, 0.6); }
.lg-val__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(60, 211, 255, 0.5); background: rgba(60, 211, 255, 0.08); }
.lg-val__ico svg { width: 20px; height: 20px; fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lg-val__out b { display: block; font-size: 14px; color: var(--ice); font-weight: 600; }
.lg-val__out small { font-size: 12px; color: var(--mute); line-height: 1.4; }

/* ---------- Automation loop ---------- */
.lg-loop { display: grid; grid-template-columns: 1fr 360px 1fr; grid-template-areas: "tl ring tr" "bl ring br"; gap: 28px 48px; align-items: center; }
.lg-loop__item { padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.5); transition: border-color .4s, background .4s, box-shadow .4s; }
.lg-loop__item--tl { grid-area: tl; text-align: right; }
.lg-loop__item--bl { grid-area: bl; text-align: right; }
.lg-loop__item--tr { grid-area: tr; }
.lg-loop__item--br { grid-area: br; }
.lg-loop__k { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 14px; color: var(--mute); }
.lg-loop__item--tl .lg-loop__k, .lg-loop__item--bl .lg-loop__k { justify-content: flex-end; }
.lg-loop__k b { padding-left: 10px; border-left: 1px solid var(--line-strong); font: 600 18px/1.1 var(--f-display); color: var(--ice); }
html.is-local .lg-loop__k b { font-family: var(--f-local), sans-serif; }
.lg-loop__item h4 { margin-bottom: 4px; font-size: 15px; color: var(--ice); }
.lg-loop__item > p:last-child { font-size: 13.5px; color: var(--mute); }
.lg-loop__item.is-on { border-color: var(--qc); background: color-mix(in srgb, var(--qc) 12%, rgba(4, 10, 28, 0.6)); box-shadow: 0 20px 50px -24px var(--qc); }
.lg-loop__item.is-on .lg-loop__k b { color: var(--qc); }
[data-q="0"] { --qc: #3cd3ff; }
[data-q="1"] { --qc: #ffc65c; }
[data-q="2"] { --qc: #ff8a5c; }
[data-q="3"] { --qc: #7aa2ff; }

.lg-ring { grid-area: ring; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 360px; height: 360px; }
.lg-ring__q { display: grid; padding: 46px; background: color-mix(in srgb, var(--qc) 28%, #060e2c); border: 1px solid color-mix(in srgb, var(--qc) 45%, transparent); transition: background .4s, box-shadow .4s, filter .4s; filter: saturate(.7); }
.lg-ring__q svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.lg-ring__q--0 { border-radius: 100% 0 0 0; place-items: start end; padding: 52px 30px 0 0; }
.lg-ring__q--1 { border-radius: 0 100% 0 0; place-items: start start; padding: 52px 0 0 30px; }
.lg-ring__q--3 { border-radius: 0 0 0 100%; place-items: end end; padding: 0 30px 52px 0; grid-row: 2; grid-column: 1; }
.lg-ring__q--2 { border-radius: 0 0 100% 0; place-items: end start; padding: 0 0 52px 30px; grid-row: 2; grid-column: 2; }
.lg-ring__q.is-on { background: color-mix(in srgb, var(--qc) 70%, #0a1640); filter: none; box-shadow: 0 0 40px -6px var(--qc); }
.lg-ring__q.is-on svg { opacity: 1; }
.lg-ring__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; gap: 4px; width: 148px; height: 148px; margin: -74px 0 0 -74px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #12205a, #050b22 70%); border: 8px solid var(--deep); box-shadow: 0 0 0 1px var(--line-strong), 0 0 50px -10px rgba(47, 107, 255, 0.8); align-content: center; }
.lg-ring__core b { font: 600 13px/1 var(--f-display); color: var(--ice); letter-spacing: .02em; }
.lg-ring::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(60, 211, 255, 0.3); animation: lgSpin 30s linear infinite; pointer-events: none; }
@keyframes lgSpin { to { transform: rotate(360deg); } }

/* ---------- Product architecture ---------- */
.lg-arch { display: grid; gap: 14px; }
.lg-layer { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: stretch; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); }
.lg-layer__lbl { display: grid; place-items: center; padding: 10px; border-radius: 12px; border: 1px solid rgba(60, 211, 255, 0.3); background: rgba(60, 211, 255, 0.07); color: var(--cyan); font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.35; }
.lg-layer--chain { border-color: rgba(60, 211, 255, 0.4); background: linear-gradient(180deg, rgba(47, 107, 255, 0.14), rgba(4, 10, 28, 0.5)); grid-template-rows: auto auto; }
.lg-layer--chain .lg-layer__lbl { grid-row: span 2; }
.lg-scn { display: grid; grid-template-columns: 1fr 1.1fr .6fr; gap: 12px; }
.lg-scn__g { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(16, 32, 78, 0.35); }
.lg-scn__g h5 { margin-bottom: 10px; font-size: 13.5px; color: var(--ice); text-align: center; }
.lg-scn__g .lg-chips { justify-content: center; }
.lg-scn__g .lg-chips i { font-size: 11.5px; padding: 4px 9px; background: rgba(47, 107, 255, 0.22); border-color: rgba(77, 134, 255, 0.5); color: var(--ice); }
.lg-scn__g--more .lg-chips i { background: rgba(120, 100, 255, 0.2); border-color: rgba(156, 140, 255, 0.5); }

.lg-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lg-chain__col { position: relative; display: flex; flex-direction: column; gap: 8px; }
.lg-chain__col + .lg-chain__col h5::before { content: "→"; position: absolute; left: -12px; top: 10px; width: 12px; text-align: center; color: var(--cyan); font: 500 13px/1 var(--f-mono); }
.lg-chain__col h5 { display: grid; gap: 3px; margin-bottom: 4px; padding: 8px 6px; border-radius: 10px; text-align: center; background: rgba(255, 198, 92, 0.12); border: 1px solid rgba(255, 198, 92, 0.35); }
.lg-chain__col h5 span { font-size: 10.5px; letter-spacing: .06em; color: var(--warn); }
.lg-chain__col h5 b { font-size: 13.5px; color: var(--ice); font-weight: 600; }
.lg-chain__col > span, .lg-chain__col > button { display: grid; place-items: center; min-height: 40px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: rgba(16, 32, 78, 0.55); color: var(--text); font-size: 12.5px; line-height: 1.35; text-align: center; transition: background .3s, border-color .3s, color .3s, box-shadow .3s, opacity .3s; }
.lg-chain__col > span.is-wide { min-height: 64px; }
.lg-chain__col > span a { color: inherit; text-decoration: underline; text-decoration-color: rgba(60, 211, 255, 0.5); text-underline-offset: 3px; }
.lg-chain__col > button { cursor: pointer; }
.lg-chain__col > button:hover { border-color: rgba(60, 211, 255, 0.55); color: var(--ice); }
.lg-chain.is-picked .lg-chain__col > span, .lg-chain.is-picked .lg-chain__col > button { opacity: .45; }
.lg-chain .is-hit { opacity: 1 !important; border-color: var(--cyan) !important; background: linear-gradient(120deg, rgba(47, 107, 255, 0.7), rgba(47, 107, 255, 0.3)) !important; color: #fff !important; box-shadow: 0 10px 30px -12px rgba(60, 211, 255, 0.9); }
.lg-chain__col--fb > span { background: rgba(255, 255, 255, 0.05); }
.lg-chain__sum { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-height: 3em; padding: 12px 16px; border-radius: 12px; border-left: 2px solid var(--cyan); background: rgba(60, 211, 255, 0.06); font-size: 14px; color: var(--text); }
.lg-chain__sum b { font: 500 11.5px/1 var(--f-mono); color: var(--cyan); letter-spacing: .06em; }
.lg-chain__sum em { font-style: normal; margin-left: auto; font: 500 13px/1 var(--f-mono); color: var(--ok); }

.lg-boxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lg-boxes--ent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg-boxes > div { display: grid; gap: 6px; align-content: center; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 198, 92, 0.3); background: rgba(255, 198, 92, 0.07); text-align: center; }
.lg-boxes b { font-size: 14px; color: var(--ice); font-weight: 600; }
.lg-boxes small { font-size: 12px; color: var(--mute); line-height: 1.45; }
.lg-boxes > div.is-mon { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.05); }
.lg-boxes--ent > div { border-color: rgba(60, 211, 255, 0.35); background: rgba(47, 107, 255, 0.14); }

/* ---------- Two modes ---------- */
.lg-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lg-mode { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(16, 32, 78, 0.55), rgba(4, 10, 28, 0.25)); }
.lg-mode .tag { align-self: flex-start; }
.lg-mode h3 { font-size: 21px; margin-bottom: 8px; }
.lg-mode > p { font-size: 15px; color: var(--mute); margin-bottom: 20px; }
.lg-mode--rt { border-color: rgba(255, 198, 92, 0.35); }
.lg-mode--rt .tag { color: var(--warn); border-color: rgba(255, 198, 92, 0.45); }
.lg-sched { display: grid; gap: 8px; }
.lg-sched li { display: grid; grid-template-columns: 96px 1fr auto 76px; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); font-size: 13px; }
.lg-sched time { font-size: 11.5px; color: var(--cyan); }
.lg-sched b { color: var(--ice); font-weight: 500; }
.lg-sched span { font-size: 12px; color: var(--mute); }
.lg-sched em { font-style: normal; justify-self: end; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; color: var(--ice); background: rgba(47, 107, 255, 0.25); }
.lg-stream { display: grid; gap: 8px; min-height: 236px; align-content: start; }
.lg-stream li { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 10, 28, 0.55); font-size: 12px; color: var(--text); animation: lineIn .4s var(--ease) both; }
.lg-stream time { color: #52648f; }
.lg-stream b { color: var(--warn); font-weight: 500; }
.lg-stream .ok { color: var(--ok); }
.lg-stream li:first-child { border-color: rgba(255, 198, 92, 0.45); }

/* ---------- Lifecycle ---------- */
.lg-life { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lg-life::before { content: ""; position: absolute; left: 4%; right: 4%; top: 31px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--blue) 55%, #7a64ff); }
.lg-life li { position: relative; display: flex; flex-direction: column; padding: 0 4px; }
.lg-life__no { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 22px; border-radius: 18px; border: 1px solid var(--line-strong); background: #081236; color: var(--cyan); font-size: 16px; box-shadow: 0 0 0 6px var(--deep); }
.lg-life h3 { font-size: 18px; margin-bottom: 8px; }
.lg-life p { flex: 1; font-size: 14px; color: var(--mute); }
.lg-life__kpi { display: grid; gap: 2px; margin-top: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(47, 107, 255, 0.12); }
.lg-life__kpi b { font: 500 20px/1 var(--f-display); color: var(--ice); }
.lg-life__kpi small { font-size: 12px; color: var(--mute); }

.lg-with__h { margin: 64px 0 18px; font-size: 20px; }
.lg-with { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lg-with a { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); transition: border-color .3s, transform .3s var(--ease); }
.lg-with a:hover { border-color: rgba(60, 211, 255, 0.5); transform: translateY(-4px); }
.lg-with .tag { align-self: flex-start; margin-bottom: 8px; }
.lg-with b { font-size: 16.5px; color: var(--ice); }
.lg-with b::after { content: " →"; color: var(--cyan); }
.lg-with span:not(.tag) { font-size: 14px; color: var(--mute); }

/* ---------- CTA ---------- */
.lg-cta__card { display: grid; gap: 14px; padding: 30px; border-radius: var(--r-lg); background: rgba(4, 10, 28, 0.88); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.lg-cta__card h3 { font-size: 18px; }
.lg-cta__card ol { display: grid; gap: 10px; margin: 4px 0 10px; counter-reset: s; }
.lg-cta__card li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text); counter-increment: s; }
.lg-cta__card li::before { content: counter(s); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(47, 107, 255, 0.25); border: 1px solid var(--line-strong); color: var(--cyan); font: 500 12px/1 var(--f-mono); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .lg-val { grid-template-columns: minmax(0, 1fr) 120px minmax(0, .5fr); }
  .lg-val__out { grid-column: 1 / -1; flex-direction: row; padding: 20px 0 0; }
  .lg-val__out li { flex: 1; }
  .lg-val__out li::before { display: none; }
  .lg-val__in { grid-template-columns: minmax(0, 1fr) 34px 120px; }
  .lg-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .lg-chain__col:nth-child(4) h5::before { display: none; }
  .lg-life { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .lg-life::before { display: none; }
}
@media (max-width: 1024px) {
  .lg-hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 48px; }
  .lg-hero__visual { max-width: 600px; width: 100%; justify-self: center; }
  .lg-card { transform: none; }
  .lg-float { left: 12px; }
  .lg-val { grid-template-columns: 1fr; gap: 0; }
  .lg-val__pipe { flex-direction: row; justify-content: center; gap: 24px; padding: 34px 0; }
  .lg-val__pipe i { left: 50%; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #b8acff 0 4px, transparent 4px 8px); background-size: 2px 16px; animation-name: flowDown; }
  .lg-val__pipe i::after { right: -4px; top: auto; bottom: -4px; border-inline: 5px solid transparent; border-block: 0; border-top: 8px solid #b8acff; }
  .lg-val__pipe span { flex: 1; }
  .lg-val__pipe span:first-child { text-align: right; padding-right: 18px; }
  .lg-val__pipe span:last-of-type { text-align: left; padding-left: 18px; }
  .lg-val__block--ma { height: auto; }
  .lg-loop { grid-template-columns: 1fr 1fr; grid-template-areas: "ring ring" "tl tr" "bl br"; gap: 18px; }
  .lg-ring { justify-self: center; margin-bottom: 18px; }
  .lg-loop__item--tl, .lg-loop__item--bl { text-align: left; }
  .lg-loop__item--tl .lg-loop__k, .lg-loop__item--bl .lg-loop__k { justify-content: flex-start; }
  .lg-scn { grid-template-columns: 1fr 1fr; }
  .lg-scn__g--more { grid-column: 1 / -1; }
  .lg-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-boxes--ent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-modes { grid-template-columns: 1fr; }
  .lg-with { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lg-mark { font-size: 20px; }
  .lg-four { grid-template-columns: 1fr; }
  .lg-float { position: relative; left: 0; margin-top: -16px; max-width: none; animation: none; }
  .lg-hero__visual { padding-bottom: 0; }
  .lg-card__chain li { grid-template-columns: 1fr; gap: 2px; }
  .lg-card__chain::before { left: 22px; }
  .lg-card__foot div { padding: 10px 12px; }
  .lg-val__in { grid-template-columns: 1fr; }
  .lg-val__flow { height: 36px; }
  .lg-val__flow::before { left: 50%; right: auto; top: 4px; bottom: 8px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px); background-size: 2px 16px; animation-name: flowDown; }
  .lg-val__flow::after { right: auto; left: 50%; top: auto; bottom: 0; margin: 0 0 0 -4px; border-inline: 5px solid transparent; border-block: 0; border-top: 8px solid var(--cyan); }
  .lg-src__g { grid-template-columns: 1fr; gap: 6px; }
  .lg-val__out { flex-direction: column; }
  .lg-loop { grid-template-columns: 1fr; grid-template-areas: "ring" "tl" "tr" "br" "bl"; }
  .lg-ring { width: 280px; height: 280px; }
  .lg-ring__q svg { width: 30px; height: 30px; }
  .lg-ring__q--0 { padding: 40px 22px 0 0; }
  .lg-ring__q--1 { padding: 40px 0 0 22px; }
  .lg-ring__q--3 { padding: 0 22px 40px 0; }
  .lg-ring__q--2 { padding: 0 0 40px 22px; }
  .lg-ring__core { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
  .lg-layer { grid-template-columns: 1fr; }
  .lg-layer--chain .lg-layer__lbl { grid-row: auto; }
  .lg-scn { grid-template-columns: 1fr; }
  .lg-chain { grid-template-columns: 1fr 1fr; }
  .lg-chain__col h5::before { display: none; }
  .lg-boxes, .lg-boxes--ent { grid-template-columns: 1fr; }
  .lg-sched li { grid-template-columns: 82px 1fr auto; }
  .lg-sched span { display: none; }
  .lg-stream li { grid-template-columns: 1fr auto; }
  .lg-stream time { display: none; }
  .lg-life { grid-template-columns: 1fr; }
  .lg-mode { padding: 22px; }
}