.solutions-page { overflow-x: hidden; background: var(--bg); }
.sol-hero { padding: 154px 0 96px; background: var(--bg); }
.sol-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr); gap: 76px; align-items: center; }
.sol-eyebrow, .sol-number { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.sol-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.sol-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--primary); }
.sol-hero h1 { margin: 22px 0; color: var(--text-1); font-size: clamp(46px, 6vw, 82px); font-weight: 900; letter-spacing: -.045em; line-height: 1.08; }
.sol-hero h1 em, .sol-copy h2 em { color: var(--primary); font-style: normal; }
.sol-hero-copy > p { max-width: 560px; color: var(--text-2); font-size: 16px; line-height: 1.9; }
.sol-hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.sol-text-link, .sol-link { color: var(--text-1); font-size: 13px; font-weight: 700; }
.sol-text-link span, .sol-link span { margin-left: 8px; color: var(--primary); }
.sol-hero-board { position: relative; min-height: 430px; overflow: hidden; padding: 24px; color: #fff; background: #0e1b35; border: 1px solid rgba(255,255,255,.14); box-shadow: 22px 24px 0 rgba(14,27,53,.12); }
.sol-board-top { display: flex; justify-content: space-between; color: rgba(255,255,255,.55); font-size: 10px; letter-spacing: .16em; }
.sol-board-top b { color: #8ce8c6; font-weight: 700; }
.sol-board-core { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; width: 148px; height: 148px; place-content: center; text-align: center; border: 1px solid rgba(140,232,198,.65); border-radius: 50%; background: #132746; box-shadow: 0 0 0 18px rgba(140,232,198,.05), 0 0 54px rgba(140,232,198,.18); transform: translate(-50%, -50%); }
.sol-board-core span, .sol-board-core small { color: rgba(255,255,255,.55); font-size: 10px; }
.sol-board-core strong { margin: 6px 0; color: #8ce8c6; font-size: 26px; }
.sol-board-node { position: absolute; z-index: 3; display: grid; gap: 4px; min-width: 110px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.sol-board-node b { color: #fff; font-size: 14px; }.sol-board-node span { color: rgba(255,255,255,.52); font-size: 10px; }
.node-a { top: 98px; left: 38px; }.node-b { top: 98px; right: 38px; }.node-c { right: 38px; bottom: 70px; }.node-d { bottom: 70px; left: 38px; }
.sol-board-line { position: absolute; z-index: 1; display: block; height: 1px; width: 170px; background: linear-gradient(90deg, rgba(140,232,198,0), rgba(140,232,198,.65)); transform-origin: left center; }
.line-a { top: 166px; left: 140px; transform: rotate(25deg); }.line-b { top: 166px; right: 140px; transform: rotate(155deg); }.line-c { right: 140px; bottom: 144px; transform: rotate(-155deg); }.line-d { bottom: 144px; left: 140px; transform: rotate(-25deg); }
.sol-index { position: sticky; top: var(--header-h); z-index: 5; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(246,250,255,.88); backdrop-filter: blur(16px); }
.sol-index-inner { display: flex; align-items: center; gap: 28px; min-height: 58px; overflow-x: auto; white-space: nowrap; }.sol-index-inner > span { margin-right: auto; color: var(--text-1); font-size: 12px; font-weight: 800; }.sol-index a { color: var(--text-3); font-size: 12px; }.sol-index a:hover { color: var(--primary); }
.sol-section { padding: 112px 0; background: var(--bg); }.sol-section-alt { background: var(--bg-section); }.sol-section-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 90px; align-items: center; }.sol-section-grid.reverse > .sol-copy { order: 2; }.sol-section-grid.reverse > .sol-visual { order: 1; }
.sol-copy h2 { margin: 16px 0 20px; color: var(--text-1); font-size: clamp(34px, 4vw, 58px); font-weight: 900; letter-spacing: -.04em; line-height: 1.14; }.sol-copy > p { max-width: 520px; color: var(--text-3); font-size: 14px; line-height: 1.9; }.sol-metrics, .sol-video-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 460px; margin: 32px 0; }.sol-metrics div, .sol-video-stats div { padding-top: 13px; border-top: 1px solid var(--border-strong); }.sol-metrics b, .sol-video-stats b { display: block; color: var(--text-1); font-size: 20px; }.sol-metrics span, .sol-video-stats span { display: block; margin-top: 6px; color: var(--text-4); font-size: 11px; }.sol-link { display: inline-flex; margin-top: 8px; }
.sol-visual { position: relative; min-height: 390px; overflow: hidden; border: 1px solid var(--border); background: #e6edf8; }.sol-visual > img { display: block; width: 100%; height: 390px; object-fit: cover; filter: saturate(.8); }.sol-visual-caption { position: absolute; right: 18px; bottom: 18px; display: grid; gap: 5px; padding: 13px 15px; color: #fff; background: rgba(14,27,53,.88); }.sol-visual-caption span { color: #8ce8c6; font-size: 10px; letter-spacing: .1em; }.sol-visual-caption b { font-size: 14px; }
.sol-delivery, .sol-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0; }.sol-delivery span, .sol-tags span { padding: 8px 11px; color: var(--text-2); border: 1px solid var(--border); background: rgba(255,255,255,.46); font-size: 11px; }
.visual-live { display: grid; place-items: center; background: #dfe8f4; }.sol-live-screen { width: min(78%, 390px); padding: 22px; color: #fff; background: #0e1b35; box-shadow: 18px 18px 0 rgba(14,27,53,.13); }.screen-head { display:flex; justify-content:space-between; color: rgba(255,255,255,.52); font-size: 10px; letter-spacing: .12em; }.screen-head b { color: #8ce8c6; font-weight: 500; }.screen-stat { display:flex; justify-content:space-between; align-items:end; margin: 54px 0 30px; }.screen-stat strong { font-size: 25px; }.screen-stat span { color: rgba(255,255,255,.55); font-size: 11px; }.screen-bars { display: flex; align-items: end; gap: 10px; height: 100px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.16); }.screen-bars i { flex: 1; height: var(--h); background: linear-gradient(#8ce8c6,#3c94ff); }.screen-foot { display: flex; justify-content: space-between; margin-top: 12px; color: rgba(255,255,255,.5); font-size: 10px; }
.visual-goods { display: grid; place-items: center; background: #ecf1f8; }.goods-panel { width: min(84%, 430px); padding: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 18px 18px 0 rgba(26,86,255,.08); }.goods-top { display:flex; justify-content:space-between; color: var(--text-4); font-size: 10px; letter-spacing: .12em; }.goods-top b { color: var(--primary); font-size: 11px; letter-spacing: 0; }.goods-product { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; margin: 25px 0; }.goods-product img { width: 100%; height: 180px; object-fit: cover; }.goods-product div { display: grid; gap: 8px; }.goods-product span { color: var(--primary); font-size: 11px; }.goods-product strong { color: var(--text-1); font-size: 22px; line-height: 1.3; }.goods-flow { display: flex; align-items: center; justify-content: space-between; color: var(--text-3); font-size: 10px; }.goods-flow i { width: 22px; height: 1px; background: var(--primary-light); }
.sol-checklist { display: grid; gap: 11px; margin: 30px 0; }.sol-checklist div { display:flex; align-items:center; gap: 12px; color: var(--text-2); font-size: 13px; }.sol-checklist b { color: var(--primary); font-size: 11px; letter-spacing: .1em; }
.visual-koc { min-height: 390px; background: #0e1b35; }.koc-orbit { position:absolute; top:50%; left:50%; border: 1px solid rgba(140,232,198,.25); border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); }.orbit-one { width: 230px; height: 150px; }.orbit-two { width: 320px; height: 220px; transform: translate(-50%,-50%) rotate(34deg); }.koc-center { position:absolute; top:50%; left:50%; display:grid; place-content:center; width:118px; height:118px; text-align:center; border-radius:50%; background:#183154; box-shadow:0 0 0 14px rgba(140,232,198,.06); transform:translate(-50%,-50%); }.koc-center b { color:#8ce8c6; font-size:28px; }.koc-center span { margin-top:5px; color:rgba(255,255,255,.58); font-size:10px; }.koc-node { position:absolute; padding:8px 10px; color:#fff; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); font-size:10px; }.koc-a { top: 78px; left: 56px; }.koc-b { top: 82px; right: 48px; }.koc-c { bottom: 75px; left: 58px; }.koc-d { right: 45px; bottom: 76px; }
.visual-video { display:grid; place-items:center; background:#dce6f2; }.video-wall { position:relative; width:78%; height:290px; }.video-card { position:absolute; overflow:hidden; border:8px solid #fff; box-shadow: 12px 14px 0 rgba(14,27,53,.12); }.video-card img { display:block; width:100%; height:100%; object-fit:cover; }.video-card span { position:absolute; left:10px; bottom:10px; padding:5px 8px; color:#fff; background:rgba(14,27,53,.82); font-size:10px; }.card-main { top: 10px; left: 8px; width: 230px; height: 250px; transform: rotate(-5deg); }.card-small { right: 4px; bottom: 8px; width: 180px; height: 180px; transform: rotate(6deg); }.card-tiny { right: 32px; top: 15px; display:grid; place-content:center; width: 116px; height: 76px; color:#fff; background:#0e1b35; transform: rotate(4deg); }.card-tiny b { margin-top: 8px; color:#8ce8c6; font-size: 18px; }
.sol-cta { padding: 104px 0 116px; color: #fff; background: #0e1b35; }.sol-cta-inner { display:flex; justify-content:space-between; align-items:end; gap: 40px; }.sol-cta h2 { margin: 17px 0 16px; font-size: clamp(34px, 4vw, 58px); font-weight: 900; letter-spacing: -.04em; line-height: 1.12; }.sol-cta p { max-width: 500px; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.8; }.sol-cta .btn-white { flex: 0 0 auto; color:#0e1b35; background:#8ce8c6; }.sol-cta .btn-white:hover { background:#b8f5de; }
@media (max-width: 900px) { .sol-hero-grid, .sol-section-grid { grid-template-columns: 1fr; gap: 46px; }.sol-section-grid.reverse > .sol-copy, .sol-section-grid.reverse > .sol-visual { order: initial; }.sol-hero-board { max-width: 620px; }.sol-cta-inner { align-items: start; flex-direction: column; } }
@media (max-width: 640px) { .sol-hero { padding: 126px 0 68px; }.sol-hero h1 { font-size: 46px; }.sol-hero-actions { align-items: stretch; flex-direction: column; gap: 16px; }.sol-index-inner { gap: 20px; }.sol-index-inner > span { margin-right: 0; }.sol-section { padding: 76px 0; }.sol-copy h2 { font-size: 36px; }.sol-visual, .sol-visual > img { min-height: 300px; height: 300px; }.sol-hero-board { min-height: 340px; padding: 16px; }.sol-board-node { min-width: 88px; padding: 10px; }.node-a { top: 78px; left: 18px; }.node-b { top: 78px; right: 18px; }.node-c { right: 18px; bottom: 48px; }.node-d { bottom: 48px; left: 18px; }.sol-board-line { width: 110px; }.line-a { top: 135px; left: 100px; }.line-b { top: 135px; right: 100px; }.line-c { right: 100px; bottom: 110px; }.line-d { bottom: 110px; left: 100px; }.sol-board-core { width: 120px; height: 120px; }.sol-board-core strong { font-size: 22px; }.sol-metrics, .sol-video-stats { gap: 10px; }.sol-live-screen { width: 86%; padding: 16px; }.goods-panel { width: 90%; padding: 16px; }.goods-product img { height: 138px; }.goods-product strong { font-size: 18px; }.visual-koc { min-height: 300px; }.orbit-one { width: 190px; height: 120px; }.orbit-two { width: 260px; height: 178px; }.koc-node { font-size: 9px; }.koc-a { left: 22px; }.koc-b { right: 18px; }.koc-c { left: 24px; }.koc-d { right: 16px; }.video-wall { width: 92%; transform: scale(.86); }.sol-cta { padding: 76px 0 84px; }.solutions-page .footer-bottom p { white-space: normal !important; } }