:root, html[data-theme="light"] {
    --blue: #3A6FF8;
    --blue-rgb: 58, 111, 248;
    --blue-deep: #2554DA;
    --blue-soft: #EEF3FF;
    --ember: #3A6FF8;
    --ember-rgb: 58, 111, 248;
    --accent: #3A6FF8;
    --accent-rgb: 58, 111, 248;
    --c1: #3A6FF8;
    --c2: #22C1EE;
    --primary: #0E1116;
    --primary-hover: #262B33;
    --primary-fg: #FFFFFF;
    --text: #0E1116;
    --text-soft: #4B5160;
    --text-muted: #7C8291;
    --bg-soft: #F6F7F9;
    --border: #E6E8EC;
    --border-strong: #D4D7DD;
    --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
    --x-ease: cubic-bezier(.22, 1, .36, 1);
}

.nav-link.active { color: var(--text) !important; }
.ds-pill-tag, .about-tl-btn.active, .filter-btn.active, .fr-cycle-btn.active, .dc-cycle-btn.active,
.svc-game-tab.active, .faq-item.open .faq-icon { background: var(--text) !important; color: #fff !important; border-color: var(--text) !important; }
.ref-card-badge, .popular-badge, .dc-plan-popular-tag, .footer-regions-badge { background: var(--blue) !important; border-color: var(--blue) !important; }

.st-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--blue); }
.st-ico { width: 20px; height: 20px; flex-shrink: 0; }

.x-section { padding: clamp(84px, 10vw, 136px) 0; position: relative; }
.x-section-soft { background: var(--bg-soft); }
.x-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.x-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.x-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--blue); letter-spacing: .02em; margin-bottom: 16px; }
.x-kicker::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.x-h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.04; margin: 0; text-wrap: balance; }
.x-lead { margin-top: 18px; font-size: 1.1rem; line-height: 1.65; color: var(--text-soft); max-width: 620px; }
.x-center { text-align: center; margin-top: 48px; }
.x-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.x-link .st-ico { width: 17px; height: 17px; transition: transform .35s var(--x-ease); }
.x-link:hover { color: var(--blue); }
.x-link:hover .st-ico, a:hover > .x-link .st-ico { transform: translateX(4px); }
.x-round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-strong); background: #fff; display: grid; place-items: center; color: var(--text); transition: background .25s, color .25s, border-color .25s; }
.x-round:hover { background: var(--text); color: #fff; border-color: var(--text); }
.x-rail-nav { display: flex; gap: 10px; }
.x-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); font-size: .74rem; font-weight: 600; color: var(--text-soft); }
.x-chip.is-blue { background: var(--blue-soft); border-color: transparent; color: var(--blue-deep); }
.x-chip.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.x-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: xPing 2s infinite; flex-shrink: 0; }
@keyframes xPing { 80%, 100% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } }

.x-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 12px; font-weight: 600; font-size: .98rem; transition: background .25s, color .25s, border-color .25s, box-shadow .3s, transform .3s var(--x-ease); }
.x-btn .st-ico { width: 18px; height: 18px; transition: transform .3s var(--x-ease); }
.x-btn:hover .st-ico { transform: translateX(3px); }
.x-btn-ink { background: var(--text); color: #fff; box-shadow: 0 1px 2px rgba(14,17,22,.2), inset 0 1px 0 rgba(255,255,255,.1); }
.x-btn-ink:hover { background: var(--blue); color: #fff; box-shadow: 0 14px 30px -12px rgba(var(--blue-rgb), .65); transform: translateY(-1px); }
.x-btn-line { background: #fff; color: var(--text); border: 1px solid var(--border-strong); }
.x-btn-line:hover { color: var(--text); border-color: var(--text); }
.x-btn-white { background: #fff; color: var(--text); }
.x-btn-white:hover { color: var(--text); background: #E9EEFF; transform: translateY(-1px); }
.x-btn-glass { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.x-btn-glass:hover { color: #fff; background: rgba(255,255,255,.14); }

.x-in { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--x-ease), transform 1s var(--x-ease); transition-delay: calc(var(--d, 0) * 110ms + 120ms); }
.x-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.x-mask > .x-in { display: block; transform: translateY(108%); opacity: 1; transition-duration: 1.1s; }
.x-hero.is-in .x-in { opacity: 1; transform: none; }
html.no-anim .x-in { opacity: 1 !important; transform: none !important; }

.x-hero { position: relative; overflow: hidden; padding: 150px 0 90px; min-height: min(100vh, 920px); display: flex; align-items: center; }
.x-hero-bg { position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(900px 520px at 78% 40%, rgba(var(--blue-rgb), .10), transparent 60%),
        radial-gradient(600px 400px at 0% 0%, rgba(34,193,238,.06), transparent 60%),
        linear-gradient(180deg, #FFFFFF, #F8F9FB); }
.x-hero-bg::after { content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(14,17,22,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(14,17,22,.04) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%); }
.x-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.x-badge { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(14,17,22,.04); font-size: .84rem; color: var(--text-soft); margin-bottom: 28px; }
.x-badge-tag { padding: 3px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: .74rem; font-weight: 600; }
.x-hero-title { font-size: clamp(3rem, 6.6vw, 6.2rem); font-weight: 600; letter-spacing: -0.055em; line-height: .98; margin: 0; }
.x-hero-title .st-serif { font-size: 1.06em; }
.x-hero-sub { margin-top: 26px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.65; color: var(--text-soft); max-width: 560px; }
.x-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.x-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); max-width: 560px; }
.x-proof li { display: inline-flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: .9rem; }
.x-proof .st-ico { width: 18px; height: 18px; color: var(--blue); }
.x-proof strong { color: var(--text); font-weight: 600; }

.x-hero-visual { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; justify-self: end; }
.x-globe { position: absolute; inset: -6%; width: 112%; height: 112%; opacity: 0; transform: scale(.9); transition: opacity 1.6s var(--x-ease) .2s, transform 1.8s var(--x-ease) .2s; cursor: grab; touch-action: pan-y; }
.x-globe.is-dragging { cursor: grabbing; }
.x-hero.is-in .x-globe { opacity: 1; transform: none; }
.x-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px;
    background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(14,17,22,.07); box-shadow: 0 1px 2px rgba(14,17,22,.05), 0 20px 40px -18px rgba(14,17,22,.22); }
.x-float small { display: block; font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.x-float strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.x-float-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--text); color: #fff; }
.x-float-ico.is-blue { background: var(--blue); }
.x-float-ico .st-ico { width: 19px; height: 19px; }
.x-float-a { left: -4%; top: 16%; }
.x-float-b { right: -2%; top: 52%; padding-left: 16px; }
.x-float-c { left: 10%; bottom: 6%; }
.x-hero.is-in .x-float { animation: xHover 7s ease-in-out infinite; }
.x-hero.is-in .x-float-b { animation-delay: -2.4s; }
.x-hero.is-in .x-float-c { animation-delay: -4.6s; }
@keyframes xHover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.x-tech { padding: 54px 0 60px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; overflow: hidden; }
.x-tech-label { text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: 30px; }
.x-tech-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.x-tech-row + .x-tech-row { margin-top: 14px; }
.x-tech-track { display: flex; gap: 12px; width: max-content; animation: xMarq 60s linear infinite; }
.x-tech-row.is-rev .x-tech-track { animation-direction: reverse; animation-duration: 70s; }
.x-tech-row:hover .x-tech-track { animation-play-state: paused; }
@keyframes xMarq { to { transform: translateX(-50%); } }
.x-tech-item { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 14px; border: 1px solid var(--border); background: #fff; font-weight: 600; font-size: .92rem; color: var(--text-soft); white-space: nowrap; transition: border-color .25s, color .25s, box-shadow .25s; }
.x-tech-item img { width: 22px; height: 22px; opacity: .55; transition: opacity .25s; }
.x-tech-item:hover { color: var(--text); border-color: var(--border-strong); box-shadow: 0 8px 20px -14px rgba(14,17,22,.3); }
.x-tech-item:hover img { opacity: 1; }

.x-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.x-cell { position: relative; display: flex; flex-direction: column; min-height: 380px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--border); color: var(--text); overflow: hidden; isolation: isolate; transition: border-color .3s, box-shadow .4s var(--x-ease), transform .4s var(--x-ease); }
.x-cell-2 { grid-column: span 2; }
.x-cell:hover { color: var(--text); border-color: var(--border-strong); box-shadow: 0 30px 60px -36px rgba(14,17,22,.28); transform: translateY(-3px); }
[data-glow]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(var(--blue-rgb), .08), transparent 60%); opacity: 0; transition: opacity .4s; }
[data-glow]:hover::before { opacity: 1; }
.x-cell-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.x-cell-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); transition: background .3s, color .3s, border-color .3s; }
.x-cell-ico .st-ico { width: 21px; height: 21px; }
[data-glow]:hover .x-cell-ico { background: var(--blue); border-color: var(--blue); color: #fff; }
.x-cell-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); transition: color .3s, background .3s, transform .4s var(--x-ease); }
.x-cell-go .st-ico { width: 18px; height: 18px; }
.x-cell:hover .x-cell-go { color: var(--text); background: var(--bg-soft); transform: rotate(45deg); }
.x-cell h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; margin-bottom: 8px; }
.x-cell p { font-size: .94rem; line-height: 1.6; color: var(--text-soft); max-width: 460px; }
.x-mock { margin-top: auto; padding-top: 24px; }

.x-mock-web { margin-right: -26px; margin-bottom: -26px; }
.x-browser { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--bg-soft); border: 1px solid var(--border); border-bottom: 0; border-right: 0; border-radius: 14px 0 0 0; }
.x-browser i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.x-browser span { margin-left: 10px; font-size: .74rem; color: var(--text-muted); font-family: var(--ds-mono); }
.x-web-body { display: flex; gap: 22px; align-items: center; padding: 20px 22px; border: 1px solid var(--border); border-right: 0; border-bottom: 0; background: #fff; }
.x-web-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.x-web-lines b { display: block; height: 9px; border-radius: 5px; background: var(--bg-soft); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--x-ease); }
.x-web-lines b:nth-child(1) { height: 14px; background: #E3E6EC; }
.x-web-lines b:nth-child(2) { transition-delay: .1s; } .x-web-lines b:nth-child(3) { transition-delay: .2s; }
.x-web-lines em { display: block; width: 110px; height: 30px; border-radius: 8px; background: var(--text); margin-top: 8px; transform: scale(.6); opacity: 0; transition: transform .6s var(--x-ease) .4s, opacity .4s .4s; }
.visible .x-web-lines b { transform: scaleX(1); }
.visible .x-web-lines em { transform: none; opacity: 1; }
.x-score { position: relative; width: 104px; height: 104px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.x-score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.x-score circle { fill: none; stroke-width: 3; }
.x-score .t { stroke: #E6F6EC; }
.x-score .m { stroke: #16A34A; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--x-ease) .3s; }
.visible .x-score .m { stroke-dashoffset: .02; }
.x-score span { font-size: 1.6rem; font-weight: 600; color: #15803D; line-height: 1; }
.x-score small { font-size: .6rem; color: var(--text-muted); margin-top: 4px; }

.x-mock-phone { display: flex; justify-content: center; margin-bottom: -60px; }
.x-phone { position: relative; width: 150px; height: 230px; border-radius: 26px; border: 6px solid var(--text); background: #fff; padding: 22px 12px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 40px -20px rgba(14,17,22,.35); transform: translateY(30px); transition: transform .7s var(--x-ease); }
.x-cell:hover .x-phone { transform: translateY(6px); }
.x-notch { position: absolute; top: 6px; left: 50%; width: 46px; height: 10px; margin-left: -23px; border-radius: 6px; background: var(--text); }
.x-phone b { display: block; height: 18px; border-radius: 6px; background: var(--bg-soft); }
.x-phone .x-ph-hero { height: 66px; border-radius: 10px; background: linear-gradient(135deg, var(--blue), #7FA0FF); }
.x-ph-tabs { margin-top: auto; display: flex; justify-content: space-around; padding-top: 8px; border-top: 1px solid var(--border); }
.x-ph-tabs i { width: 14px; height: 14px; border-radius: 4px; background: var(--border); }
.x-ph-tabs i.on { background: var(--blue); }

.x-mock-shop { display: flex; flex-direction: column; gap: 10px; }
.x-order { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 24px -18px rgba(14,17,22,.3); transform: translateY(14px); opacity: 0; transition: transform .7s var(--x-ease) .2s, opacity .6s .2s; }
.x-order.is-2 { margin-left: 22px; transition-delay: .45s; }
.visible .x-order { transform: none; opacity: 1; }
.x-order > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E6F6EC; color: #15803D; flex-shrink: 0; }
.x-order > span .st-ico { width: 16px; height: 16px; stroke-width: 2.4; }
.x-order strong { display: block; font-size: .86rem; }
.x-order small { color: var(--text-muted); font-size: .76rem; font-family: var(--ds-mono); }

.x-mock-ai { display: flex; flex-direction: column; gap: 10px; }
.x-bubble { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: .86rem; line-height: 1.45; }
.x-bubble.is-user { align-self: flex-end; background: var(--text); color: #fff; border-bottom-right-radius: 4px; }
.x-bubble.is-ai { align-self: flex-start; background: var(--blue-soft); color: var(--blue-deep); border-bottom-left-radius: 4px; min-width: 64px; }
.x-typing { display: inline-flex; gap: 4px; }
.x-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); opacity: .3; animation: xDot 1.2s infinite; }
.x-typing i:nth-child(2) { animation-delay: .15s; } .x-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes xDot { 30% { opacity: 1; transform: translateY(-3px); } 60% { opacity: .3; transform: none; } }

.x-bars { display: flex; align-items: flex-end; gap: 4px; height: 80px; }
.x-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: rgba(var(--blue-rgb), .18); transition: height .8s var(--x-ease); }
.x-bars i:last-child { background: var(--blue); }
.x-game-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: .8rem; color: var(--text-muted); font-family: var(--ds-mono); }
.x-game-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.x-game-meta strong { color: var(--text); }

.x-regions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.x-regions > span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); font-size: .76rem; font-family: var(--ds-mono); color: var(--text-soft); }
.x-regions em { margin-left: auto; font-style: normal; font-size: .76rem; color: var(--text-muted); font-family: var(--ds-mono); }

.x-numbers { padding: clamp(56px, 7vw, 88px) 0; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.x-numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.x-num { padding: 4px 28px; border-left: 1px solid var(--border); }
.x-num:first-child { border-left: 0; padding-left: 0; }
.x-num strong { display: block; font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 600; letter-spacing: -0.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.x-num strong em { font-style: normal; color: var(--blue); }
.x-num > span { display: block; margin-top: 12px; color: var(--text-soft); font-size: .95rem; }

.x-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px max(24px, calc((100vw - 1200px) / 2 + 24px)) 26px; scrollbar-width: none; cursor: grab; }
.x-rail::-webkit-scrollbar { display: none; }
.x-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.x-rail.is-dragging .x-card { pointer-events: none; }
.x-card { flex: 0 0 340px; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; color: var(--text); transition: transform .5s var(--x-ease), box-shadow .5s; }
.x-card:hover { color: var(--text); transform: translateY(-5px); box-shadow: 0 30px 60px -32px rgba(14,17,22,.28); }
.x-card-wide { flex-basis: 560px; }
.x-card-media { display: block; height: 230px; overflow: hidden; background: var(--bg-soft); }
.x-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--x-ease); user-select: none; }
.x-card:hover .x-card-media img { transform: scale(1.05); }
.x-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px 24px; }
.x-card-body strong { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.035em; }
.x-card-body > span:last-child { font-size: .92rem; color: var(--text-soft); line-height: 1.5; }
.x-rail-end { flex: 0 0 1px; }

.x-process { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.x-process-sticky { position: sticky; top: 120px; }
.x-process-big { display: flex; align-items: baseline; gap: 10px; margin-top: 44px; font-variant-numeric: tabular-nums; }
.x-process-big span { font-size: clamp(5rem, 10vw, 8.5rem); font-weight: 600; letter-spacing: -0.07em; line-height: .9; }
.x-process-big small { font-family: var(--ds-mono); color: var(--text-muted); }
.x-process-meter { margin-top: 20px; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; max-width: 320px; }
.x-process-meter i { display: block; height: 100%; background: var(--blue); transform: scaleX(var(--p, .25)); transform-origin: left; transition: transform .4s var(--x-ease); }
.x-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.x-step { min-height: 42vh; padding: 34px; border-radius: 24px; background: var(--bg-soft); border: 1px solid transparent; display: flex; flex-direction: column; justify-content: flex-end; opacity: .45; transform: scale(.98); transition: opacity .5s var(--x-ease), transform .5s var(--x-ease), background .5s, border-color .5s, box-shadow .5s; }
.x-step.is-active { opacity: 1; transform: none; background: #fff; border-color: var(--border); box-shadow: 0 30px 60px -38px rgba(14,17,22,.28); }
.x-step-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); color: var(--text); margin-bottom: auto; transition: background .4s, color .4s, border-color .4s; }
.x-step-ico .st-ico { width: 24px; height: 24px; }
.x-step.is-active .x-step-ico { background: var(--blue); border-color: var(--blue); color: #fff; }
.x-step-n { margin-top: 40px; font-size: .8rem; font-weight: 600; color: var(--blue); }
.x-step h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -0.035em; margin: 8px 0 10px; }
.x-step p { line-height: 1.65; max-width: 440px; }

.x-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.x-duo-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 34px; border-radius: 28px; background: #fff; border: 1px solid var(--border); color: var(--text); overflow: hidden; isolation: isolate; transition: box-shadow .4s var(--x-ease), transform .4s var(--x-ease); }
.x-duo-card:hover { color: var(--text); transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgba(14,17,22,.3); }
.x-duo-card h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; max-width: 440px; }
.x-duo-card p { line-height: 1.65; max-width: 460px; }
.x-ticks { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 9px; }
.x-ticks li { display: flex; align-items: center; gap: 10px; font-size: .94rem; color: var(--text-soft); }
.x-ticks .st-ico { width: 18px; height: 18px; color: var(--blue); stroke-width: 2.4; }
.x-duo-card .x-link { margin-top: auto; }
.x-duo-card.is-dark { background: #0E1116; border-color: #0E1116; color: #fff; }
.x-duo-card.is-dark:hover { color: #fff; }
.x-duo-card.is-dark::after { content: ''; position: absolute; z-index: -1; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--blue-rgb), .45), transparent 65%); }
.x-duo-card.is-dark h3, .x-duo-card.is-dark .x-link { color: #fff; }
.x-duo-card.is-dark p, .x-duo-card.is-dark .x-ticks li { color: #A6ADBB; }
.x-duo-card.is-dark .x-cell-ico { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.x-duo-card.is-dark .x-ticks .st-ico { color: #8FB0FF; }

.x-quotes { position: relative; min-height: 300px; }
.x-quote { position: absolute; inset: 0 0 auto 0; margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--x-ease), transform .7s var(--x-ease); pointer-events: none; }
.x-quote.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.x-quote blockquote { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; color: var(--text); max-width: 980px; margin: 0; text-wrap: pretty; }
.x-quote blockquote::before { content: '“'; font-family: var(--serif); color: var(--blue); margin-right: .05em; }
.x-quote blockquote::after { content: '”'; font-family: var(--serif); color: var(--blue); }
.x-quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.x-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-deep); font-weight: 600; }
.x-quote figcaption strong { display: block; }
.x-quote figcaption small { color: var(--text-muted); }
.x-quote-dots { display: flex; gap: 6px; margin-top: 28px; }
.x-quote-dots button { width: 24px; height: 4px; border-radius: 4px; background: var(--border-strong); padding: 0; transition: background .3s, width .4s var(--x-ease); }
.x-quote-dots button.is-active { width: 48px; background: var(--text); }

.x-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.x-faq .faq-list { max-width: none; margin: 0; }
.x-faq .faq-item { border-radius: 16px !important; margin-bottom: 10px; background: #fff !important; }

.x-cta { position: relative; overflow: hidden; padding: clamp(110px, 12vw, 170px) 0; background: #0B0E14; color: #fff; isolation: isolate; }
.x-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 500px at 80% 110%, rgba(var(--blue-rgb), .35), transparent 60%); }
.x-cta-globe { position: absolute; z-index: -1; right: -10%; bottom: -55%; width: min(900px, 90vw); height: min(900px, 90vw); }
.x-cta-inner { position: relative; }
.x-cta .x-kicker { color: #8FB0FF; }
.x-cta-title { color: #fff; font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 600; letter-spacing: -0.055em; line-height: 1; max-width: 900px; margin: 0; }
.x-cta-title .st-serif { color: #8FB0FF; }
.x-cta p { color: #A6ADBB; font-size: 1.1rem; margin-top: 20px; max-width: 520px; }

.nav-inner { border-radius: 16px !important; height: 62px !important; }
@media (min-width: 769px) { .nav-menu { position: relative; } }
.nav-link { position: relative; z-index: 1; background: transparent !important; transition: color .25s !important; }
.nav-link:hover, .nav-link.active { background: transparent !important; color: var(--text) !important; }
.st-nav-pill { position: absolute; z-index: 0; top: 50%; height: 34px; margin-top: -17px; border-radius: 10px; background: var(--bg-soft); transition: left .35s var(--x-ease), width .35s var(--x-ease), opacity .25s; opacity: 0; pointer-events: none; }
.nav-profile-login { border-radius: 10px !important; height: 40px !important; background: var(--text) !important; border-color: var(--text) !important; color: #fff !important; }
.nav-profile-login:hover { background: var(--blue) !important; border-color: var(--blue) !important; }
@media (max-width: 768px) {
    .nav-menu.open .nav-link { font-size: 1.6rem !important; font-weight: 600 !important; letter-spacing: -0.04em; padding: 12px 16px !important; color: var(--text) !important; }
    .nav-menu.open .nav-link.active { color: var(--blue) !important; }
}

.st-footer-word { font-weight: 700; letter-spacing: -0.07em; line-height: .78; font-size: clamp(5rem, 21vw, 19rem); text-align: center; margin: 60px 0 -0.06em; user-select: none; background: linear-gradient(180deg, var(--text) 30%, rgba(14,17,22,.06)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.st-footer-word span { -webkit-text-fill-color: var(--blue); }

@media (max-width: 1024px) {
    .x-hero-grid { grid-template-columns: 1fr; }
    .x-hero { padding-top: 130px; min-height: 0; }
    .x-hero-visual { justify-self: center; max-width: 520px; margin-top: 10px; }
    .x-bento { grid-template-columns: 1fr 1fr; }
    .x-cell-2 { grid-column: span 2; }
}
@media (max-width: 900px) {
    .x-process { grid-template-columns: 1fr; }
    .x-process-sticky { position: relative; top: 0; }
    .x-process-big { display: none; }
    .x-step { min-height: 0; opacity: 1; transform: none; background: #fff; border-color: var(--border); }
    .x-step-n { margin-top: 24px; }
    .x-numbers-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
    .x-num:nth-child(3) { border-left: 0; padding-left: 0; }
    .x-duo, .x-faq { grid-template-columns: 1fr; }
    .x-faq { gap: 10px; }
}
@media (max-width: 640px) {
    .x-bento { grid-template-columns: 1fr; }
    .x-cell-2 { grid-column: auto; }
    .x-float-a { left: 0; top: 4%; }
    .x-float-b { right: 0; }
    .x-float-c { display: none; }
    .x-card { flex-basis: 280px; }
    .x-card-wide { flex-basis: 320px; }
    .x-head-row { flex-direction: column; align-items: flex-start; }
    .x-web-body { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .x-in, .x-mask > .x-in, .x-globe { opacity: 1 !important; transform: none !important; }
    .x-tech-track, .x-float, .x-typing i, .x-live { animation: none !important; }
}

.x-cell-ink { background: #0E1116; border-color: #0E1116; color: #fff; }
.x-cell-ink:hover { color: #fff; border-color: #0E1116; }
.x-cell-ink::after { content: ''; position: absolute; z-index: -1; right: -90px; bottom: -110px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--blue-rgb), .5), transparent 65%); }
.x-cell-ink h3 { color: #fff; }
.x-cell-ink p { color: #A6ADBB; }
.x-cell-ink .x-cell-ico { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.x-cell-ink .x-cell-go { color: rgba(255,255,255,.5); }
.x-cell-ink:hover .x-cell-go { color: #fff; background: rgba(255,255,255,.08); }
.x-cell-cta { margin-top: auto; color: #fff; }
.x-cell-ink:hover .x-cell-cta { color: #8FB0FF; }

:root { --display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif; }
h1, h2, h3, .x-h2, .x-num strong, .x-cell h3, .page-header h1, .page-hero h1, .section-title, .hero-title {
    font-family: var(--display) !important;
    font-optical-sizing: auto;
}
.x-h2 { font-weight: 700; letter-spacing: -0.035em; }
.x-num strong { font-weight: 700; letter-spacing: -0.045em; }
.x-cell h3 { font-weight: 700; letter-spacing: -0.02em; }
.st-serif { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--blue); }
.x-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.x-head-center .x-lead { margin-left: auto; margin-right: auto; }

.v-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.v-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.v-aurora .a1 { width: 52vw; height: 52vw; max-width: 760px; max-height: 760px; left: -10%; top: -25%; background: #BFD0FF; animation: vA1 18s ease-in-out infinite alternate; }
.v-aurora .a2 { width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; right: -8%; top: -10%; background: #D9CCFF; animation: vA2 22s ease-in-out infinite alternate; }
.v-aurora .a3 { width: 40vw; height: 40vw; max-width: 600px; max-height: 600px; left: 30%; top: 30%; background: #C8F0FF; opacity: .45; animation: vA3 20s ease-in-out infinite alternate; }
@keyframes vA1 { to { transform: translate(14%, 18%) scale(1.15); } }
@keyframes vA2 { to { transform: translate(-18%, 22%) scale(.9); } }
@keyframes vA3 { to { transform: translate(-12%, -16%) scale(1.2); } }
.v-grain { position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.v-hero { position: relative; overflow: hidden; padding: 160px 0 0; background: #FBFCFF; text-align: center; isolation: isolate; }
.v-hero-inner { position: relative; z-index: 2; }
.v-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 14px; border-radius: 999px; background: rgba(255,255,255,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(14,17,22,.08); font-size: .88rem; font-weight: 500; color: var(--text); margin-bottom: 30px; }
.v-pill:hover { color: var(--text); border-color: rgba(14,17,22,.18); }
.v-pill .st-ico { width: 15px; height: 15px; color: var(--text-muted); transition: transform .3s var(--x-ease); }
.v-pill:hover .st-ico { transform: translateX(3px); }
.v-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(var(--blue-rgb), .15); }
.v-title { font-family: var(--display) !important; font-size: clamp(3.2rem, 8.8vw, 8.4rem); font-weight: 750; letter-spacing: -0.055em; line-height: .92; margin: 0 auto; max-width: 1100px; color: #0B0E14; }
.v-blue { color: var(--blue); }
.v-sub { max-width: 640px; margin: 30px auto 0; font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.6; color: var(--text-soft); }
.v-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.v-hero .x-in { transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.v-hero.is-in .x-in { opacity: 1; transform: none; }
.v-horizon { position: relative; z-index: 1; height: clamp(320px, 42vw, 560px); margin-top: 40px; transform: translateY(60px); opacity: 0; transition: transform 1.6s var(--x-ease), opacity 1.4s var(--x-ease); transition-delay: .7s; }
.v-hero.is-in .v-horizon { transform: none; opacity: 1; }
.v-globe { position: absolute; left: 50%; top: 0; width: min(1100px, 120vw); height: min(1100px, 120vw); transform: translateX(-50%); cursor: grab; touch-action: pan-y; }
.v-globe.is-dragging { cursor: grabbing; }
.v-horizon::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, #fff); pointer-events: none; }
.v-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(255,255,255,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(14,17,22,.07); box-shadow: 0 20px 40px -20px rgba(14,17,22,.25); text-align: left; animation: xHover 7s ease-in-out infinite; }
.v-chip small { display: block; font-size: .72rem; color: var(--text-muted); }
.v-chip strong { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.v-chip-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--text); color: #fff; }
.v-chip-ico.is-blue { background: var(--blue); }
.v-chip-ico .st-ico { width: 18px; height: 18px; }
.v-chip-a { left: max(4%, calc(50% - 560px)); top: 18%; }
.v-chip-b { right: max(4%, calc(50% - 560px)); top: 8%; animation-delay: -2.5s; padding-left: 16px; }
.v-chip-c { right: max(10%, calc(50% - 470px)); top: 48%; animation-delay: -4.5s; }

.v-stack { padding: clamp(80px, 9vw, 120px) 0; background: #fff; border-bottom: 1px solid var(--border); }
.v-stack-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 36px; }
.v-stack-head .x-h2 { max-width: 560px; }
.v-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--border); }
.v-tab { height: 38px; padding: 0 16px; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--text-soft); transition: background .25s, color .25s, box-shadow .25s; }
.v-tab:hover { color: var(--text); }
.v-tab.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(14,17,22,.08), 0 0 0 1px rgba(14,17,22,.04); }
.v-logo-wall { position: relative; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; background: #fff; }
.v-logo-pane { display: none; grid-template-columns: repeat(4, 1fr); }
.v-logo-pane.is-active { display: grid; }
.v-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 160px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .3s; animation: vLogoIn .6s var(--x-ease) both; }
.v-logo:nth-child(4n) { border-right: 0; }
.v-logo:nth-last-child(-n+4) { border-bottom: 0; }
.v-logo img { width: 36px; height: 36px; opacity: .8; transition: transform .4s var(--x-ease), opacity .3s; }
.v-logo span { font-size: .9rem; font-weight: 600; color: var(--text-soft); }
.v-logo:hover { background: var(--bg-soft); }
.v-logo:hover img { transform: translateY(-3px) scale(1.08); opacity: 1; }
.v-logo:nth-child(2) { animation-delay: .04s; } .v-logo:nth-child(3) { animation-delay: .08s; } .v-logo:nth-child(4) { animation-delay: .12s; }
.v-logo:nth-child(5) { animation-delay: .16s; } .v-logo:nth-child(6) { animation-delay: .2s; } .v-logo:nth-child(7) { animation-delay: .24s; } .v-logo:nth-child(8) { animation-delay: .28s; }
@keyframes vLogoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.v-prod { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: stretch; }
.v-prod-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v-prod-item { position: relative; width: 100%; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; text-align: left; padding: 16px 18px; border-radius: 16px; border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; overflow: hidden; }
.v-prod-item:hover { background: rgba(255,255,255,.7); }
.v-prod-item.is-active { background: #fff; border-color: var(--border); box-shadow: 0 12px 30px -20px rgba(14,17,22,.3); }
.v-prod-n { grid-row: span 2; font-size: .78rem; font-weight: 600; color: var(--text-muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.v-prod-name { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-soft); transition: color .3s; }
.v-prod-item.is-active .v-prod-name { color: var(--text); }
.v-prod-item.is-active .v-prod-n { color: var(--blue); }
.v-prod-kind { font-size: .82rem; color: var(--text-muted); }
.v-prod-bar { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; }
.v-prod-bar i { display: block; height: 100%; width: 0; background: var(--blue); }
.v-prod-item.is-active .v-prod-bar i { animation: vProg 6s linear forwards; }
.v-prod.is-paused .v-prod-bar i { animation-play-state: paused; }
@keyframes vProg { to { width: 100%; } }
.v-prod-stage { position: relative; min-height: 520px; border-radius: 28px; overflow: hidden; background: #0B0E14; border: 1px solid var(--border); }
.v-prod-panel { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .6s var(--x-ease), visibility .6s; }
.v-prod-panel.is-active { opacity: 1; visibility: visible; }
.v-prod-media { flex: 1; overflow: hidden; }
.v-prod-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--x-ease); }
.v-prod-panel.is-active .v-prod-media img { transform: scale(1); }
.v-prod-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 28px; background: #fff; border-top: 1px solid var(--border); }
.v-prod-info h3 { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; margin: 10px 0 6px; }
.v-prod-info p { color: var(--text-soft); max-width: 520px; }
.v-prod-info .x-btn { flex-shrink: 0; }

.v-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.v-flow-line { position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--border); }
.v-flow-line i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
.v-flow-step { position: relative; padding-right: 10px; }
.v-flow-node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border-strong); color: var(--text-muted); transition: background .4s, color .4s, border-color .4s, box-shadow .4s, transform .4s var(--x-ease); }
.v-flow-node .st-ico { width: 24px; height: 24px; }
.v-flow-step.is-on .v-flow-node { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 12px 24px -10px rgba(var(--blue-rgb), .7); transform: translateY(-2px); }
.v-flow-n { display: block; margin-top: 26px; font-size: .8rem; font-weight: 600; color: var(--text-muted); transition: color .4s; }
.v-flow-step.is-on .v-flow-n { color: var(--blue); }
.v-flow-step h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 10px; }
.v-flow-step p { color: var(--text-soft); line-height: 1.6; font-size: .96rem; }

.v-seg { max-width: 1100px; margin: 0 auto; }
.v-seg-switch { position: relative; display: flex; width: max-content; margin: 0 auto 28px; padding: 5px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(14,17,22,.04); }
.v-seg-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 12px; font-weight: 600; color: var(--text-soft); transition: color .3s; }
.v-seg-switch button .st-ico { width: 18px; height: 18px; }
.v-seg-switch button.is-active { color: #fff; }
.v-seg-thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; border-radius: 12px; background: var(--text); transition: left .45s var(--x-ease), width .45s var(--x-ease); }
.v-seg-panel { display: none; grid-template-columns: 1fr 1.05fr; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -40px rgba(14,17,22,.3); }
.v-seg-panel.is-active { display: grid; animation: vFade .6s var(--x-ease); }
@keyframes vFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.v-seg-copy { padding: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.v-seg-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.v-seg-copy p { color: var(--text-soft); line-height: 1.65; }
.v-seg-copy .x-btn { margin-top: 8px; }
.v-seg-visual { position: relative; display: grid; place-items: center; padding: 40px; background: linear-gradient(160deg, #EEF3FF, #F6F2FF); overflow: hidden; }
.v-app { width: 100%; max-width: 460px; display: flex; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(14,17,22,.35); overflow: hidden; }
.v-app-side { width: 52px; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--bg-soft); border-right: 1px solid var(--border); }
.v-app-side i { width: 22px; height: 22px; border-radius: 7px; background: var(--border); }
.v-app-side i.on { background: var(--blue); }
.v-app-main { flex: 1; padding: 18px; min-width: 0; }
.v-app-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.v-app-top b { font-size: .95rem; }
.v-app-top span { font-size: .76rem; color: var(--text-muted); padding: 4px 10px; border-radius: 8px; background: var(--bg-soft); }
.v-app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.v-app-kpis div { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); }
.v-app-kpis small { display: block; font-size: .7rem; color: var(--text-muted); }
.v-app-kpis strong { display: block; font-size: 1.1rem; letter-spacing: -0.02em; }
.v-app-kpis em { font-style: normal; font-size: .7rem; font-weight: 600; color: #15803D; }
.v-seg-panel[data-seg-panel="game"] .v-seg-visual { background: linear-gradient(160deg, #0E1116, #16213F); }
.v-console { width: 100%; max-width: 460px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #E6E9F0; }
.v-console-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--ds-mono); font-size: .85rem; }
.v-console-top em { margin-left: auto; font-style: normal; font-size: .72rem; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.08); color: #A6ADBB; }
.v-console-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.v-console-stats div { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.v-console-stats small { display: block; font-size: .7rem; color: #8B93A3; }
.v-console-stats strong { font-size: 1.25rem; color: #fff; font-variant-numeric: tabular-nums; }
.v-console-stats span { font-size: .75rem; color: #8B93A3; }
.v-console .x-bars i { background: rgba(143,176,255,.28); }
.v-console .x-bars i:last-child { background: #8FB0FF; }
.v-log { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.v-log code { font-family: var(--ds-mono); font-size: .74rem; color: #A6ADBB; background: none; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-log code span { color: #8FB0FF; }

.v-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-review { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--border); transition: transform .4s var(--x-ease), box-shadow .4s; }
.v-review:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -32px rgba(14,17,22,.3); }
.v-stars { display: flex; gap: 2px; color: #F5A524; }
.v-stars svg { width: 16px; height: 16px; fill: currentColor; }
.v-review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--text); flex: 1; }
.v-review figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.v-review figcaption strong { display: block; font-size: .95rem; }
.v-review figcaption small { color: var(--text-muted); font-size: .82rem; }

.v-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.v-faq-side { position: sticky; top: 120px; }
.v-help { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding: 16px 16px 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--border); }
.v-help-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); flex-shrink: 0; }
.v-help strong { display: block; }
.v-help small { color: var(--text-muted); }
.v-help .x-round { margin-left: auto; flex-shrink: 0; }
.v-acc .faq-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border-strong) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
.v-acc .faq-item:first-child { border-top: 1px solid var(--border-strong) !important; }
.v-acc .faq-question { padding: 26px 0 !important; font-family: var(--display) !important; font-size: 1.2rem !important; font-weight: 600 !important; letter-spacing: -0.015em; }
.v-acc .faq-icon { background: transparent !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; }
.v-acc .faq-item.open .faq-icon { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.v-acc .faq-answer-inner { padding: 0 48px 26px 0 !important; font-size: 1rem; line-height: 1.7; }

.v-final { padding: 0 0 clamp(80px, 9vw, 120px); background: var(--bg-soft); }
.v-final-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: clamp(40px, 6vw, 72px); border-radius: 32px; background: #0B1330; color: #fff; }
.v-final-card .v-aurora i { opacity: .6; filter: blur(70px); }
.v-final-card .v-aurora .a1 { background: #3A6FF8; left: -20%; top: -40%; }
.v-final-card .v-aurora .a2 { background: #7C5CFF; right: -15%; top: 10%; }
.v-final-card .v-aurora .a3 { background: #22C1EE; left: 20%; top: 60%; opacity: .35; }
.v-final-card .v-grain { mix-blend-mode: overlay; opacity: .5; }
.v-final-copy, .v-final-actions { position: relative; z-index: 1; }
.v-final-copy h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1.02; color: #fff; }
.v-final-copy p { margin-top: 18px; color: rgba(255,255,255,.75); font-size: 1.1rem; line-height: 1.6; max-width: 480px; }
.v-final-actions { display: flex; flex-direction: column; gap: 10px; }
.v-final-opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; transition: background .3s, transform .35s var(--x-ease); }
.v-final-opt:hover { color: #fff; background: rgba(255,255,255,.14); transform: translateX(4px); }
.v-final-opt.is-main { background: #fff; color: var(--text); border-color: #fff; }
.v-final-opt.is-main:hover { color: var(--text); background: #F1F4FF; }
.v-final-opt > span:nth-child(2) { flex: 1; }
.v-final-opt strong { display: block; font-size: 1rem; }
.v-final-opt small { color: inherit; opacity: .65; font-size: .84rem; }
.v-final-opt > .st-ico { width: 18px; height: 18px; opacity: .7; }
.v-final-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.12); }
.v-final-opt.is-main .v-final-ico { background: var(--blue); color: #fff; }
.v-final-ico .st-ico { width: 20px; height: 20px; }

@media (max-width: 1024px) {
    .v-prod { grid-template-columns: 1fr; }
    .v-prod-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .v-prod-item { min-width: 200px; }
    .v-flow { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .v-flow-line { display: none; }
    .v-seg-panel { grid-template-columns: 1fr; }
    .v-wall { grid-template-columns: 1fr 1fr; }
    .v-faq { grid-template-columns: 1fr; gap: 30px; }
    .v-faq-side { position: relative; top: 0; }
    .v-final-card { grid-template-columns: 1fr; }
    .v-chip-c { display: none; }
}
@media (max-width: 640px) {
    .v-hero { padding-top: 130px; }
    .v-logo-pane { grid-template-columns: 1fr 1fr; }
    .v-logo:nth-child(4n) { border-right: 1px solid var(--border); }
    .v-logo:nth-child(2n) { border-right: 0; }
    .v-logo:nth-last-child(-n+4) { border-bottom: 1px solid var(--border); }
    .v-logo:nth-last-child(-n+2) { border-bottom: 0; }
    .v-logo { height: 120px; }
    .v-tabs { overflow-x: auto; max-width: 100%; }
    .v-flow { grid-template-columns: 1fr; }
    .v-wall { grid-template-columns: 1fr; }
    .v-prod-stage { min-height: 440px; }
    .v-prod-info { flex-direction: column; align-items: flex-start; }
    .v-seg-copy { padding: 28px; }
    .v-chip-a { left: 3%; top: 4%; }
    .v-chip-b { right: 3%; top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
    .v-aurora i, .v-chip { animation: none !important; }
    .v-horizon { opacity: 1 !important; transform: none !important; }
}

.x-head-row > .x-link { white-space: nowrap; flex-shrink: 0; }

.v-aurora[data-parallax] { transition: none; will-change: transform; inset: -40px; }

.v-pins { position: absolute; left: 50%; top: 0; width: min(1100px, 120vw); height: min(1100px, 120vw); transform: translateX(-50%); pointer-events: none; z-index: 2; }
.v-pin { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .4s; will-change: transform; }
.v-pin.is-on { opacity: 1; }
.v-pin i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(var(--blue-rgb), .18); }
.v-pin b { position: absolute; left: 10px; top: -9px; white-space: nowrap; font-size: .72rem; font-weight: 600; color: var(--text); padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.85); border: 1px solid rgba(14,17,22,.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.v-pin b:empty { display: none; }
.v-pin em { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px) scale(.9); opacity: 0; white-space: nowrap; font-style: normal; font-size: .82rem; font-weight: 600; color: #fff; background: var(--text); padding: 8px 12px; border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(14,17,22,.45); transition: opacity .35s, transform .45s var(--x-ease); }
.v-pin em::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--text); transform: rotate(45deg); border-radius: 2px; }
.v-pin.is-pop em { opacity: 1; transform: translate(-50%, 0) scale(1); }
.v-pin.is-pop i { animation: vPinPop 1s var(--x-ease); background: #16A34A; box-shadow: 0 0 0 4px rgba(22,163,74,.2); }
@keyframes vPinPop { 0% { transform: scale(1); } 30% { transform: scale(1.8); } 100% { transform: scale(1); } }
.v-ticker { position: absolute; z-index: 3; left: 50%; bottom: 32px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 9px 16px 9px 14px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid rgba(14,17,22,.07); box-shadow: 0 16px 40px -18px rgba(14,17,22,.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .86rem; }
.v-ticker-label { font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #15803D; }
.v-ticker-text { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-ticker-text.is-in { animation: vTick .5s var(--x-ease); }
@keyframes vTick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.v-horizon::after { z-index: 1; }

.v-stack.is-compact { padding: 64px 0; background: var(--bg-soft); border-top: 1px solid var(--border); }
.v-stack.is-compact .v-stack-head { margin-bottom: 22px; align-items: center; }
.v-stack.is-compact .x-h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.v-stack.is-compact .x-kicker { margin-bottom: 8px; }
.v-stack.is-compact .v-logo-pane { grid-template-columns: repeat(8, 1fr); }
.v-stack.is-compact .v-logo { height: 104px; gap: 10px; border-bottom: 0; }
.v-stack.is-compact .v-logo:nth-child(4n) { border-right: 1px solid var(--border); }
.v-stack.is-compact .v-logo:last-child { border-right: 0; }
.v-stack.is-compact .v-logo img { width: 28px; height: 28px; }
.v-stack.is-compact .v-logo span { font-size: .8rem; }

.p-flag { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding: 40px; border-radius: 32px; background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -50px rgba(14,17,22,.35); position: relative; overflow: hidden; isolation: isolate; }
.p-flag::before { content: ''; position: absolute; z-index: -1; right: -10%; top: -30%; width: 70%; height: 140%; background: radial-gradient(closest-side, rgba(var(--blue-rgb), .12), transparent); }
.p-flag-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.p-flag-copy .x-chip .st-ico { width: 14px; height: 14px; }
.p-flag-copy h3 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1; }
.p-flag-copy > p { font-size: 1.08rem; color: var(--text-soft); line-height: 1.6; }
.p-flag-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.p-window { border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -36px rgba(14,17,22,.4); overflow: hidden; }
.p-window-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.p-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.p-window-bar span { margin-left: 10px; font-family: var(--ds-mono); font-size: .74rem; color: var(--text-muted); }
.p-window-body { padding: 18px; }
.p-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.p-kpis div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); }
.p-kpis small { display: block; font-size: .72rem; color: var(--text-muted); }
.p-kpis strong { font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.02em; }
.p-kpis em { display: block; font-style: normal; font-size: .72rem; font-weight: 600; color: #15803D; }
.p-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.p-table th { text-align: left; font-weight: 600; font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--border); background: #FCFCFD; }
.p-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.p-table tr:last-child td { border-bottom: 0; }
.p-table tbody tr { transition: background .2s; }
.p-table tbody tr:hover { background: var(--bg-soft); }
.p-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.p-table .m { font-family: var(--ds-mono); font-size: .78rem; color: var(--text-soft); }
.p-window-body .p-table { border: 1px solid var(--border); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.p-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.p-st.ok { background: #E8F7EE; color: #15803D; }
.p-st.warn { background: #FFF5E0; color: #B45309; }
.p-st.info { background: var(--blue-soft); color: var(--blue-deep); }
.p-st.run { background: var(--blue-soft); color: var(--blue-deep); }
.p-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(var(--blue-rgb), .25); border-top-color: var(--blue); animation: pSpin .8s linear infinite; }
@keyframes pSpin { to { transform: rotate(360deg); } }
.p-low { color: #B45309; font-weight: 600; }
.p-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.p-card { display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 28px; background: #fff; border: 1px solid var(--border); transition: box-shadow .4s, transform .4s var(--x-ease); }
.p-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(14,17,22,.35); }
.p-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.p-card-head h3 { font-size: 2rem; font-weight: 750; letter-spacing: -0.04em; margin-top: 10px; }
.p-card-head h3 small { font-size: .5em; font-weight: 600; color: var(--blue); letter-spacing: 0; margin-left: 4px; vertical-align: middle; padding: 3px 8px; border-radius: 6px; background: var(--blue-soft); }
.p-card > p { color: var(--text-soft); line-height: 1.6; }
.p-window.is-sm { margin-top: auto; box-shadow: none; }
.p-mods { display: flex; flex-wrap: wrap; gap: 6px; }
.p-mods span { font-size: .78rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft); }
.p-others { margin-top: 40px; }
.p-others-label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.p-others-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.p-mini { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid var(--border); color: var(--text); transition: border-color .3s, transform .3s var(--x-ease); }
.p-mini:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-2px); }
.p-mini-img { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--bg-soft); }
.p-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.p-mini-body { flex: 1; min-width: 0; }
.p-mini-body strong { display: block; font-size: .95rem; }
.p-mini-body small { color: var(--text-muted); font-size: .76rem; }
.p-mini > .st-ico { width: 16px; height: 16px; color: var(--text-muted); }

.c-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.c-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid var(--border); overflow: hidden; color: var(--text); transition: transform .4s var(--x-ease), box-shadow .4s, border-color .3s; }
.c-card:hover { color: var(--text); transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 30px 50px -36px rgba(14,17,22,.35); }
.c-logo { height: 150px; display: grid; place-items: center; padding: 24px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.c-logo img { max-width: 75%; max-height: 80px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .4s, opacity .4s, transform .5s var(--x-ease); }
.c-card:hover .c-logo img { filter: none; opacity: 1; transform: scale(1.05); }
.c-logo b { font-family: var(--display); font-size: 1.2rem; }
.c-body { padding: 16px 18px 18px; }
.c-body strong { display: block; font-size: 1rem; }
.c-body small { color: var(--text-muted); font-size: .82rem; }
.c-go { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); color: var(--text); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--x-ease); }
.c-go .st-ico { width: 15px; height: 15px; }
.c-card:hover .c-go { opacity: 1; transform: none; }

.w-split { position: relative; height: 560px; border-radius: 32px; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; box-shadow: 0 40px 80px -50px rgba(14,17,22,.45); }
.w-side { position: absolute; inset: 0; }
.w-split.is-hinting .w-corp, .w-split.is-hinting .w-handle { transition: clip-path .6s var(--x-ease), left .6s var(--x-ease); }
.w-corp { background: linear-gradient(140deg, #FFFFFF 0%, #EEF3FF 100%); clip-path: inset(0 calc(100% - var(--x)) 0 0); z-index: 2; }
.w-game { background: radial-gradient(900px 500px at 75% 120%, rgba(124,92,255,.45), transparent 60%), linear-gradient(160deg, #0A0D18 0%, #121A38 100%); color: #fff; }
.w-copy { position: absolute; top: 50%; left: 48px; transform: translateY(-50%); width: min(420px, 40%); z-index: 2; }
.w-copy-right { left: auto; right: 48px; }
.w-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--blue-soft); color: var(--blue-deep); }
.w-tag .st-ico { width: 15px; height: 15px; }
.w-game .w-tag { background: rgba(143,176,255,.14); color: #B9CCFF; }
.w-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.08; margin: 16px 0 18px; }
.w-game h3 { color: #fff; }
.w-copy ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.w-copy li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--text-soft); }
.w-game li { color: #B4BBCB; }
.w-copy li .st-ico { width: 18px; height: 18px; color: var(--blue); stroke-width: 2.4; }
.w-game li .st-ico { color: #8FB0FF; }
.w-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.w-link .st-ico { width: 17px; height: 17px; transition: transform .3s var(--x-ease); }
.w-link:hover .st-ico { transform: translateX(4px); }
.w-game .w-link, .w-game .w-link:hover { color: #fff; }
.w-corp-art { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); width: min(400px, 40%); }
.w-doc { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(14,17,22,.3); }
.w-doc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.w-doc-top span { font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--blue-soft); color: var(--blue-deep); }
.w-doc-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.w-doc-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--blue), #7FA0FF); }
.w-doc-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.w-doc-rows span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.w-doc-rows b { flex: 1; height: 9px; border-radius: 5px; background: var(--bg-soft); }
.w-doc-rows em { font-style: normal; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.w-badge-iso { position: absolute; left: -24px; bottom: -22px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--text); color: #fff; font-size: .82rem; font-weight: 600; box-shadow: 0 20px 40px -20px rgba(14,17,22,.5); }
.w-badge-iso .st-ico { width: 16px; height: 16px; color: #8FB0FF; }
.w-game-art { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); width: min(420px, 42%); }
.w-stars { position: absolute; inset: -200px -400px; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 70%, #cfd8ff, transparent), radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent), radial-gradient(1px 1px at 35% 85%, #fff, transparent), radial-gradient(1px 1px at 90% 60%, #b9ccff, transparent); background-size: 240px 240px; opacity: .45; animation: wStars 60s linear infinite; }
@keyframes wStars { to { transform: translateY(240px); } }
.w-grid-floor { position: absolute; left: -200px; right: -500px; bottom: -260px; height: 260px; background-image: linear-gradient(rgba(143,176,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(143,176,255,.25) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(400px) rotateX(60deg); transform-origin: top; animation: wFloor 3s linear infinite; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
@keyframes wFloor { to { background-position: 0 48px; } }
.w-steam-card { position: relative; padding: 14px; border-radius: 18px; background: rgba(23,26,33,.92); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.w-steam-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #C7D5E0; font-weight: 600; font-size: .85rem; }
.w-steam-top svg { width: 18px; height: 18px; }
.w-steam-top em { margin-left: auto; font-style: normal; font-size: .7rem; padding: 2px 8px; border-radius: 6px; background: rgba(90,200,120,.18); color: #7CE0A0; }
.w-steam-hero { height: 150px; border-radius: 12px; background: radial-gradient(circle at 30% 120%, #FF7A59 0%, transparent 45%), radial-gradient(circle at 80% 20%, #7C5CFF 0%, transparent 50%), linear-gradient(135deg, #1B2A6B, #0D1330); position: relative; overflow: hidden; }
.w-steam-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px); transform: perspective(200px) rotateX(55deg); transform-origin: bottom; }
.w-steam-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: #fff; }
.w-steam-btn { padding: 6px 14px; border-radius: 6px; background: linear-gradient(90deg, #75B022, #588A1B); font-size: .8rem; font-weight: 700; }
.w-hud { position: absolute; right: -30px; bottom: -36px; display: flex; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.w-hud div { padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.w-hud small { display: block; font-size: .64rem; color: #8B93A3; }
.w-hud strong { color: #fff; font-size: .95rem; font-variant-numeric: tabular-nums; }
.w-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(14,17,22,.08), 0 0 24px rgba(58,111,248,.6); cursor: ew-resize; }
.w-handle > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 2px; padding: 0 10px; height: 48px; border-radius: 999px; background: #fff; color: var(--text); box-shadow: 0 10px 30px -8px rgba(14,17,22,.45); transition: transform .25s var(--x-ease); }
.w-handle .st-ico { width: 16px; height: 16px; }
.w-split.is-dragging .w-handle > span, .w-handle:hover > span { transform: translate(-50%, -50%) scale(1.08); }

.t-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.t-side { display: flex; flex-direction: column; align-items: flex-start; }
.t-score { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 30px 0 24px; padding: 18px 20px; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--border); }
.t-score-num strong { display: block; font-family: var(--display); font-size: 2rem; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.t-score-num span { font-size: .84rem; color: var(--text-muted); }
.t-score-stars { display: flex; gap: 2px; color: #F5A524; }
.t-score-stars svg { width: 18px; height: 18px; fill: currentColor; }
.t-faces { display: flex; }
.t-faces span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin-left: -8px; border: 2px solid var(--bg-soft); background: var(--blue-soft); color: var(--blue-deep); font-size: .78rem; font-weight: 700; }
.t-faces span:first-child { margin-left: 0; }
.t-faces span:nth-child(2) { background: #E8F7EE; color: #15803D; }
.t-faces span:nth-child(3) { background: #FFF5E0; color: #B45309; }
.t-faces span:nth-child(4) { background: #F1ECFF; color: #6D4AE0; }
.t-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 620px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.t-col { overflow: hidden; }
.t-track { display: flex; flex-direction: column; gap: 14px; animation: tUp var(--dur, 45s) linear infinite; }
.t-col.is-rev .t-track { animation-direction: reverse; }
.t-cols:hover .t-track { animation-play-state: paused; }
@keyframes tUp { to { transform: translateY(calc(-50% - 7px)); } }
.t-card { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 30px -24px rgba(14,17,22,.3); }
.t-card blockquote { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--text); }
.t-card figcaption { display: flex; align-items: center; gap: 10px; }
.t-card figcaption strong { display: block; font-size: .88rem; }
.t-card figcaption small { color: var(--text-muted); font-size: .76rem; }
.t-card .x-avatar { width: 38px; height: 38px; font-size: .85rem; }
.t-card .v-stars svg { width: 14px; height: 14px; }

.f-status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-size: .84rem; font-weight: 600; margin-bottom: 22px; }
.f-status.is-off .x-live { background: #F5A524; box-shadow: none; animation: none; }
.f-clock { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.2); font-weight: 500; color: rgba(255,255,255,.75); }
.f-clock b { color: #fff; font-variant-numeric: tabular-nums; }
.f-founder { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); max-width: 520px; }
.f-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, #fff, #C9D7FF); color: #0B1330; font-weight: 800; font-family: var(--display); box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.f-founder p { margin: 0 0 4px; color: rgba(255,255,255,.88); font-size: .95rem; line-height: 1.5; }
.f-founder small { color: rgba(255,255,255,.6); font-size: .82rem; }
.f-founder small b { color: #fff; }
.f-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.f-steps span { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.22); font-size: .8rem; color: rgba(255,255,255,.8); }
.f-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); font-size: .72rem; color: #fff; }

@media (max-width: 1024px) {
    .p-flag { grid-template-columns: 1fr; padding: 28px; }
    .p-duo { grid-template-columns: 1fr; }
    .p-others-grid { grid-template-columns: repeat(2, 1fr); }
    .c-grid { grid-template-columns: repeat(2, 1fr); }
    .t-wrap { grid-template-columns: 1fr; }
    .v-stack.is-compact .v-logo-pane { grid-template-columns: repeat(4, 1fr); }
    .v-stack.is-compact .v-logo:nth-child(4n) { border-right: 0; }
    .v-stack.is-compact .v-logo:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
    .w-split { height: auto; cursor: default; }
    .w-split .w-side { position: relative; inset: auto; clip-path: none !important; padding: 36px 28px; min-height: 0; }
    .w-split .w-copy, .w-split .w-corp-art, .w-split .w-game-art { position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; }
    .w-split .w-corp-art, .w-split .w-game-art { margin-top: 30px; }
    .w-game { display: flex; flex-direction: column-reverse; }
    .w-handle, .w-hud, .w-badge-iso { display: none; }
}
@media (max-width: 640px) {
    .p-table th:nth-child(3), .p-table td:nth-child(3) { display: none; }
    .p-kpis { grid-template-columns: 1fr 1fr; }
    .p-kpis div:last-child { display: none; }
    .p-others-grid, .c-grid { grid-template-columns: 1fr; }
    .t-cols { grid-template-columns: 1fr; height: 520px; }
    .t-col:nth-child(n+2) { display: none; }
    .f-steps { grid-template-columns: 1fr; }
    .v-ticker { bottom: 16px; font-size: .78rem; }
    .v-stack.is-compact .v-logo-pane { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .t-track, .w-stars, .w-grid-floor, .p-spin { animation: none !important; }
}

.v-pin.is-minor b { opacity: 0; transition: opacity .3s; }
.v-pin.is-minor.is-pop b { opacity: 1; }
.v-pin.is-minor i { width: 7px; height: 7px; left: -3.5px; top: -3.5px; }

.c-card-next { border-style: dashed; border-color: var(--border-strong); background: transparent; }
.c-card-next .c-logo { background: transparent; }
.c-plus { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: transform .4s var(--x-ease), background .3s, color .3s; }
.c-plus .st-ico { width: 24px; height: 24px; }
.c-card-next:hover .c-plus { background: var(--blue); color: #fff; transform: rotate(90deg); }

@media (max-width: 1024px) { .w-hint { display: none; } }


.h-hero { position: relative; overflow: hidden; padding: 156px 0 0; background: #FBFCFF; text-align: center; isolation: isolate; }
.h-hero .x-in { transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.h-hero.is-in .x-in { opacity: 1; transform: none; }
.h-copy { position: relative; z-index: 3; }
.h-stage { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); margin: 64px auto 0; padding-bottom: 80px; opacity: 0; transform: translateY(80px); transition: opacity 1.2s var(--x-ease) .8s, transform 1.4s var(--x-ease) .8s; }
.h-hero.is-in .h-stage { opacity: 1; transform: none; }
.h-stage::before { content: ''; position: absolute; left: 10%; right: 10%; top: 10%; height: 70%; background: radial-gradient(closest-side, rgba(var(--blue-rgb), .35), transparent); filter: blur(40px); z-index: -1; }
.h-tilt { position: relative; transform-origin: 50% 0; transform: perspective(1600px) rotateX(26deg) scale(.9) translateY(40px); will-change: transform; }
.h-app { display: grid; grid-template-columns: 220px 1fr; text-align: left; border-radius: 20px; background: #fff; border: 1px solid rgba(14,17,22,.08); box-shadow: 0 2px 4px rgba(14,17,22,.04), 0 60px 120px -40px rgba(14,23,60,.45); overflow: hidden; min-height: 520px; }
.h-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; background: #F8F9FB; border-right: 1px solid var(--border); }
.h-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 16px; }
.h-brand-mark { width: 24px; height: 24px; }
.h-brand b { font-family: var(--display); font-size: 1.05rem; }
.h-side-label { padding: 12px 10px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.h-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: .86rem; font-weight: 500; color: var(--text-soft); text-align: left; transition: background .3s, color .3s; }
.h-nav .st-ico { width: 16px; height: 16px; }
.h-nav em { margin-left: auto; font-style: normal; font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--border); }
.h-nav.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(14,17,22,.08), 0 0 0 1px rgba(14,17,22,.04); }
.h-nav.is-active .st-ico { color: var(--blue); }
.h-nav.is-static { cursor: default; }
.h-side-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px; font-size: .74rem; color: var(--text-muted); }
.h-main { padding: 16px 22px 22px; min-width: 0; }
.h-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.h-search { flex: 1; max-width: 360px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); font-size: .82rem; }
.h-search .st-ico { width: 15px; height: 15px; }
.h-search kbd { margin-left: auto; font-family: var(--ds-mono); font-size: .7rem; padding: 2px 6px; border-radius: 5px; background: #fff; border: 1px solid var(--border); }
.h-top-right { display: flex; align-items: center; gap: 12px; }
.h-bell { position: relative; width: 18px; height: 18px; border-radius: 6px 6px 8px 8px; border: 2px solid var(--text-muted); }
.h-bell::after { content: ''; position: absolute; top: -4px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 2px #fff; }
.h-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #fff; font-size: .72rem; font-weight: 700; }
.h-avatar.is-sm { width: 26px; height: 26px; font-size: .66rem; background: var(--blue); }
.h-view { display: none; }
.h-view.is-active { display: block; animation: hView .6s var(--x-ease); }
@keyframes hView { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.h-title-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.h-title-row small { display: block; font-size: .74rem; color: var(--blue); font-weight: 600; }
.h-title-row b { font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.02em; }
.h-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft); }
.h-pill.is-blue { background: var(--blue-soft); color: var(--blue-deep); border-color: transparent; }
.h-pill.is-green { background: #E8F7EE; color: #15803D; border-color: transparent; }
.h-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.h-kpis > div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); }
.h-kpis small { display: block; font-size: .74rem; color: var(--text-muted); }
.h-kpis strong { display: block; font-family: var(--display); font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1.2; }
.h-kpis strong span { font-size: .55em; color: var(--text-muted); }
.h-kpis em { font-style: normal; font-size: .74rem; font-weight: 600; color: #15803D; }
.h-grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.h-card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); }
.h-card > small { display: block; font-size: .74rem; color: var(--text-muted); margin-bottom: 8px; }
.h-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.h-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
.h-list li:last-child { border-bottom: 0; }
.h-list b { font-family: var(--ds-mono); font-weight: 500; font-size: .78rem; }
.h-list span { color: var(--text-muted); }
.h-list i { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; }
.h-list i.ok { background: #16A34A; } .h-list i.warn { background: #F59E0B; } .h-list i.info { background: var(--blue); }
.h-flow { display: flex; align-items: center; gap: 0; padding: 26px 18px; border-radius: 14px; border: 1px dashed var(--border-strong); margin-bottom: 12px; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(14,17,22,.03) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(14,17,22,.03) 23px 24px); }
.h-node { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .76rem; font-weight: 600; color: var(--text-soft); }
.h-node .st-ico { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: #fff; border: 1px solid var(--border); color: var(--text); box-shadow: 0 6px 14px -8px rgba(14,17,22,.25); }
.h-node.is-on .st-ico { background: var(--blue); border-color: var(--blue); color: #fff; animation: hPulse 1.6s infinite; }
@keyframes hPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--blue-rgb), .45); } 50% { box-shadow: 0 0 0 8px rgba(var(--blue-rgb), 0); } }
.h-wire { flex: 1; height: 2px; margin: 0 6px 22px; background: linear-gradient(90deg, var(--blue) 50%, var(--border-strong) 50%); background-size: 12px 2px; animation: hWire 1s linear infinite; }
@keyframes hWire { to { background-position: 12px 0; } }
.h-runs { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); }
.h-runs > div { display: grid; grid-template-columns: 140px 1fr 56px; align-items: center; gap: 14px; font-size: .84rem; }
.h-runs em { font-style: normal; font-size: .74rem; font-weight: 600; text-align: right; }
.h-runs em.ok { color: #15803D; } .h-runs em.run { color: var(--blue); }
.h-bar { height: 6px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
.h-bar i { display: block; height: 100%; width: var(--w); background: #16A34A; border-radius: inherit; }
.h-bar i.is-run { background: var(--blue); animation: hRun 3s ease-in-out infinite alternate; }
@keyframes hRun { from { width: 40%; } to { width: 85%; } }
.h-view .x-bars { height: 120px; }
.h-phone { position: absolute; right: -40px; bottom: -40px; width: 200px; height: 400px; padding: 34px 14px 14px; border-radius: 34px; background: #fff; border: 8px solid #0E1116; box-shadow: 0 40px 80px -30px rgba(14,23,60,.55); text-align: left; display: flex; flex-direction: column; gap: 10px; transform: rotate(4deg); animation: xHover 7s ease-in-out infinite; }
.h-notch { position: absolute; top: 8px; left: 50%; width: 64px; height: 16px; margin-left: -32px; border-radius: 10px; background: #0E1116; }
.h-phone-top { display: flex; align-items: center; justify-content: space-between; font-size: .84rem; }
.h-phone-card { padding: 14px; border-radius: 16px; background: linear-gradient(135deg, var(--blue), #7C5CFF); color: #fff; }
.h-phone-card small { opacity: .8; font-size: .7rem; }
.h-phone-card strong { display: block; font-family: var(--display); font-size: 1.4rem; }
.h-phone-card .ds-chart .ds-area { opacity: .3; }
.h-phone-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bg-soft); }
.h-phone-row i { width: 26px; height: 26px; border-radius: 8px; background: #E8F7EE; }
.h-phone-row i.b { background: var(--blue-soft); } .h-phone-row i.c { background: #FFF5E0; }
.h-phone-row span { flex: 1; height: 8px; border-radius: 4px; background: var(--border); }
.h-toasts { position: absolute; left: -36px; top: 22%; width: 280px; z-index: 3; }
.h-toast { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(14,17,22,.07); box-shadow: 0 24px 50px -20px rgba(14,23,60,.4); text-align: left; opacity: 0; transform: translateX(-24px) scale(.96); transition: opacity .5s var(--x-ease), transform .6s var(--x-ease); }
.h-toast.is-in { opacity: 1; transform: none; }
.h-toast.is-out { opacity: 0; transform: translateY(-18px) scale(.96); }
.h-toast b { display: block; font-size: .88rem; }
.h-toast small { color: var(--text-muted); font-size: .76rem; }
.h-toast-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: #fff; flex-shrink: 0; }
.h-toast-ico.is-green { background: #16A34A; } .h-toast-ico.is-dark { background: var(--text); }
.h-toast-ico .st-ico { width: 18px; height: 18px; }

.pb-flag { border-radius: 32px; background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -50px rgba(14,17,22,.35); overflow: hidden; }
.pb-banner { position: relative; display: block; height: clamp(220px, 30vw, 360px); overflow: hidden; }
.pb-banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--x-ease); }
.pb-flag:hover .pb-banner img { transform: scale(1.03); }
.pb-ribbon { position: absolute; left: 24px; top: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .82rem; font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pb-ribbon .st-ico { width: 15px; height: 15px; }
.pb-body { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding: 36px 40px 40px; }
.pb-body .pb-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pb-body h3 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1; }
.pb-body .pb-copy > p { color: var(--text-soft); font-size: 1.05rem; line-height: 1.6; }
.pb-card { display: flex; flex-direction: column; border-radius: 28px; background: #fff; border: 1px solid var(--border); overflow: hidden; transition: box-shadow .4s, transform .4s var(--x-ease); }
.pb-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(14,17,22,.35); }
.pb-card-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px 28px; flex: 1; }
.pb-card-body > p { color: var(--text-soft); line-height: 1.6; }
.pb-art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 220px; padding: 24px 28px; overflow: hidden; color: #fff; isolation: isolate; }
.pb-art-flow { background: radial-gradient(500px 260px at 90% 0%, rgba(34,193,238,.55), transparent 60%), linear-gradient(135deg, #0B1B4A 0%, #3A2C9A 100%); }
.pb-art-erp { background: radial-gradient(500px 260px at 0% 0%, rgba(58,111,248,.6), transparent 60%), linear-gradient(135deg, #0A1230 0%, #0F3B5C 100%); }
.pb-art-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.pb-wires { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.pb-wires path { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 6 6; animation: pbDash 6s linear infinite; }
@keyframes pbDash { to { stroke-dashoffset: -120; } }
.pb-dot { position: absolute; z-index: -1; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.12); }
.pb-dot.d1 { left: 9%; top: 47%; } .pb-dot.d2 { left: 44%; top: 16%; } .pb-dot.d3 { right: 9%; top: 34%; background: #22C1EE; }
.pb-cubes { position: absolute; z-index: -1; right: 28px; top: 24px; display: grid; grid-template-columns: repeat(3, 34px); gap: 8px; }
.pb-cubes i { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); animation: pbCube 3.6s ease-in-out infinite; }
.pb-cubes i:nth-child(2) { animation-delay: .4s; } .pb-cubes i:nth-child(4) { animation-delay: .8s; } .pb-cubes i:nth-child(6) { animation-delay: 1.2s; } .pb-cubes i:nth-child(3) { animation-delay: 1.6s; } .pb-cubes i:nth-child(5) { animation-delay: 2s; }
@keyframes pbCube { 0%, 70%, 100% { background: rgba(255,255,255,.1); } 80% { background: #3A6FF8; border-color: #3A6FF8; } }
.pb-mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); margin-bottom: 12px; }
.pb-mark .st-ico { width: 22px; height: 22px; }
.pb-word { font-family: var(--display); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.pb-word small { font-size: .45em; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.18); vertical-align: middle; letter-spacing: 0; }
.pb-sub { margin-top: 6px; font-size: .9rem; color: rgba(255,255,255,.75); }
.pb-card .p-card-head h3 { font-size: 1.5rem; }

.pc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 56px 0 18px; }
.pc-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.pc-sub { color: var(--text-muted); font-size: .92rem; }
.pc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.pc-card { grid-column: span 2; position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid var(--border); overflow: hidden; color: var(--text); transition: transform .45s var(--x-ease), box-shadow .45s; }
.pc-card.is-wide { grid-column: span 3; }
.pc-card:hover { color: var(--text); transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(14,17,22,.35); }
.pc-cover { position: relative; display: block; aspect-ratio: 1200 / 640; overflow: hidden; background: var(--bg-soft); }
.pc-card.is-wide .pc-cover { aspect-ratio: 16 / 7; }
.pc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--x-ease); }
.pc-card:hover .pc-cover img { transform: scale(1.05); }
.pc-status { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: .72rem; font-weight: 700; color: var(--text-soft); }
.pc-status.is-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.pc-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.pc-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--blue); }
.pc-meta .st-ico { width: 14px; height: 14px; }
.pc-body strong { font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.02em; }
.pc-tag { color: var(--text-soft); font-size: .88rem; line-height: 1.5; }
.pc-go { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--text); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .35s var(--x-ease); }
.pc-go .st-ico { width: 16px; height: 16px; }
.pc-card:hover .pc-go { opacity: 1; transform: none; }

.cs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cs-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid var(--border); overflow: hidden; color: var(--text); transition: transform .45s var(--x-ease), box-shadow .45s, border-color .3s; }
.cs-card:hover { color: var(--text); transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 30px 50px -34px rgba(14,17,22,.35); }
.cs-card.is-feature { grid-column: span 2; grid-row: span 2; }
.cs-logo { display: grid; place-items: center; height: 130px; padding: 22px; background: var(--tone, var(--bg-soft)); }
.cs-card.is-feature .cs-logo { height: 260px; }
.cs-logo img { max-width: 70%; max-height: 70px; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--x-ease); }
.cs-card.is-feature .cs-logo img { max-height: 120px; }
.cs-card:hover .cs-logo img { transform: scale(1.06); }
.cs-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 8px; flex: 1; }
.cs-cat { font-size: .74rem; font-weight: 700; color: var(--blue); }
.cs-body strong { font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.02em; }
.cs-card.is-feature .cs-body strong { font-size: 1.7rem; }
.cs-desc { color: var(--text-soft); font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-card.is-feature .cs-desc { -webkit-line-clamp: 4; font-size: .98rem; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cs-tags i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft); }
.cs-tags i .st-ico { width: 12px; height: 12px; }
.cs-tags i.is-time { background: var(--blue-soft); border-color: transparent; color: var(--blue-deep); }
.cs-go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px 18px; font-size: .84rem; font-weight: 600; color: var(--text); }
.cs-go .st-ico { width: 15px; height: 15px; transition: transform .3s var(--x-ease); }
.cs-card:hover .cs-go .st-ico { transform: translateX(4px); }
.cs-next { justify-content: center; align-items: flex-start; gap: 10px; padding: 24px; background: linear-gradient(160deg, #EEF3FF, #F6F2FF); border-style: dashed; border-color: #C9D6FF; }
.cs-next strong { font-family: var(--display); font-size: 1.2rem; letter-spacing: -0.02em; }
.cs-next .cs-go { padding: 6px 0 0; color: var(--blue); }
.cs-plus { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; transition: transform .4s var(--x-ease); }
.cs-plus .st-ico { width: 22px; height: 22px; }
.cs-next:hover .cs-plus { transform: rotate(90deg); }

.w-game { background: radial-gradient(900px 500px at 25% 120%, rgba(124,92,255,.35), transparent 60%), linear-gradient(160deg, #080B16 0%, #10173A 100%); }
.w-stars, .w-grid-floor, .w-steam-card, .w-hud { display: none !important; }
.g-art { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); width: min(480px, 44%); }
.g-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 6px rgba(255,255,255,.03); }
.g-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0B0F2E 0%, #2B1E6B 45%, #6D3FC1 70%, #3A6FF8 100%); }
.g-sky::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #fff, transparent), radial-gradient(1px 1px at 58% 22%, #cfd8ff, transparent), radial-gradient(1.5px 1.5px at 78% 12%, #fff, transparent), radial-gradient(1px 1px at 88% 30%, #fff, transparent); opacity: .8; }
.g-sun { position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1; margin-left: -17%; border-radius: 50%; background: linear-gradient(180deg, #8FF0FF 0%, #3A6FF8 55%, #7C5CFF 100%); -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 77%, transparent 77% 83%, #000 83% 89%, transparent 89%); mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 77%, transparent 77% 83%, #000 83% 89%, transparent 89%); box-shadow: 0 0 60px rgba(143,240,255,.5); }
.g-mount { position: absolute; bottom: 38%; left: -10%; right: -10%; height: 30%; background: #0E0A2A; clip-path: polygon(0 100%, 8% 40%, 18% 70%, 30% 20%, 42% 65%, 52% 35%, 63% 75%, 75% 25%, 86% 60%, 100% 30%, 100% 100%); }
.g-mount.m2 { bottom: 36%; height: 20%; background: #1A1250; clip-path: polygon(0 100%, 12% 50%, 25% 80%, 40% 40%, 55% 85%, 70% 45%, 85% 75%, 100% 40%, 100% 100%); }
.g-floor { position: absolute; left: -50%; right: -50%; bottom: 0; height: 38%; background-color: #0B0A26; background-image: linear-gradient(rgba(143,176,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(143,176,255,.7) 1px, transparent 1px); background-size: 40px 26px; transform: perspective(240px) rotateX(55deg); transform-origin: top; animation: gFloor 1.2s linear infinite; }
@keyframes gFloor { to { background-position: 0 26px; } }
.g-hud-tl { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 5px; width: 34%; }
.g-lvl { font-family: var(--ds-mono); font-size: .62rem; font-weight: 700; color: #fff; letter-spacing: .05em; }
.g-hp, .g-xp { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.g-hp i { display: block; height: 100%; width: 78%; background: linear-gradient(90deg, #22C55E, #86EFAC); }
.g-xp i { display: block; height: 100%; width: 45%; background: linear-gradient(90deg, #8FB0FF, #C4B5FD); animation: gXp 4s ease-in-out infinite alternate; }
@keyframes gXp { to { width: 72%; } }
.g-map { position: absolute; right: 12px; top: 12px; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: radial-gradient(circle, rgba(58,111,248,.4), rgba(11,15,46,.8)); overflow: hidden; }
.g-map i { position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; background: linear-gradient(90deg, rgba(143,240,255,.9), transparent); transform-origin: left; animation: gRadar 2.4s linear infinite; }
@keyframes gRadar { to { transform: rotate(360deg); } }
.g-slots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 4px; }
.g-slots i { width: 22px; height: 22px; border-radius: 5px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.25); }
.g-slots i.on { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,.5); }
.g-store { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, #1B2838, #2A475E); border: 1px solid rgba(255,255,255,.08); }
.g-steam { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1B2838; }
.g-steam svg { width: 22px; height: 22px; }
.g-store-txt { flex: 1; }
.g-store-txt b { display: block; color: #fff; font-size: .9rem; }
.g-store-txt small { color: #8FA3B8; font-size: .74rem; }
.g-play { padding: 8px 16px; border-radius: 6px; background: linear-gradient(90deg, #75B022, #588A1B); color: #fff; font-size: .82rem; font-weight: 700; }
.g-server { position: absolute; right: -18px; top: -16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #C9D3E6; font-family: var(--ds-mono); font-size: .74rem; }
.g-server b { color: #fff; }

.t-spot { position: relative; margin-top: 32px; padding: 32px; border-radius: 26px; background: #0E1116; color: #fff; overflow: hidden; isolation: isolate; min-height: 300px; display: flex; flex-direction: column; }
.t-spot::before { content: ''; position: absolute; z-index: -1; right: -100px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--blue-rgb), .55), transparent 65%); }
.t-spot::after { content: ''; position: absolute; z-index: -1; left: -80px; bottom: -140px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.35), transparent 65%); }
.t-spot-q { width: 40px; height: 40px; color: #8FB0FF; margin-bottom: 14px; }
.t-spot-item { display: none; margin: 0; flex: 1; }
.t-spot-item.is-active { display: flex; flex-direction: column; animation: hView .6s var(--x-ease); }
.t-spot-item blockquote { margin: 0 0 22px; font-family: var(--display); font-size: 1.3rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.015em; color: #fff; }
.t-spot-item figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.t-spot-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), #7C5CFF); font-weight: 700; }
.t-spot-item strong { display: block; }
.t-spot-item small { color: #A6ADBB; }
.t-spot-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.t-spot-stars { display: flex; gap: 2px; color: #F5A524; }
.t-spot-stars svg { width: 16px; height: 16px; fill: currentColor; }
.t-spot-dots { display: flex; gap: 6px; }
.t-spot-dots i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); cursor: pointer; transition: width .4s var(--x-ease), background .3s; }
.t-spot-dots i.is-active { width: 40px; background: #fff; }

.v-final-card.is-mesh { background: #1B2A7A; }
.v-final-card.is-mesh .v-aurora { display: none; }
.v-final-card.is-mesh::before { content: ''; position: absolute; inset: -30%; z-index: -1;
    background:
        radial-gradient(40% 50% at 20% 30%, #3A6FF8 0%, transparent 70%),
        radial-gradient(35% 45% at 80% 20%, #7C5CFF 0%, transparent 70%),
        radial-gradient(40% 50% at 70% 80%, #22C1EE 0%, transparent 70%),
        radial-gradient(45% 55% at 25% 85%, #2554DA 0%, transparent 70%),
        linear-gradient(135deg, #1B2A7A, #2D1F7A);
    filter: blur(30px) saturate(120%);
    animation: fMesh 18s ease-in-out infinite alternate; }
@keyframes fMesh {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(4%, -3%) rotate(8deg) scale(1.08); }
    100% { transform: translate(-3%, 4%) rotate(-6deg) scale(1.04); }
}

@media (max-width: 1100px) {
    .h-phone { right: -10px; width: 170px; height: 340px; }
    .h-toasts { left: 0; top: -30px; }
}
@media (max-width: 1024px) {
    .pb-body { grid-template-columns: 1fr; padding: 28px; }
    .pc-grid { grid-template-columns: 1fr 1fr; }
    .pc-card, .pc-card.is-wide { grid-column: span 1; }
    .pc-card.is-wide .pc-cover { aspect-ratio: 1200 / 640; }
    .cs-grid { grid-template-columns: 1fr 1fr; }
    .cs-card.is-feature { grid-column: span 2; grid-row: auto; }
    .cs-card.is-feature .cs-logo { height: 180px; }
    .g-art { position: relative; left: auto; top: auto; transform: none; width: 100%; margin-top: 30px; }
    .g-server { right: 8px; top: 8px; }
}
@media (max-width: 760px) {
    .h-hero { padding-top: 130px; }
    .h-stage { width: calc(100% - 24px); margin-top: 44px; }
    .h-app { grid-template-columns: 1fr; min-height: 0; }
    .h-side { display: none; }
    .h-grid2 { grid-template-columns: 1fr; }
    .h-kpis { grid-template-columns: 1fr 1fr; }
    .h-kpis > div:nth-child(3) { display: none; }
    .h-phone, .h-toasts { display: none; }
    .h-flow { overflow: hidden; padding: 18px 10px; }
    .h-node span { display: none; }
    .h-runs > div { grid-template-columns: 1fr 70px 44px; }
    .pc-grid, .cs-grid { grid-template-columns: 1fr; }
    .cs-card.is-feature { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .h-tilt { transform: none !important; }
    .g-floor, .g-map i, .g-xp i, .pb-wires path, .pb-cubes i, .h-wire, .h-bar i.is-run, .v-final-card.is-mesh::before { animation: none !important; }
}


.wl-hero { position: relative; overflow: hidden; min-height: min(100vh, 940px); display: flex; align-items: center; padding: 140px 0 90px; background: #FBFCFF; isolation: isolate; }
.wl-hero .x-in { transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.wl-hero.is-in .x-in { opacity: 1; transform: none; }
.wl-grid { position: relative; z-index: 3; width: 100%; }
.wl-copy { max-width: 600px; }
.wl-title { font-family: var(--display) !important; font-size: clamp(3rem, 6.4vw, 6.4rem); font-weight: 750; letter-spacing: -0.055em; line-height: .94; margin: 0; color: #0B0E14; }
.wl-sub { margin-top: 26px; font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.65; color: var(--text-soft); max-width: 520px; }
.wl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.wl-trust { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); max-width: 520px; }
.wl-trust-label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 14px; }
.wl-trust-logos { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.wl-trust-logos img { height: 30px; width: auto; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: .55; mix-blend-mode: multiply; transition: filter .3s, opacity .3s; }
.wl-trust-logos img:hover { filter: none; opacity: 1; }

.wl-wall-wrap { position: absolute; z-index: 1; top: -10%; bottom: -10%; right: -6%; width: 58%; perspective: 1800px; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.wl-wall-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #FBFCFF 0%, transparent 16%, transparent 84%, #FBFCFF 100%); pointer-events: none; }
.wl-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; height: 100%; transform: rotateX(14deg) rotateY(-18deg) rotateZ(8deg) scale(1.06); transform-style: preserve-3d; transition: transform 1.2s var(--x-ease); opacity: 0; }
.wl-hero.is-in .wl-wall { opacity: 1; transition: transform 1.2s var(--x-ease), opacity 1.4s var(--x-ease) .4s; }
.wl-col { overflow: hidden; }
.wl-track { display: flex; flex-direction: column; gap: 18px; animation: wlUp var(--dur, 50s) linear infinite; }
.wl-track.is-down { animation-direction: reverse; }
@keyframes wlUp { to { transform: translateY(calc(-50% - 9px)); } }
.wl-card { margin: 0; border-radius: 20px; background: #fff; border: 1px solid rgba(14,17,22,.07); box-shadow: 0 2px 4px rgba(14,17,22,.04), 0 24px 48px -24px rgba(14,23,60,.28); overflow: hidden; }
.wl-img { position: relative; aspect-ratio: 1200 / 640; }
.wl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-img figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: .74rem; font-weight: 700; color: var(--text); }
.wl-kpi { padding: 16px 18px; }
.wl-kpi small { display: block; font-size: .74rem; color: var(--text-muted); }
.wl-kpi strong { font-family: var(--display); font-size: 1.8rem; letter-spacing: -0.03em; }
.wl-kpi em { margin-left: 8px; font-style: normal; font-size: .76rem; font-weight: 700; color: #15803D; }
.wl-order, .wl-game, .wl-score { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.wl-order > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E8F7EE; color: #15803D; flex-shrink: 0; }
.wl-order > span .st-ico { width: 17px; height: 17px; stroke-width: 2.4; }
.wl-order b, .wl-game b, .wl-score b { display: block; font-size: .9rem; }
.wl-order small, .wl-game small, .wl-score small { color: var(--text-muted); font-size: .76rem; font-family: var(--ds-mono); }
.wl-code { padding: 14px 16px; background: #0E1116; border-color: #0E1116; display: flex; flex-direction: column; gap: 6px; }
.wl-code > i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3A3F4B; margin-right: 4px; }
.wl-code code { font-family: var(--ds-mono); font-size: .76rem; color: #C9D3E6; background: none; padding: 0; white-space: nowrap; }
.wl-code code span { color: #8FB0FF; }
.wl-code code.ok { color: #7CE0A0; }
.wl-code code.m { color: #6B7385; }
.wl-flow { padding: 16px 18px; }
.wl-flow b { font-family: var(--display); font-size: 1.05rem; }
.wl-nodes { display: flex; align-items: center; margin: 12px 0 10px; }
.wl-nodes i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); }
.wl-nodes i .st-ico { width: 16px; height: 16px; }
.wl-nodes i.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.wl-nodes span { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 10px); }
.wl-flow small { font-size: .76rem; color: var(--text-muted); }
.wl-ring { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: #15803D; border: 4px solid #22C55E; flex-shrink: 0; }

.bn { display: flex !important; align-items: center; justify-content: space-between; gap: 30px; padding: 40px 48px; color: #fff; isolation: isolate; }
.bn-flow { background: radial-gradient(700px 360px at 85% 50%, rgba(34,193,238,.35), transparent 60%), linear-gradient(120deg, #040A1E 0%, #0A1A4A 55%, #1A1F6B 100%); }
.bn-erp { background: radial-gradient(700px 360px at 85% 50%, rgba(124,92,255,.38), transparent 60%), linear-gradient(120deg, #050A1C 0%, #0E1E52 55%, #22195E 100%); }
.bn-glow { position: absolute; z-index: -1; right: 8%; top: 50%; width: 420px; height: 420px; margin-top: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(58,111,248,.5), transparent 65%); filter: blur(20px); }
.bn-grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 75% 50%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 75% 50%, #000, transparent 75%); }
.bn-left { display: flex; flex-direction: column; gap: 14px; max-width: 52%; }
.bn-brand { display: flex; align-items: center; gap: 16px; }
.bn-logo { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, #3A6FF8, #22C1EE); box-shadow: 0 20px 40px -14px rgba(58,111,248,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.bn-erp .bn-logo { background: linear-gradient(135deg, #7C5CFF, #3A6FF8); }
.bn-logo .st-ico { width: 34px; height: 34px; color: #fff; }
.bn-word { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.bn-word small { font-size: .38em; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.14); vertical-align: middle; }
.bn-slogan { font-size: 1.05rem; color: rgba(255,255,255,.72); }
.bn-feats { display: flex; gap: 0; margin-top: 10px; }
.bn-feats > span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.14); text-align: center; }
.bn-feats > span:first-child { border-left: 0; padding-left: 0; }
.bn-feats .st-ico { width: 26px; height: 26px; color: #8FD4FF; }
.bn-erp .bn-feats .st-ico { color: #B9A8FF; }
.bn-feats small { font-size: .74rem; color: rgba(255,255,255,.75); white-space: nowrap; }
.bn-right { position: relative; width: 42%; height: 100%; min-height: 240px; }
.bn-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.bn-wires path { fill: none; stroke: rgba(143,212,255,.55); stroke-width: 2; stroke-dasharray: 8 8; animation: pbDash 5s linear infinite; }
.bn-node { position: absolute; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin: -28px 0 0 -28px; }
.bn-node .st-ico { width: 24px; height: 24px; color: #fff; }
.bn-node.is-on { background: linear-gradient(135deg, #3A6FF8, #22C1EE); border-color: transparent; box-shadow: 0 0 0 8px rgba(58,111,248,.18), 0 20px 40px -10px rgba(34,193,238,.6); animation: hPulse 1.8s infinite; }
.bn-node.n1 { left: 14%; top: 50%; } .bn-node.n2 { left: 52%; top: 19%; } .bn-node.n3 { left: 52%; top: 81%; } .bn-node.n4 { left: 88%; top: 50%; }
.bn-tag { position: absolute; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: .76rem; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.bn-tag.t1 { left: 4%; top: 6%; } .bn-tag.t2 { right: 0; bottom: 4%; }
.bn-dash { position: absolute; left: 6%; right: 4%; top: 12%; bottom: 12%; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 14px; transform: perspective(900px) rotateY(-12deg) rotateX(6deg); box-shadow: 0 40px 60px -30px rgba(0,0,0,.6); }
.bn-dash-top { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; }
.bn-dash-top em { font-style: normal; font-size: .7rem; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.12); }
.bn-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; }
.bn-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #B9A8FF, #3A6FF8); animation: bnBar 3.2s ease-in-out infinite alternate; }
.bn-bars i:nth-child(odd) { animation-delay: -1.2s; }
@keyframes bnBar { to { transform: scaleY(.82); transform-origin: bottom; } }
.bn-rows { display: flex; flex-direction: column; gap: 7px; }
.bn-rows i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); }
.bn-rows i:nth-child(2) { width: 80%; } .bn-rows i:nth-child(3) { width: 60%; }
.bn-erp .bn-tag.t1 { left: auto; right: 2%; top: 2%; }
.bn-erp .bn-tag.t2 { left: 0; right: auto; bottom: 2%; }
.pb-flag + .pb-flag { margin-top: 20px; }
.pb-banner.bn { height: auto; min-height: clamp(280px, 30vw, 360px); }

.cs-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
.cs-card.is-feature { grid-column: auto; grid-row: auto; }

.dj-shot { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); background: #1A1424; }
.dj-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dj-scene { position: absolute; inset: 0; }
.dj-wall { position: absolute; inset: 0 0 34% 0; background-color: #2A2238; background-image: linear-gradient(#1C1628 2px, transparent 2px), linear-gradient(90deg, #1C1628 2px, transparent 2px), linear-gradient(90deg, #1C1628 2px, transparent 2px); background-size: 48px 26px, 48px 26px, 48px 26px; background-position: 0 0, 0 0, 24px 13px; }
.dj-wall::after { content: ''; position: absolute; inset: 0; background: radial-gradient(260px 160px at 22% 40%, rgba(255,160,60,.28), transparent 70%), radial-gradient(260px 160px at 78% 40%, rgba(255,160,60,.28), transparent 70%); }
.dj-door { position: absolute; left: 50%; bottom: 34%; width: 22%; height: 46%; margin-left: -11%; border-radius: 60px 60px 0 0; background: linear-gradient(#0E0A16, #1A1226); box-shadow: inset 0 0 0 4px #3A2E4E; }
.dj-torch { position: absolute; top: 28%; width: 8px; height: 26px; background: #5A4632; border-radius: 2px; }
.dj-torch.l { left: 20%; } .dj-torch.r { right: 20%; }
.dj-torch i { position: absolute; left: 50%; top: -20px; width: 18px; height: 24px; margin-left: -9px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 70%, #FFE38A, #FF9A3C 55%, rgba(255,90,40,0) 75%); animation: djFlame .25s ease-in-out infinite alternate; }
@keyframes djFlame { to { transform: scaleY(1.15) translateY(-2px); opacity: .85; } }
.dj-floor { position: absolute; inset: 66% 0 0 0; background: linear-gradient(#3B3050, #241D33); }
.dj-floor::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(0,0,0,.25) 2px, transparent 2px); background-size: 60px 100%; transform: perspective(160px) rotateX(40deg); transform-origin: top; }
.dj-goblin { position: absolute; left: 34%; bottom: 14%; width: 15%; aspect-ratio: 1 / 1.1; border-radius: 46% 46% 40% 40%; background: radial-gradient(circle at 35% 30%, #9BE07A, #4E9A3A 70%); box-shadow: inset -6px -8px 0 rgba(0,0,0,.18); animation: djBob 1.2s ease-in-out infinite; }
@keyframes djBob { 50% { transform: translateY(-4px); } }
.dj-goblin .eye { position: absolute; top: 34%; width: 16%; height: 16%; border-radius: 50%; background: #FFF6C2; box-shadow: inset 2px 2px 0 #1A1424; }
.dj-goblin .eye.l { left: 26%; } .dj-goblin .eye.r { right: 26%; }
.dj-goblin .ear { position: absolute; top: 20%; width: 34%; height: 18%; background: #5FAE48; border-radius: 0 60% 0 60%; }
.dj-goblin .ear.l { left: -22%; transform: rotate(-18deg); border-radius: 60% 0 60% 0; } .dj-goblin .ear.r { right: -22%; transform: rotate(18deg); }
.dj-mop { position: absolute; left: 50%; bottom: 10%; width: 4px; height: 34%; background: #8A6A44; transform-origin: bottom; transform: rotate(24deg); animation: djMop 1.2s ease-in-out infinite; }
.dj-mop::after { content: ''; position: absolute; left: -12px; bottom: -6px; width: 28px; height: 12px; border-radius: 4px; background: repeating-linear-gradient(90deg, #E8E2D0 0 3px, #BDB59C 3px 5px); }
@keyframes djMop { 50% { transform: rotate(4deg); } }
.dj-puddle { position: absolute; bottom: 8%; height: 5%; border-radius: 50%; background: rgba(130,220,255,.35); }
.dj-puddle.p1 { left: 58%; width: 14%; } .dj-puddle.p2 { left: 72%; width: 9%; bottom: 13%; }
.dj-bubble { position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(200,240,255,.8); animation: djBub 2.4s ease-in infinite; }
.dj-bubble.b1 { left: 62%; bottom: 12%; } .dj-bubble.b2 { left: 66%; bottom: 14%; animation-delay: .8s; } .dj-bubble.b3 { left: 75%; bottom: 17%; animation-delay: 1.6s; }
@keyframes djBub { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } }
.dj-title { position: absolute; left: 16px; top: 12px; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: .95; letter-spacing: -0.02em; color: #FFE7A3; text-shadow: 0 3px 0 #6A3A12, 0 6px 18px rgba(0,0,0,.6); text-transform: uppercase; }
.dj-hud { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.dj-hud b { font-family: var(--ds-mono); font-size: .62rem; color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.dj-meter { width: 96px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.dj-meter i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #22C55E, #86EFAC); animation: djClean 4s ease-in-out infinite alternate; }
@keyframes djClean { to { width: 92%; } }
.dj .g-server { font-family: var(--ds-font); font-weight: 600; }
.w-game { background: radial-gradient(900px 500px at 25% 120%, rgba(255,150,60,.18), transparent 60%), radial-gradient(700px 400px at 80% 0%, rgba(124,92,255,.25), transparent 60%), linear-gradient(160deg, #0B0912 0%, #1A1430 100%); }

@media (max-width: 1100px) {
    .wl-wall-wrap { width: 62%; right: -18%; opacity: .55; }
    .bn-left { max-width: 58%; }
    .bn-feats > span { padding: 0 10px; }
}
@media (max-width: 1024px) {
    .cs-grid { grid-template-columns: 1fr 1fr; }
    .bn { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
    .bn-left { max-width: 100%; }
    .bn-right { width: 100%; min-height: 220px; }
}
@media (max-width: 760px) {
    .wl-hero { min-height: 0; padding: 120px 0 0; flex-direction: column; align-items: stretch; }
    .wl-wall-wrap { position: relative; top: auto; bottom: auto; right: auto; width: 140%; margin-left: -20%; height: 420px; opacity: 1; margin-top: 30px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
    .wl-wall { transform: rotateX(18deg) rotateZ(-6deg) scale(.9); }
    .wl-trust-logos { gap: 16px; }
    .wl-trust-logos img { height: 24px; }
    .cs-grid { grid-template-columns: 1fr; }
    .bn-word { font-size: 2.4rem; }
    .bn-logo { width: 56px; height: 56px; }
    .bn-feats { flex-wrap: wrap; gap: 12px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wl-track, .dj-torch i, .dj-goblin, .dj-mop, .dj-bubble, .dj-meter i, .bn-bars i, .bn-wires path { animation: none !important; }
}

.wl-stats { list-style: none; display: flex; gap: 0; margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--border); max-width: 540px; }
.wl-stats li { flex: 1; padding: 0 20px; border-left: 1px solid var(--border); }
.wl-stats li:first-child { padding-left: 0; border-left: 0; }
.wl-stats strong { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.wl-stats span { font-size: .84rem; color: var(--text-muted); }
@media (max-width: 760px) { .wl-stats li { padding: 0 12px; } .wl-stats strong { font-size: 1.4rem; } }

.dj .dj-hud { top: auto; bottom: 12px; }

.bn, .bn:hover, .bn:focus, .bn:visited { color: #fff; }

.cv-hero { position: relative; overflow: hidden; padding: 148px 0 80px; background: #FBFCFF; isolation: isolate; }
.cv-hero .x-in { transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.cv-hero.is-in .x-in { opacity: 1; transform: none; }
.cv-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cv-title { font-family: var(--display) !important; font-size: clamp(3rem, 7.2vw, 7.2rem); font-weight: 750; letter-spacing: -0.058em; line-height: .92; margin: 24px 0 0; color: #0B0E14; }
.cv-title .x-mask { padding-top: .14em; margin-top: -.14em; }
.cv-mark { position: relative; display: inline-block; color: var(--blue); }
.cv-mark::before { content: ''; position: absolute; inset: .06em -.1em -.02em; border: 2px solid var(--blue); border-radius: 3px; opacity: 0; transform: scale(1.06);
    background: linear-gradient(#fff, #fff) -4px -4px / 9px 9px no-repeat, linear-gradient(#fff, #fff) calc(100% + 4px) -4px / 9px 9px no-repeat, linear-gradient(#fff, #fff) -4px calc(100% + 4px) / 9px 9px no-repeat, linear-gradient(#fff, #fff) calc(100% + 4px) calc(100% + 4px) / 9px 9px no-repeat;
    transition: opacity .5s var(--x-ease) 1.3s, transform .6s var(--x-ease) 1.3s; }
.cv-mark::after { content: "H1 \00B7  Bricolage 750"; position: absolute; left: -.1em; top: .06em; transform: translateY(-100%); padding: 3px 8px; border-radius: 5px 5px 5px 0; background: var(--blue); color: #fff; font-family: var(--ds-mono); font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.4; white-space: nowrap; opacity: 0; transition: opacity .5s var(--x-ease) 1.5s; }
.cv-hero.is-in .cv-mark::before { opacity: 1; transform: none; }
.cv-hero.is-in .cv-mark::after { opacity: 1; }
.cv-sub { margin: 26px auto 0; max-width: 640px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.65; color: var(--text-soft); }
.cv-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.cv-wrap { margin-top: 60px; }

.cv-board { position: relative; height: 640px; border-radius: 28px; background: #F3F5F9; border: 1px solid #E1E6EF; box-shadow: 0 60px 120px -60px rgba(14,30,80,.45), 0 0 0 8px rgba(255,255,255,.75); overflow: hidden; user-select: none; -webkit-user-select: none; }
.cv-board::after { content: ''; position: absolute; inset: 52px 0 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, #F3F5F9, rgba(243,245,249,0) 5%, rgba(243,245,249,0) 95%, #F3F5F9); }
.cv-bar { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px 0 18px; background: rgba(255,255,255,.9); border-bottom: 1px solid #E1E6EF; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cv-file { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-soft); white-space: nowrap; }
.cv-file svg { width: 22px; height: 22px; }
.cv-file b { color: var(--text); font-weight: 650; }
.cv-file i { font-style: normal; color: #B7BECB; }
.cv-file em { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: #E9F8EF; color: #15803D; font-style: normal; font-size: .72rem; font-weight: 600; }
.cv-file em .x-live { width: 6px; height: 6px; }
.cv-people { display: flex; align-items: center; gap: 12px; }
.cv-avs { display: flex; }
.cv-avs i, .cv-av { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-style: normal; font-size: .72rem; font-weight: 700; border: 2px solid #fff; margin-left: -7px; }
.cv-avs i:first-child, .cv-av { margin-left: 0; }
.cv-people small { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.cv-share { padding: 7px 14px; border-radius: 10px; background: var(--blue); color: #fff; font-size: .8rem; font-weight: 600; }

.cv-viewport { position: absolute; inset: 52px 0 0; overflow: hidden; cursor: grab; background-image: radial-gradient(circle, #CBD3E1 1px, transparent 1.3px); background-size: 22px 22px; touch-action: pan-y; }
.cv-board.is-grabbing .cv-viewport { cursor: grabbing; }
.cv-pan { position: absolute; left: 0; top: 0; width: 2480px; height: 520px; transform-origin: 0 0; will-change: transform; }
.cv-frame { position: absolute; margin: 0; }
.cv-frame figcaption { display: flex; justify-content: space-between; gap: 8px; height: 16px; line-height: 16px; margin-bottom: 6px; font-family: var(--ds-mono); font-size: 11px; color: #949CAE; white-space: nowrap; }
.cv-frame figcaption span { color: #5B6578; }
.cv-shot img { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 24px 44px -26px rgba(14,30,80,.4), 0 0 0 1px rgba(14,17,22,.06); pointer-events: none; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s; }
.cv-ui-body { border-radius: 14px; background: #fff; padding: 14px 16px; box-shadow: 0 24px 44px -26px rgba(14,30,80,.4), 0 0 0 1px rgba(14,17,22,.06); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s; }
.cv-frame:hover img, .cv-frame:hover .cv-ui-body, .cv-shot.is-selected img { outline-color: var(--blue); }
.cv-frame:hover figcaption span, .cv-shot.is-selected figcaption span { color: var(--blue); }
.cv-shot.is-selected::before { content: ''; position: absolute; z-index: 1; left: -9px; right: -9px; top: 13px; bottom: -9px; pointer-events: none;
    background: linear-gradient(#fff, #fff) 2px 2px / 6px 6px no-repeat, linear-gradient(#fff, #fff) calc(100% - 2px) 2px / 6px 6px no-repeat, linear-gradient(#fff, #fff) 2px calc(100% - 2px) / 6px 6px no-repeat, linear-gradient(#fff, #fff) calc(100% - 2px) calc(100% - 2px) / 6px 6px no-repeat,
    linear-gradient(#3A6FF8, #3A6FF8) 0 0 / 10px 10px no-repeat, linear-gradient(#3A6FF8, #3A6FF8) 100% 0 / 10px 10px no-repeat, linear-gradient(#3A6FF8, #3A6FF8) 0 100% / 10px 10px no-repeat, linear-gradient(#3A6FF8, #3A6FF8) 100% 100% / 10px 10px no-repeat; }
.cv-shot.is-selected::after { content: "380 \00D7  203"; position: absolute; left: 50%; bottom: -32px; transform: translateX(-50%); padding: 2px 8px; border-radius: 5px; background: var(--blue); color: #fff; font-family: var(--ds-mono); font-size: 11px; white-space: nowrap; }

.cv-kpi small { display: block; font-size: .74rem; color: var(--text-muted); }
.cv-kpi strong { font-family: var(--display); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.04em; margin-right: 6px; }
.cv-kpi em { font-style: normal; font-size: .72rem; font-weight: 600; color: #15803D; background: #E9F8EF; padding: 2px 7px; border-radius: 999px; }
.cv-kpi [data-spark] { margin-top: 6px; }
.cv-term .cv-ui-body { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 32px; background: #0E1116; color: #C9D3E6; font-family: var(--ds-mono); font-size: .76rem; }
.cv-term .cv-ui-body > i { position: absolute; top: 13px; left: 16px; width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.cv-term .cv-ui-body > i:nth-child(2) { left: 30px; background: #FEBC2E; }
.cv-term .cv-ui-body > i:nth-child(3) { left: 44px; background: #28C840; }
.cv-term code { white-space: nowrap; background: none; padding: 0; color: inherit; }
.cv-term code span { color: #8FB0FF; } .cv-term code.m { color: #6B7488; } .cv-term code.ok { color: #4ADE80; }
.cv-pay .cv-ui-body, .cv-score .cv-ui-body, .cv-game .cv-ui-body { display: flex; align-items: center; gap: 12px; }
.cv-ok { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #E9F8EF; color: #16A34A; }
.cv-ok .st-ico { width: 18px; height: 18px; stroke-width: 2.6; }
.cv-ui-body b { display: block; font-size: .88rem; }
.cv-ui-body small { font-size: .74rem; color: var(--text-muted); }
.cv-sw { display: flex; gap: 6px; margin-bottom: 12px; }
.cv-sw i { flex: 1; height: 38px; border-radius: 9px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(14,17,22,.08); }
.cv-type { display: flex; align-items: center; gap: 12px; }
.cv-type b { font-family: var(--display); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.cv-type span { font-size: .82rem; font-weight: 600; }
.cv-type small { display: block; font-weight: 400; font-size: .72rem; }
.cv-nodes { display: flex; align-items: center; margin-bottom: 10px; }
.cv-nodes i { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.cv-nodes i.on { background: var(--blue); color: #fff; box-shadow: 0 0 0 6px rgba(58,111,248,.15); }
.cv-nodes .st-ico { width: 18px; height: 18px; }
.cv-nodes span { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 11px); animation: cvDash 1s linear infinite; }
@keyframes cvDash { to { background-position: 11px 0; } }
.cv-ring { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #15803D; background: radial-gradient(closest-side, #fff 76%, transparent 79% 100%), conic-gradient(#22C55E 98%, #E5E7EB 0); }
.cv-btns .cv-ui-body { display: flex; align-items: center; gap: 8px; }
.cv-btns .b1 { padding: 9px 14px; border-radius: 10px; background: #0E1116; color: #fff; font-size: .8rem; font-weight: 600; }
.cv-btns .b2 { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); color: var(--text); font-size: .8rem; font-weight: 600; }
.cv-btns .b3 { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; }
.cv-btns .b3 .st-ico { width: 16px; height: 16px; }
.cv-sticky { position: absolute; width: 190px; padding: 14px 16px; border-radius: 4px 4px 14px 4px; background: #FFE58F; color: #5C4A00; font-size: .84rem; line-height: 1.45; box-shadow: 0 18px 30px -18px rgba(92,74,0,.55); transform: rotate(-3deg); }
.cv-sticky b { display: block; margin-bottom: 4px; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.cv-comment { position: absolute; display: flex; align-items: flex-start; gap: 8px; width: 250px; }
.cv-comment p { margin: 0; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #fff; font-size: .8rem; line-height: 1.4; color: var(--text); box-shadow: 0 18px 34px -20px rgba(14,30,80,.45), 0 0 0 1px rgba(14,17,22,.06); }
.cv-comment small { display: block; margin-top: 4px; color: var(--blue); font-weight: 600; font-size: .72rem; }

.cv-cur, .cv-me { position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: flex-start; pointer-events: none; }
.cv-cur svg, .cv-me svg { width: 18px; height: 18px; fill: var(--c); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cv-cur b, .cv-me b { margin: 14px 0 0 -3px; padding: 3px 9px; border-radius: 999px; background: var(--c); color: #fff; font-size: .72rem; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); }
.cv-cur.c1 { animation: cvC1 15s ease-in-out infinite; }
.cv-cur.c2 { animation: cvC2 17s ease-in-out infinite; }
.cv-cur.c3 { animation: cvC3 19s ease-in-out infinite; }
@keyframes cvC1 { 0%, 100% { transform: translate(1180px, 190px); } 22% { transform: translate(1000px, 130px); } 40% { transform: translate(1100px, 250px); } 62% { transform: translate(1260px, 310px); } 80% { transform: translate(1230px, 150px); } }
@keyframes cvC2 { 0%, 100% { transform: translate(250px, 430px); } 28% { transform: translate(520px, 420px); } 52% { transform: translate(830px, 455px); } 76% { transform: translate(420px, 230px); } }
@keyframes cvC3 { 0%, 100% { transform: translate(1830px, 120px); } 30% { transform: translate(1520px, 410px); } 58% { transform: translate(1170px, 460px); } 82% { transform: translate(1890px, 410px); } }
.cv-me { --c: #0E1116; z-index: 6; opacity: 0; transition: opacity .2s; }
.cv-board.is-hover .cv-me { opacity: 1; }

.cv-tools { position: absolute; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 16px; background: #0E1116; box-shadow: 0 20px 40px -16px rgba(14,17,22,.6); white-space: nowrap; }
.cv-tool { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #AEB6C6; }
.cv-tool.on { background: var(--blue); color: #fff; }
.cv-tool svg { width: 18px; height: 18px; }
.cv-sep { width: 1px; height: 24px; margin: 0 8px; background: rgba(255,255,255,.14); }
.cv-stat { display: flex; align-items: baseline; gap: 6px; padding: 0 12px; color: #8F98AA; font-size: .8rem; }
.cv-stat b { color: #fff; font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.cv-drag { position: absolute; z-index: 5; right: 18px; bottom: 26px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid #E1E6EF; font-size: .74rem; color: var(--text-muted); }

.pb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.pb-duo .pb-flag + .pb-flag { margin-top: 0; }
.pb-flag.is-half { display: flex; flex-direction: column; }
.pb-flag.is-half .pb-banner.bn { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px; min-height: 0; padding: 30px 30px 26px; }
.pb-flag.is-half .bn-left { max-width: 100%; }
.pb-flag.is-half .bn-right { width: 100%; height: 180px; min-height: 0; }
.pb-flag.is-half .bn-word { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.pb-flag.is-half .bn-logo { width: 58px; height: 58px; border-radius: 17px; }
.pb-flag.is-half .bn-logo .st-ico { width: 28px; height: 28px; }
.pb-flag.is-half .bn-feats > span { padding: 0 14px; }
.pb-flag.is-half .pb-ribbon { left: auto; right: 22px; top: 22px; }
.pb-flag.is-half .bn-glow { top: auto; bottom: -160px; right: -60px; margin-top: 0; }
.pb-flag.is-half .bn-grid { -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 80%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 80%, #000, transparent 75%); }
.pb-flag.is-half .bn-dash { top: 4%; bottom: 4%; left: 4%; right: 4%; }
.pb-flag.is-half .pb-body { flex: 1; grid-template-columns: 1fr; align-items: start; gap: 24px; padding: 28px 30px 30px; }
.pb-flag.is-half .pb-body h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }

.w-corp-art.cp { width: min(480px, 44%); }
.cp-win { display: flex; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -40px rgba(14,30,80,.45); overflow: hidden; }
.cp-side { width: 54px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; background: #F6F8FC; border-right: 1px solid var(--border); }
.cp-side .cp-mark { width: 26px; height: 26px; margin-bottom: 8px; display: block; }
.cp-side i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #8A93A6; }
.cp-side i.on { background: var(--blue-soft); color: var(--blue); }
.cp-side .st-ico { width: 17px; height: 17px; }
.cp-main { flex: 1; min-width: 0; padding: 16px 18px; }
.cp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cp-top b { font-size: .95rem; }
.cp-chip { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-soft); font-size: .7rem; font-weight: 600; }
.cp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.cp-kpis div { padding: 10px; border-radius: 12px; border: 1px solid var(--border); }
.cp-kpis small { display: block; font-size: .66rem; color: var(--text-muted); }
.cp-kpis strong { display: block; margin: 2px 0; font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.03em; }
.cp-kpis em { font-style: normal; font-size: .64rem; color: var(--text-muted); }
.cp-kpis em.up { color: #15803D; font-weight: 600; }
.cp-chart { position: relative; margin-bottom: 14px; }
.cp-chart svg { display: block; width: 100%; height: 92px; overflow: visible; }
.cp-line { fill: none; stroke: #3A6FF8; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.cp-prev { fill: none; stroke: #C7D2E6; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cp-dot { position: absolute; right: -6px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: #3A6FF8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(58,111,248,.18); animation: hPulse 1.8s infinite; }
.cp-tip { position: absolute; right: 16px; top: -8px; padding: 3px 7px; border-radius: 6px; background: #0E1116; color: #fff; font-size: .68rem; font-weight: 600; }
.cp-months { display: flex; justify-content: space-between; margin-top: 6px; font-size: .64rem; color: var(--text-muted); }
.cp-rows { display: flex; flex-direction: column; gap: 8px; }
.cp-rows > span { display: flex; align-items: center; gap: 10px; font-size: .78rem; }
.cp-rows i { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; font-style: normal; font-size: .62rem; font-weight: 700; }
.cp-rows b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-rows em { padding: 2px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--text-soft); font-style: normal; font-size: .66rem; font-weight: 600; }
.cp-rows em.won { background: #E9F8EF; color: #15803D; }
.cp-rows strong { width: 52px; text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; }
.cp-toast { position: absolute; right: -24px; top: -26px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 24px 40px -20px rgba(14,30,80,.5); animation: cpFloat 6s ease-in-out infinite; }
.cp-toast > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #16A34A; color: #fff; }
.cp-toast .st-ico { width: 16px; height: 16px; stroke-width: 2.6; }
.cp-toast b { display: block; font-size: .8rem; }
.cp-toast small { font-size: .7rem; color: var(--text-muted); }
.cp-team { position: absolute; left: -28px; bottom: -24px; display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; background: #0E1116; box-shadow: 0 24px 40px -20px rgba(14,17,22,.6); animation: cpFloat 7s ease-in-out -2s infinite; }
.cp-team small { font-size: .74rem; color: #C9D3E6; white-space: nowrap; }
.cp-avs { display: flex; }
.cp-avs i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-left: -7px; background: var(--c); color: #fff; font-style: normal; font-size: .64rem; font-weight: 700; border: 2px solid #0E1116; }
.cp-avs i:first-child { margin-left: 0; }
.cp-avs i.more { background: #2A3140; }
@keyframes cpFloat { 50% { transform: translateY(-8px); } }

.w-game.dj3 { background: #0B0A12; overflow: hidden; }
.dj3-bg { position: absolute; inset: 0; }
.dj3-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 7s ease-out; }
.dj3-bg img.is-on { opacity: 1; transform: scale(1); }
.dj3-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,8,14,.82) 0%, rgba(8,8,14,.4) 30%, rgba(8,8,14,.08) 46%, rgba(8,8,14,.5) 60%, rgba(8,8,14,.92) 100%), linear-gradient(0deg, rgba(8,8,14,.65), transparent 45%); }
.g-art.dj3-ui { z-index: 2; width: min(420px, 40%); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dj3-logo { display: block; width: 280px; height: auto; margin: -36px 0 -40px -18px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.65)); }
.dj3-tag { margin: 0; max-width: 360px; color: #EDE7D8; font-size: .98rem; line-height: 1.5; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.dj3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dj3-chips span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: .74rem; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dj3-thumbs { display: flex; gap: 8px; }
.dj3-thumbs button { width: 66px; aspect-ratio: 16 / 9; padding: 0; border: 2px solid rgba(255,255,255,.25); border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; opacity: .7; transition: opacity .25s, border-color .25s, transform .25s var(--x-ease); }
.dj3-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dj3-thumbs button.is-on, .dj3-thumbs button:hover { opacity: 1; border-color: #9BE15D; transform: translateY(-2px); }
.dj3-ui .g-store { width: 100%; margin-top: 2px; background: rgba(23,26,33,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.w-game.dj3 .w-copy { z-index: 2; }
.w-game.dj3 .w-copy li { color: #D4D8E2; }
@media (max-width: 1024px) {
    .dj3-shade { background: linear-gradient(180deg, rgba(8,8,14,.55), rgba(8,8,14,.9)); }
    .dj3-logo { width: 240px; margin-top: -20px; }
}

@media (max-width: 1100px) {
    .pb-duo { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    .w-corp-art.cp, .g-art.dj3-ui { width: 100%; }
    .cp-toast { right: 8px; } .cp-team { left: 8px; }
}
@media (max-width: 760px) {
    .cv-hero { padding: 118px 0 56px; }
    .cv-wrap { margin-top: 40px; }
    .cv-board { height: 470px; border-radius: 22px; }
    .cv-people small, .cv-tool, .cv-sep, .cv-drag, .cv-mark::after { display: none; }
    .cv-stat { padding: 0 8px; font-size: .72rem; }
    .cv-stat b { font-size: .95rem; }
    .pb-flag.is-half .pb-ribbon { position: static; align-self: flex-start; order: -1; }
    .pb-flag.is-half .bn-feats > span { padding: 0 8px; }
    .cp-kpis strong { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cv-cur, .cv-nodes span, .cp-toast, .cp-team, .cp-dot { animation: none !important; }
}
.pb-flag.is-half .bn-erp .bn-dash { top: 16%; }
.pb-flag.is-half .bn-erp .bn-tag.t1 { top: 0; right: 0; }
.g-art.dj3-ui { top: auto; bottom: 34px; transform: none; gap: 12px; }
.dj3-logo { width: 220px; margin: -30px 0 -4px -14px; }
.dj3-shade { background: linear-gradient(90deg, rgba(8,8,14,.55) 0%, rgba(8,8,14,.1) 30%, rgba(8,8,14,.06) 46%, rgba(8,8,14,.5) 60%, rgba(8,8,14,.92) 100%), linear-gradient(0deg, rgba(8,8,14,.92) 0%, rgba(8,8,14,.45) 38%, transparent 60%); }
@media (max-width: 1024px) {
    .g-art.dj3-ui { bottom: auto; margin-top: 30px; }
    .dj3-shade { background: linear-gradient(180deg, rgba(8,8,14,.55), rgba(8,8,14,.9)); }
}

.ed-hero { position: relative; overflow: hidden; padding: 136px 0 72px; background: #FBFCFF; isolation: isolate; }
.ed-hero .x-in { transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.ed-hero.is-in .x-in { opacity: 1; transform: none; }
.ed-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ed-est { font-family: var(--ds-mono); font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.ed-title { margin: 30px 0 0; font-family: var(--display) !important; font-weight: 750; font-size: clamp(3rem, 9.2vw, 9.4rem); line-height: .9; letter-spacing: -0.06em; color: #0B0E14; }
.ed-line { display: flex; align-items: center; gap: .2em; }
.ed-line .x-mask { padding: .04em 0 .1em; }
.ed-line .x-mask > .x-in { display: flex; align-items: center; gap: .2em; white-space: nowrap; }
.ed-line.l2 { justify-content: flex-end; }
.ed-title em { font-style: normal; color: var(--blue); }
.ed-cap { position: relative; display: inline-block; flex-shrink: 0; width: 2.1em; height: .76em; border-radius: 999px; overflow: hidden; background: #E3E9F6; box-shadow: inset 0 0 0 1px rgba(14,17,22,.06); transition: width .7s var(--x-ease); }
.ed-cap.c-b { width: 2.6em; background: #1A1420; }
.ed-cap:hover { width: 3em; }
.ed-cap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.14); transition: opacity .9s ease, transform 3.2s ease-out; }
.ed-cap img.is-on { opacity: 1; transform: scale(1); }
.ed-line.l3 { gap: .32em; }
.ed-badge { position: relative; flex-shrink: 0; width: clamp(88px, 8.6vw, 128px); height: clamp(88px, 8.6vw, 128px); display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 24px 50px -18px rgba(58,111,248,.75); letter-spacing: 0; }
.ed-hero.is-in .ed-badge { transition: opacity .9s var(--x-ease) .75s, transform .5s var(--x-ease), background .3s; }
.ed-badge:hover { color: #fff; background: #2554DA; transform: scale(1.07) rotate(-10deg); }
.ed-badge > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: edSpin 16s linear infinite; }
.ed-badge text { font-family: var(--ds-mono); font-size: 9.5px; font-weight: 600; fill: #fff; }
.ed-badge > span { width: 40%; height: 40%; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--blue); }
.ed-badge > span .st-ico { width: 46%; height: 46%; stroke-width: 2.4; }
@keyframes edSpin { to { transform: rotate(360deg); } }

.ed-foot { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--border); }
.ed-copy p { margin: 0; max-width: 560px; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.65; color: var(--text-soft); }
.ed-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ed-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ed-stats li { padding-left: 22px; border-left: 1px solid var(--border); }
.ed-stats strong { display: block; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #0B0E14; }
.ed-stats span { display: block; margin-top: 8px; font-size: .84rem; color: var(--text-muted); }

.ed-strip { margin: 64px -2% 0; padding: 16px 0; overflow: hidden; rotate: -2deg; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ed-track { display: flex; gap: 18px; width: max-content; padding-right: 18px; animation: edMarq 80s linear infinite; }
.ed-strip:hover .ed-track { animation-play-state: paused; }
@keyframes edMarq { to { transform: translateX(-50%); } }
.ed-card { position: relative; flex-shrink: 0; margin: 0; width: clamp(250px, 28vw, 410px); aspect-ratio: 16 / 9.4; border-radius: 22px; overflow: hidden; background: #0E1116; box-shadow: 0 30px 60px -34px rgba(14,30,80,.55); }
.ed-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--x-ease); }
.ed-card:hover img { transform: scale(1.05); }
.ed-card figcaption { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 7px 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .8rem; }
.ed-card figcaption b { font-weight: 650; color: #0E1116; }
.ed-card figcaption span { padding: 2px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-size: .7rem; font-weight: 600; }

@media (max-width: 900px) {
    .ed-foot { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 760px) {
    .ed-hero { padding: 112px 0 56px; }
    .ed-est { display: none; }
    .ed-title { font-size: clamp(2.6rem, 12vw, 4rem); margin-top: 24px; }
    .ed-line .x-mask > .x-in { flex-wrap: wrap; white-space: normal; }
    .ed-line.l2 { justify-content: flex-start; }
    .ed-cap { width: 1.7em; } .ed-cap.c-b { width: 2em; }
    .ed-badge { width: 76px; height: 76px; }
    .ed-badge text { font-size: 10.5px; }
    .ed-stats li { padding-left: 12px; }
    .ed-strip { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ed-track, .ed-badge > svg { animation: none !important; }
}

.rl-hero .x-in, .ms-hero .x-in, .bt-hero .x-in { transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.rl-hero.is-in .x-in, .ms-hero.is-in .x-in, .bt-hero.is-in .x-in { opacity: 1; transform: none; }

.rl-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: .95rem; transition: transform .3s var(--x-ease), background .3s, border-color .3s; }
.rl-btn .st-ico { width: 17px; height: 17px; }
.rl-btn-light, .rl-btn-light:hover, .rl-btn-light:focus { background: #fff; color: #0B0E14; }
.rl-btn-light:hover { transform: translateY(-2px); }
.rl-btn-ghost, .rl-btn-ghost:hover, .rl-btn-ghost:focus { color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.04); }
.rl-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.rl-grad { background: linear-gradient(90deg, #9DB8FF 0%, #C9B8FF 50%, #8FE3FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.rl-hero { position: relative; overflow: hidden; isolation: isolate; margin: 10px 10px 0; border-radius: 34px; background: #05070D; color: #fff; padding: 150px 0 36px; min-height: min(100vh, 980px); display: flex; flex-direction: column; justify-content: space-between; }
.rl-amb { position: absolute; inset: -15%; z-index: -2; }
.rl-amb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(80px) saturate(1.5); opacity: 0; transform: scale(1.1); transition: opacity 1.4s ease; }
.rl-amb img.is-on { opacity: .8; }
.rl-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,7,13,.94) 0%, rgba(5,7,13,.72) 38%, rgba(5,7,13,.25) 72%, rgba(5,7,13,.5) 100%), linear-gradient(0deg, rgba(5,7,13,.9), transparent 34%), linear-gradient(180deg, rgba(5,7,13,.6), transparent 22%); }
.rl-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 64px; align-items: center; flex: 1; }
.rl-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #DCE3F2; font-size: .86rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rl-pill:hover { color: #fff; }
.rl-pill .st-ico { width: 15px; height: 15px; }
.rl-title { margin: 26px 0 0; font-family: var(--display) !important; font-size: clamp(3rem, 6vw, 6.2rem); font-weight: 750; letter-spacing: -0.055em; line-height: .95; color: #fff; }
.rl-sub { margin: 24px 0 0; max-width: 500px; font-size: 1.08rem; line-height: 1.65; color: rgba(226,232,245,.72); }
.rl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.rl-stats { list-style: none; padding: 0; margin: 40px 0 0; display: flex; gap: 34px; }
.rl-stats strong { display: block; font-family: var(--display); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.rl-stats span { display: block; margin-top: 6px; font-size: .8rem; color: rgba(226,232,245,.6); }
.rl-stage { position: relative; aspect-ratio: 16 / 9.4; perspective: 1400px; }
.rl-card { position: absolute; inset: 0; margin: 0; border-radius: 26px; overflow: hidden; background: #0E1116; box-shadow: 0 50px 100px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12); opacity: 0; pointer-events: none; transform: translate3d(70px, -34px, -260px) rotateY(-8deg) rotateX(3deg) scale(.86); transition: transform 1.1s var(--x-ease), opacity .9s ease; }
.rl-card.is-on { z-index: 3; opacity: 1; pointer-events: auto; transform: rotateY(calc(-8deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg))); }
.rl-card.is-next { z-index: 2; opacity: .42; transform: translate3d(64px, -36px, -150px) rotateY(-8deg) rotateX(3deg) scale(.92); }
.rl-card.is-prev { z-index: 4; opacity: 0; transform: translate3d(-140px, 60px, 120px) rotateY(-8deg) rotateX(3deg) scale(1.04); }
.rl-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rl-card figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 16px; border-radius: 18px; background: rgba(10,12,20,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.rl-chip { padding: 4px 10px; border-radius: 999px; background: rgba(143,176,255,.18); color: #BFD0FF; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.rl-cap-txt { flex: 1; min-width: 0; }
.rl-cap-txt b { display: block; font-size: 1rem; color: #fff; }
.rl-cap-txt small { display: block; font-size: .8rem; color: rgba(226,232,245,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-go, .rl-go:hover { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0B0E14; transition: transform .35s var(--x-ease); }
.rl-go:hover { transform: rotate(45deg); }
.rl-go .st-ico { width: 18px; height: 18px; }
.rl-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; }
.rl-tabs button { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; background: none; text-align: left; color: rgba(226,232,245,.5); font: inherit; cursor: pointer; transition: color .3s; }
.rl-tabs button:hover, .rl-tabs button.is-on { color: #fff; }
.rl-tabs i { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.rl-tabs b { display: block; width: 0; height: 100%; border-radius: 3px; background: #fff; }
.rl-tabs button.is-on b { animation: rlProg 6.5s linear forwards; }
.rl-hero.is-paused .rl-tabs button.is-on b { animation-play-state: paused; }
@keyframes rlProg { to { width: 100%; } }
.rl-tabs span { font-size: .92rem; font-weight: 600; }
.rl-tabs em { margin-right: 8px; font-style: normal; font-family: var(--ds-mono); font-size: .72rem; opacity: .6; }

.ms-hero { position: relative; overflow: hidden; isolation: isolate; padding: 150px 0 110px; background: #FBFCFF; }
.ms-band { position: absolute; z-index: -1; left: -10%; right: -10%; top: -38%; height: 92%; transform: skewY(-9deg); transform-origin: 0 100%; overflow: hidden; background: #E9EFFF; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 35%, #000 62%); mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.45) 35%, #000 62%); }
.ms-band i { position: absolute; border-radius: 50%; filter: blur(60px); }
.ms-band .b1 { width: 55%; height: 130%; left: 42%; top: -10%; background: #3A6FF8; animation: msB1 14s ease-in-out infinite alternate; }
.ms-band .b2 { width: 45%; height: 110%; left: 68%; top: 5%; background: #7C5CFF; animation: msB2 17s ease-in-out infinite alternate; }
.ms-band .b3 { width: 40%; height: 100%; left: 26%; top: 30%; background: #22C1EE; animation: msB3 19s ease-in-out infinite alternate; }
.ms-band .b4 { width: 32%; height: 80%; left: 82%; top: 40%; background: #A78BFA; opacity: .7; animation: msB4 21s ease-in-out infinite alternate; }
@keyframes msB1 { to { transform: translate(-18%, 12%) scale(1.15); } }
@keyframes msB2 { to { transform: translate(-22%, -10%) scale(.9); } }
@keyframes msB3 { to { transform: translate(30%, -18%) scale(1.2); } }
@keyframes msB4 { to { transform: translate(-30%, -20%) scale(1.1); } }
.ms-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 40px; align-items: center; }
.ms-title { margin: 24px 0 0; font-family: var(--display) !important; font-size: clamp(3rem, 6vw, 6rem); font-weight: 750; letter-spacing: -0.055em; line-height: .95; color: #0B0E14; }
.ms-sub { margin: 24px 0 0; max-width: 500px; font-size: 1.08rem; line-height: 1.65; color: var(--text-soft); }
.ms-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ms-stats { list-style: none; padding: 0; margin: 40px 0 0; display: flex; gap: 32px; }
.ms-stats strong { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #0B0E14; }
.ms-stats span { display: block; margin-top: 6px; font-size: .8rem; color: var(--text-muted); }
.ms-comp { position: relative; height: 540px; perspective: 1600px; transform-style: preserve-3d; transition: transform .6s var(--x-ease); }
.ms-comp > * { position: absolute; }
.ms-browser { left: 0; top: 34px; width: 86%; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 50px 100px -40px rgba(14,30,80,.55), 0 0 0 1px rgba(14,17,22,.06); transform: rotateY(-10deg) rotateX(4deg); transform-origin: left center; }
.ms-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #F4F6FA; border-bottom: 1px solid var(--border); }
.ms-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.ms-bar i:nth-child(2) { background: #FEBC2E; } .ms-bar i:nth-child(3) { background: #28C840; }
.ms-bar span { display: flex; align-items: center; gap: 6px; flex: 1; max-width: 240px; margin-left: 12px; padding: 5px 12px; border-radius: 8px; background: #fff; font-size: .74rem; color: var(--text-muted); }
.ms-bar .st-ico { width: 12px; height: 12px; }
.ms-browser img { display: block; width: 100%; aspect-ratio: 1983 / 793; object-fit: cover; }
.ms-rows { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; padding: 16px; }
.ms-kpi { padding: 12px; border-radius: 12px; border: 1px solid var(--border); }
.ms-kpi small { display: block; font-size: .72rem; color: var(--text-muted); }
.ms-kpi strong { display: block; margin: 3px 0; font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; }
.ms-kpi em { font-style: normal; font-size: .68rem; font-weight: 600; color: #15803D; }
.ms-chart { align-self: center; }
.ms-phone { right: 1%; top: 116px; width: 190px; height: 392px; padding: 9px; border-radius: 38px; background: #0B0E14; box-shadow: 0 50px 90px -30px rgba(14,30,80,.65); transform: rotateY(-10deg) rotateX(4deg) translateZ(90px); }
.ms-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 20% center; border-radius: 30px; }
.ms-notch { position: absolute; z-index: 2; top: 16px; left: 50%; width: 62px; height: 18px; margin-left: -31px; border-radius: 10px; background: #0B0E14; }
.ms-phone-cap { position: absolute; left: 18px; right: 18px; bottom: 20px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ms-phone-cap b { display: block; font-size: .86rem; }
.ms-phone-cap small { font-size: .68rem; color: var(--text-muted); }
.ms-game { left: -5%; bottom: 0; width: 280px; border-radius: 18px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 40px 70px -30px rgba(14,30,80,.6); transform: rotateY(-10deg) translateZ(70px); }
.ms-game img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ms-game span { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(10,12,20,.72); color: #fff; font-size: .74rem; font-weight: 600; }
.ms-game .st-ico { width: 14px; height: 14px; }
.ms-toast { right: 20%; top: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 24px 40px -20px rgba(14,30,80,.5); transform: translateZ(120px); animation: cpFloat 6s ease-in-out infinite; }
.ms-toast > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #16A34A; color: #fff; }
.ms-toast .st-ico { width: 16px; height: 16px; stroke-width: 2.6; }
.ms-toast b { display: block; font-size: .8rem; }
.ms-toast small { font-size: .7rem; color: var(--text-muted); }
.ms-deploy { left: 44%; bottom: 26px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #0E1116; box-shadow: 0 20px 40px -20px rgba(14,17,22,.6); animation: cpFloat 7s ease-in-out -2s infinite; }
.ms-deploy code { background: none; padding: 0; color: #4ADE80; font-family: var(--ds-mono); font-size: .74rem; }

.bt-hero { position: relative; overflow: hidden; isolation: isolate; padding: 116px 0 60px; background: #FBFCFF; }
.bt-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr .95fr; grid-template-rows: 290px 290px; gap: 16px; }
.bt-tile { position: relative; display: block; border-radius: 30px; overflow: hidden; isolation: isolate; }
.bt-head { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 44px; background: #0B0E14; color: #fff; }
.bt-head::after { content: ''; position: absolute; z-index: -1; left: -140px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.45), transparent 65%); }
.bt-glow { position: absolute; z-index: -1; right: -120px; top: -140px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(58,111,248,.75), transparent 65%); animation: btGlow 10s ease-in-out infinite alternate; }
@keyframes btGlow { to { transform: translate(-60px, 50px) scale(1.15); } }
.bt-pill { position: absolute; top: 36px; left: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #DCE3F2; font-size: .82rem; }
.bt-pill:hover { color: #fff; }
.bt-title { margin: 0; font-family: var(--display) !important; font-size: clamp(2.6rem, 4.6vw, 4.8rem); font-weight: 750; letter-spacing: -0.055em; line-height: .95; color: #fff; }
.bt-title span { background: linear-gradient(90deg, #9DB8FF, #C9B8FF 50%, #8FE3FF); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bt-sub { margin: 20px 0 0; max-width: 470px; color: rgba(226,232,245,.7); line-height: 1.6; }
.bt-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bt-img, .bt-img:hover, .bt-img:focus { color: #fff; background: #0E1116; }
.bt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--x-ease); }
.bt-img:hover img { transform: scale(1.06); }
.bt-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,7,13,.6), transparent 48%); }
.bt-label { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1.05rem; color: #fff; }
.bt-label em { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-style: normal; font-size: .72rem; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bt-label .st-ico { width: 40px; height: 40px; margin-left: auto; padding: 11px; border-radius: 50%; background: #fff; color: #0B0E14; transition: transform .4s var(--x-ease); }
.bt-img:hover .bt-label .st-ico { transform: rotate(45deg); }
.bt-game { grid-column: 2 / 4; grid-row: 1; }
.bt-app { grid-column: 4; grid-row: 1; }
.bt-app img { object-position: 18% center; }
.bt-dc { grid-column: 2 / 4; grid-row: 2; }
.bt-stats { grid-column: 4; grid-row: 2; display: flex; flex-direction: column; padding: 24px; background: linear-gradient(150deg, #3A6FF8, #2554DA); color: #fff; }
.bt-stats small { font-size: .8rem; opacity: .85; }
.bt-stats strong { margin-top: 4px; font-family: var(--display); font-size: 2.8rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.bt-stats [data-spark] { margin: auto 0 12px; }
.bt-mini { display: flex; gap: 18px; font-size: .74rem; opacity: .9; }
.bt-mini b { display: block; font-size: 1.05rem; }

.hv-switch { position: fixed; z-index: 9990; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: #0E1116; box-shadow: 0 20px 40px -12px rgba(14,17,22,.6); font-size: .82rem; }
.hv-switch > span { padding: 0 10px 0 8px; color: #8F98AA; font-family: var(--ds-mono); font-size: .72rem; }
.hv-switch a { padding: 8px 14px; border-radius: 999px; color: #C9D3E6; font-weight: 600; }
.hv-switch a:hover { color: #fff; }
.hv-switch a.is-on { background: #3A6FF8; color: #fff; }

@media (max-width: 1024px) {
    .rl-grid, .ms-grid { grid-template-columns: 1fr; gap: 44px; }
    .ms-comp { height: 480px; }
    .bt-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 240px 240px 180px; }
    .bt-head { grid-column: 1 / -1; grid-row: auto; min-height: 460px; padding: 32px; }
    .bt-pill { top: 28px; left: 32px; }
    .bt-game { grid-column: 1 / -1; grid-row: auto; }
    .bt-app, .bt-stats { grid-column: auto; grid-row: auto; }
    .bt-dc { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
    .rl-hero { margin: 6px 6px 0; border-radius: 24px; padding: 112px 0 26px; }
    .rl-stats { gap: 22px; } .rl-stats strong { font-size: 1.4rem; }
    .rl-card figcaption { left: 8px; right: 8px; bottom: 8px; padding: 8px 8px 8px 12px; }
    .rl-cap-txt small, .rl-chip { display: none; }
    .rl-tabs { gap: 8px; margin-top: 32px; }
    .rl-tabs span { font-size: 0; } .rl-tabs em { font-size: .72rem; margin: 0; }
    .ms-hero { padding: 116px 0 70px; }
    .ms-comp { height: 400px; transform: scale(.72); transform-origin: left top; width: 139%; margin-bottom: -112px; }
    .ms-stats { gap: 20px; } .ms-stats strong { font-size: 1.35rem; }
    .bt-hero { padding-top: 100px; }
    .bt-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .bt-game, .bt-dc, .bt-app, .bt-stats { grid-column: 1; min-height: 210px; }
    .hv-switch { left: 50%; transform: translateX(-50%); bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ms-band i, .ms-toast, .ms-deploy, .bt-glow { animation: none !important; }
}
.rl-card:first-child img { object-position: 8% center; }
.bt-grid { grid-template-columns: 1.75fr 1fr 1fr .9fr; grid-template-rows: 300px 300px; }
.bt-head { justify-content: space-between; }
.bt-pill { position: static; align-self: flex-start; }
.bt-title { font-size: clamp(2.4rem, 3.9vw, 4.2rem); }
.bt-sub { font-size: .98rem; }
.bt-bars { display: flex; align-items: flex-end; gap: 5px; height: 70px; margin: auto 0 14px; }
.bt-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: rgba(255,255,255,.35); }
.bt-bars i:last-child { background: #fff; }
.ms-deploy { left: 30%; bottom: -6px; }
@media (max-width: 1024px) { .bt-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 240px 240px 180px; } }
@media (max-width: 760px) { .bt-grid { grid-template-columns: 1fr; grid-template-rows: none; } }

.rl2 { display: block; min-height: 0; padding: 150px 0 0; }
.rl2-head { display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform, opacity; }
.rl2 .rl-title { font-size: clamp(3rem, 7vw, 7rem); }
.rl2 .rl-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.rl2 .rl-cta { justify-content: center; }
.rl2-stats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; padding: 0; }
.rl2-stats li { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: rgba(226,232,245,.7); }
.rl2-stats strong { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: #fff; }
.rl2 .rl-amb { will-change: transform; }

.rl2-stagewrap { margin-top: 64px; padding: 0 4% 56px; perspective: 1200px; }
.rl2-screen { max-width: 1180px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #0C0F18; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 0 0 8px rgba(255,255,255,.04), 0 60px 120px -40px rgba(0,0,0,.9), 0 0 140px -30px rgba(58,111,248,.45); transform-origin: 50% 0; transform: rotateX(26deg) scale(.9); will-change: transform; }
.rl2-bar { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.rl2-dots { display: flex; gap: 6px; flex-shrink: 0; }
.rl2-dots i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.rl2-dots i:nth-child(2) { background: #FEBC2E; } .rl2-dots i:nth-child(3) { background: #28C840; }
.rl2-tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rl2-tabs::-webkit-scrollbar { display: none; }
.rl2-tabs button { position: relative; display: flex; align-items: center; height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: rgba(226,232,245,.55); font: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s; }
.rl2-tabs button:hover { color: #fff; }
.rl2-tabs button.is-on { background: rgba(255,255,255,.1); color: #fff; }
.rl2-tabs i { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; overflow: hidden; }
.rl2-tabs b { display: block; width: 0; height: 100%; background: #8FB0FF; }
.rl2-tabs button.is-on b { animation: rlProg 6.5s linear forwards; }
.rl-hero.is-paused .rl2-tabs button.is-on b { animation-play-state: paused; }
.rl2-view { position: relative; aspect-ratio: 16 / 8; }
.rl2-slide { border-radius: 0; box-shadow: none; transform: none !important; transition: opacity .9s ease; }
.rl2-slide:not(.is-on) { opacity: 0 !important; pointer-events: none; }
.rl2-slide.is-on { opacity: 1; }
.rl2-slide img { transform: scale(1.06); transition: transform 7s ease-out; }
.rl2-slide.is-on img { transform: scale(1); }
.rl2-slide:first-child img { object-position: 15% center; }
.rl2-slide figcaption { left: 20px; right: auto; bottom: 20px; max-width: 540px; }

.nav-inner { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease !important; }
html.has-dark-hero .nav:not(.scrolled) .nav-inner { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.has-dark-hero .nav:not(.scrolled) .ds-logo, html.has-dark-hero .nav:not(.scrolled) .ds-logo:hover { color: #fff; }
html.has-dark-hero .nav:not(.scrolled) .ds-logo-word small { color: rgba(255,255,255,.55); }
html.has-dark-hero .nav:not(.scrolled) .nav-toggle { color: #fff !important; }
html.has-dark-hero .nav:not(.scrolled) .nav-toggle span { background: #fff !important; }
html.has-dark-hero .nav:not(.scrolled) .nav-lang-switch { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.16) !important; }
html.has-dark-hero .nav:not(.scrolled) .nav-lang-switch a { color: rgba(255,255,255,.6) !important; }
html.has-dark-hero .nav:not(.scrolled) .nav-lang-switch a.active { background: rgba(255,255,255,.16) !important; color: #fff !important; box-shadow: none !important; }
html.has-dark-hero .nav:not(.scrolled) .nav-profile-login { background: #fff !important; border-color: #fff !important; color: #0B0E14 !important; }
html.has-dark-hero .nav:not(.scrolled) .nav-profile-login:hover { background: #DCE6FF !important; border-color: #DCE6FF !important; }
@media (min-width: 769px) {
    html.has-dark-hero .nav:not(.scrolled) .nav-link { color: rgba(255,255,255,.72) !important; }
    html.has-dark-hero .nav:not(.scrolled) .nav-link:hover, html.has-dark-hero .nav:not(.scrolled) .nav-link.active { color: #fff !important; }
    html.has-dark-hero .nav:not(.scrolled) .st-nav-pill { background: rgba(255,255,255,.1); }
}

@media (max-width: 760px) {
    .rl2 { padding-top: 112px; }
    .rl2-stagewrap { margin-top: 40px; padding: 0 12px 20px; }
    .rl2-view { aspect-ratio: 4 / 3.4; }
    .rl2-dots { display: none; }
    .rl2-slide figcaption { left: 8px; right: 8px; bottom: 8px; }
    .rl2-stats li { padding: 6px 11px; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rl2-screen { transform: none; }
}


html[data-theme="light"] { --bg: #F6F5F1; --bg-soft: #EFEEE8; }
html[data-theme="light"] body { background: #F6F5F1; }
.x-cell { box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 12px 30px -22px rgba(14,17,22,.25); border-color: rgba(14,17,22,.07); }

.x-cell-blue { background: linear-gradient(155deg, #4A7BFF 0%, #2E5FE8 60%, #2554DA 100%); border-color: transparent; color: #fff; }
.x-cell-blue:hover { color: #fff; border-color: transparent; box-shadow: 0 30px 60px -30px rgba(37,84,218,.6); }
.x-cell-blue::after { content: ''; position: absolute; z-index: -1; right: -80px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(143,227,255,.45), transparent 65%); }
.x-cell-blue h3 { color: #fff; }
.x-cell-blue p { color: rgba(255,255,255,.82); }
.x-cell-blue .x-cell-ico { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
.x-cell-blue .x-cell-go { color: rgba(255,255,255,.7); }
.x-cell-blue:hover .x-cell-go { color: #fff; background: rgba(255,255,255,.14); }
.x-cell-blue .x-phone { box-shadow: 0 30px 60px -20px rgba(8,20,70,.6); }
.x-cell-tint { background: linear-gradient(160deg, #EEF3FF 0%, #F7F9FF 100%); border-color: #DCE5FB; }
.x-cell-tint .x-cell-ico { background: #fff; border-color: #DCE5FB; color: var(--blue); }

.pt-hero { position: relative; height: 260vh; }
.pt-pin { position: sticky; top: 10px; height: calc(100vh - 20px); min-height: 620px; margin: 10px 10px 0; border-radius: 34px; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(1200px 640px at 50% 118%, #10204F 0%, rgba(16,32,79,0) 62%), #05070D; transform-origin: 50% 0; will-change: transform; }
.pt-hero .x-in { transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.pt-hero.is-in .x-in { opacity: 1; transform: none; }
.pt-glow i { position: absolute; z-index: -1; border-radius: 50%; filter: blur(100px); opacity: .5; }
.pt-glow .g1 { left: -12%; top: 18%; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: #1C3EA6; animation: vA1 18s ease-in-out infinite alternate; }
.pt-glow .g2 { right: -12%; top: 28%; width: 42vw; height: 42vw; max-width: 600px; max-height: 600px; background: #4A2EA6; animation: vA2 22s ease-in-out infinite alternate; }
.pt-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.pt-mark { display: none; }
.pt-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 40px; will-change: transform, opacity; pointer-events: auto; }
.pt-title { font-size: clamp(3rem, 7.4vw, 7.6rem) !important; }
.pt-head .rl-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.pt-head .rl-cta { justify-content: center; }
.pt-outro { position: absolute; z-index: 2; left: 0; right: 0; bottom: 8%; text-align: center; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.pt-word { display: block; font-family: var(--display); font-weight: 750; font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -0.05em; line-height: 1; color: #fff; }
.pt-word i { font-style: normal; color: #8FB0FF; }
.pt-line { display: block; margin-top: 12px; font-family: var(--ds-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(226,232,245,.6); }
.pt-scroll { position: absolute; z-index: 2; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--ds-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(226,232,245,.5); }
.pt-scroll i { position: relative; width: 1px; height: 38px; overflow: hidden; background: rgba(255,255,255,.14); }
.pt-scroll i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: linear-gradient(transparent, #fff); animation: ptLine 1.8s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes ptLine { to { top: 100%; } }
.pt-hero.is-static { height: auto; }
.pt-hero.is-static .pt-pin { position: relative; top: 0; min-height: 760px; }

.w-split { -webkit-mask-image: -webkit-radial-gradient(white, black); }
.w-game { clip-path: inset(0 0 0 var(--x)); }
.w-split.is-hinting .w-game { transition: clip-path .6s var(--x-ease); }

.dj4 { gap: 16px; }
.dj4 .dj3-logo { width: 250px; margin: -34px 0 -14px -14px; }
.dj4-tag { margin: 0; max-width: 400px; font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.dj4-tag span { color: #A6E36B; }
.dj4-meta { display: flex; flex-wrap: wrap; gap: 0; padding: 10px 4px; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.dj4-meta span { display: flex; align-items: center; gap: 6px; padding: 0 14px; border-left: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); font-size: .8rem; }
.dj4-meta span:first-child { padding-left: 0; border-left: 0; }
.dj4-meta b { color: #fff; font-family: var(--display); font-size: 1.05rem; }
.dj4-meta b .st-ico { width: 16px; height: 16px; display: block; }
.dj4-row { display: flex; align-items: center; gap: 14px; }
.dj4-steam { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 12px; border-radius: 14px; background: linear-gradient(135deg, #1B2838, #2A475E); border: 1px solid rgba(255,255,255,.14); color: #fff; box-shadow: 0 16px 30px -14px rgba(0,0,0,.7); }
.dj4-steam svg { width: 26px; height: 26px; }
.dj4-steam span { display: flex; flex-direction: column; font-weight: 700; font-size: .95rem; line-height: 1.1; }
.dj4-steam small { font-weight: 500; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #8FA3B8; }
.dj4 .dj3-thumbs { gap: 6px; }
.dj4 .dj3-thumbs button { width: 54px; border-radius: 8px; border-width: 2px; }

.cp2 .cp-top { margin-bottom: 12px; }
.cp2-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #E9F8EF; color: #15803D; font-size: .7rem; font-weight: 600; }
.cp2-live .x-live { width: 6px; height: 6px; }
.cp2-proj { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #F3F6FF, #FFFFFF); border: 1px solid #E3E9F8; }
.cp2-proj small { display: block; font-size: .68rem; color: var(--text-muted); }
.cp2-proj strong { display: block; margin-top: 2px; font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.cp2-pct { font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; color: var(--blue); line-height: 1; }
.cp2-steps { display: flex; justify-content: space-between; gap: 4px; margin: 14px 0 8px; }
.cp2-steps span { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; color: #9AA3B5; white-space: nowrap; }
.cp2-steps .st-ico { width: 13px; height: 13px; stroke-width: 2.6; }
.cp2-steps .done { color: #15803D; }
.cp2-steps .now { color: var(--blue); }
.cp2-steps .now i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(58,111,248,.18); animation: hPulse 1.8s infinite; }
.cp2-bar { height: 6px; border-radius: 6px; background: #EDF0F6; overflow: hidden; margin-bottom: 14px; }
.cp2-bar i { display: block; width: 72%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3A6FF8, #7C5CFF); }
.cp2-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cp2-svc > div { padding: 10px; border-radius: 12px; border: 1px solid var(--border); }
.cp2-svc small { display: block; font-size: .64rem; color: var(--text-muted); }
.cp2-svc b { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.cp2-dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.cp2-mini { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-top: 6px; }
.cp2-mini i { flex: 1; height: var(--h); border-radius: 2px; background: #BFD0FF; }
.cp2-mini i:last-child { background: var(--blue); }
.cp2-feed { display: flex; flex-direction: column; gap: 8px; }
.cp2-feed > span { display: flex; align-items: center; gap: 10px; font-size: .76rem; }
.cp2-feed i { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; }
.cp2-feed i .st-ico { width: 14px; height: 14px; }
.cp2-feed i.b { background: #EEF3FF; color: var(--blue); }
.cp2-feed i.g { background: #E9F8EF; color: #15803D; }
.cp2-feed i.v { background: #F1EDFF; color: #6D4AFF; }
.cp2-feed b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp2-feed em { font-style: normal; font-size: .68rem; color: var(--text-muted); }
.cp2 .cp-toast > span { background: var(--blue); }

.mz-sec { padding-top: clamp(40px, 5vw, 70px); }
.mz { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 36px; overflow: hidden; isolation: isolate; background: linear-gradient(150deg, #F4F2E6 0%, #ECEAD8 55%, #E3E3CB 100%); border: 1px solid #E0DDC6; }
.mz::before { content: ''; position: absolute; z-index: -1; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(140,158,74,.28), transparent 65%); }
.mz-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(63,74,30,.08); color: #3F4A1E; font-size: .8rem; font-weight: 600; }
.mz-kicker .st-ico { width: 15px; height: 15px; }
.mz-logo { display: block; width: 150px; height: auto; margin: 22px 0 4px; }
.mz-copy h2 { margin: 14px 0 0; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 750; letter-spacing: -0.04em; line-height: 1.05; color: #1F2410; }
.mz-copy > p { margin: 18px 0 0; max-width: 520px; font-size: 1.02rem; line-height: 1.65; color: #4E5338; }
.mz-feats { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.mz-feats li { display: flex; align-items: center; gap: 12px; font-size: .94rem; color: #2E331C; }
.mz-feats li > span { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #5B6B26; box-shadow: 0 6px 14px -8px rgba(63,74,30,.4); }
.mz-feats .st-ico { width: 16px; height: 16px; }
.mz-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mz-btn, .mz-btn:hover, .mz-btn:focus { background: #3F4A1E; border-color: #3F4A1E; color: #fff; }
.mz-btn:hover { background: #2F3816; }
.mz-btn .st-ico { width: 16px; height: 16px; }
.mz-visual { position: relative; padding: 20px 0 40px; }
.mz-browser { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -40px rgba(47,56,22,.55), 0 0 0 1px rgba(47,56,22,.08); transform: perspective(1400px) rotateY(-6deg) rotateX(3deg); transition: transform .8s var(--x-ease); }
.mz:hover .mz-browser { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.mz-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F7F6F0; border-bottom: 1px solid #ECEADF; }
.mz-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.mz-bar i:nth-child(2) { background: #FEBC2E; } .mz-bar i:nth-child(3) { background: #28C840; }
.mz-bar span { display: flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 12px; border-radius: 8px; background: #fff; font-size: .72rem; color: #777B66; }
.mz-bar .st-ico { width: 12px; height: 12px; }
.mz-screen { position: relative; aspect-ratio: 1344 / 640; overflow: hidden; }
.mz-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.mz-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250,248,240,.97) 0%, rgba(250,248,240,.88) 38%, rgba(250,248,240,0) 62%); }
.mz-hero-txt { position: absolute; z-index: 1; left: 6%; top: 50%; transform: translateY(-50%); width: 46%; display: flex; flex-direction: column; gap: 10px; }
.mz-since { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid #E4E1D2; font-size: .62rem; color: #3F4A1E; font-weight: 600; }
.mz-hero-txt b { font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.45rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: #1F2410; }
.mz-search { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 10px; border-radius: 10px; background: #fff; border: 1px solid #E4E1D2; font-size: .62rem; color: #8B8E7A; }
.mz-search .st-ico { width: 11px; height: 11px; }
.mz-search em { margin-left: auto; padding: 4px 10px; border-radius: 7px; background: #3F4A1E; color: #fff; font-style: normal; font-weight: 600; }
.mz-product { position: absolute; left: -26px; bottom: 0; display: flex; align-items: center; gap: 12px; width: 300px; padding: 10px 14px 10px 10px; border-radius: 18px; background: #fff; box-shadow: 0 30px 50px -24px rgba(47,56,22,.5); animation: cpFloat 7s ease-in-out infinite; }
.mz-product img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: #F4F2E6; }
.mz-product small { display: block; font-size: .64rem; color: #8B8E7A; }
.mz-product b { display: block; margin: 2px 0; font-size: .82rem; line-height: 1.25; color: #1F2410; }
.mz-product span { font-size: .7rem; font-weight: 600; color: #5B6B26; }
.mz-pay { position: absolute; right: -14px; top: -6px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff; box-shadow: 0 24px 40px -20px rgba(47,56,22,.5); animation: cpFloat 6s ease-in-out -2s infinite; }
.mz-pay > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #16A34A; color: #fff; }
.mz-pay .st-ico { width: 16px; height: 16px; stroke-width: 2.6; }
.mz-pay b { display: block; font-size: .8rem; }
.mz-pay small { font-size: .7rem; color: var(--text-muted); }
.mz-ship { position: absolute; right: 24px; bottom: 6px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #3F4A1E; color: #fff; font-size: .78rem; font-weight: 600; box-shadow: 0 20px 34px -16px rgba(47,56,22,.7); }
.mz-ship .st-ico { width: 15px; height: 15px; }

@media (max-width: 1024px) {
    .mz { grid-template-columns: 1fr; gap: 36px; }
    .mz-product { left: 0; }
    .mz-pay { right: 0; }
}
@media (max-width: 760px) {
    .pt-hero { height: 220vh; }
    .pt-pin { margin: 6px 6px 0; top: 6px; height: calc(100svh - 12px); border-radius: 24px; min-height: 560px; }
    .pt-head { padding-top: 56px; }
    .mz-product { width: 240px; }
    .mz-hero-txt { width: 60%; }
    .mz-search, .mz-since { display: none; }
    .dj4-tag { font-size: 1.2rem; }
    .dj4-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    .pt-scroll i::after, .mz-product, .mz-pay, .pt-glow i { animation: none !important; }
}
@media (min-width: 1025px) { .mz { grid-template-columns: .82fr 1.18fr; gap: 48px; } }
.mz-copy h2 { font-size: clamp(1.8rem, 2.7vw, 2.5rem); }
.cp2-steps span { font-size: .62rem; } .cp2-steps { gap: 2px; } .cp2 .cp-team { bottom: -40px; }
@media (max-width: 760px) { .mz-ship { display: none; } }

.ds-logo-full { display: block; width: auto; height: 42px; }
.ds-logo-full.is-dark { display: none; }
.nav .ds-logo-full { height: 40px; }
.footer .ds-logo-full { height: 52px; }
html.has-dark-hero .nav:not(.scrolled) .ds-logo-full.is-light, .bk-logo-stage.is-ink .ds-logo-full.is-light, .bk-logo-stage.is-ember .ds-logo-full.is-light { display: none; }
html.has-dark-hero .nav:not(.scrolled) .ds-logo-full.is-dark, .bk-logo-stage.is-ink .ds-logo-full.is-dark, .bk-logo-stage.is-ember .ds-logo-full.is-dark { display: block; }
.ds-logo:hover .ds-logo-full { transform: none; }
img.ds-logo-mark, img.cp-mark, img.ds-loader-mark { object-fit: contain; }
.cv-file img, .cp-side img.cp-mark { width: 26px; height: 26px; }
@media (max-width: 768px) { .nav .ds-logo-full { height: 34px; } }

.x-numbers { background: transparent; border: 0; padding: 0 0 clamp(48px, 6vw, 80px); }
.x-numbers-grid { background: #fff; border: 1px solid rgba(14,17,22,.06); border-radius: 28px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 24px 60px -40px rgba(14,17,22,.35); }
.x-section-soft { background: linear-gradient(180deg, rgba(239,238,232,0) 0, #EFEEE8 180px, #EFEEE8 calc(100% - 180px), rgba(239,238,232,0) 100%); }
.v-stack, .v-stack.is-compact { background: transparent; border: 0; }
.v-final { background: transparent; }
@media (max-width: 760px) { .x-numbers-grid { width: calc(100% - 32px); } }


.t-spot-stack { display: grid; flex: 1; }
.t-spot-stack > .t-spot-item { grid-area: 1 / 1; display: flex !important; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .55s ease, transform .55s var(--x-ease), visibility .55s; animation: none !important; }
.t-spot-stack > .t-spot-item.is-active { opacity: 1; visibility: visible; transform: none; }

.dj4-title { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 0 2px -6px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
.g-art.dj3-ui.dj4 { width: min(440px, 42%); }
.dj4-steam { display: flex; align-items: center; gap: 14px; width: 100%; height: 64px; padding: 0 18px 0 14px; border-radius: 16px; background: linear-gradient(110deg, #1B2838 0%, #2A475E 60%, #1E5F8C 100%); border: 1px solid rgba(255,255,255,.16); color: #fff; box-shadow: 0 20px 36px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12); position: relative; overflow: hidden; }
.dj4-steam::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); animation: djShine 3.6s ease-in-out infinite; }
@keyframes djShine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.dj4-steam > svg { width: 32px; height: 32px; flex-shrink: 0; }
.dj4-steam-txt { display: flex; flex-direction: column; flex: 1; font-weight: 700; font-size: 1.1rem; line-height: 1.1; }
.dj4-steam-txt small { font-weight: 600; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #8FB8D8; }
.dj4-steam-plat { display: flex; gap: 6px; }
.dj4-steam-plat em { padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); font-style: normal; font-size: .7rem; font-weight: 600; color: #C7D5E0; white-space: nowrap; }

.mz.mz2 { display: block; padding: clamp(28px, 4vw, 52px); }
.mz2-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; }
.mz2-brand { display: flex; align-items: center; gap: 14px; margin: 20px 0 0; }
.mz2-brand img { width: 128px; height: auto; display: block; }
.mz2-brand span { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #E0DDC6; color: #3F4A1E; font-size: .76rem; font-weight: 600; }
.mz2-intro h2 { margin: 16px 0 0; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1.02; color: #1F2410; }
.mz2-side p { margin: 0; font-size: 1.04rem; line-height: 1.65; color: #4E5338; }
.mz2-side .mz-cta { margin-top: 22px; }
.mz-btn-line, .mz-btn-line:hover, .mz-btn-line:focus { background: rgba(255,255,255,.7); border: 1px solid #D6D3BC; color: #2F3816; }
.mz-btn-line:hover { background: #fff; }
.mz2-stage { position: relative; margin-top: 44px; height: clamp(320px, 38vw, 470px); }
.mz2-stage .mz-browser { position: absolute; left: 0; top: 0; width: 76%; transform: perspective(1600px) rotateY(4deg) rotateX(2deg); transform-origin: left center; }
.mz:hover .mz2-stage .mz-browser { transform: perspective(1600px) rotateY(1deg) rotateX(0deg); }
.mz2-stage .mz-screen { aspect-ratio: 1344 / 600; }
.mz2-phone { position: absolute; right: 6%; top: 6%; width: clamp(170px, 17vw, 220px); aspect-ratio: 9 / 18.5; padding: 9px; border-radius: 34px; background: #1F2410; box-shadow: 0 50px 80px -34px rgba(47,56,22,.7); display: flex; flex-direction: column; gap: 7px; overflow: hidden; transform: rotate(3deg); transition: transform .8s var(--x-ease); }
.mz:hover .mz2-phone { transform: rotate(0deg) translateY(-6px); }
.mz2-phone > * { position: relative; z-index: 1; }
.mz2-phone::before { content: ''; position: absolute; inset: 9px; border-radius: 26px; background: #FAF8F0; z-index: 0; }
.mz2-notch { position: absolute !important; z-index: 2 !important; top: 14px; left: 50%; width: 58px; height: 16px; margin-left: -29px; border-radius: 10px; background: #1F2410; }
.mz2-ph-top { display: flex; align-items: center; justify-content: space-between; padding: 26px 10px 2px; }
.mz2-ph-top img { width: 64px; height: auto; }
.mz2-ph-top i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #3F4A1E; color: #fff; }
.mz2-ph-top .st-ico { width: 12px; height: 12px; }
.mz2-ph-hero { position: relative; margin: 0 8px; height: 30%; border-radius: 14px; overflow: hidden; }
.mz2-ph-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.mz2-ph-hero b { position: absolute; left: 10px; bottom: 9px; right: 10px; font-family: var(--display); font-size: .78rem; line-height: 1.1; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.mz2-ph-item { display: flex; align-items: center; gap: 8px; margin: 0 8px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 6px 14px -10px rgba(47,56,22,.5); }
.mz2-ph-item img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: #F4F2E6; }
.mz2-ph-item b { display: block; font-size: .66rem; line-height: 1.2; color: #1F2410; }
.mz2-ph-item small { font-size: .58rem; color: #5B6B26; font-weight: 600; }
.mz2-ph-btn { margin: auto 8px 8px; padding: 8px; border-radius: 10px; background: #3F4A1E; color: #fff; text-align: center; font-size: .66rem; font-weight: 700; }
.mz2-stage .mz-product { left: 4%; bottom: -10px; }
.mz2-stage .mz-pay { right: auto; left: 52%; top: -18px; }
.mz2-feats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mz2-feats li { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(224,221,198,.9); backdrop-filter: blur(6px); }
.mz2-feats li > span { width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; display: grid; place-items: center; background: #3F4A1E; color: #fff; }
.mz2-feats .st-ico { width: 17px; height: 17px; }
.mz2-feats b { font-size: .98rem; color: #1F2410; }
.mz2-feats small { font-size: .84rem; line-height: 1.45; color: #5E6347; }

.st-footer-word { display: flex; justify-content: center; align-items: flex-end; overflow: hidden; padding-top: .08em; background: none !important; -webkit-text-fill-color: initial !important; }
.st-footer-word .fw-l { --f: 0; display: inline-block; background: linear-gradient(180deg, color-mix(in srgb, #3A6FF8 calc(var(--f) * 100%), #0E1116) 30%, rgba(14,17,22,.06)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: 0; filter: blur(12px); transform: translateY(70%); transition: transform 1.1s var(--x-ease) calc(var(--i) * 70ms), opacity .9s ease calc(var(--i) * 70ms), filter 1s ease calc(var(--i) * 70ms); will-change: transform; }
.st-footer-word.is-in .fw-l { opacity: 1; filter: none; transform: translateY(calc(var(--f) * -12%)); }
.st-footer-word.is-ready .fw-l { transition: transform .45s var(--x-ease); }
.st-footer-word .fw-dot { display: inline-block; -webkit-text-fill-color: var(--blue); color: var(--blue); opacity: 0; transform: translateY(-140%); }
.st-footer-word.is-in .fw-dot { animation: fwDrop 1s cubic-bezier(.3,1.5,.5,1) .65s forwards, fwPulse 3.2s ease-in-out 2.4s infinite; }
@keyframes fwDrop { 0% { opacity: 0; transform: translateY(-140%); } 55% { opacity: 1; transform: translateY(5%); } 75% { transform: translateY(-10%); } 100% { opacity: 1; transform: none; } }
@keyframes fwPulse { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 22px rgba(58,111,248,.85)); } }

@media (max-width: 1024px) {
    .mz2-head { grid-template-columns: 1fr; gap: 20px; }
    .mz2-feats { grid-template-columns: 1fr 1fr; }
    .g-art.dj3-ui.dj4 { width: 100%; }
}
@media (max-width: 760px) {
    .mz2-stage { height: 300px; }
    .mz2-stage .mz-browser { width: 92%; }
    .mz2-phone { width: 128px; right: 0; top: 30%; }
    .mz2-stage .mz-pay { left: auto; right: 0; top: -14px; }
    .mz2-stage .mz-product { display: none; }
    .mz2-feats { grid-template-columns: 1fr; }
    .dj4-steam-plat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .st-footer-word .fw-l { opacity: 1; filter: none; transform: none; transition: none; }
    .st-footer-word .fw-dot { opacity: 1; transform: none; animation: none !important; }
    .dj4-steam::after { animation: none; }
}
.dj4-steam-plat { flex-direction: column; align-items: flex-end; gap: 4px; } .dj4-steam-plat em { padding: 2px 8px; font-size: .64rem; }
@media (max-width: 760px) { .mz2-stage { height: 350px; } .mz2-phone { width: 118px; top: 20%; } .mz2-ph-item small, .mz2-ph-hero b { display: none; } .mz2-ph-item b { font-size: .58rem; } }

.mz-shot { aspect-ratio: 16 / 10; overflow: hidden; background: #F6F4EC; }
.mz-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mz2-phone { aspect-ratio: auto; display: block; padding: 8px; background: #111; }
.mz2-phone::before { display: none; }
.mz2-phone-screen { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 390 / 844; background: #F6F4EC; }
.mz2-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mz2-notch { top: 14px; background: #111; }
.mz2-stage { height: clamp(380px, 44vw, 560px); }
.mz2-stage .mz-browser { width: 74%; }
.mz2-phone { right: 4%; top: 2%; width: clamp(180px, 17vw, 230px); }
.mz2-stage .mz-pay { left: 54%; top: -20px; }
@media (max-width: 760px) {
    .mz2-stage { height: 330px; }
    .mz2-phone { width: 128px; top: 12%; }
}

.footer.ft { background: transparent !important; border: 0 !important; padding: 0 10px 10px !important; margin-top: 40px; }
.ft-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; padding: clamp(44px, 5vw, 76px) 0 0; color: #C9D1E0; background: radial-gradient(1000px 520px at 88% -12%, rgba(58,111,248,.3), transparent 60%), radial-gradient(800px 480px at 0% 110%, rgba(124,92,255,.2), transparent 60%), #05070D; }
.ft-glow i { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .35; }
.ft-glow i:first-child { left: -10%; top: 30%; width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; background: #1C3EA6; animation: vA1 18s ease-in-out infinite alternate; }
.ft-glow i:last-child { right: -8%; bottom: -10%; width: 36vw; height: 36vw; max-width: 520px; max-height: 520px; background: #4A2EA6; animation: vA2 22s ease-in-out infinite alternate; }

.ft-word { position: absolute; z-index: 0; left: 0; right: 0; bottom: -0.13em; margin: 0 !important; font-size: clamp(6rem, 24vw, 25rem) !important; pointer-events: none; }
.ft-word .fw-l { background: linear-gradient(180deg, color-mix(in srgb, #3A6FF8 calc(var(--f) * 100%), rgba(255,255,255,.17)) 0%, rgba(255,255,255,.015) 88%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.ft-word .fw-dot { opacity: 0; }
.ft-word.is-in .fw-dot { filter: none; }

.ft-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.ft-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ft .ds-logo-full { height: 52px; }
.ft .ds-logo-full.is-light { display: none; }
.ft .ds-logo-full.is-dark { display: block; }
.ft .footer-desc { max-width: 420px; margin: 18px 0 0; color: rgba(201,209,224,.7); line-height: 1.6; }
.ft .footer-social { display: flex; gap: 8px; margin-top: 20px; }
.ft .footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #C9D1E0; transition: background .25s, color .25s, transform .25s; }
.ft .footer-social a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }
.ft .footer-social svg { width: 16px; height: 16px; }
.ft-cta { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.ft-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.22); color: #86EFAC; font-size: .78rem; font-weight: 600; }
.ft-cta h4 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 750; letter-spacing: -0.04em; line-height: 1.02; color: #fff; }
.ft-cta-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.ft-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 40px 0; }
.ft h5 { margin: 0 0 16px; color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ft .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ft .footer-links a { display: inline-block; color: rgba(201,209,224,.72); font-size: .94rem; transition: color .2s, transform .25s var(--x-ease); }
.ft .footer-links a:hover { color: #fff; transform: translateX(4px); }
.ft .footer-contact-plain { display: grid; gap: 12px; }
.ft .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; color: rgba(201,209,224,.72); font-size: .92rem; line-height: 1.5; }
.ft .footer-contact-item a { color: inherit; }
.ft .footer-contact-item a:hover { color: #fff; }
.ft .footer-contact-item .st-ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: #8FB0FF; }

.ft-regions { display: flex; align-items: center; gap: 24px; padding: 18px 20px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ft-regions-head { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ft-regions-head b { display: block; color: #fff; font-size: .95rem; }
.ft-regions-head small { color: rgba(201,209,224,.6); font-size: .78rem; }
.ft-pin { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 10px 24px -10px rgba(58,111,248,.8); }
.ft-pin svg { width: 18px; height: 18px; }
.ft-marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ft-track { display: flex; gap: 8px; width: max-content; padding-right: 8px; animation: ftMarq 42s linear infinite; }
.ft-marquee:hover .ft-track { animation-play-state: paused; }
@keyframes ftMarq { to { transform: translateX(-50%); } }
.ft-city { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #DCE3F2; font-size: .84rem; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.ft-city::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8FB0FF; }
.ft-city:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.ft-city:hover::before { background: #fff; }

.ft-sectors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 28px 0; }
.ft-sectors-title { margin-right: 8px; color: rgba(201,209,224,.55); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ft-sector { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); color: #C9D1E0; font-size: .82rem; }
.ft-sector svg { color: #8FB0FF; }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 clamp(120px, 16vw, 250px); border-top: 1px solid rgba(255,255,255,.08); color: rgba(201,209,224,.55); font-size: .84rem; }
.ft .footer-certs-logos { display: flex; gap: 10px; }
.ft .footer-cert-logo { height: 38px; width: auto; opacity: .85; }

@media (max-width: 900px) {
    .ft-top { grid-template-columns: 1fr; gap: 30px; }
    .ft-cta { justify-self: start; align-items: flex-start; text-align: left; }
    .ft-cta-btns { justify-content: flex-start; }
    .ft-cols { grid-template-columns: 1fr 1fr; }
    .ft-regions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
    .footer.ft { padding: 0 6px 6px !important; }
    .ft-card { border-radius: 24px; }
    .ft-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .ft-track, .ft-glow i { animation: none !important; }
}
.ft h5, .ft .footer-col h5 { color: #fff !important; opacity: 1 !important; }
.ft .footer-links a { color: rgba(201,209,224,.75) !important; }
.ft .footer-links a:hover { color: #fff !important; }
.ft-word { bottom: -0.06em; }
.ft-word .fw-dot { -webkit-text-fill-color: rgba(58,111,248,.75); }

.nav-mega-panel-inner { padding: 0 !important; border-radius: 24px !important; box-shadow: 0 40px 80px -30px rgba(14,30,80,.35), 0 0 0 1px rgba(14,17,22,.05) !important; border: 0 !important; }
.mm { display: grid; grid-template-columns: 260px 1fr 300px; min-height: 340px; text-align: left; }
.mm-rail { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #F7F8FB; border-right: 1px solid var(--border); }
.mm-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 0; border-radius: 14px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .25s, box-shadow .25s; }
.mm-tab:hover, .mm-tab.is-on { background: #fff; box-shadow: 0 8px 20px -14px rgba(14,30,80,.4), 0 0 0 1px rgba(14,17,22,.05); }
.mm-tab-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; background: #EEF1F7; color: var(--text-soft); transition: background .25s, color .25s, box-shadow .25s; }
.mm-tab.is-on .mm-tab-ico { background: var(--blue); color: #fff; box-shadow: 0 8px 18px -8px rgba(58,111,248,.7); }
.mm-tab-ico .st-ico { width: 18px; height: 18px; }
.mm-tab-txt { flex: 1; min-width: 0; }
.mm-tab-txt b { display: block; font-size: .92rem; font-weight: 650; }
.mm-tab-txt small { font-size: .74rem; color: var(--text-muted); }
.mm-tab-go { color: var(--blue); opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s; }
.mm-tab-go .st-ico { width: 16px; height: 16px; }
.mm-tab.is-on .mm-tab-go { opacity: 1; transform: none; }
.mm-all { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 10px 12px; color: var(--blue); font-size: .86rem; font-weight: 600; }
.mm-all:hover { color: var(--blue-deep); }
.mm-all .st-ico { width: 15px; height: 15px; }

.mm-panes { position: relative; padding: 20px 22px; }
.mm-pane { display: none; }
.mm-pane.is-on { display: block; }
.mm-pane-title { margin: 0 0 12px 8px; color: var(--text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nav.is-mega-open .mm-pane.is-on .mm-grid li { animation: mmIn .45s var(--x-ease) both; animation-delay: calc(var(--k) * 55ms); }
@keyframes mmIn { from { opacity: 0; transform: translateY(8px); } }
.mm-link { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; color: var(--text); transition: background .2s; }
.mm-link:hover { background: #F4F6FB; color: var(--text); }
.mm-link-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: background .25s, color .25s, transform .35s var(--x-ease); }
.mm-link-ico svg { width: 18px; height: 18px; }
.mm-link:hover .mm-link-ico { background: var(--blue); color: #fff; transform: rotate(-6deg) scale(1.06); }
.mm-link-txt { flex: 1; min-width: 0; }
.mm-link-txt b { display: block; margin-bottom: 3px; font-size: .94rem; font-weight: 650; }
.mm-link-txt small { display: block; font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.mm-link-go { color: var(--text-muted); opacity: 0; transform: translate(-4px, 4px); transition: opacity .25s, transform .25s, color .25s; }
.mm-link-go .st-ico { width: 16px; height: 16px; }
.mm-link:hover .mm-link-go { opacity: 1; transform: none; color: var(--blue); }

.mm-feature { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #FBFBFD; border-left: 1px solid var(--border); }
.mm-dc { display: block; border-radius: 18px; overflow: hidden; background: #050B1F; color: #fff; transition: transform .3s var(--x-ease), box-shadow .3s; }
.mm-dc:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 40px -24px rgba(5,11,31,.8); }
.mm-dc-img { display: block; aspect-ratio: 1983 / 793; overflow: hidden; }
.mm-dc-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 10% center; transition: transform .8s var(--x-ease); }
.mm-dc:hover .mm-dc-img img { transform: scale(1.06); }
.mm-dc-body { display: block; padding: 14px 16px 16px; }
.mm-dc-body em { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8FB0FF; }
.mm-dc-body b { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 1.1rem; }
.mm-dc-body b .st-ico { width: 16px; height: 16px; }
.mm-dc-body small { display: block; font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.72); }
.mm-dc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.mm-dc-chips i { padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); font-style: normal; font-size: .66rem; }
.mm-quote { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--border); color: var(--text); transition: border-color .25s, box-shadow .25s; }
.mm-quote:hover { color: var(--text); border-color: var(--blue); box-shadow: 0 10px 24px -16px rgba(58,111,248,.6); }
.mm-quote-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; background: #0E1116; color: #fff; }
.mm-quote-ico .st-ico { width: 17px; height: 17px; }
.mm-quote b { display: block; font-size: .88rem; }
.mm-quote small { font-size: .74rem; color: var(--text-muted); }
.mm-quote > .st-ico { width: 16px; height: 16px; margin-left: auto; color: var(--blue); }

@media (max-width: 1100px) {
    .mm { grid-template-columns: 230px 1fr; }
    .mm-feature { display: none; }
}
@media (max-width: 768px) {
    .nav-mega-panel-inner { box-shadow: none !important; }
    .mm { display: block; min-height: 0; }
    .mm-rail, .mm-feature { display: none; }
    .mm-panes { padding: 6px 0; }
    .mm-pane { display: block !important; margin-bottom: 8px; }
    .mm-grid { grid-template-columns: 1fr; }
    .mm-link { padding: 10px; }
    .mm-link-txt small, .mm-link-go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nav.is-mega-open .mm-pane.is-on .mm-grid li { animation: none; }
}

.nav-mega-panel-inner { background: #070A12 !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 28px !important; box-shadow: 0 50px 100px -30px rgba(5,7,13,.7) !important; overflow: hidden; }
.mx { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.15fr 1fr; color: #fff; text-align: left; background: radial-gradient(700px 360px at 100% 0%, rgba(58,111,248,.24), transparent 60%), radial-gradient(600px 300px at 0% 100%, rgba(124,92,255,.16), transparent 60%); }
.mx-spot { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(280px circle at var(--sx, -300px) var(--sy, -300px), rgba(143,176,255,.13), transparent 70%); }

.mx-list { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 6px; row-gap: 2px; padding: 24px 20px 10px 24px; }
.mx-group { grid-column: 1 / -1; margin: 14px 0 6px 12px; font-family: var(--ds-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(143,176,255,.75); }
.mx-ind + .mx-group { margin-top: 0; }
.mx-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; color: rgba(226,232,245,.7); transition: color .25s; }
.mx-item em { font-style: normal; font-family: var(--ds-mono); font-size: .68rem; color: rgba(226,232,245,.32); transition: color .25s; }
.mx-item b { font-family: var(--display); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.02em; }
.mx-item .st-ico { width: 16px; height: 16px; margin-left: auto; color: #8FB0FF; opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .35s var(--x-ease); }
.mx-item:hover, .mx-item:focus, .mx-item.is-on { color: #fff; }
.mx-item.is-on em { color: #8FB0FF; }
.mx-item.is-on .st-ico { opacity: 1; transform: none; }
.nav.is-mega-open .mx-item { animation: mxIn .5s var(--x-ease) both; animation-delay: calc(var(--k) * 28ms + 60ms); }
.mx-ind { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); opacity: 0; pointer-events: none; transition: transform .38s var(--x-ease), width .38s var(--x-ease), height .38s var(--x-ease), opacity .25s; }
.mx.has-ind .mx-ind { opacity: 1; }

.mx-stage { position: relative; min-height: 340px; margin: 18px 18px 0 0; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.mx-prev { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; transition: opacity .35s ease, transform .45s var(--x-ease); }
.mx-prev.is-on { opacity: 1; transform: none; }
.mx-scene { position: relative; flex: 1; overflow: hidden; }
.mx-cap { padding: 0 22px 20px; }
.mx-cap span { font-family: var(--ds-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #8FB0FF; }
.mx-cap b { display: block; margin: 4px 0 6px; font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; }
.mx-cap p { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(226,232,245,.66); }

.mx-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 14px 18px 18px 26px; }
.mx-all, .mx-all:hover { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: .88rem; font-weight: 600; }
.mx-all .st-ico { width: 15px; height: 15px; transition: transform .3s var(--x-ease); }
.mx-all:hover .st-ico { transform: translateX(4px); }
.mx-dc, .mx-dc:hover { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #DCE3F2; font-size: .8rem; }
.mx-dc:hover { background: rgba(255,255,255,.1); }
.mx-dc span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; }
.mx-dc .st-ico { width: 13px; height: 13px; }
.mx-quote, .mx-quote:hover { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-left: auto; padding: 0 16px; border-radius: 999px; background: #fff; color: #0B0E14; font-size: .86rem; font-weight: 600; transition: background .25s; }
.mx-quote:hover { background: #DCE6FF; }
.mx-quote .st-ico { width: 15px; height: 15px; }

@keyframes mxIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes mxPop { from { opacity: 0; transform: scale(.7); } }
@keyframes mxUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes mxGrowW { from { width: 0; } }
@keyframes mxGrowH { from { transform: scaleY(0); } }
@keyframes mxFloat { 50% { transform: translateY(-8px); } }
@keyframes mxPulse { 50% { opacity: .35; } }
@keyframes mxWave { to { height: 96%; } }
@keyframes mxBlink { 50% { opacity: .2; } }
@keyframes mxScan { to { transform: translateY(100%); } }
@keyframes mxSpin { to { transform: rotate(360deg); } }
.mx-prev.is-on .mx-scene > * { animation: mxUp .55s var(--x-ease) both; }

.mx-s-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mx-orb { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -125px 0 0 -115px; border-radius: 50%; background: conic-gradient(from 0deg, #3A6FF8, #7C5CFF, #22C1EE, #3A6FF8); filter: blur(40px); opacity: .5; animation: mxSpin 12s linear infinite !important; }
.mx-s-intro strong { position: relative; font-family: var(--display); font-size: 5.2rem; font-weight: 750; letter-spacing: -0.06em; line-height: 1; }
.mx-s-intro small { position: relative; margin-top: 6px; font-size: .82rem; color: rgba(226,232,245,.7); }

.mx-s-web::before { content: ''; position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; border-radius: 14px; background: #0F1422; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 50px -24px rgba(0,0,0,.8); }
.mxw-bar { position: absolute; left: 14%; top: 14%; width: 72%; height: 26px; display: flex; align-items: center; gap: 5px; padding-left: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mxw-bar i { width: 7px; height: 7px; border-radius: 50%; background: #FF5F57; }
.mxw-bar i:nth-child(2) { background: #FEBC2E; } .mxw-bar i:nth-child(3) { background: #28C840; }
.mxw-l { position: absolute; left: 20%; height: 9px; border-radius: 5px; background: rgba(255,255,255,.14); }
.mxw-l.l1 { top: 34%; width: 30%; background: rgba(255,255,255,.3); } .mxw-l.l2 { top: 43%; width: 38%; } .mxw-l.l3 { top: 51%; width: 24%; }
.mx-prev.is-on .mxw-l { animation: mxGrowW .7s var(--x-ease) .15s both; }
.mxw-btn { position: absolute; left: 20%; top: 62%; width: 17%; height: 20px; border-radius: 7px; background: var(--blue); }
.mxw-ring { position: absolute; right: 21%; top: 32%; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, #0F1422 80%, transparent 82%), conic-gradient(#22C55E 98%, rgba(255,255,255,.1) 0); }
.mx-prev.is-on .mxw-ring { animation: mxPop .6s var(--x-ease) .25s both; }
.mxw-ring b { color: #86EFAC; font-family: var(--display); font-size: 1.4rem; }

.mxs-t { position: absolute; left: 50%; width: 250px; margin-left: -125px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; color: #0B0E14; box-shadow: 0 20px 34px -18px rgba(0,0,0,.8); }
.mxs-t i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #16A34A; color: #fff; }
.mxs-t i .st-ico { width: 15px; height: 15px; stroke-width: 2.6; }
.mxs-t b { font-size: .84rem; }
.mxs-t small { margin-left: auto; font-size: .7rem; color: #6B7280; }
.mxs-t.t1 { top: 14%; } .mxs-t.t2 { top: 40%; transform: translateX(18px); } .mxs-t.t3 { top: 66%; transform: translateX(-10px); }
.mxs-t.t3 i { background: var(--blue); }
.mx-prev.is-on .mxs-t.t2 { animation-delay: .15s; } .mx-prev.is-on .mxs-t.t3 { animation-delay: .3s; }

.mxo-bars { position: absolute; left: 16%; right: 16%; bottom: 14%; height: 62%; display: flex; align-items: flex-end; gap: 8px; }
.mxo-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(143,176,255,.8), rgba(58,111,248,.5)); transform-origin: bottom; }
.mxo-bars i:last-child { background: linear-gradient(180deg, #8FE3FF, #3A6FF8); box-shadow: 0 0 30px rgba(58,111,248,.6); }
.mx-prev.is-on .mxo-bars i { animation: mxGrowH .7s var(--x-ease) both; }
.mx-prev.is-on .mxo-bars i:nth-child(2) { animation-delay: .05s; } .mx-prev.is-on .mxo-bars i:nth-child(3) { animation-delay: .1s; } .mx-prev.is-on .mxo-bars i:nth-child(4) { animation-delay: .15s; } .mx-prev.is-on .mxo-bars i:nth-child(5) { animation-delay: .2s; } .mx-prev.is-on .mxo-bars i:nth-child(6) { animation-delay: .25s; } .mx-prev.is-on .mxo-bars i:nth-child(7) { animation-delay: .3s; }
.mxo-rank { position: absolute; right: 14%; top: 10%; padding: 6px 14px; border-radius: 999px; background: #22C55E; color: #04210F; font-family: var(--display); font-size: 1.15rem; font-weight: 800; box-shadow: 0 10px 30px -10px rgba(34,197,94,.8); }
.mx-prev.is-on .mxo-rank { animation: mxPop .6s var(--x-ease) .45s both; }

.mx-s-phone { display: grid; place-items: center; }
.mxp-ph { position: relative; width: 124px; height: 226px; padding: 26px 10px 10px; border-radius: 26px; background: #0F1422; border: 3px solid #26304A; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 30px 50px -20px rgba(0,0,0,.8), 0 0 60px -10px rgba(58,111,248,.4); }
.nav.is-mega-open .mx-prev.is-on .mxp-ph { animation: mxPop .6s var(--x-ease) both, mxFloat 3.2s ease-in-out .6s infinite; }
.mxp-notch { position: absolute; top: 9px; left: 50%; width: 40px; height: 8px; margin-left: -20px; border-radius: 6px; background: #26304A; }
.mxp-hero { height: 76px; border-radius: 12px; background: linear-gradient(135deg, #3A6FF8, #7C5CFF); }
.mxp-row { height: 22px; border-radius: 8px; background: rgba(255,255,255,.08); }
.mxp-tabs { display: flex; justify-content: space-around; margin-top: auto; }
.mxp-tabs i { width: 14px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.2); }
.mxp-tabs i.on { background: #8FB0FF; }

.mxv-head, .mxg-head { position: absolute; left: 12%; top: 18%; display: flex; align-items: baseline; gap: 10px; }
.mxv-head b, .mxg-head b { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.mxv-head small, .mxg-head small { color: rgba(226,232,245,.6); font-size: .8rem; }
.mxv-head .x-live, .mxg-head .x-live { align-self: center; }
.mxv-bars { position: absolute; left: 12%; right: 12%; bottom: 22%; height: 40px; display: flex; gap: 4px; }
.mxv-bars i { flex: 1; border-radius: 3px; background: #22C55E; opacity: .85; }
.nav.is-mega-open .mx-prev.is-on .mxv-bars i { animation: mxPulse 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * 80ms); }

.mxa-b { position: absolute; max-width: 66%; padding: 10px 14px; border-radius: 16px; font-size: .84rem; line-height: 1.4; }
.mxa-b.u { right: 9%; top: 16%; background: #fff; color: #0B0E14; border-bottom-right-radius: 4px; }
.mxa-b.a { left: 9%; top: 44%; background: rgba(58,111,248,.2); border: 1px solid rgba(143,176,255,.3); color: #DCE6FF; border-bottom-left-radius: 4px; }
.mx-prev.is-on .mxa-b.a { animation-delay: .45s; }
.mxa-dots { position: absolute; left: 9%; top: 72%; display: flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); }
.mxa-dots i { width: 6px; height: 6px; border-radius: 50%; background: #8FB0FF; }
.nav.is-mega-open .mx-prev.is-on .mxa-dots i { animation: mxBlink 1s ease-in-out infinite; }
.nav.is-mega-open .mx-prev.is-on .mxa-dots i:nth-child(2) { animation-delay: .15s; } .nav.is-mega-open .mx-prev.is-on .mxa-dots i:nth-child(3) { animation-delay: .3s; }
.mx-prev.is-on .mxa-dots { animation-delay: .8s; }

.mx-s-cam { display: grid; place-items: center; }
.mxc-grid { width: 74%; aspect-ratio: 16 / 9; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.mxc-grid i { position: relative; overflow: hidden; background: linear-gradient(135deg, #172036, #0B1020); }
.mxc-grid i::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px); }
.mxc-grid i::after { content: ''; position: absolute; left: 0; right: 0; top: -100%; height: 100%; background: linear-gradient(180deg, transparent, rgba(143,176,255,.12), transparent); }
.nav.is-mega-open .mx-prev.is-on .mxc-grid i::after { animation: mxScan 2.6s linear infinite; }
.mxc-grid i:nth-child(2)::after { animation-delay: .6s !important; } .mxc-grid i:nth-child(3)::after { animation-delay: 1.2s !important; } .mxc-grid i:nth-child(4)::after { animation-delay: 1.8s !important; }
.mxc-rec { position: absolute; top: 14%; right: 15%; display: flex; align-items: center; gap: 6px; font-family: var(--ds-mono); font-size: .72rem; font-weight: 600; color: #fff; }
.mxc-rec i { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; }
.nav.is-mega-open .mx-prev.is-on .mxc-rec i { animation: mxBlink 1.2s ease-in-out infinite; }

.mxg-wave { position: absolute; left: 12%; right: 12%; bottom: 18%; height: 80px; display: flex; align-items: flex-end; gap: 4px; }
.mxg-wave i { flex: 1; height: 40%; border-radius: 3px; background: linear-gradient(180deg, #B9A8FF, #7C5CFF); }
.nav.is-mega-open .mx-prev.is-on .mxg-wave i { animation: mxWave 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -90ms); }

.ft-regions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; padding: 18px 0 24px; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.ft-regions-label { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; color: rgba(201,209,224,.55); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ft-regions-label svg { width: 14px; height: 14px; color: #8FB0FF; }
.ft-regions .ft-city { padding: 2px 10px 2px 0; background: none; border: 0; border-radius: 0; color: rgba(201,209,224,.7); font-size: .84rem; }
.ft-regions .ft-city::before { display: none; }
.ft-regions .ft-city:not(:last-child)::after { content: '·'; margin-left: 10px; color: rgba(201,209,224,.3); }
.ft-regions .ft-city:hover { background: none; color: #fff; }

@media (max-width: 1100px) {
    .mx { grid-template-columns: 1fr; }
    .mx-stage { display: none; }
}
@media (max-width: 768px) {
    .nav-mega-panel-inner { background: transparent !important; border: 0 !important; box-shadow: none !important; }
    .mx { background: none; color: var(--text); }
    .mx-spot, .mx-ind, .mx-foot .mx-dc { display: none; }
    .mx-list { grid-template-columns: 1fr; padding: 4px 0; }
    .mx-group { color: var(--text-muted); margin-left: 4px; }
    .mx-item { color: var(--text); padding: 9px 4px; }
    .mx-item em { color: var(--text-muted); }
    .mx-foot { padding: 8px 4px; }
    .mx-all, .mx-all:hover { color: var(--blue); }
    .mx-quote { background: var(--text); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
    .mx *, .mx *::before, .mx *::after { animation: none !important; }
}

.nav-mega-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 12px; }
.nav-mega-panel::before { display: none !important; }

.nav::after { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(5,7,13,.38); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.nav.is-mega-open::after { opacity: 1; }

.nav-mega-panel-inner { position: relative; isolation: isolate; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 1px !important; border-radius: 30px !important; }
.nav-mega-panel-inner::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--mx-a, 0deg), rgba(58,111,248,.0), rgba(58,111,248,.9), rgba(143,227,255,.9), rgba(124,92,255,.9), rgba(58,111,248,.0) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mxRing 6s linear infinite; }
.nav-mega-panel-inner::after { content: ''; position: absolute; inset: 20px 40px -30px; z-index: -2; border-radius: 40px; background: radial-gradient(closest-side, rgba(58,111,248,.45), transparent); filter: blur(40px); opacity: .7; }
@property --mx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mxRing { to { --mx-a: 360deg; } }
.mx { border-radius: 29px; overflow: hidden; background: radial-gradient(760px 380px at 100% 0%, rgba(58,111,248,.26), transparent 60%), radial-gradient(620px 320px at 0% 100%, rgba(124,92,255,.18), transparent 60%), #070A12; box-shadow: 0 60px 120px -40px rgba(5,7,13,.8); clip-path: inset(0 0 100% 0 round 29px); transition: clip-path .6s cubic-bezier(.2,.8,.2,1); }
.nav.is-mega-open .mx { clip-path: inset(0 0 0 0 round 29px); }
.mx::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%); }

.mx-list { padding: 28px 22px 12px 28px; }
.mx-item { padding: 12px 14px; }
.mx-item b { font-size: 1.22rem; font-weight: 650; letter-spacing: -0.03em; transition: transform .35s var(--x-ease), color .25s; }
.mx-item:hover b, .mx-item.is-on b { transform: translateX(6px); background: linear-gradient(90deg, #fff, #BFD0FF 60%, #8FE3FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mx-ind { background: linear-gradient(90deg, rgba(58,111,248,.22), rgba(124,92,255,.12)); box-shadow: inset 0 0 0 1px rgba(143,176,255,.22), 0 10px 30px -14px rgba(58,111,248,.7); }

.mx-stage { perspective: 1200px; background: transparent; border: 0; overflow: visible; margin: 20px 20px 0 0; }
.mx-stage-card { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out; }
.mx-stage-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.1), transparent 60%); }

.mx-foot { padding: 16px 20px 20px 28px; }
@media (max-width: 768px) {
    .nav-mega-panel { padding: 0; }
    .nav::after { display: none; }
    .nav-mega-panel-inner::before, .nav-mega-panel-inner::after, .mx::before { display: none; }
    .mx { clip-path: none !important; box-shadow: none; background: none; }
    .mx-item b { font-size: 1.05rem; }
    .mx-item:hover b, .mx-item.is-on b { transform: none; -webkit-text-fill-color: currentColor; background: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-mega-panel-inner::before { animation: none; }
    .mx { transition: none; }
}

.ct-hero { padding: 10px 10px 0; }
.ct-hero .x-in { transition-delay: calc(var(--d, 0) * 120ms + 150ms); }
.ct-hero.is-in .x-in { opacity: 1; transform: none; }
.ct-hero-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; padding: 150px 0 120px; color: #fff; background: radial-gradient(1200px 640px at 50% 118%, #10204F 0%, rgba(16,32,79,0) 62%), #05070D; }
.ct-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ct-title { font-size: clamp(2.8rem, 6.4vw, 6.4rem) !important; }
.ct-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.ct-orbits { position: absolute; z-index: 0; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.ct-orbits i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(143,176,255,.12); transform: translate(-50%, -50%); animation: ctOrbit 40s linear infinite; }
.ct-orbits i::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #8FB0FF; box-shadow: 0 0 18px 4px rgba(143,176,255,.6); }
.ct-orbits i:nth-child(1) { width: 560px; height: 560px; }
.ct-orbits i:nth-child(2) { width: 860px; height: 860px; animation-duration: 64s; animation-direction: reverse; }
.ct-orbits i:nth-child(2)::after { background: #B9A8FF; box-shadow: 0 0 18px 4px rgba(185,168,255,.6); }
.ct-orbits i:nth-child(3) { width: 1180px; height: 1180px; animation-duration: 90s; }
.ct-orbits i:nth-child(3)::after { background: #8FE3FF; box-shadow: 0 0 18px 4px rgba(143,227,255,.6); }
@keyframes ctOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ct-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.ct-q { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-width: 230px; padding: 12px 18px 12px 12px; border-radius: 18px; text-align: left; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .35s var(--x-ease), background .3s, border-color .3s; }
.ct-q:hover { color: #fff; transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: rgba(143,176,255,.45); }
.ct-q > span { grid-row: span 2; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--blue); box-shadow: 0 10px 24px -10px rgba(58,111,248,.9); }
.ct-q.is-wa > span { background: #22C55E; box-shadow: 0 10px 24px -10px rgba(34,197,94,.9); }
.ct-q > span .st-ico, .ct-q > span svg { width: 19px; height: 19px; }
.ct-q b { font-size: .98rem; }
.ct-q small { font-size: .74rem; color: rgba(226,232,245,.6); }
.ct-clocks { display: flex; gap: 18px; margin-top: 26px; font-family: var(--ds-mono); font-size: .78rem; color: rgba(226,232,245,.6); }
.ct-clocks span { display: inline-flex; align-items: center; gap: 8px; }
.ct-clocks i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.ct-clocks b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

.ct-main { position: relative; z-index: 2; margin-top: -70px; padding-bottom: clamp(60px, 8vw, 110px); }
.ct-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 20px; align-items: start; }
.ct-form-card { padding: clamp(24px, 3.4vw, 40px); border-radius: 30px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 50px 100px -50px rgba(14,30,80,.45); }
.ct-form-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.ct-form-head h3 { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 750; letter-spacing: -0.04em; }
.ct-form-head p { margin: 6px 0 0; color: var(--text-muted); font-size: .95rem; }
.ct-step { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-family: var(--ds-mono); font-size: .8rem; font-weight: 600; background: var(--blue-soft); color: var(--blue); }
.ct-step.is-dark { background: rgba(255,255,255,.08); color: #8FB0FF; margin-bottom: 14px; }
.ct-flash { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; font-size: .92rem; font-weight: 500; }
.ct-flash .st-ico { width: 18px; height: 18px; flex-shrink: 0; }
.ct-flash.is-success { background: #E9F8EF; color: #15803D; }
.ct-flash.is-error { background: #FDECEC; color: #B42318; }
.ct-form { display: flex; flex-direction: column; gap: 14px; }
.ct-label { display: block; width: 100%; margin-bottom: 2px; font-size: .82rem; font-weight: 600; color: var(--text-soft); }
.ct-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ct-topic { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text-soft); font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--x-ease); }
.ct-topic:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.ct-topic.is-on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 10px 20px -12px rgba(58,111,248,.9); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-field { position: relative; display: block; }
.ct-field input, .ct-field textarea { width: 100%; padding: 24px 16px 10px; border-radius: 16px; border: 1px solid var(--border); background: #F8F8F5; color: var(--text); font: inherit; font-size: .98rem; outline: none; transition: border-color .25s, background .25s, box-shadow .25s; resize: vertical; }
.ct-field textarea { min-height: 150px; }
.ct-field span { position: absolute; left: 17px; top: 17px; color: var(--text-muted); font-size: .96rem; pointer-events: none; transition: top .25s var(--x-ease), font-size .25s var(--x-ease), color .25s; }
.ct-field input:focus, .ct-field textarea:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,111,248,.14); }
.ct-field input:focus + span, .ct-field input:not(:placeholder-shown) + span, .ct-field textarea:focus + span, .ct-field textarea:not(:placeholder-shown) + span { top: 8px; font-size: .72rem; font-weight: 600; color: var(--blue); }
.ct-field em { position: absolute; right: 14px; bottom: 10px; font-style: normal; font-family: var(--ds-mono); font-size: .7rem; color: var(--text-muted); }
.ct-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; }
.ct-submit-row small { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .8rem; }
.ct-submit-row small .st-ico { width: 14px; height: 14px; }
.ct-send { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 24px; border: 0; border-radius: 999px; background: #0E1116; color: #fff; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; overflow: hidden; transition: background .3s, transform .3s var(--x-ease); }
.ct-send:hover { background: var(--blue); transform: translateY(-2px); }
.ct-send i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); transition: transform .45s var(--x-ease); }
.ct-send svg { width: 18px; height: 18px; }
.ct-send:hover i { transform: translate(4px, -4px) rotate(-12deg); }
.ct-send:disabled { opacity: .7; cursor: progress; }

.ct-side { display: flex; flex-direction: column; gap: 20px; }
.ct-direct { position: relative; overflow: hidden; isolation: isolate; padding: 28px; border-radius: 30px; background: radial-gradient(500px 260px at 100% 0%, rgba(58,111,248,.3), transparent 60%), #070A12; color: #fff; box-shadow: 0 50px 100px -50px rgba(5,7,13,.8); }
.ct-direct h3 { margin: 0 0 16px; font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.ct-line { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid rgba(255,255,255,.08); color: #fff; transition: padding .3s var(--x-ease); }
.ct-line:hover { color: #fff; padding-left: 10px; }
.ct-line > span { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #8FB0FF; transition: background .3s, color .3s; }
.ct-line:hover > span { background: var(--blue); color: #fff; }
.ct-line > span .st-ico { width: 18px; height: 18px; }
.ct-line div { flex: 1; }
.ct-line small { display: block; font-size: .72rem; color: rgba(226,232,245,.55); }
.ct-line b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.ct-line > .st-ico { width: 16px; height: 16px; color: rgba(226,232,245,.4); transition: color .3s, transform .3s var(--x-ease); }
.ct-line:hover > .st-ico { color: #fff; transform: translate(2px, -2px); }
.ct-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.ct-steps span { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: .78rem; line-height: 1.35; color: rgba(226,232,245,.8); }
.ct-steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: .74rem; }
.ct-offices { padding: 10px; border-radius: 30px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 40px 80px -50px rgba(14,30,80,.4); }
.ct-office-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 18px; background: #F3F3EF; }
.ct-office-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 0; border-radius: 14px; background: transparent; color: var(--text-soft); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.ct-office-tabs button .st-ico { width: 16px; height: 16px; }
.ct-office-tabs button.is-on { background: #fff; color: var(--text); box-shadow: 0 6px 16px -10px rgba(14,30,80,.45); }
.ct-map { display: none; }
.ct-map.is-on { display: block; animation: mxIn .45s var(--x-ease); }
.ct-map iframe { display: block; width: 100%; height: 230px; border: 0; border-radius: 22px; filter: grayscale(.25) contrast(1.05); }
.ct-addr { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 6px; }
.ct-addr b { font-size: .95rem; }
.ct-addr span { font-size: .85rem; color: var(--text-muted); }

.ct-company { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.ct-company div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.7); border: 1px solid rgba(14,17,22,.06); }
.ct-company .st-ico { grid-row: span 2; width: 20px; height: 20px; color: var(--blue); }
.ct-company small { font-size: .74rem; color: var(--text-muted); }
.ct-company b { font-family: var(--ds-mono); font-size: .95rem; font-weight: 600; }

@media (max-width: 1024px) {
    .ct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .ct-hero { padding: 6px 6px 0; }
    .ct-hero-card { border-radius: 24px; padding: 116px 0 100px; }
    .ct-q { min-width: 0; width: 100%; }
    .ct-row { grid-template-columns: 1fr; }
    .ct-submit-row { flex-direction: column; align-items: stretch; }
    .ct-send { justify-content: space-between; }
    .ct-steps, .ct-company { grid-template-columns: 1fr; }
    .ct-orbits i:nth-child(1) { width: 340px; height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-orbits i { animation: none; }
}

.nav-mega-panel-inner { padding: 0 !important; overflow: hidden !important; background: #fff !important; border: 1px solid rgba(14,17,22,.09) !important; border-radius: 24px !important; box-shadow: 0 30px 70px -30px rgba(14,30,80,.35), 0 2px 6px rgba(14,17,22,.04) !important; }
.nav-mega-panel-inner::before, .nav-mega-panel-inner::after { display: none !important; }
.nav::after { background: rgba(14,17,22,.14); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.m3 { display: grid; grid-template-columns: 1fr 290px; text-align: left; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .4s var(--x-ease); }
.nav.is-mega-open .m3 { opacity: 1; transform: none; }
.m3-cols { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px; }
.m3-col { padding: 14px 10px; border-right: 1px solid var(--border); }
.m3-col:last-child { border-right: 0; }
.m3-head { display: flex; align-items: center; gap: 8px; padding: 0 10px 10px; color: var(--text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.m3-head .st-ico { width: 15px; height: 15px; color: var(--blue); }
.m3-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.m3-link { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; color: var(--text); transition: background .2s; }
.m3-link:hover { background: #F4F6FB; color: var(--text); }
.m3-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: background .2s, color .2s; }
.m3-ico svg { width: 18px; height: 18px; }
.m3-link:hover .m3-ico { background: var(--blue); color: #fff; }
.m3-txt b { display: block; font-size: .92rem; font-weight: 600; }
.m3-txt small { display: block; margin-top: 2px; font-size: .78rem; line-height: 1.4; color: var(--text-muted); }

.m3-side { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #F7F7F4; border-left: 1px solid var(--border); }
.m3-feat { display: block; overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--border); color: var(--text); transition: border-color .2s, transform .3s var(--x-ease); }
.m3-feat:hover { color: var(--text); border-color: var(--blue); transform: translateY(-2px); }
.m3-feat-img { display: block; aspect-ratio: 2.4 / 1; overflow: hidden; background: #050B1F; }
.m3-feat-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 10% center; }
.m3-feat-txt { display: block; padding: 12px 14px 14px; }
.m3-feat-txt em { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.m3-feat-txt b { display: block; margin: 2px 0 4px; font-size: 1rem; }
.m3-feat-txt small { display: block; font-size: .78rem; line-height: 1.45; color: var(--text-muted); }
.m3-cta, .m3-cta:hover { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; border-radius: 12px; background: #0E1116; color: #fff; font-size: .9rem; font-weight: 600; transition: background .2s; }
.m3-cta:hover { background: var(--blue); }
.m3-cta .st-ico, .m3-all .st-ico { width: 15px; height: 15px; }
.m3-all { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; color: var(--text-soft); font-size: .84rem; font-weight: 600; }
.m3-all:hover { color: var(--blue); }

@media (min-width: 769px) {
    html.has-dark-hero .nav:not(.scrolled) .nav-mega-panel-inner { background: #0B0F1A !important; border-color: rgba(255,255,255,.1) !important; box-shadow: 0 30px 70px -30px rgba(0,0,0,.85) !important; }
    html.has-dark-hero .nav:not(.scrolled) .m3-col { border-right-color: rgba(255,255,255,.08); }
    html.has-dark-hero .nav:not(.scrolled) .m3-head { color: rgba(226,232,245,.5); }
    html.has-dark-hero .nav:not(.scrolled) .m3-head .st-ico { color: #8FB0FF; }
    html.has-dark-hero .nav:not(.scrolled) .m3-link { color: #fff; }
    html.has-dark-hero .nav:not(.scrolled) .m3-link:hover { background: rgba(255,255,255,.06); color: #fff; }
    html.has-dark-hero .nav:not(.scrolled) .m3-ico { background: rgba(58,111,248,.18); color: #8FB0FF; }
    html.has-dark-hero .nav:not(.scrolled) .m3-link:hover .m3-ico { background: var(--blue); color: #fff; }
    html.has-dark-hero .nav:not(.scrolled) .m3-txt small { color: rgba(226,232,245,.55); }
    html.has-dark-hero .nav:not(.scrolled) .m3-side { background: rgba(255,255,255,.03); border-left-color: rgba(255,255,255,.08); }
    html.has-dark-hero .nav:not(.scrolled) .m3-feat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #fff; }
    html.has-dark-hero .nav:not(.scrolled) .m3-feat:hover { border-color: #8FB0FF; }
    html.has-dark-hero .nav:not(.scrolled) .m3-feat-txt em { color: #8FB0FF; }
    html.has-dark-hero .nav:not(.scrolled) .m3-feat-txt small { color: rgba(226,232,245,.6); }
    html.has-dark-hero .nav:not(.scrolled) .m3-cta { background: #fff; color: #0B0E14; }
    html.has-dark-hero .nav:not(.scrolled) .m3-cta:hover { background: #DCE6FF; }
    html.has-dark-hero .nav:not(.scrolled) .m3-all { color: rgba(226,232,245,.7); }
    html.has-dark-hero .nav:not(.scrolled) .m3-all:hover { color: #fff; }
}
@media (max-width: 1100px) {
    .m3 { grid-template-columns: 1fr; }
    .m3-side { display: none; }
}
@media (max-width: 768px) {
    .nav-mega-panel-inner { background: transparent !important; border: 0 !important; box-shadow: none !important; }
    .m3 { opacity: 1; transform: none; }
    .m3-cols { grid-template-columns: 1fr; padding: 0; }
    .m3-col { border-right: 0; padding: 6px 0; }
    .m3-txt small { display: none; }
}

.ct-reg { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: .8fr 1.6fr; gap: 28px; align-items: center; margin-top: 20px; padding: clamp(22px, 3vw, 34px); border-radius: 30px; background: #fff; border: 1px solid rgba(14,17,22,.07); box-shadow: 0 40px 80px -50px rgba(14,30,80,.4); }
.ct-reg::before { content: ''; position: absolute; z-index: -1; left: -120px; top: -140px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(58,111,248,.14), transparent 65%); }
.ct-reg-badge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #3A6FF8, #2554DA); color: #fff; box-shadow: 0 12px 24px -12px rgba(58,111,248,.9); }
.ct-reg-badge .st-ico { width: 22px; height: 22px; }
.ct-reg-intro h3 { margin: 16px 0 6px; font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.ct-reg-intro p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--text-muted); }
.ct-reg-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ct-reg-item { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: #F7F7F4; border: 1px solid rgba(14,17,22,.05); transition: background .25s, border-color .25s, transform .35s var(--x-ease); }
.ct-reg-item:hover { background: #fff; border-color: rgba(58,111,248,.35); transform: translateY(-3px); }
.ct-reg-item small { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ct-reg-item b { font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #0B0E14; }
.ct-reg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ct-copy { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text-soft); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ct-copy .st-ico { width: 13px; height: 13px; }
.ct-copy:hover { border-color: var(--blue); color: var(--blue); }
.ct-copy.is-done { background: #16A34A; border-color: #16A34A; color: #fff; }
.ct-verify { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--blue); }
.ct-verify .st-ico { width: 13px; height: 13px; }
@media (max-width: 1024px) { .ct-reg { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ct-reg-items { grid-template-columns: 1fr; } }

.m3 { grid-template-columns: 1fr 300px; grid-template-rows: 1fr auto; }
.m3-cols { grid-column: 1; grid-row: 1; }
.m3-col { position: relative; border-right: 0 !important; }
.m3-col:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(180deg, transparent, rgba(14,17,22,.1) 22%, rgba(58,111,248,.25) 50%, rgba(14,17,22,.1) 78%, transparent); }
.m3-bar { grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 22px 18px; padding-top: 14px; border-top: 1px dashed rgba(14,17,22,.12); }
.m3-bar .m3-cta { height: 40px; padding: 0 16px; gap: 10px; }
.m3-side { grid-column: 2; grid-row: 1 / 3; padding: 0 !important; background: none !important; border-left: 0 !important; display: flex; }
.m3-feat { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; border: 0 !important; border-radius: 0 !important; overflow: hidden; background: #050B1F !important; color: #fff !important; transform: none !important; }
.m3-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 18% center; transition: transform 1.2s var(--x-ease); }
.m3-feat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,11,31,0) 20%, rgba(5,11,31,.85) 62%, #050B1F 100%); }
.m3-feat:hover img { transform: scale(1.06); }
.m3-feat .m3-feat-txt { position: relative; z-index: 1; padding: 22px; }
.m3-feat .m3-feat-txt em { color: #8FB0FF !important; }
.m3-feat .m3-feat-txt b { display: flex; align-items: center; gap: 6px; font-size: 1.35rem; font-family: var(--display); letter-spacing: -0.02em; }
.m3-feat .m3-feat-txt b .st-ico { width: 18px; height: 18px; transition: transform .3s var(--x-ease); }
.m3-feat:hover .m3-feat-txt b .st-ico { transform: translate(3px, -3px); }
.m3-feat .m3-feat-txt small { color: rgba(226,232,245,.75) !important; }
.m3-feat-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.m3-feat-chips i { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-style: normal; font-size: .68rem; }
@media (min-width: 769px) {
    html.has-dark-hero .nav:not(.scrolled) .m3-col:not(:last-child)::after { background: linear-gradient(180deg, transparent, rgba(255,255,255,.08) 22%, rgba(143,176,255,.3) 50%, rgba(255,255,255,.08) 78%, transparent); }
    html.has-dark-hero .nav:not(.scrolled) .m3-bar { border-top-color: rgba(255,255,255,.12); }
}
@media (max-width: 1100px) { .m3 { grid-template-columns: 1fr; } .m3-side { display: none; } }
@media (max-width: 768px) { .m3-bar { margin: 8px 0; } .m3-col::after { display: none; } }

.ct-grid { align-items: stretch; }
.ct-form-card { display: flex; flex-direction: column; }
.ct-form { flex: 1; }
.ct-form .ct-area { flex: 1; display: flex; }
.ct-form .ct-area textarea { flex: 1; min-height: 150px; height: auto; }
.ct-side .ct-offices { flex: 1; display: flex; flex-direction: column; }
.ct-side .ct-map.is-on { flex: 1; display: flex; flex-direction: column; }
.ct-side .ct-map.is-on iframe { flex: 1; min-height: 230px; height: auto; }
@media (max-width: 1024px) { .ct-form .ct-area textarea { min-height: 160px; } }
.m3-feat img { object-position: 86% 30%; }

.bl-hero, .bp-hero { padding: 10px 10px 0; }
.bl-hero .x-in, .bp-hero .x-in { transition-delay: calc(var(--d, 0) * 110ms + 140ms); }
.bl-hero.is-in .x-in, .bp-hero.is-in .x-in { opacity: 1; transform: none; }
.bl-hero-card, .bp-hero-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; color: #fff; background: radial-gradient(1200px 640px at 50% 118%, #10204F 0%, rgba(16,32,79,0) 62%), #05070D; }
.bl-hero-card { padding: 150px 0 70px; }
.bl-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bl-title { font-size: clamp(2.8rem, 6.4vw, 6.2rem) !important; }
.bl-sub { max-width: 660px; margin-left: auto; margin-right: auto; }
.bl-search { position: relative; display: flex; align-items: center; gap: 10px; width: min(560px, 100%); margin-top: 32px; padding: 0 14px 0 18px; height: 58px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .25s, background .25s, box-shadow .25s; }
.bl-search:focus-within { background: rgba(255,255,255,.1); border-color: rgba(143,176,255,.6); box-shadow: 0 0 0 4px rgba(58,111,248,.2); }
.bl-search .st-ico { width: 18px; height: 18px; color: #8FB0FF; flex-shrink: 0; }
.bl-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: 1rem; }
.bl-search input::placeholder { color: rgba(226,232,245,.5); }
.bl-search kbd { padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); font-family: var(--ds-mono); font-size: .72rem; color: rgba(226,232,245,.6); }
.bl-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.bl-cats a { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: rgba(226,232,245,.75); font-size: .86rem; font-weight: 500; transition: background .25s, color .25s, border-color .25s; }
.bl-cats a:hover { color: #fff; border-color: rgba(143,176,255,.5); }
.bl-cats a.is-on { background: #fff; border-color: #fff; color: #0B0E14; }

.bl-main { padding: 48px 0 clamp(60px, 8vw, 110px); }
.bl-featured { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; border-radius: 30px; background: #fff; border: 1px solid rgba(14,17,22,.06); color: var(--text); box-shadow: 0 40px 80px -50px rgba(14,30,80,.45); transition: transform .45s var(--x-ease), box-shadow .45s; }
.bl-featured:hover { color: var(--text); transform: translateY(-4px); box-shadow: 0 50px 90px -46px rgba(14,30,80,.55); }
.bl-featured-media { position: relative; min-height: 360px; overflow: hidden; background: #0B1020; }
.bl-featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--x-ease); }
.bl-featured:hover .bl-featured-media img { transform: scale(1.05); }
.bl-flag { position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0B0E14; font-size: .76rem; font-weight: 600; }
.bl-flag .st-ico { width: 14px; height: 14px; color: var(--blue); }
.bl-featured-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(26px, 4vw, 52px); }
.bl-featured-body b { font-family: var(--display); font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.08; }
.bl-featured-body p { margin: 0; color: var(--text-soft); font-size: 1.02rem; line-height: 1.6; }
.bl-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-meta em { padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-style: normal; font-size: .72rem; font-weight: 600; }
.bl-meta small { color: var(--text-muted); font-size: .8rem; }
.bl-read { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--blue); font-weight: 600; }
.bl-read .st-ico { width: 16px; height: 16px; transition: transform .3s var(--x-ease); }
.bl-featured:hover .bl-read .st-ico { transform: translateX(4px); }

.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.bl-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid rgba(14,17,22,.06); color: var(--text); box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 40px -30px rgba(14,30,80,.35); transition: transform .45s var(--x-ease), box-shadow .45s, border-color .3s; }
.bl-card:hover { color: var(--text); transform: translateY(-6px); border-color: rgba(58,111,248,.25); box-shadow: 0 30px 60px -34px rgba(14,30,80,.5); }
.bl-card[hidden] { display: none; }
.bl-card-media { position: relative; aspect-ratio: 16 / 9.5; overflow: hidden; background: #0B1020; }
.bl-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--x-ease); }
.bl-card:hover .bl-card-media img { transform: scale(1.06); }
.bl-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 18px; }
.bl-card-body b { font-family: var(--display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.22; }
.bl-card-body p { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.bl-card-foot small { color: var(--text-muted); font-size: .8rem; }
.bl-card-foot i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: background .3s, color .3s, transform .35s var(--x-ease); }
.bl-card-foot .st-ico { width: 15px; height: 15px; }
.bl-card:hover .bl-card-foot i { background: var(--blue); color: #fff; transform: rotate(45deg); }

.bl-gen { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 20px 22px; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 100% 0%, hsl(var(--h) 85% 58% / .85), transparent 55%), radial-gradient(90% 80% at 0% 100%, hsl(calc(var(--h) + 40) 70% 45% / .7), transparent 60%), #070A12; }
.bl-gen-orb { position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 0 0 30px rgba(255,255,255,.03), inset 0 0 0 60px rgba(255,255,255,.02); }
.bl-gen em { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.14); font-style: normal; font-size: .68rem; font-weight: 600; }
.bl-gen b { position: relative; font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-gen small { font-family: var(--display); font-weight: 750; letter-spacing: -0.04em; opacity: .55; }
.bl-featured .bl-gen b { font-size: 1.8rem; }

.bl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 20px; text-align: center; color: var(--text-muted); }
.bl-empty[hidden] { display: none; }
.bl-empty .st-ico { width: 30px; height: 30px; color: var(--blue); }
.bl-empty b { color: var(--text); font-size: 1.1rem; }
.bl-empty p { margin: 0; }
.bl-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: clamp(24px, 3.5vw, 40px); border-radius: 30px; color: #fff; background: radial-gradient(600px 300px at 100% 0%, rgba(58,111,248,.35), transparent 60%), #070A12; }
.bl-cta b { display: block; font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 750; letter-spacing: -0.03em; }
.bl-cta p { margin: 6px 0 0; color: rgba(226,232,245,.7); }

.bp-progress { position: fixed; z-index: 120; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; }
.bp-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3A6FF8, #8FE3FF); box-shadow: 0 0 12px rgba(58,111,248,.7); }
.bp-hero-card { padding: 140px 0 150px; }
.bp-hero-inner { position: relative; z-index: 2; max-width: 920px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bp-crumbs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: .84rem; color: rgba(226,232,245,.55); }
.bp-crumbs a { color: rgba(226,232,245,.75); }
.bp-crumbs a:hover { color: #fff; }
.bp-crumbs em { padding: 3px 10px; border-radius: 999px; background: rgba(143,176,255,.16); color: #BFD0FF; font-style: normal; font-weight: 600; }
.bp-title { margin: 22px 0 0; font-family: var(--display) !important; font-size: clamp(2.2rem, 4.8vw, 4.2rem) !important; font-weight: 750; letter-spacing: -0.045em; line-height: 1.04; color: #fff; }
.bp-excerpt { max-width: 720px; margin: 20px auto 0; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; color: rgba(226,232,245,.72); }
.bp-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin-top: 28px; color: rgba(226,232,245,.7); font-size: .86rem; }
.bp-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.bp-meta .st-ico { width: 15px; height: 15px; color: #8FB0FF; }
.bp-author { padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.bp-author img { width: 32px; height: 32px; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; }
.bp-author b { display: block; color: #fff; font-size: .84rem; line-height: 1.1; }
.bp-author small { font-size: .72rem; color: rgba(226,232,245,.6); }
.bp-cover-wrap { position: relative; z-index: 3; margin-top: -110px; }
.bp-cover { display: block; width: 100%; max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 28px; box-shadow: 0 50px 100px -40px rgba(5,7,13,.6); background: #0B1020; }
.bp-cover-gen { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: clamp(24px, 4vw, 48px); overflow: hidden; color: #fff; background: radial-gradient(90% 90% at 100% 0%, rgba(58,111,248,.7), transparent 55%), radial-gradient(80% 80% at 0% 100%, rgba(124,92,255,.5), transparent 60%), #070A12; }
.bp-cover-gen i { position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 0 50px rgba(255,255,255,.03), inset 0 0 0 100px rgba(255,255,255,.02); }
.bp-cover-gen em { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.14); font-style: normal; font-size: .76rem; font-weight: 600; }
.bp-cover-gen b { position: relative; max-width: 760px; font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.08; }

.bp-body { padding: clamp(40px, 6vw, 72px) 0 clamp(50px, 7vw, 90px); }
.bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(30px, 5vw, 70px); align-items: start; max-width: 1140px; }
.bp-content { min-width: 0; font-size: 1.08rem; line-height: 1.8; color: #2A2F3A; }
.bp-content > *:first-child { margin-top: 0; }
.bp-content p { margin: 0 0 1.15em; }
.bp-content h2 { margin: 1.9em 0 .6em; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 1.95rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; color: #0B0E14; scroll-margin-top: 110px; }
.bp-content h3 { margin: 1.5em 0 .5em; font-size: 1.22rem; font-weight: 700; color: #0B0E14; scroll-margin-top: 110px; }
.bp-content a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(58,111,248,.35); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.bp-content a:hover { text-decoration-color: var(--blue); }
.bp-content ul, .bp-content ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; counter-reset: bp; }
.bp-content li { position: relative; margin-bottom: .55em; padding-left: 30px; }
.bp-content ul li::before { content: ''; position: absolute; left: 6px; top: .72em; width: 8px; height: 8px; border-radius: 3px; background: var(--blue); transform: rotate(45deg); }
.bp-content ol li { counter-increment: bp; }
.bp-content ol li::before { content: counter(bp); position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-size: .74rem; font-weight: 700; line-height: 1; }
.bp-content strong { color: #0B0E14; }
.bp-content blockquote { margin: 1.6em 0; padding: 18px 22px; border-radius: 16px; background: var(--blue-soft); border-left: 3px solid var(--blue); }
.bp-content img { max-width: 100%; height: auto; border-radius: 18px; }
.bp-faq { margin-top: 2.4em; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid rgba(14,17,22,.07); }
.bp-faq h2 { margin-top: 0 !important; }
.bp-faq details { border-top: 1px solid var(--border); }
.bp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; font-weight: 600; font-size: 1rem; color: #0B0E14; cursor: pointer; list-style: none; }
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary i { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: transform .3s var(--x-ease), background .3s, color .3s; }
.bp-faq summary .st-ico { width: 14px; height: 14px; }
.bp-faq details[open] summary i { transform: rotate(45deg); background: var(--blue); color: #fff; }
.bp-faq details p { margin: 0 0 16px; font-size: .98rem; color: var(--text-soft); }
.bp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2em; }
.bp-tags span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--text-soft); font-size: .8rem; }

.bp-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 14px; }
.bp-toc, .bp-share { padding: 20px; border-radius: 22px; background: #fff; border: 1px solid rgba(14,17,22,.07); }
.bp-toc[hidden] { display: none; }
.bp-toc > span, .bp-share > span { display: block; margin-bottom: 12px; color: var(--text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.bp-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bp-toc a { display: block; padding: 7px 10px 7px 12px; border-left: 2px solid var(--border); color: var(--text-soft); font-size: .88rem; line-height: 1.35; transition: color .2s, border-color .2s, background .2s; }
.bp-toc a:hover { color: var(--text); }
.bp-toc a.is-on { color: var(--blue); border-left-color: var(--blue); background: linear-gradient(90deg, var(--blue-soft), transparent); }
.bp-share div { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-share a, .bp-share button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: #fff; color: var(--text); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.bp-share a:hover, .bp-share button:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.bp-share button .st-ico { width: 14px; height: 14px; }
.bp-share button.is-done { background: #16A34A; border-color: #16A34A; color: #fff; }
.bp-cta { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border-radius: 22px; color: #fff; background: radial-gradient(300px 200px at 100% 0%, rgba(58,111,248,.4), transparent 60%), #070A12; }
.bp-cta b { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.bp-cta p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; color: rgba(226,232,245,.7); }
.bp-cta .rl-btn { height: 44px; font-size: .9rem; }

.bp-related { padding: 0 0 clamp(60px, 8vw, 100px); }
.bp-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.bp-related-head h2 { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 750; letter-spacing: -0.035em; }
.bp-related-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; }
.bp-related-head .st-ico { width: 15px; height: 15px; }

@media (max-width: 1024px) {
    .bl-featured { grid-template-columns: 1fr; }
    .bl-featured-media { min-height: 260px; }
    .bl-grid { grid-template-columns: 1fr 1fr; }
    .bp-layout { grid-template-columns: 1fr; }
    .bp-side { position: static; }
}
@media (max-width: 760px) {
    .bl-hero, .bp-hero { padding: 6px 6px 0; }
    .bl-hero-card, .bp-hero-card { border-radius: 24px; }
    .bl-hero-card { padding: 116px 0 50px; }
    .bp-hero-card { padding: 116px 0 110px; }
    .bl-grid { grid-template-columns: 1fr; }
    .bl-search kbd { display: none; }
    .bl-cta { flex-direction: column; align-items: flex-start; }
    .bp-cover-wrap { margin-top: -80px; }
    .bp-cover { aspect-ratio: 16 / 10; border-radius: 20px; }
    .bp-content { font-size: 1.02rem; }
}

.bp-content.blog-content { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.bp-content.blog-content h2 { border: 0 !important; padding: 0 !important; background: none !important; font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin: 1.9em 0 .6em; }
.bp-content.blog-content h3 { font-size: 1.22rem; }
.bp-content.blog-content strong { background: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; font-weight: 700; color: #0B0E14; }
.bp-content.blog-content a { color: var(--blue); }

.bp-share div { display: grid; grid-template-columns: repeat(3, 40px) 1fr; gap: 8px; }
.bp-share a { width: 40px; padding: 0; }
.bp-share a svg, .bp-share button svg { width: 16px; height: 16px; flex-shrink: 0; }
.bp-share a[aria-label="WhatsApp"]:hover { background: #22C55E; border-color: #22C55E; }
.bp-share a[aria-label="LinkedIn"]:hover { background: #0A66C2; border-color: #0A66C2; }
.bp-share a[aria-label="X"]:hover { background: #0E1116; border-color: #0E1116; }
.bp-copy { white-space: nowrap; min-width: 0; }
.bp-copy span { white-space: nowrap; }

.bl-tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 760px; margin-top: 14px; }
.bl-tags > span { color: rgba(226,232,245,.5); font-size: .78rem; margin-right: 4px; }
.bl-tags button { padding: 5px 11px; border-radius: 999px; border: 1px dashed rgba(143,176,255,.35); background: transparent; color: #BFD0FF; font: inherit; font-size: .78rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.bl-tags button:hover, .bl-tags button.is-on { background: rgba(58,111,248,.25); border-style: solid; border-color: rgba(143,176,255,.6); color: #fff; }
.bl-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 -6px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(14,17,22,.07); font-size: .92rem; }
.bl-result[hidden] { display: none; }
.bl-result b { color: var(--blue); }
.bl-result button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text-soft); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.bl-result button .st-ico { width: 14px; height: 14px; transform: rotate(45deg); }
.bl-result button:hover { color: var(--blue); }
.bl-featured[hidden] { display: none; }
.bl-card mark, .bl-featured mark { background: rgba(255,214,10,.45); color: inherit; border-radius: 3px; padding: 0 1px; }
.bl-result { margin: 0 0 18px; }

.rf-hero, .rd-hero { padding: 10px 10px 0; }
.rf-hero .x-in, .rd-hero .x-in { transition-delay: calc(var(--d, 0) * 110ms + 140ms); }
.rf-hero.is-in .x-in, .rd-hero.is-in .x-in { opacity: 1; transform: none; }
.rf-hero-card, .rd-hero-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; color: #fff; background: radial-gradient(1200px 640px at 50% 118%, #10204F 0%, rgba(16,32,79,0) 62%), #05070D; }
.rf-hero-card { padding: 150px 0 70px; }
.rf-hero-inner, .rd-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rf-title { font-size: clamp(2.8rem, 6.4vw, 6.2rem) !important; }
.rf-sub { max-width: 680px; margin-left: auto; margin-right: auto; }
.rf-stats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px 0 0; padding: 0; }
.rf-stats li { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: rgba(226,232,245,.7); }
.rf-stats strong { font-family: var(--display); font-size: 1.05rem; color: #fff; }
.rf-filter { margin-top: 22px; }
.rf-filter button { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: none; color: rgba(226,232,245,.75); font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.rf-filter button em { margin-left: 4px; font-style: normal; font-size: .72rem; opacity: .6; }
.rf-filter button:hover { color: #fff; border-color: rgba(143,176,255,.5); }
.rf-filter button.is-on { background: #fff; border-color: #fff; color: #0B0E14; }

.rf-main { padding: 48px 0 clamp(60px, 8vw, 110px); }
.rf-featured { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; overflow: hidden; border-radius: 30px; background: #fff; border: 1px solid rgba(14,17,22,.06); color: var(--text); box-shadow: 0 40px 80px -50px rgba(14,30,80,.45); transition: transform .45s var(--x-ease), box-shadow .45s; }
.rf-featured:hover { color: var(--text); transform: translateY(-4px); box-shadow: 0 50px 90px -46px rgba(14,30,80,.55); }
.rf-featured[hidden] { display: none; }
.rf-featured-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: clamp(26px, 4vw, 52px); }
.rf-flag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-size: .76rem; font-weight: 600; }
.rf-flag .st-ico { width: 14px; height: 14px; }
.rf-featured-logo { height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.rf-featured-copy b { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.05; }
.rf-featured-copy p { margin: 0; color: var(--text-soft); line-height: 1.6; }
.rf-featured-stage { position: relative; min-height: 400px; overflow: hidden; background: radial-gradient(120% 100% at 100% 0%, rgba(58,111,248,.18), transparent 60%), linear-gradient(160deg, #EEF3FF, #F7F7F4); }
.rf-featured-stage .rf-browser { position: absolute; left: 8%; top: 12%; width: 96%; transform: perspective(1400px) rotateY(-8deg); transform-origin: left center; transition: transform .8s var(--x-ease); }
.rf-featured:hover .rf-featured-stage .rf-browser { transform: perspective(1400px) rotateY(-3deg); }
.rf-featured-stage .rf-phone { position: absolute; left: 4%; bottom: -30px; width: 150px; }
.rf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rf-meta em { padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-style: normal; font-size: .72rem; font-weight: 600; }
.rf-meta small { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: .8rem; }
.rf-meta small .st-ico { width: 13px; height: 13px; }

.rf-browser { display: block; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 40px 70px -34px rgba(14,30,80,.55), 0 0 0 1px rgba(14,17,22,.08); }
.rf-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #F4F5F7; border-bottom: 1px solid rgba(14,17,22,.06); }
.rf-bar i { width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; }
.rf-bar i:nth-child(2) { background: #FEBC2E; } .rf-bar i:nth-child(3) { background: #28C840; }
.rf-bar span { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 10px; border-radius: 7px; background: #fff; color: var(--text-muted); font-size: .7rem; }
.rf-bar .st-ico { width: 11px; height: 11px; }
.rf-browser img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.rf-phone { display: block; padding: 6px; border-radius: 26px; background: #111; box-shadow: 0 30px 60px -24px rgba(14,30,80,.6); }
.rf-phone img { display: block; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 20px; }

.rf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.rf-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid rgba(14,17,22,.06); color: var(--text); box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 40px -30px rgba(14,30,80,.35); transition: transform .45s var(--x-ease), box-shadow .45s, border-color .3s; }
.rf-card:hover { color: var(--text); transform: translateY(-6px); border-color: rgba(58,111,248,.25); box-shadow: 0 30px 60px -34px rgba(14,30,80,.5); }
.rf-card[hidden] { display: none; }
.rf-card-media { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 16 / 10; overflow: hidden; padding: 22px 22px 0; background: radial-gradient(120% 100% at 100% 0%, rgba(58,111,248,.16), transparent 60%), linear-gradient(160deg, #EEF3FF, #F7F7F4); }
.rf-card-media .rf-browser.is-mini { width: 100%; border-radius: 12px 12px 0 0; transform: translateY(8px); transition: transform .6s var(--x-ease); }
.rf-card:hover .rf-card-media .rf-browser.is-mini { transform: translateY(0); }
.rf-logo-tile { display: grid; place-items: center; width: 100%; height: 100%; margin-bottom: 22px; border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -28px rgba(14,30,80,.45), 0 0 0 1px rgba(14,17,22,.05); transition: transform .5s var(--x-ease); }
.rf-card-media:not(.has-shot) { align-items: center; padding: 22px; }
.rf-card-media:not(.has-shot) .rf-logo-tile { margin: 0; }
.rf-card:hover .rf-logo-tile { transform: scale(1.03); }
.rf-logo-tile img { max-width: 62%; max-height: 64%; object-fit: contain; }
.rf-logo-tile.is-text b { font-family: var(--display); font-size: 2rem; font-weight: 750; letter-spacing: -0.04em; color: var(--blue); }
.rf-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 18px; }
.rf-card-body b { font-family: var(--display); font-size: 1.22rem; font-weight: 700; letter-spacing: -0.025em; }
.rf-card-body p { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rf-tech { display: flex; flex-wrap: wrap; gap: 5px; }
.rf-tech i { padding: 3px 9px; border-radius: 7px; background: #F3F4F6; color: var(--text-soft); font-style: normal; font-size: .72rem; font-weight: 500; }
.rf-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.rf-card-foot small { color: var(--text-muted); font-size: .8rem; }
.rf-card-foot i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: background .3s, color .3s, transform .35s var(--x-ease); }
.rf-card-foot .st-ico { width: 15px; height: 15px; }
.rf-card:hover .rf-card-foot i { background: var(--blue); color: #fff; transform: rotate(45deg); }

.rd-hero-card { padding: 140px 0 170px; }
.rd-hero-inner { max-width: 940px; }
.rd-logo { display: grid; place-items: center; height: 64px; min-width: 64px; margin-top: 22px; padding: 10px 18px; border-radius: 18px; background: #fff; box-shadow: 0 16px 34px -18px rgba(0,0,0,.6); }
.rd-logo img { max-height: 44px; max-width: 170px; object-fit: contain; }
.rd-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.rd-facts > span, .rd-visit { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 16px 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); text-align: left; }
.rd-facts > span .st-ico { grid-row: span 2; width: 18px; height: 18px; color: #8FB0FF; }
.rd-facts small { font-size: .7rem; color: rgba(226,232,245,.55); }
.rd-facts b { font-size: .92rem; color: #fff; }
.rd-visit { display: inline-flex; gap: 8px; color: #fff; background: rgba(58,111,248,.25); border-color: rgba(143,176,255,.4); transition: background .25s; }
.rd-visit:hover { color: #fff; background: rgba(58,111,248,.45); }
.rd-visit .st-ico { width: 16px; height: 16px; }
.rd-stage-wrap { position: relative; z-index: 3; margin-top: -130px; }
.rd-stage { position: relative; max-width: 1080px; margin: 0 auto; padding-right: 110px; }
.rd-stage .rf-browser { border-radius: 20px; box-shadow: 0 60px 120px -50px rgba(5,7,13,.65), 0 0 0 1px rgba(14,17,22,.08); }
.rd-stage .rf-browser img { aspect-ratio: 16 / 9.4; }
.rd-phone { position: absolute; right: 0; bottom: -40px; width: 210px; }
.rd-stage.is-logo { padding: 0; }
.rf-logo-tile.is-big { height: clamp(220px, 30vw, 340px); margin: 0; border-radius: 28px; box-shadow: 0 60px 120px -50px rgba(5,7,13,.55); }
.rf-logo-tile.is-big img { max-width: 40%; max-height: 60%; }

.rd-body { padding: clamp(70px, 9vw, 120px) 0 clamp(60px, 8vw, 110px); }
.rd-story-head { margin-bottom: 26px; }
.rd-story-head h2, .rd-tech-wrap h2 { margin: 10px 0 0; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 750; letter-spacing: -0.035em; }
.rd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rd-step { position: relative; overflow: hidden; padding: 28px; border-radius: 26px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 18px 40px -30px rgba(14,30,80,.35); }
.rd-step-no { position: absolute; right: 18px; top: 8px; font-family: var(--display); font-size: 4.2rem; font-weight: 800; letter-spacing: -0.05em; color: rgba(58,111,248,.08); line-height: 1; }
.rd-step-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 12px 24px -12px rgba(58,111,248,.9); }
.rd-step:nth-child(2) .rd-step-ico { background: #7C5CFF; box-shadow: 0 12px 24px -12px rgba(124,92,255,.9); }
.rd-step:nth-child(3) .rd-step-ico { background: #16A34A; box-shadow: 0 12px 24px -12px rgba(22,163,74,.9); }
.rd-step-ico .st-ico { width: 22px; height: 22px; }
.rd-step h3 { margin: 18px 0 10px; font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.rd-step p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--text-soft); }
.rd-block { margin-top: clamp(50px, 7vw, 90px); }
.rd-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rd-feature { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid rgba(14,17,22,.06); transition: transform .4s var(--x-ease), border-color .3s; }
.rd-feature:hover { transform: translateY(-4px); border-color: rgba(58,111,248,.3); }
.rd-feature > span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.rd-feature .st-ico { width: 18px; height: 18px; }
.rd-feature b { font-size: 1.02rem; }
.rd-feature p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text-soft); }
.rd-tech-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; align-items: center; padding: clamp(24px, 3.5vw, 40px); border-radius: 30px; background: #fff; border: 1px solid rgba(14,17,22,.06); }
.rd-tech { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-tech span { padding: 8px 14px; border-radius: 12px; background: #F5F6FA; border: 1px solid rgba(14,17,22,.05); color: var(--text); font-size: .86rem; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.rd-tech span:hover { background: var(--blue-soft); border-color: rgba(58,111,248,.3); color: var(--blue-deep); }
.rd-body .bl-cta { margin-top: clamp(50px, 7vw, 90px); }

@media (max-width: 1024px) {
    .rf-featured { grid-template-columns: 1fr; }
    .rf-featured-stage { min-height: 300px; }
    .rf-grid, .rd-features { grid-template-columns: 1fr 1fr; }
    .rd-steps { grid-template-columns: 1fr; }
    .rd-tech-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .rf-hero, .rd-hero { padding: 6px 6px 0; }
    .rf-hero-card, .rd-hero-card { border-radius: 24px; }
    .rf-hero-card { padding: 116px 0 50px; }
    .rd-hero-card { padding: 116px 0 120px; }
    .rf-grid, .rd-features { grid-template-columns: 1fr; }
    .rd-stage { padding-right: 60px; }
    .rd-phone { width: 110px; bottom: -24px; }
    .rd-stage-wrap { margin-top: -90px; }
    .rf-featured-stage .rf-phone { width: 100px; }
}

.rd-logo { width: 190px; height: 95px; padding: 0; overflow: hidden; }
.rd-logo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.rd-steps { grid-template-columns: 1fr; gap: 14px; }
.rd-step { display: grid; grid-template-columns: 260px 1fr; column-gap: 40px; align-items: start; padding: 30px 34px; }
.rd-step-ico { grid-row: 1; grid-column: 1; }
.rd-step h3 { grid-column: 1; margin: 14px 0 0; font-size: 1.5rem; }
.rd-step p { grid-column: 2; grid-row: 1 / span 2; font-size: 1rem; line-height: 1.8; }
.rd-step-no { right: auto; left: 150px; top: 20px; font-size: 5rem; }
@media (max-width: 760px) {
    .rd-step { grid-template-columns: 1fr; padding: 24px; }
    .rd-step p { grid-column: 1; grid-row: auto; margin-top: 12px; }
    .rd-step-no { left: auto; right: 16px; font-size: 3.6rem; }
    .rd-logo { width: 150px; height: 75px; }
}
.rd-step { grid-template-rows: auto auto 1fr; }
.rd-step p { grid-row: 1 / span 3; }
@media (max-width: 760px) { .rd-step { grid-template-rows: none; } .rd-step p { grid-row: auto; } }

details > summary ~ * { transition: opacity .35s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
details:not([open]) > summary ~ *, details.is-closing > summary ~ * { opacity: 0; transform: translateY(-6px); }
details[open]:not(.is-closing) > summary ~ * { animation: accIn .45s cubic-bezier(.2,.7,.2,1); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
details.is-closing summary i { transform: none !important; background: var(--blue-soft) !important; color: var(--blue) !important; }

.rf-card-media.has-banner { padding: 0; align-items: flex-end; justify-content: flex-start; }
.rf-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--x-ease); }
.rf-card:hover .rf-banner { transform: scale(1.06); }
.rf-card-media.has-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,0) 45%, rgba(5,7,13,.55)); pointer-events: none; }
.rf-logo-chip { position: relative; z-index: 2; display: block; width: 112px; height: 56px; margin: 0 0 16px 16px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); transition: transform .5s var(--x-ease); }
.rf-logo-chip img { width: 100%; height: 100%; object-fit: cover; }
.rf-card:hover .rf-logo-chip { transform: translateY(-4px); }
.rf-featured-stage .rf-banner { z-index: 0; }
.rf-featured-stage .rf-browser, .rf-featured-stage .rf-phone { z-index: 1; }
.rf-featured:hover .rf-featured-stage .rf-banner { transform: scale(1.04); }
.rd-stage.has-banner { padding: 40px 150px 40px 40px; border-radius: 30px; overflow: visible; }
.rd-stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; box-shadow: 0 60px 120px -50px rgba(5,7,13,.6); }
.rd-stage.has-banner .rf-browser, .rd-stage.has-banner .rd-phone { z-index: 1; }
.rd-stage.has-banner .rd-phone { right: 40px; }
.rd-stage.is-banner { position: relative; display: flex; align-items: flex-end; height: clamp(260px, 38vw, 480px); padding: 0; }
.rd-stage.is-banner::after { content: ""; position: absolute; inset: 0; border-radius: 30px; background: linear-gradient(180deg, rgba(5,7,13,0) 50%, rgba(5,7,13,.5)); }
.rf-logo-chip.is-big { width: 190px; height: 95px; margin: 0 0 28px 28px; border-radius: 20px; }
@media (max-width: 760px) {
    .rd-stage.has-banner { padding: 18px 70px 18px 18px; border-radius: 22px; }
    .rd-stage.has-banner .rd-phone { right: 14px; }
    .rd-stage-bg, .rd-stage.is-banner::after { border-radius: 22px; }
    .rf-logo-chip.is-big { width: 130px; height: 65px; margin: 0 0 16px 16px; }
}

section.hero.pd-hero { margin: 10px 10px 0; padding: 150px 0 76px !important; border-radius: 34px; overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(1100px 600px at 50% 120%, #10204F 0%, rgba(16,32,79,0) 62%), radial-gradient(700px 420px at 12% -10%, rgba(58,111,248,.20), transparent 60%), #05070D; }
.pd-hero .hero-bg { display: none; }
.pd-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 80%); }
.pd-hero::after { content: ""; position: absolute; left: 50%; top: -30%; z-index: -1; width: 720px; height: 720px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(58,111,248,.22), transparent 62%); filter: blur(10px); animation: pdGlow 9s ease-in-out infinite alternate; }
@keyframes pdGlow { from { transform: translateX(-60%) scale(1); opacity: .7; } to { transform: translateX(-40%) scale(1.15); opacity: 1; } }

.pd-hero .reveal, .pd-hero [class*="reveal"] { opacity: 0; transform: translateY(16px); filter: none; animation: pdIn .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: .08s; transition: none !important; }
.pd-hero .delay-1 { animation-delay: .16s; } .pd-hero .delay-2 { animation-delay: .28s; } .pd-hero .delay-3 { animation-delay: .4s; } .pd-hero .delay-4 { animation-delay: .52s; } .pd-hero .delay-5 { animation-delay: .64s; }
@keyframes pdIn { to { opacity: 1; transform: none; } }
html.no-anim .pd-hero [class*="reveal"] { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .pd-hero [class*="reveal"] { opacity: 1; transform: none; animation: none; } .pd-hero::after { animation: none; } }

.pd-hero .hero-title { color: #fff; font-family: var(--display); font-size: clamp(3rem, 7vw, 6.2rem) !important; font-weight: 750; letter-spacing: -0.045em; line-height: .98; margin-bottom: 20px; background: linear-gradient(180deg, #fff 30%, #B9CBFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pd-hero .hero-subtitle, .pd-hero .hero-content > p, .pd-hero .hero-content p { color: rgba(226,232,245,.72) !important; }
.pd-hero .hero-subtitle { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.65; }
.pd-hero .gradient-text, .pd-hero .gradient-text-cool { background: linear-gradient(90deg, #8FB0FF, #C9D7FF) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }

.pd-hero .ref-breadcrumb, .pd-hero .breadcrumb-nav { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(226,232,245,.55); font-size: .8rem; }
.pd-hero .ref-breadcrumb a, .pd-hero .breadcrumb-nav a { color: rgba(226,232,245,.75); }
.pd-hero .ref-breadcrumb a:hover, .pd-hero .breadcrumb-nav a:hover { color: #fff; }
.pd-hero .ref-bc-current, .pd-hero .breadcrumb-current { color: #8FB0FF; font-weight: 600; }
.pd-hero .ref-bc-sep, .pd-hero .breadcrumb-sep { color: rgba(226,232,245,.3); }

.pd-hero .ref-hero-pill, .pd-hero .dc-hero-badge { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(226,232,245,.85) !important; backdrop-filter: blur(6px); }
.pd-hero .ref-hero-pill-ico, .pd-hero .dc-hero-badge svg { color: #8FB0FF !important; }
.pd-hero .ref-hero-pill-tech { background: rgba(58,111,248,.18) !important; border-color: rgba(143,176,255,.35) !important; color: #fff !important; }

.pd-hero .btn-primary { background: #fff !important; color: #0B0E14 !important; border: 0 !important; box-shadow: 0 16px 40px -16px rgba(143,176,255,.65) !important; }
.pd-hero .btn-primary:hover { background: #E8EEFF !important; transform: translateY(-2px); }
.pd-hero .btn-secondary { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; }
.pd-hero .btn-secondary:hover { background: rgba(255,255,255,.12) !important; }
.pd-hero .btn-primary svg, .pd-hero .btn-secondary svg { stroke: currentColor; }
.pd-hero .store-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 16px; }
.pd-hero .store-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(143,176,255,.5); box-shadow: 0 16px 34px -18px rgba(58,111,248,.8); }
.pd-hero .store-btn small { color: rgba(226,232,245,.6); }
.pd-hero .store-btn strong { color: #fff; }
.pd-hero .store-btn-soon:hover { background: rgba(255,255,255,.06); box-shadow: none; }

.pd-hero .dc-aud-toggle { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.pd-hero .dc-aud-btn { color: rgba(226,232,245,.75) !important; background: transparent !important; }
.pd-hero .dc-aud-btn.active { background: #fff !important; color: #0B0E14 !important; box-shadow: none !important; }
.pd-hero .dc-hero-whatsapp { box-shadow: 0 16px 34px -18px rgba(37,211,102,.8); }

@media (max-width: 760px) {
    section.hero.pd-hero { margin: 6px 6px 0; padding: 116px 0 56px !important; border-radius: 24px; }
    .pd-hero .hero-title { font-size: clamp(2.6rem, 13vw, 3.6rem) !important; }
}

.pd-hero ~ section .process-node-circle { border: 0 !important; border-radius: 24px !important; background: #fff !important; color: var(--blue) !important; box-shadow: 0 0 0 6px var(--bg), 0 18px 36px -20px rgba(14,30,80,.45) !important; }
.pd-hero ~ section .process-node-circle::before { background: var(--blue) !important; border-radius: 24px !important; }
.pd-hero ~ section .process-node:hover .process-node-circle { color: #fff !important; }
.pd-hero ~ section .process-node-icon { display: grid; place-items: center; position: relative; z-index: 1; }
.pd-hero ~ section .process-node-icon svg { width: 30px; height: 30px; }
.pd-hero ~ section .process-line-progress { background: var(--blue) !important; }
.pd-hero ~ section .process-node-arrow { color: var(--blue) !important; border-color: rgba(58,111,248,.35) !important; }
.pd-hero ~ .stats-bar-section .stats-bar { border-radius: 28px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 30px 60px -44px rgba(14,30,80,.45); }
.pd-hero ~ .stats-bar-section .stats-bar-num { font-family: var(--display); letter-spacing: -0.04em; background: linear-gradient(180deg, #0B0E14 40%, #3A6FF8) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.pd-hero ~ .stats-bar-section .stats-bar-label { color: var(--text-muted); letter-spacing: .08em; }

.pr-main { padding: 48px 0 clamp(60px, 8vw, 110px); }
.pr-featured .work-featured { border-radius: 30px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(14,30,80,.5); }
.pr-head { max-width: 680px; margin: clamp(60px, 8vw, 100px) auto 30px; text-align: center; }
.pr-head h2 { margin: 10px 0 10px; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 750; letter-spacing: -0.04em; }
.pr-head p { margin: 0; color: var(--text-soft); }
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pr-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid rgba(14,17,22,.06); color: var(--text); box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 40px -30px rgba(14,30,80,.35); transition: transform .45s var(--x-ease), box-shadow .45s, border-color .3s; }
.pr-card:hover { color: var(--text); transform: translateY(-6px); border-color: rgba(58,111,248,.25); box-shadow: 0 30px 60px -34px rgba(14,30,80,.5); }
.pr-media { position: relative; display: grid; place-items: center; aspect-ratio: 15 / 8; overflow: hidden; background: linear-gradient(160deg, #EEF3FF, #F7F7F4); }
.pr-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--x-ease); }
.pr-card:hover .pr-media img { transform: scale(1.06); }
.pr-media > b { font-family: var(--display); font-size: 2rem; color: var(--blue); }
.pr-status { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(5,7,13,.62); backdrop-filter: blur(8px); color: #fff; font-size: .72rem; font-weight: 600; }
.pr-status i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.pr-status.is-soon i { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
.pr-status.is-dev i { background: #8FB0FF; box-shadow: 0 0 0 3px rgba(143,176,255,.25); }
.pr-body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 20px 22px 18px; }
.pr-type { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-size: .72rem; font-weight: 600; }
.pr-type .st-ico { width: 13px; height: 13px; }
.pr-body > b { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; }
.pr-body > em { margin-top: -4px; font-style: normal; font-weight: 600; font-size: .9rem; color: var(--blue); }
.pr-body > p { margin: 0; color: var(--text-soft); font-size: .88rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pr-hl { display: grid; gap: 6px; margin: 4px 0 6px; padding-top: 12px; border-top: 1px solid rgba(14,17,22,.06); }
.pr-hl span { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; color: var(--text); }
.pr-hl .st-ico { width: 16px; height: 16px; margin-top: 1px; padding: 2px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }
.pr-card:hover .rf-card-foot i { background: var(--blue); color: #fff; transform: rotate(45deg); }
.pr-main .bl-cta { margin-top: clamp(50px, 7vw, 90px); }
@media (max-width: 1024px) { .pr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .pr-grid { grid-template-columns: 1fr; } }
.rd-stage.has-banner .rf-browser { position: relative; }

.rf-card-media.has-gallery { display: block; padding: 0; background: radial-gradient(120% 100% at 100% 0%, rgba(58,111,248,.18), transparent 60%), linear-gradient(160deg, #EAF0FF, #F4F4F1); }
.rf-shot { position: absolute; left: 18px; right: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 6px); object-fit: cover; object-position: top center; border-radius: 12px 12px 0 0; box-shadow: 0 24px 44px -24px rgba(14,30,80,.55), 0 0 0 1px rgba(14,17,22,.06); opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .55s ease, transform .8s var(--x-ease); }
.rf-shot.is-on { opacity: 1; transform: translateY(6px); }
.rf-card:hover .rf-shot.is-on { transform: translateY(0); }
.rf-count { position: absolute; left: 28px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(5,7,13,.7); backdrop-filter: blur(8px); color: #fff; font-size: .72rem; font-weight: 600; }
.rf-count .st-ico { width: 13px; height: 13px; }
.rf-dots { position: absolute; right: 28px; bottom: 18px; z-index: 2; display: flex; gap: 4px; padding: 5px 7px; border-radius: 999px; background: rgba(5,7,13,.55); backdrop-filter: blur(8px); }
.rf-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.4); transition: width .35s var(--x-ease), background .35s; }
.rf-dots i.is-on { width: 16px; background: #fff; }

.rf-featured-stage[data-rf-fan] { min-height: 440px; }
.rf-fan-shot { position: absolute; left: 6%; bottom: 9%; width: 74%; aspect-ratio: 1600 / 891; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 40px 70px -34px rgba(14,30,80,.6), 0 0 0 1px rgba(14,17,22,.06); transform-origin: left bottom; transform: translate(calc(var(--p, var(--i)) * 8%), calc(var(--p, var(--i)) * -10%)) scale(calc(1 - var(--p, var(--i)) * .07)); z-index: calc(10 - var(--p, var(--i))); opacity: calc(1 - var(--p, var(--i)) * .2); filter: saturate(calc(1 - var(--p, var(--i)) * .15)); transition: transform 1s var(--x-ease), opacity .8s ease, filter .8s ease; }
.rf-featured-stage[data-rf-fan] .rf-phone { left: auto; right: 5%; bottom: -26px; z-index: 20; }

.rd-stage.is-gallery { padding-right: 120px; }
.rd-screens { position: relative; aspect-ratio: 1600 / 891; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 60px 120px -50px rgba(5,7,13,.65), 0 0 0 1px rgba(14,17,22,.08); }
.rd-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.025); transition: opacity .8s ease, transform 1.4s var(--x-ease); }
.rd-screen.is-on { opacity: 1; transform: none; }
.rd-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(14,17,22,.08); }
.rd-progress i { display: block; height: 100%; width: 0; background: var(--blue); }
.rd-progress i.is-run { animation: rdProg var(--rd-dur, 4.2s) linear forwards; }
@keyframes rdProg { to { width: 100%; } }
.rd-thumbs { display: flex; gap: 10px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.rd-thumbs::-webkit-scrollbar { display: none; }
.rd-thumb { flex: 0 0 auto; width: 118px; aspect-ratio: 1600 / 891; padding: 0; overflow: hidden; border-radius: 10px; border: 2px solid transparent; background: #fff; opacity: .55; cursor: pointer; box-shadow: 0 8px 20px -14px rgba(14,30,80,.5); transition: opacity .3s, border-color .3s, transform .3s var(--x-ease); }
.rd-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rd-thumb:hover { opacity: .9; transform: translateY(-2px); }
.rd-thumb.is-on { opacity: 1; border-color: var(--blue); }
.rd-stage.is-gallery .rd-phone { bottom: 40px; }

@media (max-width: 760px) {
    .rf-featured-stage[data-rf-fan] { min-height: 280px; }
    .rd-stage.is-gallery { padding-right: 0; }
    .rd-stage.is-gallery .rd-phone { display: none; }
    .rd-screens { border-radius: 12px; }
    .rd-thumb { width: 84px; }
}
@media (prefers-reduced-motion: reduce) { .rf-shot, .rd-screen, .rf-fan-shot { transition: none; } }
.rf-fan-shot { left: 5%; bottom: 7%; width: 68%; transform: translate(calc(var(--p, var(--i)) * 11%), calc(var(--p, var(--i)) * -15%)) scale(calc(1 - var(--p, var(--i)) * .06)); opacity: calc(1 - var(--p, var(--i)) * .14); }
.rd-stage.is-gallery:not(:has(.rd-phone)) { padding-right: 0; }

.pd-hero::before { content: none !important; display: none !important; }
.pd-hero + section, .pd-hero + .dcx + section { padding-top: clamp(84px, 9vw, 124px) !important; }
.pd-hero + .stats-bar-section { padding-top: clamp(48px, 5vw, 64px) !important; }
.pd-hero + .dcx { padding-top: 0 !important; }

.dc-hero-pixels { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dc-hero-pixels i { position: absolute; width: var(--s, 18px); height: var(--s, 18px); border-radius: 22%; background: linear-gradient(135deg, #39C6FF, #3A6FF8); opacity: var(--o, .5); box-shadow: 0 0 24px rgba(58,150,255,.45); animation: dcPix var(--t, 9s) ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.7s); }
@keyframes dcPix { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(var(--dx, 14px), var(--dy, -40px), 0) rotate(var(--r, 12deg)); } }
.dc-hero-pixels i:nth-child(1)  { left: 6%;  top: 22%; --s: 26px; --o: .55; --dy: -50px; }
.dc-hero-pixels i:nth-child(2)  { left: 10%; top: 40%; --s: 14px; --o: .4; --dx: 20px; }
.dc-hero-pixels i:nth-child(3)  { left: 4%;  top: 62%; --s: 38px; --o: .22; --t: 12s; }
.dc-hero-pixels i:nth-child(4)  { left: 14%; top: 74%; --s: 12px; --o: .6; --dy: -30px; }
.dc-hero-pixels i:nth-child(5)  { left: 17%; top: 18%; --s: 10px; --o: .5; --dx: -16px; }
.dc-hero-pixels i:nth-child(6)  { left: 21%; top: 56%; --s: 18px; --o: .25; --t: 11s; }
.dc-hero-pixels i:nth-child(7)  { left: 8%;  top: 84%; --s: 22px; --o: .3; }
.dc-hero-pixels i:nth-child(8)  { left: 2%;  top: 38%; --s: 16px; --o: .35; --dy: -60px; }
.dc-hero-pixels i:nth-child(9)  { right: 6%;  top: 26%; --s: 30px; --o: .45; --dx: -20px; }
.dc-hero-pixels i:nth-child(10) { right: 12%; top: 48%; --s: 14px; --o: .55; }
.dc-hero-pixels i:nth-child(11) { right: 4%;  top: 66%; --s: 44px; --o: .2; --t: 13s; }
.dc-hero-pixels i:nth-child(12) { right: 16%; top: 78%; --s: 12px; --o: .6; --dy: -26px; }
.dc-hero-pixels i:nth-child(13) { right: 19%; top: 16%; --s: 10px; --o: .45; }
.dc-hero-pixels i:nth-child(14) { right: 22%; top: 60%; --s: 20px; --o: .22; --t: 11s; }
.dc-hero-pixels i:nth-child(15) { right: 9%;  top: 86%; --s: 18px; --o: .35; }
.dc-hero-pixels i:nth-child(16) { right: 2%;  top: 42%; --s: 14px; --o: .4; --dy: -56px; }

@media (prefers-reduced-motion: reduce) { .dc-hero-pixels i { animation: none; } }

.rf-featured { grid-template-columns: minmax(300px, .62fr) 1.38fr; }
.rf-featured-stage[data-rf-fan] { min-height: 470px; }
.rf-fan-shot { left: 40px; top: 40px; right: auto; bottom: auto; width: calc(100% - 40px); height: calc(100% - 40px); aspect-ratio: auto; object-fit: cover; object-position: left top; border-radius: 14px 0 0 0; transform: none !important; z-index: 1; opacity: 0 !important; filter: none !important; box-shadow: -30px 30px 70px -40px rgba(14,30,80,.55), 0 0 0 1px rgba(14,17,22,.06); transition: opacity .9s ease; }
.rf-fan-shot.is-on { opacity: 1 !important; z-index: 2; }
.rf-featured:hover .rf-fan-shot.is-on { transform: scale(1.015) !important; transform-origin: left top; transition: opacity .9s ease, transform 1.2s var(--x-ease); }
.rf-featured-stage[data-rf-fan] .rf-phone { left: 14px; right: auto; bottom: -34px; width: 150px; z-index: 5; }
.rf-fan-dots { position: absolute; right: 18px; bottom: 16px; z-index: 6; display: flex; gap: 5px; padding: 6px 8px; border-radius: 999px; background: rgba(5,7,13,.6); backdrop-filter: blur(8px); }
.rf-fan-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.4); transition: width .35s var(--x-ease), background .35s; }
.rf-fan-dots i.is-on { width: 18px; background: #fff; }
@media (max-width: 1024px) { .rf-featured { grid-template-columns: 1fr; } .rf-featured-stage[data-rf-fan] { min-height: 340px; } }
@media (max-width: 760px) { .rf-featured-stage[data-rf-fan] { min-height: 240px; } .rf-fan-shot { left: 20px; top: 20px; width: calc(100% - 20px); height: calc(100% - 20px); } .rf-featured-stage[data-rf-fan] .rf-phone { width: 90px; bottom: -20px; } }

.dcx { position: relative; }
.dcx-track { position: relative; height: 430vh; }
.dcx-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.dcx-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(280px, .62fr) 1.38fr; gap: clamp(28px, 4vw, 64px); align-items: center; width: 100%; padding-top: 64px; }

.dcx-copy > .dc-aud-block.is-active { display: block; }
.dcx-copy h2 { margin: 6px 0 24px; font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.9rem); font-weight: 750; line-height: 1.04; letter-spacing: -0.04em; color: #0B0E14; }
.dcx-copy h2 em { font-style: normal; background: linear-gradient(90deg, #1E7BFF, #3A6FF8 60%, #6C8DFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dcx-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dcx-step { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 16px; cursor: pointer; opacity: .45; transition: opacity .45s ease, background .45s ease, box-shadow .45s ease; }
.dcx-step::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--blue); transform: scaleY(0); transition: transform .5s var(--x-ease); }
.dcx-step:hover { opacity: .8; }
.dcx-step-no { flex-shrink: 0; margin-top: 2px; font-family: var(--display); font-size: .8rem; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.dcx-step-txt { display: grid; gap: 3px; }
.dcx-step-txt b { font-size: 1.04rem; font-weight: 650; color: #0B0E14; }
.dcx-step-txt small { max-height: 0; overflow: hidden; opacity: 0; font-size: .88rem; line-height: 1.55; color: var(--text-soft); transition: max-height .5s var(--x-ease), opacity .4s ease; }
.dcx[data-step="1"] .dcx-step:nth-child(1), .dcx[data-step="2"] .dcx-step:nth-child(2), .dcx[data-step="3"] .dcx-step:nth-child(3), .dcx[data-step="4"] .dcx-step:nth-child(4) { opacity: 1; background: #fff; box-shadow: 0 18px 40px -28px rgba(14,30,80,.45), 0 0 0 1px rgba(14,17,22,.05); }
.dcx[data-step="1"] .dcx-step:nth-child(1)::before, .dcx[data-step="2"] .dcx-step:nth-child(2)::before, .dcx[data-step="3"] .dcx-step:nth-child(3)::before, .dcx[data-step="4"] .dcx-step:nth-child(4)::before { transform: scaleY(1); }
.dcx[data-step="1"] .dcx-step:nth-child(1) small, .dcx[data-step="2"] .dcx-step:nth-child(2) small, .dcx[data-step="3"] .dcx-step:nth-child(3) small, .dcx[data-step="4"] .dcx-step:nth-child(4) small { max-height: 70px; opacity: 1; }
.dcx-rail { margin: 22px 0 0 18px; height: 3px; width: min(300px, 80%); border-radius: 3px; background: rgba(14,17,22,.08); overflow: hidden; }
.dcx-rail i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #1E7BFF, #3A6FF8); border-radius: inherit; }

.dcx-stage { position: relative; perspective: 2000px; }
.dcx-glow { position: absolute; inset: 8% 6% -4%; z-index: -1; border-radius: 40%; background: radial-gradient(closest-side, rgba(58,111,248,.32), transparent); filter: blur(30px); opacity: calc(.35 + var(--e, 0) * .65); }
.dcx-fit { position: relative; width: 100%; aspect-ratio: 1000 / 620; transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--e, 0)) * 20deg)) rotateY(calc((1 - var(--e, 0)) * -10deg)) scale(calc(.86 + var(--e, 0) * .14)) translateY(calc((1 - var(--e, 0)) * 50px)); opacity: calc(.3 + var(--e, 0) * .7); will-change: transform; }
.dcx-note { margin: 14px 0 0; text-align: right; font-size: .72rem; color: var(--text-muted); letter-spacing: .02em; }
.dcx-pixels { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dcx-pixels i { position: absolute; width: 14px; height: 14px; border-radius: 22%; background: linear-gradient(135deg, #39C6FF, #3A6FF8); opacity: .14; transform: translateY(calc(var(--p, 0) * var(--v, -120px))); }
.dcx-pixels i:nth-child(1) { left: 3%; top: 16%; --v: -160px; width: 22px; height: 22px; }
.dcx-pixels i:nth-child(2) { left: 8%; top: 76%; --v: -90px; }
.dcx-pixels i:nth-child(3) { left: 28%; top: 90%; --v: -220px; width: 10px; height: 10px; opacity: .25; }
.dcx-pixels i:nth-child(4) { left: 40%; top: 10%; --v: -60px; width: 28px; height: 28px; opacity: .08; }
.dcx-pixels i:nth-child(5) { left: 50%; top: 84%; --v: -180px; }
.dcx-pixels i:nth-child(6) { left: 63%; top: 6%; --v: -100px; width: 10px; height: 10px; opacity: .3; }
.dcx-pixels i:nth-child(7) { left: 76%; top: 94%; --v: -240px; width: 26px; height: 26px; opacity: .1; }
.dcx-pixels i:nth-child(8) { left: 92%; top: 14%; --v: -140px; }
.dcx-pixels i:nth-child(9) { left: 97%; top: 58%; --v: -200px; width: 20px; height: 20px; }
.dcx-pixels i:nth-child(10) { left: 20%; top: 44%; --v: -80px; width: 8px; height: 8px; opacity: .25; }
.dcx-pixels i:nth-child(11) { left: 56%; top: 50%; --v: -150px; width: 8px; height: 8px; opacity: .2; }
.dcx-pixels i:nth-child(12) { left: 84%; top: 78%; --v: -110px; width: 12px; height: 12px; }

.dca { position: absolute; left: 0; top: 0; width: 1000px; height: 620px; transform: scale(var(--k, .7)); transform-origin: 0 0; display: grid; grid-template-rows: 26px 1fr 46px; overflow: hidden; border-radius: 12px; background: #070B14; color: #E5E7EB; font-family: Inter, var(--font, system-ui), sans-serif; font-size: 11px; line-height: 1.3; box-shadow: 0 60px 120px -50px rgba(5,7,13,.75), 0 0 0 1px rgba(14,17,22,.25); }
.dca.dc-aud-block { display: none; } .dca.dc-aud-block.is-active { display: grid; }
.dca svg { display: block; flex-shrink: 0; }
.dca-title { display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #0A0F1A; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 10px; color: #CBD5E1; }
.dca-logo { position: relative; width: 12px; height: 12px; }
.dca-logo b { position: absolute; right: 0; top: -1px; font-size: 11px; font-weight: 800; color: #2F9BFF; }
.dca-logo i { position: absolute; left: 0; width: 3px; height: 3px; background: #39C6FF; border-radius: 1px; }
.dca-logo i:nth-child(1) { top: 3px; } .dca-logo i:nth-child(2) { top: 8px; opacity: .6; }
.dca-win { margin-left: auto; display: flex; gap: 14px; }
.dca-win i { width: 9px; height: 1.5px; background: #94A3B8; }
.dca-win i:nth-child(2) { height: 8px; width: 8px; background: none; border: 1.5px solid #94A3B8; }
.dca-win i:nth-child(3) { width: 9px; height: 9px; background: linear-gradient(45deg, transparent 45%, #94A3B8 45%, #94A3B8 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #94A3B8 45%, #94A3B8 55%, transparent 55%); }
.dca-screens { position: relative; overflow: hidden; }
.dca-screen { position: absolute; inset: 0; padding: 12px 14px; opacity: 0; transform: translateY(16px) scale(.99); pointer-events: none; transition: opacity .55s ease, transform .7s var(--x-ease); }
.dcx[data-step="1"] .dca-screen[data-screen="1"], .dcx[data-step="2"] .dca-screen[data-screen="2"], .dcx[data-step="3"] .dca-screen[data-screen="3"], .dcx[data-step="4"] .dca-screen[data-screen="4"] { opacity: 1; transform: none; }
.dca-nav { display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; background: #0A0F1A; border-top: 1px solid rgba(255,255,255,.05); }
.dca-nav span { display: grid; justify-items: center; gap: 3px; color: #94A3B8; transition: color .4s; }
.dca-nav small { font-size: 7px; }
.dcx[data-step="1"] .dca-nav [data-tab="1"], .dcx[data-step="2"] .dca-nav [data-tab="4"], .dcx[data-step="3"] .dca-nav [data-tab="3"], .dcx[data-step="4"] .dca-nav [data-tab="2"] { color: #2F8BFF; }

.dca-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dca-bar > b { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
.dca-search { position: relative; flex: 1; display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 6px; background: #0D1322; border: 1px solid rgba(255,255,255,.06); color: #64748B; overflow: hidden; }
.dca-search em { font-style: normal; white-space: nowrap; }
.dca-btn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 6px; background: #0D1322; border: 1px solid rgba(255,255,255,.08); color: #E2E8F0; font-size: 10px; font-weight: 600; white-space: nowrap; }
.dca-count { height: 18px; padding: 0 7px; border-radius: 5px; background: #1E7BFF; color: #fff; font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; }
.dca-table { border-radius: 8px; overflow: hidden; background: #0A0F1A; border: 1px solid rgba(255,255,255,.05); }
.dca-th, .dca-tr { display: grid; align-items: center; gap: 8px; padding: 0 10px; }
.dca-t8 .dca-th, .dca-t8 .dca-tr { grid-template-columns: 1.4fr .8fr .8fr .9fr 1fr 1.2fr .9fr .8fr; }
.dca-t6 .dca-th, .dca-t6 .dca-tr { grid-template-columns: 1.6fr 1fr .5fr .9fr .8fr 2fr; }
.dca-th { height: 26px; background: #0E1526; color: #F1F5F9; font-weight: 700; font-size: 10px; }
.dca-tr { height: 36px; border-top: 1px solid rgba(255,255,255,.04); color: #CBD5E1; white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s var(--x-ease), background .4s; }
.dca-tr > span { overflow: hidden; text-overflow: ellipsis; }
.dca-strong { font-weight: 700; color: #fff; }
.dcx[data-step="2"] .dca-list .dca-tr, .dcx[data-step="3"] .dca-cust .dca-tr { opacity: 1; transform: none; transition-delay: calc(var(--r) * 70ms + 200ms); }
.dca-pill { display: inline-block; padding: 3px 7px; border-radius: 4px; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; background: #15803D; }
.dca-pill.is-wait { background: #DC2626; }
.dca-acts { display: flex; align-items: center; gap: 9px; color: #CBD5E1; }
.dca-del { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #3A1218; color: #F87171; }
.dca-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; color: #CBD5E1; font-size: 10px; }
.dca-pager i { font-style: normal; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; }
.dca-pager i.is-on { background: #1E7BFF; color: #fff; }

.dca-uptabs { display: flex; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.dca-uptabs span { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 6px; font-weight: 600; color: #E2E8F0; }
.dca-uptabs span.is-on { background: #1E7BFF; color: #fff; }
.dca-upgrid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; height: calc(100% - 46px); }
.dca-drop { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; border-radius: 10px; background: #0A0F1A; border: 1px dashed rgba(47,139,255,.25); text-align: center; color: #E2E8F0; }
.dca-drop p { margin: 0; font-size: 11px; line-height: 1.5; }
.dca-drop-ico { color: #fff; }
.dcx[data-step="1"] .dca-drop-ico { animation: dcaBob 1.8s ease-in-out infinite; }
@keyframes dcaBob { 50% { transform: translateY(-6px); } }
.dca-file { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: #1E7BFF; color: #fff; font-weight: 600; box-shadow: 0 16px 30px -10px rgba(30,123,255,.7); opacity: 0; transform: translate(140px, -150px) rotate(8deg); }
.dca-file i { display: block; width: 0; height: 2px; margin-left: 4px; background: #fff; }
.dcx[data-step="1"].is-live .dca-file { animation: dcaDrop 3.2s var(--x-ease) .4s infinite; }
.dcx[data-step="1"].is-live .dca-file i { animation: dcaLoad 3.2s ease .4s infinite; }
@keyframes dcaDrop { 0% { opacity: 0; transform: translate(140px, -150px) rotate(8deg); } 30% { opacity: 1; transform: translate(-50%, 34px) rotate(0); } 80% { opacity: 1; transform: translate(-50%, 34px); } 100% { opacity: 0; transform: translate(-50%, 34px) scale(.9); } }
@keyframes dcaLoad { 0%, 35% { width: 0; } 75%, 100% { width: 40px; } }
.dca-status { display: grid; align-content: start; gap: 2px; padding: 12px; border-radius: 10px; background: #0A0F1A; border: 1px solid rgba(255,255,255,.05); }
.dca-st-head, .dca-st-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.dca-st-head { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.dca-st-head em { display: inline-block; margin-top: 3px; padding: 2px 7px; border-radius: 4px; background: #15803D; color: #fff; font-style: normal; font-size: 9px; font-weight: 700; }
.dca-st-head b, .dca-st-row b { display: block; font-size: 11px; font-weight: 600; color: #F1F5F9; }
.dca-st-row small { color: #94A3B8; font-size: 10px; }
.dca-st-row { opacity: 0; transform: translateX(10px); transition: opacity .4s ease, transform .5s var(--x-ease); }
.dcx[data-step="1"] .dca-st-row { opacity: 1; transform: none; transition-delay: calc(var(--r) * 90ms + 250ms); }

.dca-typed::before { content: attr(data-typed); display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; color: #fff; font-weight: 600; white-space: nowrap; }
.dca-caret { width: 1px; height: 12px; background: #fff; opacity: 0; }
.dcx[data-step="2"].is-live .dca-typed::before { animation: dcaType 1.2s steps(6) .5s forwards; }
.dcx[data-step="2"].is-live .dca-caret { animation: dcaBlink .8s step-end infinite; opacity: 1; }
.dcx[data-step="2"].is-live .dca-search em { opacity: 0; }
@keyframes dcaType { to { width: 6.6ch; } }
@keyframes dcaBlink { 50% { opacity: 0; } }
.dcx[data-step="2"].is-live .dca-list .dca-tr:nth-child(2) { animation: dcaHi 1s ease 1.9s forwards; }
@keyframes dcaHi { to { background: rgba(30,123,255,.16); box-shadow: inset 3px 0 0 #1E7BFF; } }

.dca-btn.is-pulse { border-color: rgba(47,139,255,.5); }
.dcx[data-step="3"].is-live .dca-btn.is-pulse { animation: dcaPulse 1.6s ease .6s 2; }
@keyframes dcaPulse { 50% { background: #1E7BFF; color: #fff; box-shadow: 0 0 0 6px rgba(30,123,255,.2); } }
.dca-check { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: #0F2A1B; border: 1px solid rgba(34,197,94,.35); color: #4ADE80; font-weight: 600; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--x-ease); }
.dcx[data-step="3"] .dca-check { opacity: 1; transform: none; transition-delay: 2.4s; }

.dca-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dca-card { position: relative; overflow: hidden; display: grid; gap: 3px; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.06); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s var(--x-ease); }
.dcx[data-step="4"] .dca-card { opacity: 1; transform: none; transition-delay: calc(var(--r) * 90ms + 150ms); }
.dca-card.is-blue { background: linear-gradient(135deg, #1A3E7A, #0D1A33); }
.dca-card.is-green { background: linear-gradient(135deg, #17583B, #0B2219); }
.dca-card.is-purple { background: linear-gradient(135deg, #4A2C83, #1A1033); }
.dca-card.is-orange { background: linear-gradient(135deg, #7A2E14, #2A0F08); }
.dca-card small { font-size: 9.5px; font-weight: 600; color: #E2E8F0; }
.dca-card b { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.dca-card > span { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.dca-card > span i { display: block; height: 100%; width: 0; border-radius: inherit; background: rgba(255,255,255,.85); transition: width 1.2s var(--x-ease) .5s; }
.dca-card.is-blue > span i { background: #3B9BFF; } .dca-card.is-green > span i { background: #22C55E; } .dca-card.is-purple > span i { background: #B47CFF; } .dca-card.is-orange > span i { background: #FF6B3D; }
.dcx[data-step="4"] .dca-card > span i { width: var(--w); }
.dca-trend { margin-top: 8px; padding: 9px 12px 6px; border-radius: 9px; background: #0A0F1A; border: 1px solid rgba(255,255,255,.05); }
.dca-trend > b, .dca-duo b { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #fff; }
.dca-trend em { padding: 3px 7px; border-radius: 4px; font-style: normal; font-size: 9px; color: #CBD5E1; }
.dca-trend em:first-of-type { margin-left: 6px; background: #1E7BFF; color: #fff; }
.dca-trend > svg { width: 100%; height: 92px; margin-top: 6px; }
.dca-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dca-area { opacity: 0; transition: opacity .8s ease .9s; }
.dcx[data-step="4"] .dca-line { animation: dcaDraw 1.6s var(--x-ease) .35s forwards; }
.dcx[data-step="4"] .dca-area { opacity: 1; }
@keyframes dcaDraw { to { stroke-dashoffset: 0; } }
.dca-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.dca-duo > div { padding: 9px 12px; border-radius: 9px; background: #0A0F1A; border: 1px solid rgba(255,255,255,.05); }
.dca-duo p { display: flex; align-items: center; justify-content: space-between; margin: 7px 0 0; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.05); color: #94A3B8; }
.dca-duo p span { display: grid; gap: 2px; }
.dca-duo strong { color: #fff; font-size: 10.5px; }
.dca-duo small { font-size: 9px; }
.dca-duo em { padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(251,191,36,.5); background: rgba(251,191,36,.12); color: #FCD34D; font-style: normal; font-size: 9px; font-weight: 700; }

.dcx.is-static .dcx-track { height: auto; }
.dcx.is-static .dcx-sticky { position: relative; height: auto; padding: 70px 0 20px; }
@media (max-width: 900px) {
    .dcx-grid { grid-template-columns: 1fr; gap: 26px; padding-top: 0; }
    .dcx-copy h2 { margin-bottom: 16px; }
}

.cmp { padding: clamp(70px, 8vw, 110px) 0; }
.cmp-head { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.cmp-head.is-vs { margin-top: clamp(70px, 8vw, 110px); }
.cmp-head h2 { margin: 6px 0 10px; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 750; letter-spacing: -0.04em; color: #0B0E14; }
.cmp-head p { margin: 0; color: var(--text-soft); }
.cmp-head .x-kicker { justify-content: center; }
.cmp-wrap { overflow-x: auto; border-radius: 28px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 40px 80px -60px rgba(14,30,80,.45); -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.cmp-table th, .cmp-table td { padding: 15px 18px; text-align: center; border-bottom: 1px solid rgba(14,17,22,.06); vertical-align: middle; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody th { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 600; color: #0B0E14; background: #fff; min-width: 210px; }
.cmp-table thead th { padding-top: 26px; padding-bottom: 20px; vertical-align: bottom; background: #FAFAF8; }
.cmp-table thead th:first-child { text-align: left; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; position: sticky; left: 0; z-index: 2; }
.cmp-table thead b { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; color: #0B0E14; }
.cmp-table thead small { display: block; margin-top: 4px; font-size: .76rem; font-weight: 500; color: var(--text-muted); }
.cmp-table thead em { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.cmp-table td span { color: #374151; }
.cmp-table td .cmp-ic + span { display: block; margin-top: 5px; font-size: .78rem; color: var(--text-soft); }
.cmp-table .is-pop, .cmp-table .is-us { background: #F3F6FF; }
.cmp-table thead .is-pop, .cmp-table thead .is-us { background: #EAF0FF; box-shadow: inset 0 3px 0 var(--blue); }
.cmp-table .is-us b { color: var(--blue-deep); }
.cmp-table tr.is-price strong { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 750; color: #0B0E14; letter-spacing: -0.02em; }
.cmp-table tr.is-price small { font-size: .74rem; color: var(--text-muted); }
.cmp-table tbody tr:hover th, .cmp-table tbody tr:hover td { background: #FAFBFF; }
.cmp-table tbody tr:hover td.is-pop, .cmp-table tbody tr:hover td.is-us { background: #EDF2FF; }
.cmp-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.cmp-ic svg { width: 13px; height: 13px; }
.cmp-ic.is-yes { background: #E7F8EE; color: #16A34A; }
.cmp-ic.is-no { background: #FDECEC; color: #DC2626; }
.cmp-ic.is-part { background: #FFF4E0; color: #D97706; }
.cmp-cta { margin: 26px 0 0; text-align: center; }
.cmp-note { margin: 14px auto 0; max-width: 760px; text-align: center; font-size: .8rem; color: var(--text-muted); }
@media (max-width: 760px) { .cmp-wrap { border-radius: 20px; } .cmp-table th, .cmp-table td { padding: 12px 12px; } .cmp-table tbody th { min-width: 150px; font-size: .84rem; } }
.rl-btn-dark, .rl-btn-dark:hover, .rl-btn-dark:focus { background: #0B0E14; color: #fff; } .rl-btn-dark:hover { background: var(--blue); transform: translateY(-2px); }

.dca.fra { grid-template-rows: 26px 1fr 50px; background: #0B111D; font-family: Inter, var(--font, system-ui), sans-serif; }
.fra-mini { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #2F7BFF, #1446D6); color: #fff; }
.fra .dca-screens { display: flex; flex-direction: column; }
.fra-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px; }
.fra-logo { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 25px; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(180deg, #fff 30%, #9CC0FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fra-logo-mark { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, #3B9BFF, #1446D6); color: #fff; -webkit-text-fill-color: initial; box-shadow: 0 10px 24px -10px rgba(47,123,255,.9); }
.fra-pills { display: flex; gap: 6px; }
.fra-pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 9px; background: #151F31; border: 1px solid rgba(255,255,255,.08); color: #E2E8F0; font-size: 10.5px; font-weight: 600; transition: background .4s, border-color .4s, color .4s; }
.fra-pill:first-child { color: #94A3B8; }
.fra-pill.is-icon { padding: 0 8px; }
.fra-pill.is-user i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: #22304A; color: #9CC0FF; }
.dcx[data-step="2"] .fra-pill[data-tab="2"], .dcx[data-step="3"] .fra-pill[data-tab="3"], .dcx[data-step="4"] .fra-pill[data-tab="4"] { background: #1E5BFF; border-color: #1E5BFF; color: #fff; }
.fra-body { position: relative; flex: 1; }
.fra .dca-screen { padding: 8px 18px 12px; }
.fra-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 12px; background: #0B111D; border-top: 1px solid rgba(255,255,255,.05); }
.fra-nav span { display: grid; justify-items: center; align-content: center; gap: 2px; border-radius: 10px; color: #94A3B8; }
.fra-nav span.is-on { background: #16223A; color: #6EA8FF; }
.fra-nav small { font-size: 8.5px; font-weight: 600; }

.fra-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fra-stat { position: relative; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #151F31; border: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s var(--x-ease); }
.dcx[data-step="1"] .fra-stat { opacity: 1; transform: none; transition-delay: calc(var(--r) * 80ms + 120ms); }
.fra-stat-ico { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 8px; color: #fff; }
.fra-q { position: absolute; right: 12px; top: 14px; color: #94A3B8; }
.fra-stat small { font-size: 10px; font-weight: 600; color: #CBD5E1; }
.fra-stat b { display: flex; align-items: baseline; gap: 6px; font-size: 22px; font-weight: 800; color: #fff; }
.fra-stat b em { font-style: normal; font-size: 10px; font-weight: 600; color: #CBD5E1; }
.fra-usage { margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: #151F31; border: 1px solid rgba(255,255,255,.08); }
.fra-usage > div { display: flex; justify-content: space-between; align-items: center; }
.fra-usage b { font-size: 13px; color: #fff; }
.fra-usage em { font-style: normal; font-size: 10px; font-weight: 700; color: #6EA8FF; }
.fra-usage small { font-size: 9.5px; color: #94A3B8; }
.fra-usage > span { display: block; height: 5px; margin: 10px 0 8px; border-radius: 5px; background: #22304A; overflow: hidden; }
.fra-usage > span i { display: block; height: 100%; width: 0; border-radius: inherit; background: #3B82F6; transition: width 1.4s var(--x-ease) .4s; }
.dcx[data-step="1"] .fra-usage > span i { width: 34%; }
.fra-tpl-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.fra-tpl-head b { font-size: 13px; color: #fff; }
.fra-tpl-head em { padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(110,168,255,.5); background: rgba(59,130,246,.15); color: #6EA8FF; font-style: normal; font-size: 9px; font-weight: 700; }
.fra-tpl-head small { margin-left: auto; font-size: 9.5px; color: #94A3B8; }
.fra-tpls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fra-tpl { display: grid; align-content: start; gap: 5px; min-height: 128px; padding: 10px 11px; border-radius: 12px; background: #151F31; border: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateX(20px); transition: opacity .45s ease, transform .6s var(--x-ease), border-color .3s; }
.dcx[data-step="1"] .fra-tpl { opacity: 1; transform: none; transition-delay: calc(var(--r) * 90ms + 450ms); }
.dcx[data-step="1"].is-live .fra-tpl:nth-child(2) { animation: fraPick 2.4s ease 1.8s infinite; }
@keyframes fraPick { 0%, 100% { border-color: rgba(255,255,255,.08); } 40%, 70% { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); } }
.fra-tpl > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fra-tpl-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.fra-tpl > div em { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--c); color: var(--c); font-style: normal; font-size: 8.5px; font-weight: 700; }
.fra-tpl b { font-size: 10.5px; color: #fff; }
.fra-tpl small { font-size: 8.5px; line-height: 1.4; color: #94A3B8; }
.fra-tpl > i { display: flex; align-items: center; gap: 3px; margin-top: auto; font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--c); }

.fra-h { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; color: #fff; }
.fra-h > span:first-of-type { font-size: 16px; font-weight: 600; }
.fra-h .fra-btn:first-of-type { margin-left: auto; }
.fra-btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; border-radius: 8px; background: #2563EB; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.fra-btn.is-ghost { background: transparent; border: 1px solid rgba(255,255,255,.18); color: #E2E8F0; }
.fra-hero-ico { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; background: #1E2C47; color: #6EA8FF; }
.fra-hero-ico.is-amber { width: 36px; height: 36px; background: #3A2A12; color: #F59E0B; }

.fra-hero { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #18233A, #121A2B); border: 1px solid rgba(110,168,255,.18); }
.fra-hero b { display: block; font-size: 14px; color: #fff; }
.fra-hero small { display: block; margin-top: 4px; font-size: 9.5px; line-height: 1.5; color: #94A3B8; }
.fra-hero .fra-btn { margin-left: auto; }
.fra-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fra-two > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: #151F31; border: 1px solid rgba(255,255,255,.08); color: #6EA8FF; }
.fra-two svg { grid-row: span 2; }
.fra-two small { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: #94A3B8; }
.fra-two b { font-size: 17px; color: #fff; }
.fra-sub { display: block; margin: 14px 0 8px; font-size: 12.5px; color: #fff; }
.fra-poollist { display: grid; gap: 8px; }
.fra-pool { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 11px 14px; border-radius: 12px; background: #151F31; border: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s var(--x-ease); }
.dcx[data-step="2"] .fra-pool { opacity: 1; transform: none; transition-delay: calc(var(--r) * 120ms + 250ms); }
.fra-pool > span { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.fra-pool b { font-size: 11px; color: #fff; }
.fra-pool small { font-size: 9.5px; color: #94A3B8; }
.fra-pool > i { grid-column: 2 / span 2; display: block; height: 4px; border-radius: 4px; background: #22304A; position: relative; overflow: hidden; }
.fra-pool > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--c); transition: width 1.2s var(--x-ease) .6s; }
.dcx[data-step="2"] .fra-pool > i::after { width: var(--w); }

.fra-card { padding: 14px 16px; border-radius: 16px; background: #151F31; border: 1px solid rgba(255,255,255,.08); }
.fra-card-head { display: flex; align-items: center; gap: 12px; }
.fra-card-head b { display: block; font-size: 13px; color: #fff; }
.fra-card-head small { font-size: 9.5px; color: #94A3B8; }
.fra-card-head .fra-btn { margin-left: auto; border-color: rgba(59,130,246,.6); color: #93C5FD; }
.fra-chips { display: flex; gap: 6px; margin: 12px 0 10px; }
.fra-chips span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; background: #1B263B; border: 1px solid rgba(255,255,255,.08); color: #CBD5E1; font-size: 9.5px; font-weight: 600; }
.fra-chips span.is-on { border-color: #3B82F6; color: #93C5FD; }
.fra-chips i { width: 6px; height: 6px; border-radius: 50%; background: #60A5FA; }
.fra-chips i.g { background: #22C55E; } .fra-chips i.s { background: #94A3B8; } .fra-chips i.r { background: #EF4444; }
.fra-plist { border-radius: 10px; border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.fra-prow { display: grid; grid-template-columns: 10px 54px 1fr auto 70px; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-top: 1px solid rgba(255,255,255,.05); font-size: 10px; opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .5s var(--x-ease); }
.fra-prow:first-child { border-top: 0; }
.dcx[data-step="3"] .fra-prow { opacity: 1; transform: none; transition-delay: calc(var(--r) * 90ms + 250ms); }
.fra-prow > i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.dcx[data-step="3"].is-live .fra-prow > i { animation: fraPing 1.6s ease-in-out infinite; animation-delay: calc(var(--r) * .2s); }
@keyframes fraPing { 50% { box-shadow: 0 0 0 4px rgba(34,197,94,.25); } }
.fra-prow b { color: #60A5FA; font-weight: 700; }
.fra-prow code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #E2E8F0; font-size: 10px; }
.fra-prow small { font-family: ui-monospace, monospace; color: #94A3B8; font-size: 9px; }
.fra-prow em { font-style: normal; text-align: right; font-weight: 700; color: #22C55E; }

.fra-task { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 12px 16px; border-radius: 16px; background: #151F31; border: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s var(--x-ease); }
.dcx[data-step="4"] .fra-task { opacity: 1; transform: none; transition-delay: calc(var(--r) * 130ms + 200ms); }
.fra-time { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #1E2C47; color: #6EA8FF; font-size: 11px; font-weight: 800; }
.fra-task > div { flex: 1; display: grid; gap: 3px; }
.fra-task b { font-size: 12px; color: #fff; }
.fra-task small { font-size: 9.5px; color: #94A3B8; }
.fra-task small.is-next { font-weight: 700; color: #CBD5E1; }
.fra-toggle { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #2A3650; border: 1px solid rgba(255,255,255,.1); transition: background .4s; }
.fra-toggle i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #CBD5E1; transition: transform .45s var(--x-ease); }
.dcx[data-step="4"].is-live .fra-task .fra-toggle { animation: fraTogBg .01s linear forwards; animation-delay: calc(var(--r) * .45s + 1s); }
.dcx[data-step="4"].is-live .fra-task .fra-toggle i { animation: fraTog .45s var(--x-ease) forwards; animation-delay: calc(var(--r) * .45s + 1s); }
@keyframes fraTog { to { transform: translateX(18px); background: #fff; } }
@keyframes fraTogBg { to { background: #2563EB; border-color: #2563EB; } }
.fra-del { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #F87171; }
.fra-h > .fra-btn.is-ghost { margin-left: auto; }

.sv-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.sv-main { padding: 48px 0 clamp(60px, 8vw, 110px); }
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px; border-radius: 26px; background: #fff; border: 1px solid rgba(14,17,22,.06); color: var(--text); box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 40px -32px rgba(14,30,80,.35); transition: transform .45s var(--x-ease), box-shadow .45s, border-color .3s; overflow: hidden; }
.sv-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(58,111,248,.14), transparent); opacity: 0; transition: opacity .45s; }
.sv-card:hover { color: var(--text); transform: translateY(-6px); border-color: rgba(58,111,248,.25); box-shadow: 0 30px 60px -34px rgba(14,30,80,.5); }
.sv-card:hover::after { opacity: 1; }
.sv-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.sv-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: background .35s, color .35s, transform .45s var(--x-ease); }
.sv-ico svg { width: 22px; height: 22px; }
.sv-card:hover .sv-ico { background: var(--blue); color: #fff; transform: rotate(-6deg); }
.sv-no { font-family: var(--display); font-size: .82rem; font-weight: 700; color: rgba(14,17,22,.22); }
.sv-card h3 { margin: 0; font-family: var(--display); font-size: 1.22rem; font-weight: 700; letter-spacing: -0.025em; color: #0B0E14; }
.sv-card > em { font-style: normal; font-weight: 600; font-size: .88rem; color: var(--blue); }
.sv-card > p { margin: 0; color: var(--text-soft); font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sv-card ul { display: grid; gap: 6px; margin: 6px 0 4px; padding: 12px 0 0; list-style: none; border-top: 1px solid rgba(14,17,22,.06); }
.sv-card li { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; color: #1F2937; }
.sv-card li .st-ico { width: 16px; height: 16px; margin-top: 1px; padding: 2px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }
.sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.sv-tech { display: flex; flex-wrap: wrap; gap: 5px; }
.sv-tech i { padding: 3px 9px; border-radius: 7px; background: #F3F4F6; color: var(--text-soft); font-style: normal; font-size: .72rem; font-weight: 500; }
.sv-go { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); transition: background .3s, color .3s, transform .35s var(--x-ease); }
.sv-go .st-ico { width: 15px; height: 15px; }
.sv-card:hover .sv-go { background: var(--blue); color: #fff; transform: rotate(45deg); }
.sv-about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 60px); margin-top: clamp(60px, 8vw, 100px); padding: clamp(26px, 4vw, 48px); border-radius: 30px; background: #fff; border: 1px solid rgba(14,17,22,.06); }
.sv-about-head h2, .sv-head h2 { margin: 6px 0 0; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 750; line-height: 1.08; letter-spacing: -0.035em; color: #0B0E14; }
.sv-about-body p { margin: 0 0 14px; font-size: .96rem; line-height: 1.8; color: var(--text-soft); }
.sv-about-body p:last-child { margin-bottom: 0; }
.sv-about-body strong { color: #0B0E14; font-weight: 600; }
.sv-block { margin-top: clamp(60px, 8vw, 100px); }
.sv-head { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.sv-head .x-kicker { justify-content: center; }
.sv-head p { margin: 10px 0 0; color: var(--text-soft); }
.sv-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sv-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 46px; height: 2px; background: repeating-linear-gradient(90deg, rgba(58,111,248,.35) 0 8px, transparent 8px 16px); }
.sv-step { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 18px; text-align: center; border-radius: 24px; background: #fff; border: 1px solid rgba(14,17,22,.06); }
.sv-step-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--blue); color: #fff; box-shadow: 0 0 0 8px var(--bg), 0 14px 28px -12px rgba(58,111,248,.9); }
.sv-step-ico svg { width: 24px; height: 24px; }
.sv-step small { margin-top: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sv-step b { font-size: 1.05rem; color: #0B0E14; }
.sv-faq { max-width: 860px; margin: 0 auto; }
.sv-faq details p { color: var(--text-soft); line-height: 1.7; }
.sv-main .bl-cta { margin-top: clamp(60px, 8vw, 100px); }
@media (max-width: 1024px) { .sv-grid { grid-template-columns: 1fr 1fr; } .sv-about { grid-template-columns: 1fr; } .sv-steps { grid-template-columns: 1fr 1fr; } .sv-steps::before { display: none; } }
@media (max-width: 640px) { .sv-grid, .sv-steps { grid-template-columns: 1fr; } }

.fr-cycle-toggle.has-ind, .dc-cycle-toggle.has-ind { position: relative; isolation: isolate; }
.has-ind .cyc-ind { position: absolute; left: 5px; top: 5px; bottom: 5px; z-index: -1; border-radius: 12px; background: #0B0E14; box-shadow: 0 10px 24px -12px rgba(14,30,80,.7); transition: transform .55s cubic-bezier(.2,.8,.2,1), width .55s cubic-bezier(.2,.8,.2,1); }
.has-ind .fr-cycle-btn.active, .has-ind .dc-cycle-btn.active { background: transparent !important; box-shadow: none !important; color: #fff !important; }
.has-ind .fr-cycle-btn, .has-ind .dc-cycle-btn { position: relative; transition: color .35s ease; }
[data-price-num].is-pop { animation: cycPop .6s cubic-bezier(.2,.8,.2,1); display: inline-block; }
@keyframes cycPop { 0% { transform: translateY(6px) scale(.96); filter: blur(2px); opacity: .5; } 60% { transform: translateY(-2px) scale(1.02); filter: none; opacity: 1; } 100% { transform: none; } }
.is-swap { animation: cycSwap .5s cubic-bezier(.2,.8,.2,1); }
@keyframes cycSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-save-badge].is-swap { animation: cycBadge .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes cycBadge { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .has-ind .cyc-ind, [data-price-num].is-pop, .is-swap { transition: none; animation: none; } }

.cmp-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 4vw, 60px); align-items: end; max-width: none; margin: 0 0 28px; text-align: left; }
.cmp-head h2 { margin: 14px 0 0; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1; }
.cmp-head h2 em { font-style: normal; background: linear-gradient(90deg, #1E7BFF, #3A6FF8 60%, #8B9DFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cmp-head p { margin: 0 0 14px; font-size: 1rem; line-height: 1.65; }
.cmp-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(14,17,22,.08); box-shadow: 0 8px 20px -14px rgba(14,30,80,.4); font-size: .8rem; font-weight: 600; color: #0B0E14; }
.cmp-kicker .st-ico { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--blue); color: #fff; }
.cmp-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(14,17,22,.06); font-size: .8rem; color: var(--text-soft); }
.cmp-legend .cmp-ic { width: 20px; height: 20px; }
.cmp-legend .cmp-ic + .cmp-ic, .cmp-legend .cmp-ic:not(:first-child) { margin-left: 8px; }
.cmp-table thead th { padding: 16px 10px; background: #FAFAF8; box-shadow: none !important; vertical-align: top; }
.cmp-table thead th.is-pop, .cmp-table thead th.is-us { background: #FAFAF8; }
.cmp-corner { vertical-align: bottom !important; padding-left: 22px !important; }
.cmp-corner b { display: block; font-family: var(--display); font-size: 1.35rem !important; font-weight: 750; color: #0B0E14; text-transform: none; letter-spacing: -0.02em; }
.cmp-corner small { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 500; color: var(--text-muted); }
.cmp-plan { position: relative; display: grid; justify-items: center; gap: 4px; height: 100%; padding: 20px 14px 16px; border-radius: 20px; background: #fff; border: 1px solid rgba(14,17,22,.07); text-align: center; transition: transform .45s var(--x-ease), box-shadow .45s; }
.cmp-plan:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(14,30,80,.45); }
.cmp-plan-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 13px; background: var(--blue-soft); color: var(--blue); }
.cmp-plan-ico .st-ico { width: 19px; height: 19px; }
.cmp-plan b { font-family: var(--display); font-size: 1.3rem !important; font-weight: 750; letter-spacing: -0.02em; color: #0B0E14; }
.cmp-plan small { max-width: 200px; margin: 0 auto; font-size: .75rem !important; line-height: 1.4; color: var(--text-muted); }
.cmp-plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; }
.cmp-plan-price strong { font-family: var(--display); font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; color: #0B0E14; }
.cmp-plan-price i { font-style: normal; font-size: .78rem; color: var(--text-muted); }
.cmp-plan-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; height: 36px; padding: 0 16px; border-radius: 999px; background: #F2F4F8; color: #0B0E14; font-size: .82rem; font-weight: 600; transition: background .3s, color .3s; }
.cmp-plan-btn .st-ico { width: 14px; height: 14px; }
.cmp-plan-btn:hover { background: var(--blue); color: #fff; }
.cmp-plan.is-pop { background: radial-gradient(120% 90% at 50% 0%, #1B2E66 0%, #0B0E14 70%); border-color: transparent; box-shadow: 0 24px 50px -24px rgba(30,60,160,.65); }
.cmp-plan.is-pop b, .cmp-plan.is-pop .cmp-plan-price strong { color: #fff; }
.cmp-plan.is-pop small, .cmp-plan.is-pop .cmp-plan-price i { color: rgba(226,232,245,.65); }
.cmp-plan.is-pop .cmp-plan-ico { background: rgba(255,255,255,.1); color: #8FB0FF; }
.cmp-plan.is-pop .cmp-plan-btn { background: #fff; color: #0B0E14; }
.cmp-plan.is-pop .cmp-plan-btn:hover { background: var(--blue); color: #fff; }
.cmp-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: linear-gradient(90deg, #1E7BFF, #3A6FF8); color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(58,111,248,.9); }
.cmp-badge .st-ico { width: 12px; height: 12px; }
.cmp-table thead .is-pop, .cmp-table thead .is-us { padding-top: 22px; }
.cmp-table thead th { padding-top: 22px; }
.cmp-mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 13px; background: linear-gradient(135deg, #39C6FF, #3A6FF8); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.2rem; box-shadow: 0 10px 22px -10px rgba(58,111,248,.9); }
.cmp-plan.is-other { background: #F5F6F8; border-color: transparent; }
.cmp-plan.is-other .cmp-plan-ico { background: #fff; color: #6B7280; }
.cmp-plan.is-other b { font-size: 1.02rem !important; line-height: 1.25; }
.cmp-plan.is-us b { font-size: 1.4rem !important; }
.cmp-head.is-vs { margin-top: clamp(80px, 9vw, 120px); }
@media (max-width: 860px) { .cmp-head { grid-template-columns: 1fr; align-items: start; } .cmp-plan { padding: 16px 10px 12px; } .cmp-plan-btn { display: none; } }
.cmp-table .cmp-plan.is-pop { background: radial-gradient(120% 90% at 50% 0%, #1B2E66 0%, #0B0E14 70%) !important; padding-top: 28px; }
.cmp-table .cmp-plan.is-other { background: #F5F6F8 !important; }
.cmp-table .cmp-plan:not(.is-pop):not(.is-other) { background: #fff !important; }
.rf-featured { grid-template-columns: minmax(380px, .9fr) 1.1fr; } @media (max-width: 1024px) { .rf-featured { grid-template-columns: 1fr; } }

.pd-hero .hero-title { font-size: clamp(2.4rem, 5.2vw, 4.6rem) !important; max-width: 980px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.pd-hero ~ section[style*="bg-soft"] { margin: 0 10px; border-radius: 34px; background: #EEEDE7 !important; }
.pd-hero ~ section[style*="bg-soft"] + section[style*="bg-soft"] { margin-top: 10px; }
.pd-hero ~ section .section-title { font-family: var(--display); font-weight: 750; letter-spacing: -0.04em; }
.pd-hero ~ section .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid rgba(14,17,22,.08); color: var(--blue-deep); font-size: .76rem; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.pd-hero ~ section .why-v2-card, .pd-hero ~ section .feature-card, .pd-hero ~ section .svc-card, .pd-hero ~ section .ref-card { border-radius: 24px !important; border: 1px solid rgba(14,17,22,.06) !important; box-shadow: 0 1px 2px rgba(14,17,22,.04), 0 18px 40px -32px rgba(14,30,80,.35) !important; transition: transform .45s var(--x-ease), box-shadow .45s !important; }
.pd-hero ~ section .why-v2-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(14,30,80,.5) !important; }
.pd-hero ~ section .why-v2-icon { border-radius: 14px !important; background: var(--blue-soft) !important; color: var(--blue) !important; }
.pd-hero ~ section .why-v2-num { color: rgba(14,17,22,.22) !important; }
.pd-hero ~ section .faq-item { border-radius: 18px !important; background: #fff !important; border: 1px solid rgba(14,17,22,.06) !important; box-shadow: none !important; overflow: hidden; }
.pd-hero ~ section .faq-question { font-weight: 600; color: #0B0E14; }
.pd-hero ~ section .faq-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft) !important; color: var(--blue) !important; transition: transform .35s var(--x-ease), background .3s, color .3s; }
.pd-hero ~ section .faq-item.active .faq-icon, .pd-hero ~ section .faq-item.open .faq-icon { transform: rotate(45deg); background: var(--blue) !important; color: #fff !important; }
.pd-hero ~ .cta-section { padding: clamp(50px, 6vw, 90px) 0; }
.pd-hero ~ .cta-section .cta-box { position: relative; overflow: hidden; border-radius: 34px !important; padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 60px) !important; background: radial-gradient(700px 360px at 100% 0%, rgba(58,111,248,.4), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(57,198,255,.16), transparent 60%), #05070D !important; border: 0 !important; color: #fff; box-shadow: 0 40px 80px -50px rgba(5,7,13,.8); }
.pd-hero ~ .cta-section .cta-box h2 { color: #fff !important; font-family: var(--display); font-weight: 750; letter-spacing: -0.035em; }
.pd-hero ~ .cta-section .cta-box p { color: rgba(226,232,245,.7) !important; }
.pd-hero ~ .cta-section .cta-box .btn-primary { background: #fff !important; color: #0B0E14 !important; border: 0 !important; box-shadow: 0 16px 40px -16px rgba(143,176,255,.65) !important; }
.pd-hero ~ .cta-section .cta-box .btn-secondary { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; }
@media (max-width: 760px) { .pd-hero ~ section[style*="bg-soft"] { margin: 0 6px; border-radius: 24px; } }
.pd-hero .btn-outline, .pd-hero .btn-ghost, .pd-hero .btn-light { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; }
.pd-hero .btn-outline:hover, .pd-hero .btn-ghost:hover { background: rgba(255,255,255,.12) !important; }

.ab-hero .rf-hero-card { padding: 130px 0 70px; }
.ab-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 60px); align-items: center; }
.ab-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.ab-title { font-size: clamp(2.6rem, 5.2vw, 5rem) !important; text-align: left; }
.ab-hero-copy .rl-sub { text-align: left; max-width: 560px; margin-left: 0; }
.ab-cta { justify-content: flex-start; }

.ab-orbit { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.ab-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(143,176,255,.18); }
.ab-ring.r1 { width: 100%; height: 100%; border-style: dashed; animation: abSpin 60s linear infinite; }
.ab-ring.r2 { width: 70%; height: 70%; border-color: rgba(143,176,255,.28); }
.ab-ring.r3 { width: 40%; height: 40%; background: radial-gradient(circle, rgba(58,111,248,.35), transparent 70%); border-color: rgba(143,176,255,.35); }
.ab-core { position: absolute; inset: 0; margin: auto; width: 26%; height: 26%; display: grid; place-items: center; border-radius: 30%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); box-shadow: 0 0 60px rgba(58,111,248,.45); animation: abFloat 6s ease-in-out infinite; }
.ab-core img, .ab-core svg { width: 62%; height: auto; filter: drop-shadow(0 6px 18px rgba(58,111,248,.6)); }
.ab-spin { position: absolute; inset: 0; margin: auto; border-radius: 50%; }
.ab-spin.s1 { width: 100%; height: 100%; animation: abSpin 38s linear infinite; }
.ab-spin.s2 { width: 70%; height: 70%; animation: abSpin 26s linear infinite reverse; }
.ab-sat { position: absolute; left: 50%; top: 0; width: 0; height: 50%; transform-origin: 50% 100%; transform: rotate(var(--a)); }
.ab-sat i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); display: inline-flex; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); color: #fff; font-style: normal; font-size: .82rem; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.ab-spin.s1 .ab-sat i { animation: abCounter 38s linear infinite; }
.ab-spin.s2 .ab-sat i { animation: abCounter2 26s linear infinite; }
@keyframes abSpin { to { transform: rotate(360deg); } }
@keyframes abCounter { from { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); } to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 - 360deg)); } }
@keyframes abCounter2 { from { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); } to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 + 360deg)); } }
@keyframes abFloat { 50% { transform: translateY(-8px); } }

.ab-main { padding: 48px 0 clamp(60px, 8vw, 110px); }
.ab-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 28px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 30px 60px -44px rgba(14,30,80,.45); overflow: hidden; }
.ab-stat { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; text-align: center; }
.ab-stat + .ab-stat { border-left: 1px solid rgba(14,17,22,.06); }
.ab-stat b { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(180deg, #0B0E14 40%, #3A6FF8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.ab-stat small { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

.ab-story { max-width: 1040px; margin: clamp(80px, 10vw, 140px) auto 0; }
.ab-words { margin: 14px 0 0; font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 750; line-height: 1.12; letter-spacing: -0.04em; color: #0B0E14; }
.ab-words span { opacity: .14; transition: opacity .4s ease, color .4s ease; }
.ab-words span.is-on { opacity: 1; }
.ab-words span.is-on:nth-last-child(-n+8) { color: var(--blue); }
.ab-story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 34px; }
.ab-story-cols p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--text-soft); }
.ab-block { margin-top: clamp(80px, 10vw, 130px); }

.ab-tl { position: relative; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.ab-tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: rgba(14,17,22,.08); border-radius: 2px; }
.ab-tl-line i { display: block; width: 100%; height: calc(var(--tl, 0) * 100%); background: linear-gradient(180deg, #39C6FF, #3A6FF8); border-radius: inherit; box-shadow: 0 0 14px rgba(58,111,248,.6); }
.ab-tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 18px 0; }
.ab-tl-dot { position: absolute; left: 50%; top: 42px; width: 18px; height: 18px; transform: translate(-50%, 0) scale(.7); border-radius: 50%; background: #fff; border: 2px solid rgba(14,17,22,.15); transition: transform .5s var(--x-ease), background .4s, border-color .4s, box-shadow .4s; z-index: 1; }
.ab-tl-card { grid-column: 1; padding: 24px 26px; border-radius: 24px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 18px 40px -32px rgba(14,30,80,.35); opacity: .35; transform: translateX(-24px); transition: opacity .6s ease, transform .7s var(--x-ease), box-shadow .5s; text-align: right; }
.ab-tl-item:nth-child(odd) .ab-tl-card { grid-column: 2; transform: translateX(24px); text-align: left; }
.ab-tl-item.is-on .ab-tl-card { opacity: 1; transform: none; box-shadow: 0 30px 60px -36px rgba(14,30,80,.5); }
.ab-tl-item.is-on .ab-tl-dot { transform: translate(-50%, 0) scale(1); background: var(--blue); border-color: #fff; box-shadow: 0 0 0 6px rgba(58,111,248,.18); }
.ab-tl-card em { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-style: normal; font-family: var(--display); font-weight: 800; font-size: .9rem; }
.ab-tl-card h3 { margin: 12px 0 8px; font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: #0B0E14; }
.ab-tl-card p { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--text-soft); }

.ab-certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-cert { display: grid; justify-items: center; gap: 8px; padding: 30px 24px 26px; border-radius: 28px; background: #fff; border: 1px solid rgba(14,17,22,.06); text-align: center; transition: transform .45s var(--x-ease), box-shadow .45s; }
.ab-cert:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgba(14,30,80,.5); }
.ab-seal { width: 150px; height: 150px; margin-bottom: 6px; font-family: var(--display); }
.ab-seal-ring { transform-origin: 100px 100px; animation: abSpin 40s linear infinite; }
.ab-cert:hover .ab-seal-ring { animation-duration: 8s; }
.ab-cert b { font-family: var(--display); font-size: 1.15rem; font-weight: 700; color: #0B0E14; }
.ab-cert small { font-size: .86rem; color: var(--text-soft); }

.ab-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ab-mv-card { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 44px); border-radius: 30px; color: #fff; }
.ab-mv-card.is-dark { background: radial-gradient(500px 300px at 100% 0%, rgba(58,111,248,.35), transparent 60%), #05070D; }
.ab-mv-card.is-blue { background: radial-gradient(500px 300px at 0% 100%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #3A6FF8, #1E3FB0); }
.ab-mv-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,255,255,.12); }
.ab-mv-ico .st-ico { width: 22px; height: 22px; }
.ab-mv-card h3 { margin: 18px 0 10px; font-family: var(--display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 750; letter-spacing: -0.03em; color: #fff; }
.ab-mv-card p { margin: 0; font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,.78); }
.ab-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ab-tags span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .8rem; font-weight: 600; }

.ab-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ab-value { position: relative; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid rgba(14,17,22,.06); overflow: hidden; transition: transform .45s var(--x-ease), box-shadow .45s, border-color .3s; }
.ab-value:hover { transform: translateY(-5px); border-color: rgba(58,111,248,.25); box-shadow: 0 30px 60px -38px rgba(14,30,80,.5); }
.ab-value-no { position: absolute; right: 18px; top: 10px; font-family: var(--display); font-size: 3.4rem; font-weight: 800; letter-spacing: -0.05em; color: rgba(58,111,248,.07); line-height: 1; }
.ab-value-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--blue-soft); color: var(--blue); transition: background .35s, color .35s, transform .45s var(--x-ease); }
.ab-value-ico svg { width: 21px; height: 21px; }
.ab-value:hover .ab-value-ico { background: var(--blue); color: #fff; transform: rotate(-8deg) scale(1.05); }
.ab-value h3 { margin: 16px 0 8px; font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: #0B0E14; }
.ab-value p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--text-soft); }
.ab-main .bl-cta { margin-top: clamp(70px, 9vw, 120px); }

@media (max-width: 1024px) {
    .ab-hero-grid { grid-template-columns: 1fr; }
    .ab-orbit { width: min(100%, 420px); }
    .ab-stats { grid-template-columns: repeat(3, 1fr); }
    .ab-stat:nth-child(4) { border-left: 0; }
    .ab-certs, .ab-values { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .ab-hero .rf-hero-card { padding: 110px 0 50px; }
    .ab-stats { grid-template-columns: 1fr 1fr; }
    .ab-story-cols, .ab-mv, .ab-certs, .ab-values { grid-template-columns: 1fr; }
    .ab-tl-line { left: 9px; }
    .ab-tl-item { grid-template-columns: 1fr; gap: 0; padding-left: 34px; }
    .ab-tl-dot { left: 10px; }
    .ab-tl-card, .ab-tl-item:nth-child(odd) .ab-tl-card { grid-column: 1; text-align: left; transform: translateY(16px); }
    .ab-sat i { font-size: .7rem; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .ab-ring, .ab-spin, .ab-sat i, .ab-core, .ab-seal-ring { animation: none !important; } .ab-words span { opacity: 1; } }
.rf-featured-logo { width: 150px; height: 75px; max-width: none; object-fit: cover; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -14px rgba(14,30,80,.45), 0 0 0 1px rgba(14,17,22,.06); }
@media (max-width: 700px) { .ab-hero-copy .rl-sub { font-size: .92rem; line-height: 1.6; } }

.et-card-logo { display: grid !important; place-items: center !important; overflow: hidden; }
.et-card-logo-img { width: 62% !important; height: 62% !important; object-fit: contain !important; }
.et-card-logo-text.is-mono { display: grid !important; place-items: center; width: 100%; height: 100%; font-family: var(--display); font-size: 1.5rem !important; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none !important; }
.et-card-logo-text.is-mono { text-transform: none !important; }

.cmp { padding: clamp(60px, 7vw, 96px) 0; }
.cmp-head { display: block !important; max-width: none; margin: 0 0 18px !important; text-align: left; }
.cmp-head.is-vs { margin-top: clamp(56px, 7vw, 90px) !important; }
.cmp-head .x-kicker { justify-content: flex-start; margin-bottom: 8px; }
.cmp-head h2 { margin: 0 !important; font-size: clamp(1.7rem, 2.8vw, 2.4rem) !important; line-height: 1.1 !important; letter-spacing: -0.035em; color: #0B0E14; }
.cmp-wrap { position: relative; border-radius: 22px !important; box-shadow: 0 24px 50px -44px rgba(14,30,80,.45) !important; }
.cmp-table { font-size: .88rem !important; min-width: 680px !important; }
.cmp-table th, .cmp-table td { padding: 11px 16px !important; }
.cmp-table tbody th { min-width: 200px !important; font-weight: 500 !important; color: #1F2937 !important; }
.cmp-table thead th { padding: 16px 16px 14px !important; background: #fff !important; box-shadow: none !important; vertical-align: bottom !important; border-bottom: 1px solid rgba(14,17,22,.08) !important; text-align: center; }
.cmp-table thead th:first-child { text-align: left; }
.cmp-table thead th.is-pop { background: #F3F6FF !important; box-shadow: inset 0 3px 0 var(--blue) !important; }
.cmp-name { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: #0B0E14; white-space: nowrap; }
.is-pop .cmp-name { color: var(--blue-deep); }
.cmp-name em { padding: 2px 8px; border-radius: 999px; background: var(--blue); color: #fff; font-style: normal; font-family: var(--font, inherit); font-size: .64rem; font-weight: 700; letter-spacing: .02em; }
.cmp-price { display: block; margin-top: 3px; font-size: .9rem; font-weight: 700; color: #374151; }
.cmp-price small { margin-left: 2px; font-size: .74rem; font-weight: 500; color: var(--text-muted); }
.cmp-sub { display: block; margin-top: 3px; font-size: .72rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.cmp-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #39C6FF, #3A6FF8); color: #fff; font-style: normal; font-size: .7rem; font-weight: 800; }
.cmp-oico { display: inline-grid; place-items: center; color: #9CA3AF; font-style: normal; }
.cmp-oico .st-ico { width: 15px; height: 15px; }
.cmp-legend { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-size: .72rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.cmp-legend .cmp-ic { width: 16px; height: 16px; margin-left: 6px; }
.cmp-legend .cmp-ic:first-child { margin-left: 0; }
.cmp-legend .cmp-ic svg { width: 9px; height: 9px; }
.cmp-ic { width: 22px; height: 22px; vertical-align: middle; }
.cmp-ic svg { width: 12px; height: 12px; }
.cmp-v { display: inline-flex; align-items: center; gap: 7px; }
.cmp-v small { font-size: .78rem; color: var(--text-soft); text-align: left; }
.cmp-t { color: #374151; }
.cmp-table tr.is-price b { font-weight: 700; color: #0B0E14; }
.cmp-table tbody tr:nth-child(even) th, .cmp-table tbody tr:nth-child(even) td:not(.is-pop) { background: #FBFBFA; }
.cmp-table tr.cmp-more { display: none; }
[data-cmp].is-open .cmp-table tr.cmp-more { display: table-row; animation: cmpRow .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cmpRow { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cmp-more-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border: 0; border-top: 1px solid rgba(14,17,22,.06); background: #fff; color: var(--blue-deep); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .25s; }
.cmp-more-btn:hover { background: #F6F8FF; }
.cmp-more-btn .st-ico { width: 15px; height: 15px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cmp-more-btn span:nth-child(2) { display: none; }
[data-cmp].is-open .cmp-more-btn span:nth-child(1) { display: none; }
[data-cmp].is-open .cmp-more-btn span:nth-child(2) { display: inline; }
[data-cmp].is-open .cmp-more-btn .st-ico { transform: rotate(45deg); }
.cmp-note { margin-top: 10px !important; text-align: left !important; }
.cmp-table thead .cmp-price { white-space: nowrap; } .cmp-table thead .cmp-price small { display: inline !important; margin: 0 0 0 2px !important; font-size: .74rem !important; }

.ab-bento { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, auto); gap: 12px; width: 100%; max-width: 540px; margin-left: auto; }
.ab-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); color: #fff; box-shadow: 0 30px 60px -40px rgba(0,0,0,.8); }
.ab-tile small { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(226,232,245,.55); }
.ab-tile b { font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.ab-route { grid-column: span 2; }
.ab-route-svg { width: 100%; height: auto; margin: -4px 0 -2px; font-family: inherit; }
.ab-brand { align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 35%, rgba(58,111,248,.4), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.ab-brand-mark { width: 64px; height: 64px; display: grid; place-items: center; animation: abFloat 6s ease-in-out infinite; }
.ab-brand-mark img, .ab-brand-mark svg { width: 100%; height: auto; filter: drop-shadow(0 8px 22px rgba(58,111,248,.7)); }
.ab-brand small { text-transform: none; letter-spacing: 0; }
.ab-ticker { position: relative; height: 92px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.ab-ticker > div { display: grid; gap: 8px; animation: abTicker 14s linear infinite; }
.ab-ticker span { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.ab-ticker i { width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, #39C6FF, #3A6FF8); box-shadow: 0 0 10px rgba(57,198,255,.7); }
@keyframes abTicker { to { transform: translateY(-50%); } }
.ab-chart { grid-column: span 2; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 18px; }
.ab-chart > div:first-child { display: grid; gap: 2px; }
.ab-chart > div:first-child b { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(180deg, #fff 30%, #8FB0FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ab-bars { flex: 1; display: flex; align-items: flex-end; gap: 7px; height: 84px; max-width: 280px; }
.ab-bars i { position: relative; flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #8FB0FF, rgba(58,111,248,.35)); transform-origin: bottom; animation: abBar 1.2s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--b) * 90ms + 700ms); }
.ab-bars i:last-child { background: linear-gradient(180deg, #39C6FF, #3A6FF8); box-shadow: 0 0 18px rgba(57,198,255,.55); }
.ab-bars em { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-style: normal; font-size: .55rem; color: rgba(226,232,245,.45); }
@keyframes abBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ab-hero .rf-hero-card { padding-bottom: 80px; }

.ab-certs { perspective: 1200px; }
.ab-doc { display: block !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.ab-doc-paper { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 230px; padding: 28px 28px 24px; border-radius: 18px; color: #1F2937; background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 45%),
    repeating-linear-gradient(45deg, rgba(14,17,22,.018) 0 2px, transparent 2px 7px),
    #FBF8F1;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 50px -34px rgba(14,30,80,.45), 0 0 0 1px rgba(14,17,22,.07);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform-style: preserve-3d; }
.ab-doc-paper::before { content: ""; position: absolute; inset: 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); pointer-events: none; }
.ab-doc-paper::after { content: ""; position: absolute; inset: 14px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--c) 22%, transparent); pointer-events: none; }
.ab-doc:hover .ab-doc-paper { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 40px 70px -40px rgba(14,30,80,.6), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.ab-doc-kind { position: relative; font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--c); }
.ab-doc-name { position: relative; font-family: var(--display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #0B0E14; max-width: 70%; }
.ab-doc-rule { position: relative; width: 46px; height: 3px; border-radius: 3px; background: var(--c); }
.ab-doc-desc { position: relative; max-width: 62%; font-size: .86rem; line-height: 1.5; color: #4B5563; }
.ab-doc-seal { position: absolute; right: 18px; bottom: 10px; width: 78px; height: 94px; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--c) 45%, transparent)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.ab-doc:hover .ab-doc-seal { transform: rotate(-8deg) scale(1.06); }
.ab-doc-shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); transform: translateX(-60%); transition: transform .9s ease; pointer-events: none; }
.ab-doc:hover .ab-doc-shine { transform: translateX(60%); }

.ab-mv { --mv: 0; }
.ab-mv .ab-mv-card { opacity: calc(.2 + var(--mv) * .8); transition: none; will-change: transform; }
.ab-mv .ab-mv-card.is-dark { transform: translateX(calc((1 - var(--mv)) * -90px)) rotate(calc((1 - var(--mv)) * -4deg)); }
.ab-mv .ab-mv-card.is-blue { transform: translateX(calc((1 - var(--mv)) * 90px)) translateY(calc((1 - var(--mv)) * 60px)) rotate(calc((1 - var(--mv)) * 4deg)); }
.ab-mv .ab-mv-card > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.ab-mv.is-in .ab-mv-card > * { opacity: 1; transform: none; }
.ab-mv.is-in .ab-mv-card > :nth-child(2) { transition-delay: .08s; } .ab-mv.is-in .ab-mv-card > :nth-child(3) { transition-delay: .16s; } .ab-mv.is-in .ab-mv-card > :nth-child(4) { transition-delay: .24s; }
.ab-mv .ab-tags span { opacity: 0; transform: scale(.85); transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.5,.5,1); }
.ab-mv.is-in .ab-tags span { opacity: 1; transform: none; }
.ab-mv.is-in .ab-tags span:nth-child(1) { transition-delay: .35s; } .ab-mv.is-in .ab-tags span:nth-child(2) { transition-delay: .43s; } .ab-mv.is-in .ab-tags span:nth-child(3) { transition-delay: .51s; } .ab-mv.is-in .ab-tags span:nth-child(4) { transition-delay: .59s; }
.ab-mv-ico { position: relative; }
.ab-mv-card::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent); transform: scale(calc(.6 + var(--mv) * .6)); pointer-events: none; }

@media (max-width: 1024px) { .ab-bento { margin: 10px auto 0; } }
@media (max-width: 700px) { .ab-bento { gap: 8px; } .ab-tile { padding: 12px 14px; border-radius: 18px; } .ab-doc-name { font-size: 1.35rem; } .ab-mv .ab-mv-card.is-dark, .ab-mv .ab-mv-card.is-blue { transform: translateY(calc((1 - var(--mv)) * 40px)); } }
@media (prefers-reduced-motion: reduce) { .ab-ticker > div, .ab-bars i, .ab-brand-mark { animation: none !important; } .ab-mv { --mv: 1 !important; } .ab-mv .ab-mv-card > *, .ab-mv .ab-tags span { opacity: 1; transform: none; } }

.cmp-head { display: block !important; max-width: 640px !important; margin: 0 auto 26px !important; text-align: center !important; }
.cmp-head .x-kicker { justify-content: center !important; }
.cmp-head h2 { margin: 6px 0 8px !important; font-size: clamp(2rem, 3.4vw, 2.9rem) !important; }
.cmp-head p { margin: 0 !important; font-size: .98rem; color: var(--text-soft); }
.cmp-wrap { overflow: hidden !important; border-radius: 24px !important; border: 1px solid rgba(14,17,22,.07) !important; background: #fff; }
.cmp-wrap .cmp-table { border-collapse: separate; }
.cmp-table thead th { background: #0B0E14 !important; border-bottom: 0 !important; box-shadow: none !important; padding: 18px 16px !important; vertical-align: middle !important; color: #fff; }
.cmp-table thead th.cmp-first { position: sticky; left: 0; z-index: 2; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; color: rgba(226,232,245,.55) !important; text-align: left; }
.cmp-table thead th.is-pop { background: linear-gradient(180deg, #3A6FF8, #2F5BE0) !important; box-shadow: none !important; }
.cmp-table thead .cmp-name { color: #fff !important; font-size: 1.02rem; }
.cmp-table thead .cmp-name em { background: rgba(255,255,255,.2); color: #fff; }
.cmp-table thead .cmp-price { color: rgba(226,232,245,.85) !important; font-weight: 600; }
.cmp-table thead .cmp-price small, .cmp-table thead .cmp-sub { color: rgba(226,232,245,.55) !important; }
.cmp-table thead .cmp-oico { color: rgba(226,232,245,.55); }
.cmp-table thead .cmp-mark { background: #fff; color: var(--blue); }
.cmp-table tbody td.is-pop { background: #F4F7FF !important; }
.cmp-table tbody tr:first-child th, .cmp-table tbody tr:first-child td { padding-top: 14px !important; }
.cmp-legend-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 4px 0; font-size: .78rem; color: var(--text-muted); }
.cmp-legend-row .cmp-legend { font-size: .78rem; }
.cmp-note { display: none; }
.cmp-table tr.cmp-more { display: none; }
[data-cmp].is-open .cmp-table tr.cmp-more { display: table-row; animation: none; }
[data-cmp].is-open .cmp-table tr.cmp-more > * { animation: cmpIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ri, 0) * 55ms + 80ms); }
[data-cmp].is-closing .cmp-table tr.cmp-more > * { animation: cmpOut .28s ease both; }
@keyframes cmpIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes cmpOut { to { opacity: 0; transform: translateY(-6px); } }
.cmp-more-btn { position: relative; }
.cmp-more-btn::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; background: linear-gradient(transparent, rgba(255,255,255,.95)); pointer-events: none; transition: opacity .3s; }
[data-cmp].is-open .cmp-more-btn::before { opacity: 0; }

.ab-badge { display: grid; justify-items: center; gap: 6px; padding: 30px 22px 26px; border-radius: 24px; background: #fff; border: 1px solid rgba(14,17,22,.06); text-align: center; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .3s; }
.ab-badge:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 26px 50px -34px rgba(14,30,80,.45); }
.ab-badge-ico { position: relative; width: 64px; height: 64px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 50%; color: var(--c); background: radial-gradient(circle at 30% 25%, #fff, color-mix(in srgb, var(--c) 14%, #fff) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--c) 60%, transparent); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ab-badge-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); transition: inset .5s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.ab-badge:hover .ab-badge-ico { transform: scale(1.06); }
.ab-badge:hover .ab-badge-ico::after { inset: -10px; opacity: .5; }
.ab-badge-ico svg { width: 28px; height: 28px; }
.ab-badge b { font-family: var(--display); font-size: 1.12rem; font-weight: 700; color: #0B0E14; }
.ab-badge small { font-size: .86rem; line-height: 1.5; color: var(--text-soft); }

.ab-hero2 { --hp: 0; }
.ab-hero2 .rf-hero-card { padding: 150px 0 76px; transform: scale(calc(1 - var(--hp) * .06)); border-radius: calc(34px + var(--hp) * 30px); transform-origin: 50% 0; will-change: transform; }
.ab-hero2 .rf-hero-inner { opacity: calc(1 - var(--hp) * 1.1); }
.ab-split .ab-l1 { transform: translateX(calc(var(--hp) * -12%)); }
.ab-split .ab-l2 { transform: translateX(calc(var(--hp) * 12%)); }
.ab-split .ab-l1, .ab-split .ab-l2 { display: block; will-change: transform; }
.ab-hero2 .ab-sub { transform: translateY(calc(var(--hp) * -30px)); }
.ab-hero2 .ab-chips { transform: translateY(calc(var(--hp) * -50px)) scale(calc(1 - var(--hp) * .08)); }
.ab-hero-beam { position: absolute; left: 50%; top: 0; width: 70%; height: 140%; transform: translate(-50%, calc(-30% - var(--hp) * 30%)) rotate(calc(var(--hp) * 20deg)); background: conic-gradient(from 180deg at 50% 0%, transparent 40%, rgba(143,176,255,.18) 50%, transparent 60%); filter: blur(20px); pointer-events: none; z-index: 1; }
@media (max-width: 700px) { .ab-hero2 .rf-hero-card { padding: 116px 0 56px; } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .22s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vtIn .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nav, header.nav, .h-nav { view-transition-name: site-nav; }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation: none; }
@supports not (view-transition-name: none) {
    main { animation: pageIn .5s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), main { animation: none !important; } }

.lg-hero .rf-hero-card { padding: 140px 0 60px; }
.lg-title { font-size: clamp(2.2rem, 4.6vw, 4rem) !important; max-width: 900px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.lg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.lg-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: rgba(226,232,245,.8); font-size: .86rem; font-weight: 600; transition: background .25s, color .25s, border-color .25s; }
.lg-tabs a .st-ico { width: 15px; height: 15px; }
.lg-tabs a:hover { color: #fff; border-color: rgba(143,176,255,.5); }
.lg-tabs a.is-on { background: #fff; color: #0B0E14; border-color: #fff; }
.lg-main { padding: 40px 0 clamp(60px, 8vw, 100px); }
.lg-grid { display: grid; grid-template-columns: 270px 1fr; gap: 28px; align-items: start; }
.lg-aside { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto; scrollbar-width: thin; }
.lg-aside .legal-toc { margin: 0 !important; padding: 18px !important; border-radius: 22px !important; background: #fff !important; border: 1px solid rgba(14,17,22,.06) !important; box-shadow: none !important; }
.lg-aside .legal-toc h3 { margin: 0 0 10px !important; font-size: .74rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted) !important; }
.lg-aside .legal-toc ol { display: grid !important; grid-template-columns: 1fr !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: lg; }
.lg-aside .legal-toc li { counter-increment: lg; margin: 0 !important; }
.lg-aside .legal-toc a { display: flex; gap: 8px; padding: 7px 10px; border-radius: 10px; font-size: .84rem; line-height: 1.35; color: var(--text-soft) !important; text-decoration: none !important; transition: background .2s, color .2s; }
.lg-aside .legal-toc a::before { content: counter(lg, decimal-leading-zero); flex-shrink: 0; font-size: .72rem; font-weight: 700; color: rgba(14,17,22,.3); padding-top: 1px; }
.lg-aside .legal-toc a:hover { background: #F5F6FA; color: #0B0E14 !important; }
.lg-aside .legal-toc a.is-on { background: var(--blue-soft); color: var(--blue-deep) !important; font-weight: 600; }
.lg-aside .legal-toc a.is-on::before { color: var(--blue); }
.lg-card { padding: clamp(24px, 4vw, 52px) !important; border-radius: 28px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 30px 60px -50px rgba(14,30,80,.45); max-width: none !important; margin: 0 !important; color: #374151; font-size: .98rem; line-height: 1.8; }
.lg-card > .legal-toc { display: none; }
.lg-card h2 { scroll-margin-top: 110px; margin: 2.2em 0 .7em !important; padding: 0 !important; border: 0 !important; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.6rem) !important; font-weight: 750; letter-spacing: -0.02em; color: #0B0E14 !important; }
.lg-card h2:first-of-type { margin-top: 1.4em !important; }
.lg-card h3 { margin: 1.6em 0 .5em !important; font-family: var(--display); font-size: 1.1rem !important; font-weight: 700; color: #0B0E14 !important; }
.lg-card p, .lg-card li { color: #374151; }
.lg-card ul, .lg-card ol { padding-left: 1.2em; }
.lg-card li { margin: .35em 0; }
.lg-card li::marker { color: var(--blue); }
.lg-card a { color: var(--blue-deep); text-decoration: underline; text-decoration-color: rgba(58,111,248,.35); text-underline-offset: 3px; }
.lg-card strong { color: #0B0E14; }
.lg-card table { width: 100%; margin: 1.2em 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 16px; border: 1px solid rgba(14,17,22,.08); font-size: .88rem; line-height: 1.5; display: block; overflow-x: auto; }
.lg-card table th { padding: 11px 14px; background: #0B0E14; color: #fff; font-weight: 600; text-align: left; white-space: nowrap; }
.lg-card table td { padding: 11px 14px; border-top: 1px solid rgba(14,17,22,.06); vertical-align: top; }
.lg-card table tr:nth-child(even) td { background: #FAFAF8; }
.lg-card .legal-info-banner { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 22px; padding: 18px 20px; border-radius: 18px; background: #F3F6FF; border: 1px solid rgba(58,111,248,.18); }
.lg-card .legal-info-banner svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--blue); }
.lg-card .legal-info-banner p { margin: 4px 0 0; font-size: .86rem; color: var(--text-soft); }
.lg-card .legal-callout { margin: 1.4em 0; padding: 18px 20px; border-radius: 16px; background: #FFF8EC; border: 1px solid rgba(217,119,6,.2); }
.lg-card .legal-callout strong { color: #92400E; }
.lg-card .legal-contact-card { margin-top: 1em; padding: 22px; border-radius: 18px; background: #F7F7F4; border: 1px solid rgba(14,17,22,.06); }
.lg-card .legal-contact-card h3 { margin-top: 0 !important; }
.lg-cta { margin-top: 30px !important; }
@media (max-width: 960px) { .lg-grid { grid-template-columns: 1fr; } .lg-aside { position: static; max-height: none; } }
.lg-card h2::before { content: none !important; display: none !important; }

.bk-hero2 .rf-hero-card { padding: 130px 0 64px; }
.bk-hero-mark { display: grid; place-items: center; width: 92px; height: 92px; margin: 22px auto 4px; border-radius: 26px; background: linear-gradient(160deg, #3A6FF8, #1E3FB0); box-shadow: 0 24px 50px -20px rgba(58,111,248,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.bk-hero-mark img { width: 56%; height: auto; }
.bk-lockup { width: min(78%, 300px); height: auto; }
.bk-clear-box .bk-lockup { width: 240px; display: block; }
.bk-sizes img { display: block; }
.bk-px16 { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background-image: linear-gradient(rgba(14,17,22,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14,17,22,.06) 1px, transparent 1px); background-size: 4px 4px; background-color: #fff; box-shadow: inset 0 0 0 1px rgba(14,17,22,.08); }
.bk-dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.bk-dl-card { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 20px; background: #fff; border: 1px solid rgba(14,17,22,.07); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.bk-dl-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -32px rgba(14,30,80,.5); }
.bk-dl-prev { display: grid; place-items: center; height: 96px; margin-bottom: 8px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(14,17,22,.07); }
.bk-dl-prev img { max-width: 72%; max-height: 62%; }
.bk-dl-card b { padding: 0 4px; font-size: .92rem; color: #0B0E14; }
.bk-dl-card small { padding: 0 4px; font-size: .78rem; color: var(--text-muted); }
.bk-dl-btns { display: flex; gap: 6px; margin-top: 10px; }
.bk-dl-btns a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; border-radius: 10px; background: #F3F4F6; color: #0B0E14; font-size: .8rem; font-weight: 600; transition: background .25s, color .25s; }
.bk-dl-btns a svg { width: 14px; height: 14px; }
.bk-dl-btns a:hover { background: var(--blue); color: #fff; }
.bk-dl-prev img { width: 72%; height: 62px; max-width: none; max-height: none; object-fit: contain; }

.pd-hero.local-seo-hero h1 { color: #fff; font-family: var(--display); font-size: clamp(2.4rem, 5.4vw, 4.6rem) !important; font-weight: 750; letter-spacing: -0.045em; line-height: 1.02 !important; text-wrap: balance; }
.pd-hero.local-seo-hero h1 .gradient-text { background: linear-gradient(90deg, #8FB0FF, #C9D7FF) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.pd-hero .eyebrow, .pd-hero .local-seo-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important; color: rgba(226,232,245,.85) !important; font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.pd-hero .local-seo-hero-content { text-align: center; max-width: 900px; margin: 0 auto; }
.pd-hero .local-seo-hero-content .hero-actions { justify-content: center; }
.qs-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); vertical-align: middle; }
.qs-ico .st-ico { width: 17px; height: 17px; }

.qt-flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.qt-flow li { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.82); font-size: .9rem; animation: qtFlow 6s infinite; }
.qt-flow li:nth-child(2) { animation-delay: 2s; }
.qt-flow li:nth-child(3) { animation-delay: 4s; }
.qt-flow b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(58,111,248,.22); color: #AFC6FF; font-family: var(--ds-mono); font-size: .72rem; }
@keyframes qtFlow { 0%, 30%, 100% { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.06); } 8%, 22% { border-color: rgba(58,111,248,.7); background: rgba(58,111,248,.16); } }
.qt-hero .ct-hero-card { padding-bottom: 130px; }

.qt-main { position: relative; z-index: 2; margin-top: -76px; padding-bottom: clamp(50px, 7vw, 90px); }
.qt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.qt-card { padding: clamp(22px, 3.2vw, 38px); }
.qt-side { position: sticky; top: 96px; display: grid; gap: 16px; }

.qt-progress { margin-bottom: 26px; }
.qt-progress-bar { height: 4px; border-radius: 99px; background: #EEEDE8; overflow: hidden; }
.qt-progress-bar i { display: block; height: 100%; width: 33.34%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #7FA2FF); transition: width .6s var(--x-ease); }
.qt-progress ol { display: flex; justify-content: space-between; margin: 14px 0 0; padding: 0; list-style: none; }
.qt-progress li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .84rem; font-weight: 500; transition: color .3s; }
.qt-progress li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); font-family: var(--ds-mono); font-size: .72rem; transition: background .35s, color .35s, border-color .35s, transform .35s var(--x-ease); }
.qt-progress li.is-on { color: var(--text); }
.qt-progress li.is-on span { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.08); }
.qt-progress li.is-done span { background: #0E1116; border-color: #0E1116; color: #fff; }

.qt-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qt-viewport { position: relative; transition: height .45s var(--x-ease); }
.qt-step + .qt-step { margin-top: 34px; }
.qt-form.is-js .qt-viewport { overflow: hidden; margin: -6px; padding: 6px; }
.qt-form.is-js .qt-step { display: none; margin-top: 0; }
.qt-form.is-js .qt-step.is-on { display: block; }
.qt-step.from-r { animation: qtFromR .5s var(--x-ease) both; }
.qt-step.from-l { animation: qtFromL .5s var(--x-ease) both; }
@keyframes qtFromR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes qtFromL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.qt-legend { display: block; padding: 0; margin: 0 0 18px; font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1.2; }
.qt-legend small { display: block; margin-bottom: 6px; font-family: var(--ds-mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }

.qt-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qt-type { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; border: 1px solid var(--border); background: #F8F8F5; cursor: pointer; transition: border-color .25s, background .25s, transform .35s var(--x-ease), box-shadow .35s; }
.qt-step.is-on .qt-type { animation: qtPop .5s var(--x-ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes qtPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.qt-type:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 18px 36px -24px rgba(14,30,80,.4); }
.qt-type input, .qt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.qt-type-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; background: #fff; color: var(--blue); border: 1px solid rgba(14,17,22,.06); transition: background .3s, color .3s, transform .45s var(--x-ease); }
.qt-type-ico .st-ico { width: 19px; height: 19px; }
.qt-type b { font-size: .96rem; font-weight: 600; color: var(--text); }
.qt-type small { font-size: .8rem; line-height: 1.4; color: var(--text-muted); }
.qt-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; transform: scale(0); transition: transform .4s var(--x-ease); }
.qt-check .st-ico { width: 13px; height: 13px; }
.qt-type:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(58,111,248,.14); }
.qt-type:has(input:checked) .qt-type-ico { background: var(--blue); color: #fff; transform: rotate(-8deg) scale(1.06); }
.qt-type:has(input:checked) .qt-check { transform: scale(1); }
.qt-type:has(input:focus-visible), .qt-chip:has(input:focus-visible) span { outline: 2px solid var(--blue); outline-offset: 2px; }

.qt-label { display: block; margin: 4px 0 10px; font-size: .84rem; font-weight: 600; color: var(--text-soft); }
.qt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.qt-chip { position: relative; }
.qt-chip span { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border); background: #F8F8F5; font-size: .9rem; font-weight: 500; color: var(--text-soft); cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--x-ease); }
.qt-chip span .st-ico { width: 15px; height: 15px; }
.qt-chip:hover span { transform: translateY(-2px); border-color: rgba(14,17,22,.2); }
.qt-chip input:checked + span { background: #0E1116; border-color: #0E1116; color: #fff; }
.qt-msg { margin-top: 4px; }

.qt-err { display: none; margin: 14px 0 0; color: #B42318; font-size: .86rem; font-weight: 500; }
.qt-step.is-invalid .qt-err { display: block; }
.qt-step.is-shake { animation: qtShake .45s; }
@keyframes qtShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.qt-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; color: var(--text-muted); font-size: .82rem; }
.qt-note .st-ico { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.qt-note a { color: var(--blue); }

.qt-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.qt-nav .qt-submit { margin-left: auto; }
.qt-next, .qt-back { display: none; }
.qt-form.is-js .qt-next { display: inline-flex; margin-left: auto; }
.qt-form.is-js .qt-submit { display: none; }
.qt-form.is-js.at-last .qt-next { display: none; }
.qt-form.is-js.at-last .qt-submit { display: inline-flex; animation: qtPop .45s var(--x-ease) both; }
.qt-form.is-js .qt-back:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-soft); font: inherit; font-weight: 500; cursor: pointer; transition: background .25s, color .25s; }
.qt-back:hover { background: #F1F0EC; color: var(--text); }
.qt-back .st-ico { width: 16px; height: 16px; }
.qt-next i .st-ico { width: 18px; height: 18px; }
.qt-next:hover i { transform: translateX(4px); }

.qt-summary, .qt-next-card { padding: 24px; border-radius: 26px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 40px 80px -50px rgba(14,30,80,.35); }
.qt-summary dl { margin: 14px 0 18px; display: grid; gap: 4px; }
.qt-summary dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.qt-summary dt { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .84rem; }
.qt-summary dt .st-ico { width: 15px; height: 15px; }
.qt-summary dd { margin: 0; font-weight: 600; font-size: .9rem; text-align: right; color: var(--text-muted); transition: color .3s; }
.qt-summary dd.is-set { color: var(--text); }
.qt-summary dd.is-pop { animation: qtSum .5s var(--x-ease); }
@keyframes qtSum { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.qt-meter { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: .82rem; color: var(--text-muted); }
.qt-meter b { font-family: var(--ds-mono); color: var(--text); }
.qt-meter i { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: #EEEDE8; overflow: hidden; }
.qt-meter em { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #22C55E); transition: width .6s var(--x-ease); }
.qt-next-card h3 { margin: 0 0 14px; font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.qt-next-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.qt-next-card li { display: flex; gap: 12px; }
.qt-next-card li > span { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.qt-next-card li > span .st-ico { width: 16px; height: 16px; }
.qt-next-card li b { display: block; font-size: .92rem; }
.qt-next-card li small { color: var(--text-muted); font-size: .82rem; }
.qt-direct { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.qt-direct a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: .88rem; font-weight: 500; text-decoration: none; transition: color .2s; }
.qt-direct a:hover { color: var(--blue); }
.qt-direct .st-ico { width: 15px; height: 15px; }
.qt-faq { padding-top: 0; }

@media (max-width: 1020px) {
    .qt-grid { grid-template-columns: 1fr; }
    .qt-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .qt-types { grid-template-columns: 1fr 1fr; }
    .qt-type small { display: none; }
    .qt-type:last-child { grid-column: 1 / -1; }
    .qt-side { grid-template-columns: 1fr; }
    .qt-progress li { font-size: 0; gap: 0; }
    .qt-flow li { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
    .qt-flow li, .qt-step.from-r, .qt-step.from-l, .qt-step.is-on .qt-type, .qt-step.is-shake { animation: none; }
}

.sm-hero .rf-hero-card { padding-bottom: 80px; }
.sm-search { display: flex; align-items: center; gap: 12px; width: min(560px, 100%); margin: 30px auto 0; padding: 6px 8px 6px 20px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); transition: background .3s, border-color .3s, box-shadow .3s; }
.sm-search:focus-within { background: rgba(255,255,255,.11); border-color: rgba(58,111,248,.8); box-shadow: 0 0 0 5px rgba(58,111,248,.18); }
.sm-search .st-ico { width: 18px; height: 18px; color: rgba(255,255,255,.6); flex-shrink: 0; }
.sm-search input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 1rem; }
.sm-search input::placeholder { color: rgba(255,255,255,.45); }
.sm-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.sm-search kbd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.6); font-family: var(--ds-mono); font-size: .78rem; }

.sm-jump { position: sticky; top: 72px; z-index: 20; margin-top: 18px; }
.sm-jump-in { display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(14,17,22,.06); box-shadow: 0 20px 40px -30px rgba(14,30,80,.4); }
.sm-jump-in::-webkit-scrollbar { display: none; }
.sm-jump a { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 9px 14px; border-radius: 999px; color: var(--text-soft); font-size: .86rem; font-weight: 500; text-decoration: none; transition: background .25s, color .25s; }
.sm-jump a .st-ico { width: 15px; height: 15px; }
.sm-jump a em { font-style: normal; font-family: var(--ds-mono); font-size: .7rem; padding: 2px 7px; border-radius: 99px; background: #F1F0EC; color: var(--text-muted); transition: background .25s, color .25s; }
.sm-jump a:hover { background: #F1F0EC; color: var(--text); }
.sm-jump a.is-on { background: #0E1116; color: #fff; }
.sm-jump a.is-on em { background: rgba(255,255,255,.14); color: #fff; }
.sm-jump a.is-dim { opacity: .35; }

.sm-main { padding: 28px 0 clamp(60px, 8vw, 100px); }
.sm-sec { margin-top: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 28px; background: #fff; border: 1px solid rgba(14,17,22,.06); scroll-margin-top: 150px; }
.sm-sec > header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.sm-sec > header h2 { margin: 0; font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 700; letter-spacing: -.02em; }
.sm-sec > header em { margin-left: auto; font-style: normal; font-family: var(--ds-mono); font-size: .78rem; color: var(--text-muted); padding: 4px 10px; border-radius: 99px; background: #F6F5F1; }
.sm-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--blue-soft); color: var(--blue); }
.sm-ico .st-ico { width: 20px; height: 20px; }

.sm-links { display: grid; gap: 2px 18px; }
.sm-links.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-links.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin: 0 -12px; border-radius: 12px; color: var(--text); font-size: .94rem; text-decoration: none; transition: background .25s, color .25s; }
.sm-link span { flex: 1; min-width: 0; }
.sm-link > .st-ico { width: 15px; height: 15px; color: var(--text-muted); opacity: 0; transform: translate(-6px, 6px); transition: opacity .3s, transform .35s var(--x-ease), color .25s; }
.sm-link:hover { background: #F6F5F1; color: var(--blue); }
.sm-link:hover > .st-ico { opacity: 1; transform: none; color: var(--blue); }
.sm-link i { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: #F6F5F1; color: var(--text-soft); transition: background .25s, color .25s, transform .4s var(--x-ease); }
.sm-link i .st-ico { width: 16px; height: 16px; }
.sm-link:hover i { background: var(--blue); color: #fff; transform: rotate(-8deg); }

.sm-prods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sm-prod { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: #F8F8F5; border: 1px solid rgba(14,17,22,.05); color: var(--text); text-decoration: none; overflow: hidden; transition: transform .4s var(--x-ease), background .3s, box-shadow .4s; }
.sm-prod.is-big { grid-column: span 2; grid-row: span 1; background: #05070D; color: #fff; }
.sm-prods .sm-prod.is-big:nth-child(2) { grid-column: span 3; }
.sm-prod-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--blue); }
.sm-prod.is-big .sm-prod-ico { background: rgba(58,111,248,.2); color: #AFC6FF; }
.sm-prod-ico .st-ico { width: 19px; height: 19px; }
.sm-prod-txt b { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.sm-prod-txt small { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.45; color: var(--text-muted); }
.sm-prod.is-big .sm-prod-txt small { color: rgba(255,255,255,.62); }
.sm-prod > .st-ico { position: absolute; top: 18px; right: 18px; width: 18px; height: 18px; opacity: .4; transition: transform .4s var(--x-ease), opacity .3s; }
.sm-prod:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(14,30,80,.5); }
.sm-prod:not(.is-big):hover { background: #fff; }
.sm-prod:hover > .st-ico { opacity: 1; transform: translate(3px, -3px); }
.sm-prod.is-big::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(58,111,248,.45), transparent 70%); transition: transform .6s var(--x-ease); }
.sm-prod.is-big:hover::after { transform: scale(1.3); }

.sm-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sm-groups.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-group { padding: 18px 20px 10px; border-radius: 20px; background: #FAFAF8; border: 1px solid rgba(14,17,22,.05); }
.sm-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.sm-group h3 .st-ico { width: 15px; height: 15px; }
.sm-group .sm-link { padding: 9px 12px; font-size: .9rem; }

.sm-cities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sm-city { padding: 6px 16px 10px; border-radius: 18px; background: #FAFAF8; border: 1px solid rgba(14,17,22,.05); }
.sm-city .sm-link.is-city { font-weight: 600; }
.sm-districts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 6px; }
.sm-districts a { padding: 5px 11px; border-radius: 99px; background: #fff; border: 1px solid var(--border); color: var(--text-soft); font-size: .8rem; text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.sm-districts a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

[data-sm-item].is-hit { color: var(--blue); }
[data-sm-item].is-hit mark { background: rgba(58,111,248,.16); color: inherit; border-radius: 4px; padding: 0 2px; }
.sm-empty { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 30px 0; color: var(--text-muted); }
.sm-empty .st-ico { width: 18px; height: 18px; }
.sm-empty a { color: var(--blue); }
.sm-xml { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 0; color: var(--text-muted); font-size: .84rem; }
.sm-xml .st-ico { width: 15px; height: 15px; }
.sm-xml a { color: var(--text-soft); }

@media (max-width: 1080px) {
    .sm-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-prod.is-big, .sm-prods .sm-prod.is-big:nth-child(2) { grid-column: span 1; }
    .sm-groups, .sm-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-links.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .sm-prods, .sm-groups, .sm-groups.is-2, .sm-cities, .sm-links.is-2, .sm-links.is-3 { grid-template-columns: 1fr; }
    .sm-search kbd { display: none; }
    .sm-jump { top: 64px; }
}
.sm-empty[hidden], .sm-main [data-sm-item][hidden], .sm-main [data-sm-sec][hidden], .sm-main [data-sm-group][hidden] { display: none !important; }

.sg-hero .rf-hero-card { padding-bottom: 150px; }
.sg-pill { text-decoration: none; color: inherit; transition: border-color .3s, background .3s; }
.sg-pill .st-ico { width: 14px; height: 14px; opacity: .7; transition: transform .35s var(--x-ease); }
.sg-pill:hover { border-color: rgba(58,111,248,.7); }
.sg-pill:hover .st-ico { transform: translate(2px, -2px); }
.sg-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }

.sg-demo { position: relative; z-index: 3; margin-top: -110px; }
.sg-app { max-width: 1000px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(14,17,22,.08); box-shadow: 0 60px 120px -50px rgba(5,7,13,.55); }
.sg-app-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #F3F2EE; border-bottom: 1px solid rgba(14,17,22,.06); }
.sg-app-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D9D7D0; }
.sg-app-bar span { margin-left: 12px; font-family: var(--ds-mono); font-size: .74rem; color: var(--text-muted); }
.sg-app-body { display: grid; grid-template-columns: 190px 1fr; min-height: 340px; }
.sg-app-nav { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: #0B0E16; color: rgba(255,255,255,.6); font-size: .84rem; }
.sg-app-nav b { display: flex; align-items: center; gap: 8px; margin: 0 0 14px 6px; color: #fff; font-family: var(--display); font-size: 1rem; }
.sg-app-nav span { padding: 9px 12px; border-radius: 10px; }
.sg-app-nav span.is-on { background: rgba(58,111,248,.22); color: #fff; }
.sg-app-main { padding: 20px; background: #FAFAF8; }
.sg-app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sg-app-kpis div { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(14,17,22,.06); }
.sg-app-kpis small { display: block; color: var(--text-muted); font-size: .74rem; }
.sg-app-kpis b { display: block; margin-top: 4px; font-family: var(--display); font-size: 1.5rem; letter-spacing: -.02em; }
.sg-app-search { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(14,17,22,.08); color: var(--text-muted); font-size: .82rem; }
.sg-app-search .st-ico { width: 15px; height: 15px; }
.sg-app-table { display: grid; gap: 6px; }
.sg-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(14,17,22,.05); font-size: .84rem; }
.sg-row span:first-child { font-weight: 600; }
.sg-row span:nth-child(3) { font-family: var(--ds-mono); font-size: .76rem; color: var(--text-muted); }
.sg-row em { font-style: normal; font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.sg-row em.is-ok { background: #E9F8EF; color: #15803D; }
.sg-row em.is-warn { background: #FFF4E5; color: #B45309; }
.sg-row em.is-blue { background: var(--blue-soft); color: var(--blue); }
.sg-app .sg-app-kpis div, .sg-app .sg-row { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--x-ease), transform .6s var(--x-ease); }
.sg-app.visible .sg-app-kpis div, .sg-app.visible .sg-row { opacity: 1; transform: none; }
.sg-app.visible .sg-app-kpis div { transition-delay: calc(var(--k, 0) * 90ms + 200ms); }
.sg-app.visible .sg-row { transition-delay: calc(var(--r, 0) * 80ms + 450ms); }
.sg-app.visible .sg-row:nth-child(2) em { animation: sgPulse 2.4s 1.6s infinite; }
@keyframes sgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } 50% { box-shadow: 0 0 0 5px rgba(245,158,11,.18); } }
.sg-demo-note { margin: 12px 0 0; text-align: center; font-size: .76rem; color: var(--text-muted); }

.sg-what-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.sg-what h2 { margin: 12px 0 0; font-family: var(--display); font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.sg-what-txt p { margin: 0 0 16px; color: var(--text-soft); font-size: 1.04rem; line-height: 1.75; }
.sg-other { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--text-soft); font-size: .9rem; text-decoration: none; transition: border-color .25s, color .25s; }
.sg-other .st-ico { width: 15px; height: 15px; color: var(--blue); transition: transform .35s var(--x-ease); }
.sg-other b { color: var(--text); }
.sg-other:hover { border-color: var(--blue); color: var(--blue); }
.sg-other:hover .st-ico { transform: translateX(3px); }

.sg-feats, .sg-steps-sec, .sg-plans-sec, .sg-faq { padding-top: 0; }
.sg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; position: relative; }
.sg-steps li { position: relative; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid rgba(14,17,22,.06); transition-delay: calc(var(--k, 0) * 90ms); }
.sg-steps li > span { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; background: #0E1116; color: #fff; font-family: var(--ds-mono); font-size: .8rem; }
.sg-steps li:first-child > span { background: var(--blue); }
.sg-steps li:not(:last-child)::after { content: ""; position: absolute; top: 41px; right: -12px; width: 12px; height: 2px; background: linear-gradient(90deg, var(--blue), transparent); }
.sg-steps b { display: block; font-size: 1rem; margin-bottom: 6px; }
.sg-steps p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.55; }

.sg-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sg-plan { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid rgba(14,17,22,.06); color: var(--text); text-decoration: none; transition: transform .45s var(--x-ease), box-shadow .45s, border-color .3s; transition-delay: calc(var(--k, 0) * 70ms); }
.sg-plan:hover { transform: translateY(-6px); border-color: rgba(58,111,248,.4); box-shadow: 0 30px 60px -36px rgba(14,30,80,.5); transition-delay: 0s; }
.sg-plan-name { font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.sg-plan small { margin-top: 4px; color: var(--text-muted); font-size: .82rem; min-height: 2.4em; }
.sg-plan-price { margin: 14px 0 16px; color: var(--text-muted); font-size: .9rem; }
.sg-plan-price b { font-family: var(--display); font-size: 1.9rem; letter-spacing: -.03em; color: var(--text); }
.sg-plan ul { display: grid; gap: 9px; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px dashed var(--border); list-style: none; }
.sg-plan li { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--text-soft); }
.sg-plan li .st-ico { width: 15px; height: 15px; color: var(--blue); }
.sg-plan-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--blue); }
.sg-plan-go .st-ico { width: 16px; height: 16px; transition: transform .35s var(--x-ease); }
.sg-plan:hover .sg-plan-go .st-ico { transform: translateX(4px); }
.sg-plans-note { margin: 14px 0 0; text-align: center; font-size: .8rem; color: var(--text-muted); }
.sg-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1020px) {
    .sg-steps, .sg-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-steps li::after { display: none; }
    .sg-what-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .sg-app-body { grid-template-columns: 1fr; }
    .sg-app-nav { display: none; }
    .sg-app-kpis b { font-size: 1.15rem; }
    .sg-row { grid-template-columns: 1fr auto; }
    .sg-row span:nth-child(2), .sg-row span:nth-child(3) { display: none; }
    .sg-demo { margin-top: -90px; }
}
@media (max-width: 560px) {
    .sg-steps, .sg-plans { grid-template-columns: 1fr; }
    .sg-app-kpis { grid-template-columns: 1fr 1fr; }
    .sg-app-kpis div:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sg-app .sg-app-kpis div, .sg-app .sg-row { opacity: 1; transform: none; transition: none; }
}

.pay-hero .rf-hero-card { padding-bottom: 120px; }
.pay-hero .rl-pill .st-ico { width: 14px; height: 14px; }
.pay-title { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.pay-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.pay-steps li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); font-size: .88rem; }
.pay-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.08); font-family: var(--ds-mono); font-size: .74rem; font-weight: 500; }
.pay-steps b .st-ico { width: 14px; height: 14px; }
.pay-steps li.is-done { color: #fff; }
.pay-steps li.is-done b { background: #22C55E; color: #05070D; }
.pay-steps li.is-on { color: #fff; border-color: rgba(58,111,248,.7); background: rgba(58,111,248,.14); }
.pay-steps li.is-on b { background: var(--blue); color: #fff; animation: payPulse 2.2s infinite; }
@keyframes payPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(58,111,248,.5); } 50% { box-shadow: 0 0 0 6px rgba(58,111,248,0); } }

.pay-main { position: relative; z-index: 2; margin-top: -76px; padding-top: 0 !important; }
.pay-main .pay-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.pay-main .quote-v2-side { position: sticky; top: 96px; display: grid; gap: 14px; }
.pay-main .quote-v2-info-card { padding: 24px; border-radius: 26px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 40px 80px -50px rgba(14,30,80,.35); }
.pay-main .quote-v2-info-card h2 { margin: 0 0 8px; font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.pay-main .quote-v2-info-card h3 { margin: 0 0 6px; font-family: var(--display); font-size: 1.02rem; font-weight: 700; }
.pay-main .quote-v2-info-card.soft { background: #05070D; color: rgba(255,255,255,.72); border-color: transparent; }
.pay-main .quote-v2-info-card.soft h3 { color: #fff; }
.pay-main .quote-v2-info-card.soft p { margin: 0; font-size: .88rem; line-height: 1.6; }
.pay-main .quote-v2-info-card strong[style*="orange"], .pay-main [style*="color:var(--orange)"] { color: var(--blue) !important; }
.pay-main .quote-v2-form-card { padding: clamp(22px, 3.2vw, 38px); border-radius: 30px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 50px 100px -50px rgba(14,30,80,.45); }
.pay-main .quote-v2-form-head h2 { margin: 0 0 4px; font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; }
.pay-main .quote-v2-form-head p { margin: 0 0 20px; color: var(--text-muted); }
.pay-main .form-group label { font-size: .84rem; font-weight: 600; color: var(--text-soft); }
.pay-main .form-control { border-radius: 14px; border: 1px solid var(--border); background: #F8F8F5; color: var(--text); padding: 13px 15px; transition: border-color .25s, background .25s, box-shadow .25s; }
.pay-main .form-control:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58,111,248,.14); outline: none; }
.pay-main .btn-primary { border: 0; border-radius: 999px; background: #0E1116; color: #fff; box-shadow: none; transition: background .3s, transform .3s var(--x-ease); }
.pay-main .btn-primary:hover:not([disabled]) { background: var(--blue); transform: translateY(-2px); }
.pay-main .btn-primary svg { width: 18px; height: 18px; }
.pay-main .btn-secondary { border-radius: 999px; background: #fff; border: 1px solid var(--border); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pay-main .btn-secondary .st-ico { width: 16px; height: 16px; }
.pay-main .btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
.pay-main .form-feedback { border-radius: 14px; }

.pay-main .fr-method-option, .pay-main .dc-method-option { border-radius: 16px; background: #F8F8F5; border: 1px solid var(--border); padding: 16px 18px; transition: border-color .25s, background .25s, box-shadow .25s, transform .3s var(--x-ease); }
.pay-main .fr-method-option:hover, .pay-main .dc-method-option:hover { border-color: rgba(58,111,248,.5); transform: translateY(-2px); }
.pay-main .fr-method-option input, .pay-main .dc-method-option input { accent-color: var(--blue); }
.pay-main .fr-method-option.is-checked, .pay-main .dc-method-option.is-checked { background: var(--blue-soft); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(58,111,248,.14); }
.pay-main .fr-bank-info, .pay-main .dc-bank-info { border-radius: 16px; background: #FAFAF8; }
.pay-main .fr-invoice-hint, .pay-main .dc-invoice-hint { border-radius: 14px; background: #FAFAF8; border-style: dashed; }
.pay-main .fr-auth-tabs, .pay-main .dc-auth-tabs { border-radius: 20px; background: #FAFAF8; }
.pay-main .fr-auth-tab.is-active, .pay-main .dc-auth-tab.is-active, .pay-main .fr-auth-tab:hover, .pay-main .dc-auth-tab:hover { color: var(--blue); }
.pay-main .fr-auth-tab.is-active::after, .pay-main .dc-auth-tab.is-active::after { background: var(--blue); }
.pay-main .auth-remember a { color: var(--blue); }

.pay-hero.is-result .rf-hero-card { padding-bottom: 130px; }
.pay-mark { width: 92px; height: 92px; margin: 0 auto 26px; }
.pay-mark svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pay-mark circle { stroke: #22C55E; stroke-dasharray: 151; stroke-dashoffset: 151; fill: rgba(34,197,94,.1); animation: payDraw .8s .3s var(--x-ease) forwards; }
.pay-mark path { stroke: #fff; stroke-dasharray: 40; stroke-dashoffset: 40; animation: payDraw .5s 1s var(--x-ease) forwards; }
.pay-hero.is-fail .pay-mark circle { stroke: #F97316; fill: rgba(249,115,22,.1); }
@keyframes payDraw { to { stroke-dashoffset: 0; } }
.pay-burst { position: absolute; left: 50%; top: 210px; width: 0; height: 0; z-index: 1; pointer-events: none; }
.pay-burst i { position: absolute; width: 8px; height: 8px; border-radius: 3px; background: var(--blue); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: payBurst 1.4s calc(1.1s + var(--d)) var(--x-ease) forwards; }
.pay-burst i:nth-child(3n) { background: #22C55E; border-radius: 50%; }
.pay-burst i:nth-child(3n+1) { background: #8FB0FF; width: 5px; height: 12px; }
@keyframes payBurst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) scale(1); } }
.pay-hero.is-fail .pay-burst { display: none; }

.pay-done { position: relative; z-index: 2; max-width: 620px; margin: -90px auto 0; padding: 0 20px clamp(60px, 8vw, 100px) !important; text-align: center; }
.pay-done > [class$="-thanks-card"] { margin: 0 0 18px; padding: 10px 26px; border-radius: 26px; background: #fff; border: 1px solid rgba(14,17,22,.06); box-shadow: 0 50px 100px -50px rgba(14,30,80,.45); text-align: left; }
.pay-done > [class$="-thanks-cta"] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 24px; border-radius: 999px; background: #0E1116; color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: 0 24px 50px -28px rgba(14,30,80,.6); transition: background .3s, transform .3s var(--x-ease); }
.pay-done > [class$="-thanks-cta"]:hover { background: var(--blue); transform: translateY(-2px); }
.pay-done > [class$="-thanks-cta"] svg, .pay-done > [class$="-thanks-cta"] .st-ico { width: 18px; height: 18px; }
.pay-done > [class$="-thanks-guest"] { margin-bottom: 18px; padding: 18px 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(14,17,22,.06); color: var(--text-soft); font-size: .92rem; line-height: 1.6; }
.pay-done > [class$="-thanks-guest"] a, .pay-done [class$="-thanks-secondary"] a:hover { color: var(--blue); }
.pay-done [class$="-thanks-status"] { background: var(--blue-soft); color: var(--blue); }
.pay-done [class$="-thanks-status"]::before { background: var(--blue); }
.pay-done.is-fail > [class$="-thanks-guest"] { display: none; }

@media (max-width: 1020px) {
    .pay-main .pay-layout { grid-template-columns: 1fr; }
    .pay-main .quote-v2-side { position: static; order: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .pay-mark circle, .pay-mark path { animation: none; stroke-dashoffset: 0; }
    .pay-burst { display: none; }
}
.pay-main .quote-v2-info-card, .pay-main .quote-v2-form-card { border-top: 1px solid rgba(14,17,22,.06) !important; }
.pay-main .quote-v2-info-card::before, .pay-main .quote-v2-form-card::before { display: none !important; }
.pay-main .fr-method-option, .pay-main .dc-method-option { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; }
.pay-done.is-fail > [class$="-thanks-cta"] { width: auto; padding: 18px 34px; }

.qt-form .ct-row { margin-bottom: 14px; }
.qt-form .ct-row + .qt-err, .qt-form .ct-row:last-of-type { margin-bottom: 0; }
@keyframes av3Up { to { opacity: 1; transform: none; } }
.er2 { padding: 10px; }
.er2-card { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: calc(100vh - 20px); padding: 140px 0 70px; border-radius: 34px; color: #fff; background: radial-gradient(900px 600px at 50% 115%, #142A66 0%, rgba(20,42,102,0) 65%), radial-gradient(600px 400px at 88% 12%, rgba(124,58,237,.18), rgba(124,58,237,0) 60%), #04060C; }

.er2-sky { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.er2-layer { position: absolute; inset: -40px; transition: translate .8s var(--x-ease); }
.er2-layer i { position: absolute; width: 1px; height: 1px; border-radius: 50%; background: #fff; opacity: .35; animation: er2Tw var(--t) ease-in-out infinite; animation-delay: calc(var(--t) * -.41); }
.er2-layer.l2 i { width: 2px; height: 2px; opacity: .55; }
.er2-layer.l3 i { width: 3px; height: 3px; opacity: .8; box-shadow: 0 0 8px 1px rgba(175,198,255,.6); }
@keyframes er2Tw { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
.er2-shoot { position: absolute; width: 140px; height: 1.5px; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); opacity: 0; transform: rotate(-24deg); animation: er2Shoot 7s linear infinite; }
.er2-shoot.s1 { top: 14%; left: 62%; animation-delay: 1.2s; }
.er2-shoot.s2 { top: 32%; left: 12%; animation-delay: 4.1s; }
.er2-shoot.s3 { top: 6%; left: 30%; animation-delay: 6.3s; animation-duration: 9s; }
@keyframes er2Shoot { 0% { opacity: 0; translate: 0 0; } 2% { opacity: 1; } 9% { opacity: 0; translate: -260px 120px; } 100% { opacity: 0; translate: -260px 120px; } }
.er2-planet { position: absolute; right: -120px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #2A4BB8 0%, #142A66 45%, #070B18 75%); box-shadow: inset -40px -30px 80px rgba(0,0,0,.6), 0 0 120px rgba(58,111,248,.25); opacity: .55; transition: translate .8s var(--x-ease); }
.er2-planet::after { content: ""; position: absolute; inset: 38% -22%; border-radius: 50%; border: 2px solid rgba(143,176,255,.25); transform: rotate(-16deg); }

.er2-code { position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -54%); font-family: var(--display); font-weight: 800; font-size: clamp(14rem, 40vw, 34rem); line-height: 1; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px rgba(143,176,255,.16); white-space: nowrap; user-select: none; pointer-events: none; transition: translate .8s var(--x-ease); animation: er2Code 1.6s .1s var(--x-ease) both; }
@keyframes er2Code { from { opacity: 0; transform: translate(-50%, -48%) scale(.94); } to { opacity: 1; transform: translate(-50%, -54%); } }

.er2-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.er2-in { opacity: 0; transform: translateY(18px); animation: av3Up .9s calc(var(--d, 0) * 110ms + 500ms) var(--x-ease) forwards; }
.er2 .rl-pill code { font-family: var(--ds-mono); font-size: .78rem; color: #AFC6FF; }

.er2-astro { position: relative; width: 150px; height: 150px; margin-bottom: 28px; transition: translate 1s var(--x-ease); }
.er2-tether { position: absolute; right: 76%; top: 58%; width: 220px; height: 130px; overflow: visible; pointer-events: none; }
.er2-tether path { fill: none; stroke: rgba(175,198,255,.4); stroke-width: 1.5; stroke-dasharray: 4 6; animation: er2Dash 1.6s linear infinite; }
@keyframes er2Dash { to { stroke-dashoffset: -20; } }
.er2-mark { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle, rgba(58,111,248,.35), rgba(58,111,248,0) 70%); cursor: pointer; animation: er2Drift 9s ease-in-out infinite; }
.er2-mark img { position: absolute; left: 50%; top: 50%; width: 64%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 36px rgba(58,111,248,.6)); transition: transform .4s var(--x-ease); }
.er2-mark:hover img { transform: translate(-50%, -50%) scale(1.08); }
.er2-mark:focus-visible { outline: 2px solid #8FB0FF; outline-offset: 6px; }
@keyframes er2Drift { 0% { transform: translate(0, 0) rotate(-10deg); } 25% { transform: translate(10px, -14px) rotate(6deg); } 50% { transform: translate(-4px, -22px) rotate(14deg); } 75% { transform: translate(-12px, -6px) rotate(-2deg); } 100% { transform: translate(0, 0) rotate(-10deg); } }
.er2-mark.is-launch { animation: er2Launch 1.6s var(--x-ease); }
@keyframes er2Launch { 0% { transform: translate(0, 0) rotate(-10deg); } 15% { transform: translate(0, 10px) rotate(0) scale(.92); } 55% { transform: translate(0, -110vh) rotate(0) scale(.6); opacity: 1; } 56% { opacity: 0; transform: translate(0, 110vh) scale(.6); } 57% { opacity: 1; } 100% { transform: translate(0, 0) rotate(-10deg); } }
.er2-hint { position: absolute; left: 100%; top: 18%; margin-left: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: .72rem; color: rgba(255,255,255,.7); white-space: nowrap; opacity: 0; animation: er2Hint 6s 3s ease-in-out infinite; pointer-events: none; }
@keyframes er2Hint { 0%, 100% { opacity: 0; translate: -6px 0; } 15%, 60% { opacity: 1; translate: 0 0; } }
.er2-pop { position: fixed; z-index: 9999; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; }

.er2-title { margin: 22px 0 14px; font-family: var(--display); font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 750; letter-spacing: -.05em; line-height: 1; }
.er2-title .x-mask { display: inline-block; overflow: hidden; padding-bottom: .08em; }
.er2-sub { max-width: 560px; margin: 0 auto; color: rgba(255,255,255,.66); font-size: 1.06rem; line-height: 1.6; }
.er2-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 30px; }
.er2-search { display: flex; align-items: center; gap: 10px; width: 280px; height: 52px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); transition: border-color .3s, box-shadow .3s, width .5s var(--x-ease); }
.er2-search:focus-within { width: 340px; border-color: rgba(58,111,248,.8); box-shadow: 0 0 0 5px rgba(58,111,248,.18); }
.er2-search .st-ico { width: 17px; height: 17px; color: rgba(255,255,255,.55); flex-shrink: 0; }
.er2-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; }
.er2-search input::placeholder { color: rgba(255,255,255,.45); }
.er2-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

.er2-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 760px; margin-top: 26px; }
.er2-chips small { width: 100%; margin-bottom: 4px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.er2-chips a { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.82); font-size: .86rem; text-decoration: none; transition: background .25s, border-color .25s, transform .3s var(--x-ease); }
.er2-chips a:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-2px); }

.er2-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08); }
.er2-links a { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.78); font-size: .9rem; font-weight: 500; text-decoration: none; transition: background .25s, color .25s, border-color .25s, transform .3s var(--x-ease); }
.er2-links a span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(58,111,248,.18); color: #AFC6FF; transition: background .25s, color .25s, transform .4s var(--x-ease); }
.er2-links a .st-ico { width: 15px; height: 15px; }
.er2-links a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; transform: translateY(-2px); }
.er2-links a:hover span { background: var(--blue); color: #fff; transform: rotate(-10deg); }

@media (max-width: 640px) {
    .er2 { padding: 6px; }
    .er2-card { border-radius: 26px; padding: 110px 0 40px; }
    .er2-astro { width: 110px; height: 110px; margin-bottom: 18px; }
    .er2-tether, .er2-hint { display: none; }
    .er2-search, .er2-search:focus-within { width: 100%; }
    .er2-actions { width: 100%; }
    .er2-actions .rl-btn { width: 100%; justify-content: center; }
    .er2-planet { width: 300px; height: 300px; right: -120px; bottom: -120px; }
    .er2 .rl-pill code { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .er2-layer i, .er2-shoot, .er2-mark, .er2-tether path, .er2-hint, .er2-code, .er2-in { animation: none !important; opacity: 1; transform: none; }
    .er2-code { transform: translate(-50%, -54%); }
}

.float-buttons[hidden] { display: none !important; }
.au4.auth-page { display: block; min-height: 100vh; padding: 12px; background: #F6F5F1; }
.au4.auth-page::before, .au4.auth-page::after { display: none !important; }
.au4 .auth-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 12px; max-width: none; min-height: calc(100vh - 24px); margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }

.au4 .auth-form-side { order: 1; display: flex; flex-direction: column; min-height: calc(100vh - 24px); padding: 18px clamp(20px, 5vw, 76px) 22px; background: none; border: 0; }
.au4-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.au4-logo { display: inline-flex; align-items: center; height: 34px; }
.au4-logo img { height: 34px; width: auto; }
.au4-logo .is-dark { display: none; }
.au4-back { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: var(--text-soft); font-size: .88rem; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.au4-back .st-ico { width: 16px; height: 16px; transition: transform .3s var(--x-ease); }
.au4-back:hover { background: #ECEBE6; color: var(--text); }
.au4-back:hover .st-ico { transform: translateX(-3px); }

.au4 .auth-card { width: 100%; max-width: 420px; margin: auto; padding: 48px 0; background: none; border: 0; box-shadow: none; opacity: 1; transform: none; }
.au4 .auth-card.auth-card-wide { max-width: 560px; }
.au4 .auth-card > * { animation: au4Up .7s var(--x-ease) both; }
.au4 .auth-card > *:nth-child(2) { animation-delay: .06s; }
.au4 .auth-card > *:nth-child(3) { animation-delay: .12s; }
.au4 .auth-card > *:nth-child(4) { animation-delay: .18s; }
.au4 .auth-card > *:nth-child(n+5) { animation-delay: .24s; }
@keyframes au4Up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.au4 .auth-head { margin: 0 0 30px; text-align: left; }
.au4 .auth-title { margin: 0; font-family: var(--display); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.05; color: var(--text); }
.au4 .auth-head p { margin: 10px 0 0 !important; color: var(--text-muted) !important; font-size: 1rem !important; line-height: 1.5; }

.au4 .form-feedback { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; font-size: .9rem; line-height: 1.45; }
.au4 .form-feedback.error { background: #FDECEC; color: #B42318; border: 1px solid #F8CFCB; }
.au4 .form-feedback.success { background: #E9F8EF; color: #15803D; border: 1px solid #BFE8CF; }

.au4-form { display: grid; gap: 18px; }
.au4-group label, .au4 .form-group label { display: block; margin: 0 0 8px; font-size: .86rem; font-weight: 600; color: var(--text); }
.au4-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.au4-label-row a { margin-bottom: 8px; color: var(--blue); font-size: .84rem; font-weight: 500; text-decoration: none; }
.au4-label-row a:hover { text-decoration: underline; }
.au4-group input, .au4 .form-control { width: 100%; height: 50px; min-height: 50px; padding: 0 16px; border-radius: 12px !important; border: 1px solid #E0DED6 !important; background: #fff !important; color: var(--text); font: inherit; font-size: 1rem; outline: none; box-shadow: 0 1px 2px rgba(14,17,22,.04); transition: border-color .2s, box-shadow .2s; }
.au4 textarea.form-control { height: auto; padding: 12px 16px; }
.au4-group input::placeholder, .au4 .form-control::placeholder { color: #A9A7A0; }
.au4-group input:hover, .au4 .form-control:hover { border-color: #CFCDC5 !important; }
.au4-group input:focus, .au4 .form-control:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 4px rgba(58,111,248,.14) !important; }
.au4-pass { position: relative; }
.au4-pass input { padding-right: 52px; }
.au4 .auth-toggle-pass { position: absolute !important; right: 6px !important; top: 50% !important; left: auto !important; transform: translateY(-50%) !important; display: grid; place-items: center; width: 38px; height: 38px; margin: 0 !important; padding: 0; border: 0; border-radius: 9px; background: none; color: #8E8C85; cursor: pointer; transition: background .2s, color .2s; }
.au4 .auth-toggle-pass:hover { background: #F1F0EC; color: var(--text); }
.au4 .auth-toggle-pass svg { width: 19px; height: 19px; }
.au4-check { position: relative; display: inline-flex; align-items: center; gap: 10px; width: max-content; color: var(--text-soft); font-size: .92rem; cursor: pointer; user-select: none; }
.au4-check input { position: absolute; opacity: 0; pointer-events: none; }
.au4-check > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #CFCDC5; background: #fff; color: #fff; transition: background .2s, border-color .2s; }
.au4-check > i .st-ico { width: 13px; height: 13px; transform: scale(0); transition: transform .3s var(--x-ease); }
.au4-check input:checked + i { background: #0E1116; border-color: #0E1116; }
.au4-check input:checked + i .st-ico { transform: scale(1); }
.au4-check input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }

.au4-btn, .au4 .auth-card .auth-submit, .au4 .auth-card .btn-primary { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; min-height: 52px; margin-top: 4px; border: 0 !important; border-radius: 12px !important; background: #0E1116 !important; color: #fff !important; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 12px 24px -14px rgba(14,17,22,.7) !important; transition: background .25s, transform .25s var(--x-ease), box-shadow .25s; }
.au4-btn:hover, .au4 .auth-card .auth-submit:hover, .au4 .auth-card .btn-primary:hover { background: var(--blue) !important; transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(58,111,248,.8) !important; }
.au4-btn .st-ico { width: 18px; height: 18px; transition: transform .3s var(--x-ease); }
.au4-btn:hover .st-ico { transform: translateX(4px); }
.au4-btn[disabled], .au4 .auth-submit[disabled] { opacity: .7; cursor: wait; transform: none; }
.au4-alt { margin: 26px 0 0; color: var(--text-muted); font-size: .94rem; }
.au4-alt a, .au4 .auth-footer a, .au4 .auth-forgot, .au4 .auth-remember a { color: var(--blue) !important; font-weight: 600; text-decoration: none; }
.au4-alt a:hover, .au4 .auth-footer a:hover { text-decoration: underline; }
.au4 .auth-footer { margin-top: 24px; padding: 0; border: 0; text-align: left; color: var(--text-muted); font-size: .94rem; }
.au4 .auth-options { margin: 4px 0 18px; }
.au4 .auth-remember input:checked + .auth-checkmark { background: #0E1116; border-color: #0E1116; }
.au4 .otp-input:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 4px rgba(58,111,248,.14) !important; }
.au4 .form-row { gap: 14px; }
.au4 .form-group { margin-bottom: 16px; }

.au4-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; color: #9A988F; font-size: .8rem; }
.au4-foot a { color: #9A988F; text-decoration: none; transition: color .2s; }
.au4-foot a:hover { color: var(--text); }

.au4-show { order: 2; position: sticky; top: 12px; display: flex; flex-direction: column; height: calc(100vh - 24px); min-height: 560px; padding: 30px 34px 32px; border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff; background: #05070D; }
.au4-show-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 480px at 85% 0%, rgba(58,111,248,.32), rgba(58,111,248,0) 60%), radial-gradient(800px 520px at 0% 110%, rgba(16,32,79,.95), rgba(16,32,79,0) 60%); animation: au4Glow 12s ease-in-out infinite alternate; }
@keyframes au4Glow { from { opacity: .8; transform: scale(1); } to { opacity: 1; transform: scale(1.08) translateY(-10px); } }
.au4-show-mark { position: absolute; right: -70px; bottom: -80px; z-index: -1; width: 360px; height: auto; opacity: .045; }
.au4-show-head { display: flex; justify-content: flex-start; }
.au4-show-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: rgba(255,255,255,.78); }
.au4-show-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: au4Live 2s infinite; }
@keyframes au4Live { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

.au4-stage { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 0; perspective: 1800px; }
.au4-browser { width: min(100%, 700px); border-radius: 14px; overflow: hidden; background: #0E1320; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02); transform: rotateX(var(--rx, 4deg)) rotateY(var(--ry, -6deg)); transform-style: preserve-3d; transition: transform .9s var(--x-ease); animation: au4Rise 1.1s .15s var(--x-ease) both; }
@keyframes au4Rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
.au4-bar { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #151A28; border-bottom: 1px solid rgba(255,255,255,.06); }
.au4-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.au4-bar > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 14px; border-radius: 7px; background: rgba(255,255,255,.06); font-family: var(--ds-mono); font-size: .72rem; color: rgba(255,255,255,.6); white-space: nowrap; transition: opacity .3s; }
.au4-shots { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0B0F19; }
.au4-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 7s ease-out; }
.au4-shots img.is-on { opacity: 1; transform: scale(1); }
.au4-cap { display: inline-flex; align-items: center; gap: 14px; align-self: center; padding: 10px 12px 10px 18px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; text-decoration: none; transition: background .25s, border-color .25s; }
.au4-cap span { display: flex; flex-direction: column; }
.au4-cap b { font-size: .95rem; font-weight: 600; }
.au4-cap small { font-size: .78rem; color: rgba(255,255,255,.55); }
.au4-cap .st-ico { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: rgba(255,255,255,.08); transition: transform .3s var(--x-ease), background .25s; }
.au4-cap:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.au4-cap:hover .st-ico { transform: translate(2px, -2px); background: var(--blue); }
.au4-cap.is-swap span { animation: au4Swap .6s var(--x-ease); }
@keyframes au4Swap { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

.au4-show-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.au4-quote { margin: 0; max-width: 420px; font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; color: #fff; }
.au4-quote em { font-style: normal; background: linear-gradient(90deg, #8FB0FF, #C4B5FD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au4-dots { display: flex; gap: 6px; padding-bottom: 6px; }
.au4-dots button { position: relative; width: 26px; height: 4px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; cursor: pointer; transition: width .4s var(--x-ease); }
.au4-dots button::before { content: ""; position: absolute; inset: -10px 0; }
.au4-dots button i { position: absolute; inset: 0; width: 0; background: #fff; border-radius: inherit; }
.au4-dots button.is-on { width: 44px; }
.au4-dots button.is-on i { animation: au4Prog var(--au4-dur, 5s) linear forwards; }
.au4-dots.is-paused button.is-on i { animation-play-state: paused; }
@keyframes au4Prog { to { width: 100%; } }

@media (max-width: 1024px) {
    .au4 .auth-container { grid-template-columns: 1fr; }
    .au4-show { display: none; }
    .au4 .auth-form-side { min-height: calc(100vh - 24px); padding: 14px 16px 18px; }
    .au4 .auth-card { padding: 36px 4px; }
}
@media (max-width: 480px) {
    .au4.auth-page { padding: 0; }
    .au4 .auth-form-side { min-height: 100vh; }
    .au4-back span { display: none; }
    .au4 .form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .au4 .auth-card > *, .au4-browser, .au4-show-glow, .au4-show-kicker i { animation: none !important; }
    .au4-shots img { transition: opacity .3s; transform: none !important; }
}
.au4-bar { display: none; } .au4-browser { border-radius: 16px; background: transparent; border-color: rgba(255,255,255,.08); } .au4-shots { aspect-ratio: 1600 / 960; background: #0B0F19; }
.au4 .auth-country-trigger, .au4 .auth-phone-flag-btn { height: 50px; border-radius: 12px !important; border: 1px solid #E0DED6 !important; background: #fff !important; box-shadow: 0 1px 2px rgba(14,17,22,.04); transition: border-color .2s, box-shadow .2s; }
.au4 .auth-country-trigger:hover, .au4 .auth-phone-flag-btn:hover { border-color: #CFCDC5 !important; }
.au4 .auth-country-trigger:focus-visible, .au4 .auth-phone-flag-btn:focus-visible { border-color: var(--blue) !important; box-shadow: 0 0 0 4px rgba(58,111,248,.14); outline: none; }
.au4 .auth-country-dropdown, .au4 .auth-phone-dropdown { border-radius: 14px; border: 1px solid #E0DED6; box-shadow: 0 24px 48px -20px rgba(14,30,80,.35); }
@media (max-width: 1024px) { .au4 .auth-card { margin: 28px auto auto; } }
.au4 .auth-card > * { animation-fill-mode: backwards !important; }
.au4 .auth-phone-row, .au4 .auth-country-wrap, .au4 .form-group:has(.auth-country-trigger), .au4 .form-group:has(.auth-phone-flag-btn) { position: relative; z-index: 30; }
.au4 .auth-country-dropdown, .au4 .auth-phone-dropdown { z-index: 60 !important; }
.au4-logo, .au4-logo img { height: 46px; }

.au4 .auth-phone-row, .au4 .auth-country-wrap, .au4 .form-group:has(.auth-country-trigger), .au4 .form-group:has(.auth-phone-flag-btn) { z-index: auto; }
.au4 .form-group { position: relative; }
.au4 .form-group:has(.auth-phone-dropdown[style*="flex"]), .au4 .form-group:has(.auth-country-dropdown[style*="flex"]), .au4 .form-group:has(.auth-phone-dropdown.is-open), .au4 .form-group:has(.auth-country-dropdown.is-open) { z-index: 100; }

.au6 { order: 2; position: sticky; top: 12px; display: flex; flex-direction: column; height: calc(100vh - 24px); min-height: 560px; padding: 34px 38px 36px; border-radius: 28px; overflow: hidden; isolation: isolate; color: #fff; background: #04060C; clip-path: inset(0 round 28px); }
.au6-aurora { position: absolute; inset: -20%; z-index: -3; filter: blur(70px); opacity: .9; }
.au6-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.au6-aurora .a1 { left: 18%; top: 14%; width: 55%; height: 50%; background: radial-gradient(circle, rgba(58,111,248,.55), rgba(58,111,248,0) 70%); animation: au6A 18s ease-in-out infinite alternate; }
.au6-aurora .a2 { right: 8%; top: 36%; width: 50%; height: 46%; background: radial-gradient(circle, rgba(124,58,237,.38), rgba(124,58,237,0) 70%); animation: au6A 22s ease-in-out -6s infinite alternate-reverse; }
.au6-aurora .a3 { left: 26%; bottom: 0; width: 60%; height: 40%; background: radial-gradient(circle, rgba(14,165,233,.28), rgba(14,165,233,0) 70%); animation: au6A 26s ease-in-out -12s infinite alternate; }
@keyframes au6A { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -5%) scale(1.12); } 100% { transform: translate(-5%, 4%) scale(.95); } }
.au6-grain { position: absolute; inset: 0; z-index: -2; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.au6-spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 40%), rgba(143,176,255,.14), rgba(143,176,255,0) 70%); }
.au6:hover .au6-spot { opacity: 1; }

.au6-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.au6-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.au6-fallback { width: min(46%, 300px); height: auto; opacity: .95; filter: drop-shadow(0 30px 60px rgba(58,111,248,.45)); transition: opacity .8s; }
.au6.is-live .au6-fallback { opacity: 0; pointer-events: none; }
.au6-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .74rem; color: rgba(255,255,255,.6); white-space: nowrap; opacity: 0; transition: opacity .6s; pointer-events: none; }
.au6.is-live .au6-hint { opacity: 1; animation: au6Hint 7s 3.4s ease-in-out both; }
.au6.is-touched .au6-hint { opacity: 0 !important; animation: none; }
@keyframes au6Hint { 0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

.au6-copy { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.au6-copy h2 { margin: 0; max-width: 520px; font-family: var(--display); font-size: clamp(2rem, 3.2vw, 3.1rem); font-weight: 750; letter-spacing: -.045em; line-height: 1; color: #fff; }
.au6-copy h2 span, .au6-copy h2 em { display: inline-block; animation: au6Up 1s var(--x-ease) both; }
.au6-copy h2 em { font-style: normal; background: linear-gradient(90deg, #8FB0FF, #C4B5FD 60%, #7DD3FC); -webkit-background-clip: text; background-clip: text; color: transparent; animation-delay: .12s; }
@keyframes au6Up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.au6-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.au6-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: rgba(255,255,255,.75); animation: au6Up .8s var(--x-ease) both; }
.au6-chips li:nth-child(2) { animation-delay: .06s; } .au6-chips li:nth-child(3) { animation-delay: .12s; } .au6-chips li:nth-child(4) { animation-delay: .18s; }
.au6-chips .st-ico { width: 14px; height: 14px; color: #AFC6FF; }

@media (max-width: 1024px) { .au6 { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .au6-aurora i, .au6-copy h2 span, .au6-copy h2 em, .au6-chips li { animation: none !important; }
}

html body .quote-popup-card { border: 1px solid rgba(14,17,22,.07) !important; border-radius: 22px !important; background: #fff !important; color: #0E1116 !important; box-shadow: 0 30px 70px -30px rgba(14,30,80,.45), 0 2px 8px rgba(14,17,22,.05) !important; overflow: hidden; }
html body .quote-popup-glow { display: none !important; }
html body .quote-popup-icon { border-radius: 14px !important; background: #EEF3FF !important; color: #3A6FF8 !important; box-shadow: none !important; }
html body .quote-popup-title { font-family: var(--display, 'Bricolage Grotesque', sans-serif) !important; font-weight: 700 !important; letter-spacing: -.02em; color: #0E1116 !important; }
html body .quote-popup-text { color: #6B6F77 !important; }
html body .quote-popup-btn { border-radius: 999px !important; background: #0E1116 !important; color: #fff !important; box-shadow: none !important; transition: background .25s !important; }
html body .quote-popup-btn:hover { background: #3A6FF8 !important; transform: none !important; }

html body .server-order-overlay { background: rgba(5,7,13,.45) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
html body .server-order-modal { border: 0 !important; border-radius: 26px !important; background: #fff !important; color: #0E1116 !important; box-shadow: 0 60px 120px -40px rgba(5,7,13,.55) !important; }
html body .server-order-close { border: 0 !important; border-radius: 12px !important; background: #F3F2EE !important; color: #4A4F58 !important; transition: background .2s, color .2s; }
html body .server-order-close:hover { background: #EEF3FF !important; color: #3A6FF8 !important; }
html body .server-order-plan-icon { border-radius: 14px !important; background: #EEF3FF !important; color: #3A6FF8 !important; }
html body .server-order-head h3 { font-family: var(--display, 'Bricolage Grotesque', sans-serif) !important; font-weight: 700 !important; letter-spacing: -.02em; color: #0E1116 !important; }
html body .server-order-head p, html body .server-order-modal label { color: #6B6F77 !important; }
html body .server-order-plan-info { border: 0 !important; border-radius: 16px !important; background: #F6F5F1 !important; color: #0E1116 !important; }
html body .server-order-modal .form-control { border: 1px solid #E0DED6 !important; border-radius: 12px !important; background: #fff !important; color: #0E1116 !important; }
html body .server-order-modal .form-control:focus { border-color: #3A6FF8 !important; box-shadow: 0 0 0 4px rgba(58,111,248,.14) !important; }
html body .server-order-modal .btn-primary, html body .server-order-modal button[type="submit"] { border: 0 !important; border-radius: 12px !important; background: #0E1116 !important; color: #fff !important; box-shadow: none !important; }
html body .server-order-modal .btn-primary:hover, html body .server-order-modal button[type="submit"]:hover { background: #3A6FF8 !important; }

html body .dc-video-modal-backdrop { background: rgba(5,7,13,.86) !important; }
html body .dc-video-modal-box { border-radius: 24px !important; box-shadow: 0 60px 140px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06) !important; }
html body .dc-video-modal-close { width: 44px !important; height: 44px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 14px !important; background: rgba(5,7,13,.6) !important; }
html body .dc-video-modal-close:hover { background: #3A6FF8 !important; border-color: #3A6FF8 !important; }
html body .dc-video-modal-title { font-family: var(--display, 'Bricolage Grotesque', sans-serif) !important; }

html body .server-order-modal .form-feedback, html body .tkt-modal .form-feedback { border-radius: 12px !important; }
.x-numbers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.x-num, .x-num:first-child { display: flex; flex-direction: column; align-items: center; padding: 6px 20px; text-align: center; border-left: 1px solid var(--border); }
.x-num:first-child { border-left: 0; }
@media (max-width: 760px) {
    .x-numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .x-num, .x-num:first-child { padding: 6px 12px; }
    .x-num:nth-child(odd) { border-left: 0; }
    .x-num:nth-child(even) { border-left: 1px solid var(--border); }
}
.pb-flag.is-half .pb-body { display: flex; flex-direction: column; align-items: stretch; }
.pb-flag.is-half .pb-copy { flex: 1; }
.pb-flag.is-half .p-flag-cta { margin-top: auto; padding-top: 10px; }