/* SoftBuilders — redesigned internal pages (MLM plans, products). Loaded after sb-design.css. */

/* ---------- Plan explorer ---------- */
.sb-explorer { display: grid; grid-template-columns: minmax(240px, 0.75fr) minmax(0, 2fr); gap: 1.2rem; align-items: stretch; }
.sb-plan-tabs { display: grid; gap: 0.5rem; align-content: start; }
.sb-plan-tabs button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.35s var(--ease);
}
.sb-plan-tabs button > i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(41, 171, 226, 0.1);
    color: var(--sky);
    transition: background 0.3s, color 0.3s;
}
.sb-plan-tabs strong { display: block; font: 600 0.98rem var(--font-display); color: var(--text-primary); }
.sb-plan-tabs small { display: block; font-size: 0.8rem; color: var(--text-tertiary); }
.sb-plan-tabs button:hover { border-color: var(--border-highlight); transform: translateX(3px); }
.sb-plan-tabs button[aria-selected="true"] {
    border-color: rgba(41, 171, 226, 0.5);
    background: linear-gradient(120deg, rgba(41, 171, 226, 0.16), rgba(18, 183, 106, 0.08));
}
.sb-plan-tabs button[aria-selected="true"] > i { background: linear-gradient(135deg, var(--sky), var(--emerald)); color: #04121f; }
.sb-plan-tabs button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.sb-plan-tabs button[aria-selected="true"].timing::after { animation: tab-timer var(--plan-ms, 6000ms) linear forwards; }
.sb-explorer.paused .sb-plan-tabs button::after { animation-play-state: paused; }
@keyframes tab-timer { to { transform: scaleX(1); } }

.sb-plan-stage { display: grid; grid-template-rows: auto auto; overflow: hidden; }
.sb-plan-canvas {
    position: relative;
    height: clamp(260px, 32vw, 360px);
    border-bottom: 1px solid var(--border-subtle);
    background:
        radial-gradient(circle at 50% 0%, rgba(41, 171, 226, 0.12), transparent 60%),
        linear-gradient(var(--border-subtle) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px) 0 0 / 32px 32px;
}
.sb-plan-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pd-edge { fill: none; stroke: var(--line-color); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s var(--ease); transition-delay: var(--d, 0s); }
.pd-flow { fill: none; stroke: url(#pdFlow); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0.06 0.14; opacity: 0; transition: opacity 0.6s 1.4s; animation: pd-flow 1.6s linear infinite; }
@keyframes pd-flow { to { stroke-dashoffset: -0.2; } }
.pd-node { opacity: 0; scale: 0.2; transform-box: fill-box; transform-origin: center; transition: opacity 0.5s var(--ease), scale 0.6s var(--ease); transition-delay: var(--d, 0s); }
.pd-node circle.ring { fill: var(--ink-2); stroke-width: 2.5; }
body.light-mode .pd-node circle.ring { fill: #fff; }
.pd-node text { font: 600 11px var(--font-body); fill: var(--text-primary); text-anchor: middle; dominant-baseline: central; }
.pd-node.root circle.ring { fill: url(#pdRoot); stroke-width: 0; filter: drop-shadow(0 0 10px rgba(41, 171, 226, 0.7)); }
body.light-mode .pd-node.root circle.ring { fill: url(#pdRoot); }
.pd-node.root text { fill: #04121f; font-size: 12px; }
.pd-node.lead circle.halo { fill: none; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.8; animation: ring-spin 12s linear infinite; transform-box: fill-box; transform-origin: center; }
.pd-label { font: 500 10px var(--font-mono); fill: var(--text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; transition: opacity 0.6s 1.2s; }
.sb-plan-canvas.drawn .pd-edge { stroke-dashoffset: 0; }
.sb-plan-canvas.drawn .pd-node { opacity: 1; scale: 1; }
.sb-plan-canvas.drawn .pd-flow,
.sb-plan-canvas.drawn .pd-label { opacity: 1; }

.sb-plan-info { padding: clamp(1.3rem, 2.5vw, 1.9rem); }
.sb-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.sb-plan-head h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.03em; }
.sb-plan-info > p { margin: 0.7rem 0 1.1rem; }
.sb-plan-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 0 0 1.3rem; }
.sb-plan-facts > div { padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--bg-card); }
.sb-plan-facts dt { font: 500 0.68rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.sb-plan-facts dd { margin: 0.25rem 0 0; font-size: 0.93rem; color: var(--text-primary); }
.sb-plan-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sb-plan-info .swap-in { animation: plan-in 0.5s var(--ease) both; }
@keyframes plan-in { from { opacity: 0; transform: translateY(8px); } }

/* Compliance badges */
.sb-risk {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font: 600 0.74rem var(--font-body);
    white-space: nowrap;
    color: var(--emerald);
    background: rgba(18, 183, 106, 0.12);
    border: 1px solid rgba(18, 183, 106, 0.3);
}
.sb-risk::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sb-risk.warn { color: var(--amber); background: rgba(255, 164, 27, 0.12); border-color: rgba(255, 164, 27, 0.32); }
.sb-risk.risk { color: var(--coral); background: rgba(255, 77, 94, 0.12); border-color: rgba(255, 77, 94, 0.32); }

/* ---------- Comparison table ---------- */
.sb-compare-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 22px; background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.sb-compare { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 0.92rem; }
.sb-compare th,
.sb-compare td { padding: 0.95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.sb-compare thead th { font: 500 0.7rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); background: rgba(41, 171, 226, 0.05); }
.sb-compare tbody tr { transition: background 0.25s; }
.sb-compare tbody tr:hover { background: rgba(41, 171, 226, 0.06); }
.sb-compare tbody tr:last-child th,
.sb-compare tbody tr:last-child td { border-bottom: 0; }
.sb-compare tbody th { position: sticky; left: 0; background: var(--bg-body); font-weight: 600; white-space: nowrap; }
.sb-compare tbody th a { color: var(--text-primary); }
.sb-compare tbody th a:hover { color: var(--sky); }
.sb-compare tbody th i { width: 20px; margin-right: 0.35rem; color: var(--sky); }
.sb-compare td { color: var(--text-secondary); }
.sb-dots { letter-spacing: 0.2em; color: var(--sky); }
.sb-table-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 1rem 0 0; font-size: 0.85rem; color: var(--text-tertiary); }

/* ---------- Feature tiles ---------- */
.sb-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--border-subtle); border-radius: 24px; overflow: hidden; background: var(--border-subtle); }
.sb-feature { padding: 1.6rem; background: var(--bg-body); transition: background 0.3s; }
.sb-feature:hover { background: rgba(41, 171, 226, 0.06); }
.sb-feature i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 13px; background: rgba(41, 171, 226, 0.12); color: var(--sky); transition: transform 0.5s var(--ease); }
.sb-feature:nth-child(4n+2) i { background: rgba(18, 183, 106, 0.12); color: var(--emerald); }
.sb-feature:nth-child(4n+3) i { background: rgba(255, 164, 27, 0.13); color: var(--amber); }
.sb-feature:nth-child(4n) i { background: rgba(255, 77, 94, 0.12); color: var(--coral); }
.sb-feature:hover i { transform: rotate(-10deg) scale(1.08); }
.sb-feature h3 { margin: 0 0 0.35rem; font-size: 1.06rem; }
.sb-feature p { margin: 0; font-size: 0.9rem; }

/* ---------- Hybrid plan ---------- */
.sb-hybrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(1.8rem, 4vw, 3rem);
    background:
        radial-gradient(circle at 0% 0%, rgba(41, 171, 226, 0.2), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(255, 164, 27, 0.14), transparent 50%),
        linear-gradient(160deg, rgba(230, 238, 248, 0.06), rgba(230, 238, 248, 0.015));
}
.sb-hybrid h2 { margin: 0 0 0.8rem; }
.sb-hybrid > div > p { margin: 0 0 1.6rem; }
.sb-hybrid-steps { list-style: none; display: grid; gap: 0.8rem; }
.sb-hybrid-steps li { position: relative; display: flex; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid var(--border-subtle); background: var(--bg-glass); }
.sb-hybrid-steps li + li::before { content: ""; position: absolute; left: 2.35rem; top: -0.8rem; height: 0.8rem; border-left: 1.5px dashed var(--line-color); }
.sb-hybrid-steps span { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-gradient); color: #04121f; font: 700 0.9rem var(--font-display); }
.sb-hybrid-steps h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.sb-hybrid-steps p { margin: 0; font-size: 0.9rem; }

.sb-compliance { display: flex; gap: 0.9rem; margin-top: 1.4rem; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid rgba(255, 164, 27, 0.3); background: rgba(255, 164, 27, 0.07); }
.sb-compliance i { margin-top: 0.2rem; color: var(--amber); font-size: 1.1rem; }
.sb-compliance p { margin: 0; font-size: 0.93rem; }
.sb-compliance a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
    .sb-explorer { grid-template-columns: 1fr; }
    .sb-plan-tabs { grid-template-columns: repeat(3, 1fr); }
    .sb-plan-tabs small { display: none; }
    .sb-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .sb-hybrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sb-plan-tabs { grid-template-columns: repeat(2, 1fr); }
    .sb-plan-tabs button { padding: 0.65rem 0.75rem; gap: 0.6rem; }
    .sb-plan-tabs button > i { width: 32px; height: 32px; font-size: 0.85rem; }
    .sb-plan-facts { grid-template-columns: 1fr; }
    .sb-feature-grid { grid-template-columns: 1fr; }
}

/* ---------- Products: flagships ---------- */
.sb-flagships { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 1.1rem; }
.sb-flag { display: flex; flex-direction: column; padding: 1.7rem; color: inherit; overflow: hidden; }
.sb-flag-xl { grid-row: span 2; }
.sb-flag:hover { transform: translateY(-4px); border-color: var(--border-highlight); box-shadow: var(--glass-edge), var(--shadow-glow); }
.sb-flag-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; }
.sb-flag-top .portfolio-chip { margin: 0; }
.sb-flag-meta { font: 500 0.72rem var(--font-mono); color: var(--text-tertiary); letter-spacing: 0.06em; }
.sb-flag h3 { margin: 1rem 0 0.4rem; font-size: 1.35rem; }
.sb-flag-xl h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.sb-flag p { margin: 0; font-size: 0.97rem; }

.sb-mock { margin-top: 1.3rem; border-radius: 16px; border: 1px solid var(--border-subtle); background: rgba(3, 8, 18, 0.55); }
body.light-mode .sb-mock { background: rgba(11, 20, 38, 0.04); }

/* MLM mock: wallet, tree, feed */
.sb-mock-mlm { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.1rem; }
.mm-wallet { padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, rgba(41, 171, 226, 0.2), rgba(18, 183, 106, 0.12)); }
.mm-wallet small { display: block; font: 500 0.66rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.mm-wallet strong { display: block; margin: 0.25rem 0; font: 700 1.5rem var(--font-display); color: var(--text-primary); }
.mm-wallet span { font-size: 0.78rem; color: var(--emerald); }
.mm-tree { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; min-height: 110px; }
.mm-tree i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--emerald); background: var(--ink-2); animation: mm-pop 3.6s var(--ease) infinite; }
body.light-mode .mm-tree i { background: #fff; }
.mm-tree i.r { grid-column: 2 / span 2; width: 22px; height: 22px; border: 0; background: var(--sky); box-shadow: 0 0 16px rgba(41, 171, 226, 0.7); animation: none; }
.mm-tree i:nth-child(2) { grid-column: 1 / span 2; grid-row: 2; animation-delay: 0.2s; }
.mm-tree i:nth-child(3) { grid-column: 3 / span 2; grid-row: 2; animation-delay: 0.4s; }
.mm-tree i:nth-child(n+4) { grid-row: 3; border-color: var(--amber); }
.mm-tree i:nth-child(4) { animation-delay: 0.6s; }
.mm-tree i:nth-child(5) { animation-delay: 0.8s; }
.mm-tree i:nth-child(6) { animation-delay: 1s; }
.mm-tree i:nth-child(7) { animation-delay: 1.2s; }
@keyframes mm-pop { 0%, 8% { transform: scale(0); opacity: 0; } 18%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0.25; } }
.mm-feed { grid-column: 1 / -1; display: grid; gap: 0.4rem; overflow: hidden; height: 88px; }
.mm-feed span { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.6rem; border-radius: 10px; background: rgba(230, 238, 248, 0.04); font-size: 0.8rem; color: var(--text-secondary); animation: mm-feed 7.5s var(--ease) infinite; }
.mm-feed span:nth-child(2) { animation-delay: 2.5s; }
.mm-feed span:nth-child(3) { animation-delay: 5s; }
.mm-feed b { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; }
.mm-feed span:nth-child(2) b { background: var(--amber); }
.mm-feed span:nth-child(3) b { background: var(--sky); }
@keyframes mm-feed { 0% { opacity: 0.35; } 6%, 30% { opacity: 1; background: rgba(41, 171, 226, 0.1); } 40%, 100% { opacity: 0.35; background: rgba(230, 238, 248, 0.04); } }

/* ERP mock: bar chart */
.sb-mock-erp { display: flex; align-items: flex-end; gap: 6%; height: 120px; padding: 1rem 1.2rem; }
.sb-mock-erp i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--sky), rgba(41, 171, 226, 0.25)); transform-origin: bottom; animation: bar-grow 4s var(--ease) infinite; }
.sb-mock-erp i:nth-child(even) { background: linear-gradient(180deg, var(--emerald), rgba(18, 183, 106, 0.25)); }
.sb-mock-erp i:nth-child(2) { animation-delay: 0.1s; }
.sb-mock-erp i:nth-child(3) { animation-delay: 0.2s; }
.sb-mock-erp i:nth-child(4) { animation-delay: 0.3s; }
.sb-mock-erp i:nth-child(5) { animation-delay: 0.4s; }
.sb-mock-erp i:nth-child(6) { animation-delay: 0.5s; }
.sb-mock-erp i:nth-child(7) { animation-delay: 0.6s; }
@keyframes bar-grow { 0% { transform: scaleY(0.15); } 30%, 80% { transform: scaleY(1); } 100% { transform: scaleY(0.15); } }

/* Code mock */
.sb-mock-code { position: relative; display: grid; gap: 0.25rem; padding: 1rem 1.2rem; font: 0.8rem/1.5 var(--font-mono); color: #c5d2e3; background: rgba(3, 8, 18, 0.85); }
body.light-mode .sb-mock-code { background: #0a1428; }
.sb-mock-code span { opacity: 0; animation: code-line 6s steps(1) infinite; white-space: nowrap; overflow: hidden; }
.sb-mock-code em { font-style: normal; color: #5fd0ff; }
.sb-mock-code span:nth-child(2) { animation-delay: 0.5s; }
.sb-mock-code span:nth-child(3) { animation-delay: 1s; }
.sb-mock-code span:nth-child(4) { animation-delay: 1.5s; }
@keyframes code-line { 0% { opacity: 0; } 4%, 90% { opacity: 1; } 100% { opacity: 0; } }
.mc-verified { position: absolute; right: 0.9rem; bottom: 0.8rem; display: inline-flex; gap: 0.35rem; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(47, 224, 122, 0.14); color: #2fe07a; font: 600 0.72rem var(--font-body); opacity: 0; animation: verified 6s var(--ease) infinite; }
@keyframes verified { 0%, 35% { opacity: 0; transform: scale(0.8); } 42%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* ---------- Products: catalogue ---------- */
.sb-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.sb-filters button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font: 500 0.88rem var(--font-body);
    cursor: pointer;
    transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.sb-filters button span { padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(230, 238, 248, 0.08); font: 500 0.7rem var(--font-mono); }
.sb-filters button:hover { border-color: var(--border-highlight); color: var(--text-primary); }
.sb-filters button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(120deg, var(--sky), var(--emerald)); color: #04121f; font-weight: 600; }
.sb-filters button[aria-pressed="true"] span { background: rgba(4, 18, 31, 0.18); }

.sb-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.sb-product {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(160deg, rgba(230, 238, 248, 0.06), rgba(230, 238, 248, 0.015));
    color: inherit;
    transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
body.light-mode .sb-product { background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.65)); }
.sb-product[hidden] { display: none; }
.sb-product.pop { animation: product-pop 0.5s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes product-pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.sb-product:hover { transform: translateY(-4px); border-color: var(--border-highlight); box-shadow: var(--glass-edge), var(--shadow-glow); }
.sb-product-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(41, 171, 226, 0.12); color: var(--sky); transition: transform 0.5s var(--ease); }
.sb-product[data-cat="industry"] .sb-product-icon { background: rgba(18, 183, 106, 0.12); color: var(--emerald); }
.sb-product[data-cat="commerce"] .sb-product-icon { background: rgba(255, 164, 27, 0.13); color: var(--amber); }
.sb-product[data-cat="web3"] .sb-product-icon { background: rgba(155, 140, 255, 0.14); color: #a99cff; }
.sb-product[data-cat="services"] .sb-product-icon { background: rgba(255, 77, 94, 0.12); color: var(--coral); }
.sb-product:hover .sb-product-icon { transform: rotate(-10deg) scale(1.08); }
.sb-product-cat { margin-top: 1rem; font: 500 0.68rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.sb-product h3 { margin: 0.3rem 0 0.4rem; font-size: 1.15rem; }
.sb-product p { margin: 0 0 1rem; font-size: 0.9rem; }
.sb-product ul { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.1rem; list-style: none; }
.sb-product li { padding: 0.18rem 0.55rem; border-radius: 8px; border: 1px solid var(--border-subtle); font-size: 0.74rem; color: var(--text-secondary); }

@media (max-width: 1024px) {
    .sb-flagships { grid-template-columns: 1fr 1fr; }
    .sb-flag-xl { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
    .sb-flagships { grid-template-columns: 1fr; }
    .sb-mock-mlm { grid-template-columns: 1fr; }
    .sb-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.4rem; }
    .sb-filters button { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-mock-code span, .mc-verified { opacity: 1; }
}

/* ---------- Portfolio: proof band ---------- */
.sb-proof-band { padding: 0 0 1rem; }
.sb-proof-band .sb-stats { margin: 0; }

/* ---------- Portfolio: case files ---------- */
.sb-casefiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.sb-casefile {
    --tone: var(--sky);
    --tone-bg: rgba(41, 171, 226, 0.14);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(160deg, rgba(230, 238, 248, 0.06), rgba(230, 238, 248, 0.015));
    overflow: hidden;
    transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
body.light-mode .sb-casefile { background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.65)); }
.sb-casefile.tone-emerald { --tone: var(--emerald); --tone-bg: rgba(18, 183, 106, 0.14); }
.sb-casefile.tone-amber { --tone: var(--amber); --tone-bg: rgba(255, 164, 27, 0.15); }
.sb-casefile.tone-coral { --tone: var(--coral); --tone-bg: rgba(255, 77, 94, 0.14); }
.sb-casefile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 45%, transparent); box-shadow: var(--glass-edge), 0 24px 60px -30px var(--tone); }
.sb-casefile[hidden] { display: none; }
.sb-casefile.pop { animation: product-pop 0.5s var(--ease) both; animation-delay: var(--d, 0s); }

.sb-casefile-art {
    position: relative;
    display: grid;
    place-items: center;
    height: 120px;
    background:
        radial-gradient(circle at 20% 0%, var(--tone-bg), transparent 60%),
        linear-gradient(var(--border-subtle) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px) 0 0 / 24px 24px;
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
}
.sb-casefile-art > i {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--tone-bg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent), 0 0 40px -6px var(--tone);
    color: var(--tone);
    font-size: 1.4rem;
    transition: transform 0.6s var(--ease);
}
.sb-casefile:hover .sb-casefile-art > i { transform: rotate(-8deg) scale(1.08); }

.sb-casefile-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.6rem; }
.sb-casefile-body .portfolio-chip { align-self: flex-start; color: var(--tone); border-color: color-mix(in srgb, var(--tone) 35%, transparent); background: var(--tone-bg); }
.sb-casefile h3 { margin: 0 0 0.4rem; font-size: 1.35rem; }
.sb-casefile-sum { margin: 0 0 1.1rem; font-size: 0.97rem; color: var(--text-primary); }
.sb-casefile .sb-case { margin-bottom: 1.3rem; font-size: 0.9rem; }
.sb-casefile .sb-case dd:last-of-type { color: var(--text-secondary); }
.sb-casefile-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: auto; }
.sb-casefile-metrics > div { padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--bg-card); }
.sb-casefile-metrics strong { display: block; font: 700 clamp(1.5rem, 2.6vw, 2rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--tone); }
.sb-casefile-metrics span { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--text-secondary); }
.sb-casefile-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1rem 0 0; list-style: none; }
.sb-casefile-tags li { padding: 0.18rem 0.55rem; border-radius: 8px; border: 1px solid var(--border-subtle); font: 500 0.72rem var(--font-mono); color: var(--text-tertiary); }

/* Featured case spans the full width with a live chart */
.sb-casefile.is-featured { grid-column: 1 / -1; flex-direction: row; }
.sb-casefile.is-featured .sb-casefile-art { flex: 0 0 42%; height: auto; min-height: 280px; border-bottom: 0; border-right: 1px solid var(--border-subtle); }
.sb-casefile.is-featured h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.sb-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; }
.sb-spark .area { fill: color-mix(in srgb, var(--tone) 18%, transparent); opacity: 0; transition: opacity 1s 1s; }
.sb-spark .line { fill: none; stroke: var(--tone); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--tone)); transition: stroke-dashoffset 1.8s var(--ease) 0.3s; }
.sb-casefile.in .sb-spark .line,
.sb-casefile:not(.sb-reveal) .sb-spark .line { stroke-dashoffset: 0; }
.sb-casefile.in .sb-spark .area,
.sb-casefile:not(.sb-reveal) .sb-spark .area { opacity: 1; }
.sb-casefile.is-featured .sb-casefile-art > i { margin-bottom: 30%; }

@media (max-width: 900px) {
    .sb-casefiles { grid-template-columns: 1fr; }
    .sb-casefile.is-featured { flex-direction: column; }
    .sb-casefile.is-featured .sb-casefile-art { flex: none; min-height: 180px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

/* ---------- About: story + founder ---------- */
.sb-about-story { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sb-about-story p { font-size: 1.06rem; }
.sb-founder-card {
    margin: 0;
    padding: clamp(2rem, 4vw, 2.8rem);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 164, 27, 0.2), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(41, 171, 226, 0.22), transparent 55%),
        linear-gradient(160deg, rgba(230, 238, 248, 0.07), rgba(230, 238, 248, 0.02));
    transition: transform 0.3s ease-out;
}
.sb-quote-mark { display: block; margin-bottom: 1.2rem; font-size: 2.2rem; color: var(--amber); }
.sb-founder-card blockquote p { margin: 0 0 1.8rem; font: 500 clamp(1.2rem, 2vw, 1.55rem)/1.4 var(--font-display); letter-spacing: -0.015em; color: var(--text-primary); }
.sb-founder-card figcaption { display: flex; align-items: center; gap: 0.9rem; }
.sb-founder-card figcaption small { display: block; font-size: 0.85rem; color: var(--text-tertiary); }
.sb-founder-mark { width: 48px; height: 48px; padding: 6px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 1px var(--border-subtle); animation: ring-spin 30s linear infinite; }
body.light-mode .sb-founder-mark { background: #fff; }

/* ---------- About: pillars ---------- */
.sb-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.sb-pillar { position: relative; padding: 1.8rem; border-radius: 22px; border: 1px solid var(--border-subtle); background: var(--bg-card); overflow: hidden; transition: transform 0.45s var(--ease), border-color 0.3s; }
.sb-pillar::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(41, 171, 226, 0.22), transparent 70%); transition: transform 0.6s var(--ease); }
.sb-pillar:nth-child(2)::after { background: radial-gradient(circle, rgba(18, 183, 106, 0.22), transparent 70%); }
.sb-pillar:nth-child(3)::after { background: radial-gradient(circle, rgba(255, 77, 94, 0.2), transparent 70%); }
.sb-pillar:hover { transform: translateY(-4px); border-color: var(--border-highlight); }
.sb-pillar:hover::after { transform: scale(1.5); }
.sb-pillar i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.1rem; border-radius: 14px; background: rgba(41, 171, 226, 0.13); color: var(--sky); }
.sb-pillar:nth-child(2) i { background: rgba(18, 183, 106, 0.13); color: var(--emerald); }
.sb-pillar:nth-child(3) i { background: rgba(255, 77, 94, 0.12); color: var(--coral); }
.sb-pillar h3 { margin: 0 0 0.45rem; font-size: 1.3rem; }
.sb-pillar p { margin: 0; }

/* ---------- About: journey (line draws as you scroll) ---------- */
.sb-journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; list-style: none; padding-top: 2.4rem; }
.sb-journey::before,
.sb-journey::after { content: ""; position: absolute; top: 0.6rem; left: 0; right: 0; height: 2px; border-radius: 2px; }
.sb-journey::before { background: var(--border-subtle); }
.sb-journey::after { background: var(--brand-gradient); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); transition: transform 0.2s linear; }
.sb-journey li { position: relative; padding: 1.4rem; border-radius: 20px; border: 1px solid var(--border-subtle); background: var(--bg-card); transition: border-color 0.4s, transform 0.5s var(--ease); }
.sb-journey li::before { content: ""; position: absolute; top: -2.1rem; left: 1.4rem; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-2); border: 2px solid var(--line-color); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; }
body.light-mode .sb-journey li::before { background: #fff; }
.sb-journey li.lit { border-color: var(--border-highlight); }
.sb-journey li.lit::before { background: var(--sky); border-color: var(--sky); box-shadow: 0 0 0 5px rgba(41, 171, 226, 0.18); }
.sb-journey li:last-child.lit::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 5px rgba(255, 164, 27, 0.2); }
.sb-journey time { font: 600 0.95rem var(--font-mono); color: var(--sky); }
.sb-journey li:last-child time { color: var(--amber); }
.sb-journey h3 { margin: 0.5rem 0 0.35rem; font-size: 1.15rem; }
.sb-journey p { margin: 0; font-size: 0.93rem; }

/* ---------- About: working with us + globe ---------- */
.sb-about-work { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sb-work-list { display: grid; gap: 1.1rem; margin-top: 1.6rem; list-style: none; }
.sb-work-list li { display: flex; gap: 1rem; }
.sb-work-list i { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: rgba(18, 183, 106, 0.12); color: var(--emerald); }
.sb-work-list h3 { margin: 0 0 0.2rem; font-size: 1.08rem; }
.sb-work-list p { margin: 0; font-size: 0.94rem; }
.sb-globe { padding: 1.4rem; }
.sb-globe svg { display: block; width: 100%; height: auto; }
.g-grid { fill: none; stroke: var(--line-color); stroke-width: 0.8; transform-origin: 200px 150px; animation: globe-turn 18s linear infinite; }
@keyframes globe-turn { 50% { transform: scaleX(0.92); } }
.g-arcs path { fill: none; stroke: var(--sky); stroke-width: 1.4; stroke-dasharray: 4 6; opacity: 0.8; animation: arc-flow 2.4s linear infinite; }
.g-arcs path:nth-child(even) { stroke: var(--emerald); animation-duration: 3s; }
@keyframes arc-flow { to { stroke-dashoffset: -40; } }
.g-pins circle { fill: var(--amber); animation: pin-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.g-pins circle:nth-child(2) { animation-delay: 0.4s; }
.g-pins circle:nth-child(3) { animation-delay: 0.8s; }
.g-pins circle:nth-child(4) { animation-delay: 1.2s; }
.g-pins circle:nth-child(5) { animation-delay: 1.6s; }
.g-pins circle:nth-child(6) { animation-delay: 2s; }
@keyframes pin-pulse { 50% { transform: scale(1.6); opacity: 0.6; } }
.g-home { fill: var(--coral); }
.g-home-ring { fill: none; stroke: var(--coral); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: status-ping 2s var(--ease) infinite; }
.sb-globe-caption { display: grid; gap: 0.2rem; margin-top: 0.6rem; text-align: center; }
.sb-globe-caption strong { font: 600 1.1rem var(--font-display); }
.sb-globe-caption span { font-size: 0.86rem; color: var(--text-secondary); }

@media (max-width: 1024px) {
    .sb-about-story, .sb-about-work { grid-template-columns: 1fr; }
    .sb-journey { grid-template-columns: repeat(2, 1fr); }
    .sb-journey::before, .sb-journey::after { display: none; }
    .sb-journey li::before { display: none; }
    .sb-journey { padding-top: 0; }
}
@media (max-width: 720px) {
    .sb-pillars, .sb-journey { grid-template-columns: 1fr; }
}

/* ---------- Blog index ---------- */
.sb-blog-count { margin: 1.4rem 0 0; font: 500 0.78rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }

.sb-post-featured,
.sb-post {
    --tone: var(--sky);
    --tone-bg: rgba(41, 171, 226, 0.14);
    position: relative;
    color: inherit;
    border-radius: 24px;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(160deg, rgba(230, 238, 248, 0.06), rgba(230, 238, 248, 0.015));
    transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
}
body.light-mode .sb-post-featured,
body.light-mode .sb-post { background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.65)); }
.tone-coral { --tone: var(--coral); --tone-bg: rgba(255, 77, 94, 0.14); }
.tone-amber { --tone: var(--amber); --tone-bg: rgba(255, 164, 27, 0.15); }
.tone-emerald { --tone: var(--emerald); --tone-bg: rgba(18, 183, 106, 0.14); }
.sb-post-featured:hover,
.sb-post:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 45%, transparent); box-shadow: var(--glass-edge), 0 24px 60px -30px var(--tone); }

.sb-post-featured { display: grid; grid-template-columns: 0.8fr 1.2fr; overflow: hidden; margin-bottom: 2rem; }
.sb-post-art {
    display: grid;
    place-items: center;
    min-height: 260px;
    background:
        radial-gradient(circle at 30% 20%, var(--tone-bg), transparent 65%),
        linear-gradient(var(--border-subtle) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px) 0 0 / 26px 26px;
    border-right: 1px solid var(--border-subtle);
}
.sb-post-art i { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 26px; background: var(--tone-bg); color: var(--tone); font-size: 2.2rem; box-shadow: 0 0 60px -10px var(--tone); animation: art-float 6s ease-in-out infinite; }
@keyframes art-float { 50% { transform: translateY(-8px) rotate(-4deg); } }
.sb-post-featured-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.6rem, 3.5vw, 2.6rem); }
.sb-post-featured-body .portfolio-chip { align-self: flex-start; color: var(--tone); background: var(--tone-bg); border-color: color-mix(in srgb, var(--tone) 35%, transparent); }
.sb-post-featured h2 { margin: 0 0 0.7rem; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.sb-post-featured p { margin: 0 0 1rem; }

.sb-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.sb-post { display: flex; flex-direction: column; padding: 1.4rem 1.5rem; }
.sb-post[hidden] { display: none; }
.sb-post.pop { animation: product-pop 0.5s var(--ease) both; animation-delay: var(--d, 0s); }
.sb-post-top { display: inline-flex; align-items: center; gap: 0.55rem; font: 500 0.7rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone); }
.sb-post-top i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--tone-bg); font-size: 0.85rem; transition: transform 0.5s var(--ease); }
.sb-post:hover .sb-post-top i { transform: rotate(-10deg) scale(1.08); }
.sb-post h3 { margin: 1rem 0 0.5rem; font-size: 1.15rem; line-height: 1.3; }
.sb-post p { margin: 0 0 1.2rem; font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sb-post-meta { margin-top: auto; font: 500 0.74rem var(--font-mono); color: var(--text-tertiary); }

@media (max-width: 820px) {
    .sb-post-featured { grid-template-columns: 1fr; }
    .sb-post-art { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

/* ---------- Features: product tour ---------- */
.sb-tour { display: grid; grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.6fr); gap: 1.4rem; align-items: center; }
.sb-tour-tabs { display: grid; gap: 0.5rem; }
.sb-tour-tabs button {
    display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.9rem 1rem; border-radius: 16px;
    border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); text-align: left; cursor: pointer;
    position: relative; overflow: hidden; transition: border-color 0.3s, background 0.3s, transform 0.35s var(--ease);
}
.sb-tour-tabs button > i { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: rgba(41, 171, 226, 0.1); color: var(--sky); }
.sb-tour-tabs strong { display: block; font: 600 0.98rem var(--font-display); color: var(--text-primary); }
.sb-tour-tabs small { display: block; font-size: 0.8rem; color: var(--text-tertiary); }
.sb-tour-tabs button:hover { border-color: var(--border-highlight); transform: translateX(3px); }
.sb-tour-tabs button[aria-selected="true"] { border-color: rgba(41, 171, 226, 0.5); background: linear-gradient(120deg, rgba(41, 171, 226, 0.16), rgba(18, 183, 106, 0.08)); }
.sb-tour-tabs button[aria-selected="true"] > i { background: linear-gradient(135deg, var(--sky), var(--emerald)); color: #04121f; }
.sb-tour-tabs button::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--brand-gradient); transform: scaleX(0); transform-origin: 0 50%; }
.sb-tour-tabs button.timing::after { animation: tab-timer 5000ms linear forwards; }
.sb-tour.paused .sb-tour-tabs button::after { animation-play-state: paused; }

.sb-device { position: relative; border-radius: 22px; border: 1px solid var(--border-subtle); background: rgba(3, 8, 18, 0.7); box-shadow: var(--glass-edge), var(--shadow-lg); overflow: hidden; min-height: 330px; }
body.light-mode .sb-device { background: #0a1428; }
.sb-device-bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(230, 238, 248, 0.08); }
.sb-device-url { flex: 1; max-width: 260px; padding: 0.25rem 0.8rem; border-radius: 999px; background: rgba(230, 238, 248, 0.06); font: 500 0.72rem var(--font-mono); color: #8494ab; }
.sb-screen { position: absolute; inset: 52px 0 0; padding: 1.3rem; opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); pointer-events: none; color: #e6eef8; }
.sb-screen.is-on { opacity: 1; transform: none; }
.sb-screen small { display: block; font: 500 0.66rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8494ab; }
.sb-screen b { font-family: var(--font-display); }

.scr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.scr-kpis > div { padding: 0.8rem; border-radius: 12px; background: rgba(230, 238, 248, 0.05); }
.scr-kpis b { display: block; margin: 0.2rem 0; font-size: 1.3rem; }
.scr-kpis em { font-style: normal; font-size: 0.75rem; color: #2fe07a; }
.scr-chart { display: flex; align-items: flex-end; gap: 4%; height: 150px; margin-top: 1rem; padding: 0.8rem; border-radius: 12px; background: rgba(230, 238, 248, 0.03); }
.scr-chart i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #29abe2, rgba(41, 171, 226, 0.2)); transform: scaleY(0.1); transform-origin: bottom; transition: transform 0.8s var(--ease); }
.scr-chart i:nth-child(even) { background: linear-gradient(180deg, #12b76a, rgba(18, 183, 106, 0.2)); }
.is-on .scr-chart i { transform: none; }
.scr-chart i:nth-child(2) { transition-delay: 0.05s; } .scr-chart i:nth-child(3) { transition-delay: 0.1s; } .scr-chart i:nth-child(4) { transition-delay: 0.15s; }
.scr-chart i:nth-child(5) { transition-delay: 0.2s; } .scr-chart i:nth-child(6) { transition-delay: 0.25s; } .scr-chart i:nth-child(7) { transition-delay: 0.3s; } .scr-chart i:nth-child(8) { transition-delay: 0.35s; }

.scr-balance { padding: 1.1rem; border-radius: 14px; background: linear-gradient(135deg, rgba(41, 171, 226, 0.28), rgba(18, 183, 106, 0.16)); }
.scr-balance b { display: block; margin: 0.25rem 0 0.8rem; font-size: 1.9rem; }
.scr-balance span { display: flex; gap: 0.5rem; }
.scr-balance em { padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(4, 18, 31, 0.4); font: 600 0.75rem var(--font-body); font-style: normal; }
.scr-tx { display: grid; gap: 0.45rem; margin-top: 0.9rem; list-style: none; }
.scr-tx li { display: flex; justify-content: space-between; flex-direction: row-reverse; padding: 0.55rem 0.8rem; border-radius: 10px; background: rgba(230, 238, 248, 0.04); font-size: 0.82rem; color: #a3b2c7; opacity: 0; transform: translateX(10px); transition: opacity 0.4s, transform 0.5s var(--ease); }
.is-on .scr-tx li { opacity: 1; transform: none; }
.scr-tx li:nth-child(2) { transition-delay: 0.1s; } .scr-tx li:nth-child(3) { transition-delay: 0.2s; } .scr-tx li:nth-child(4) { transition-delay: 0.3s; }
.scr-tx .in { color: #2fe07a; } .scr-tx .out { color: #ff6b78; }

.scr-tree { position: relative; height: 170px; }
.scr-tree span { position: absolute; display: grid; place-items: center; translate: -50% 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #12b76a; background: #0f1d38; font: 600 0.72rem var(--font-body); scale: 0; transition: scale 0.5s var(--ease); }
.is-on .scr-tree span { scale: 1; }
.scr-tree .t0 { left: 50%; top: 0; width: 42px; height: 42px; border: 0; background: linear-gradient(135deg, #5fd0ff, #12b76a); color: #04121f; }
.scr-tree .t1 { top: 66px; transition-delay: 0.15s; } .scr-tree .t1.a { left: 30%; } .scr-tree .t1.b { left: 70%; }
.scr-tree .t2 { top: 132px; border-color: #ffa41b; transition-delay: 0.3s; }
.scr-tree .t2.a { left: 18%; } .scr-tree .t2.b { left: 42%; } .scr-tree .t2.c { left: 58%; } .scr-tree .t2.d { left: 82%; }
.scr-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.4rem; }
.scr-legs > div { padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(230, 238, 248, 0.05); }
.scr-legs b { font-size: 1.15rem; }

.scr-reports { display: grid; gap: 0.55rem; list-style: none; }
.scr-reports li { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(230, 238, 248, 0.05); font-size: 0.9rem; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s var(--ease); }
.is-on .scr-reports li { opacity: 1; transform: none; }
.scr-reports li:nth-child(2) { transition-delay: 0.08s; } .scr-reports li:nth-child(3) { transition-delay: 0.16s; } .scr-reports li:nth-child(4) { transition-delay: 0.24s; }
.scr-reports i { color: #29abe2; width: 18px; }
.scr-reports em { margin-left: auto; font: 500 0.7rem var(--font-mono); font-style: normal; color: #8494ab; }

/* ---------- Features: toggles ---------- */
.sb-modules-count { font-size: 0.95rem; color: var(--text-secondary); }
.sb-modules-count strong { font: 700 2rem var(--font-display); color: var(--text-primary); margin-right: 0.2rem; }
.sb-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; list-style: none; }
.sb-toggles li { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 0.9rem 0.8rem 1.1rem; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--bg-glass); font-size: 0.92rem; font-weight: 500; transition: border-color 0.3s; }
.sb-toggles li:has([aria-checked="true"]) { border-color: rgba(18, 183, 106, 0.4); }
.sb-toggles button { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; border: 0; background: var(--line-color); cursor: pointer; transition: background 0.3s; }
.sb-toggles button i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.35s var(--ease); }
.sb-toggles button[aria-checked="true"] { background: linear-gradient(120deg, var(--sky), var(--emerald)); }
.sb-toggles button[aria-checked="true"] i { transform: translateX(20px); }

/* ---------- Features: at a glance ---------- */
.sb-glances { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.sb-glance { --tone: var(--sky); padding: 1.5rem; border-radius: 20px; border: 1px solid var(--border-subtle); border-top: 3px solid var(--tone); background: var(--bg-card); }
.sb-glance.tone-emerald { --tone: var(--emerald); } .sb-glance.tone-amber { --tone: var(--amber); } .sb-glance.tone-coral { --tone: var(--coral); }
.sb-glance h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.sb-glance ul { display: grid; gap: 0.6rem; list-style: none; }
.sb-glance li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.93rem; color: var(--text-secondary); }
.sb-glance li::before { content: "\f00c"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); font: 900 0.6rem "Font Awesome 6 Free"; }

@media (max-width: 1024px) {
    .sb-tour { grid-template-columns: 1fr; }
    .sb-tour-tabs { grid-template-columns: repeat(2, 1fr); }
    .sb-glances { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .sb-tour-tabs small { display: none; }
    .sb-toggles, .sb-glances { grid-template-columns: 1fr; }
    .scr-kpis { grid-template-columns: 1fr 1fr; }
    .scr-kpis > div:last-child { display: none; }
    .sb-device { min-height: 360px; }
}
.sb-device .sb-console-dots { display: flex; gap: 6px; }
.sb-device .sb-console-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.sb-device .sb-console-dots i:nth-child(2) { background: #febc2e; }
.sb-device .sb-console-dots i:nth-child(3) { background: #28c840; }

/* ---------- Direct selling rules page ---------- */
.sb-legal-note { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.4rem auto 0; padding: 0.5rem 0.9rem; border-radius: 12px; background: rgba(255, 164, 27, 0.08); border: 1px solid rgba(255, 164, 27, 0.25); font-size: 0.82rem; color: var(--text-secondary); }
.sb-legal-note i { color: var(--amber); }

.sb-versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; align-items: stretch; }
.sb-vs-side { padding: 1.7rem; border-radius: 22px; border: 1px solid var(--border-subtle); background: var(--bg-card); }
.sb-vs-side h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.1rem; font-size: 1.25rem; }
.sb-vs-side ul { display: grid; gap: 0.6rem; list-style: none; }
.sb-vs-side li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(230, 238, 248, 0.03); font-size: 0.94rem; line-height: 1.4; color: var(--text-secondary); }
.sb-vs-side li::before { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; font: 900 0.68rem/1 "Font Awesome 6 Free"; }
.sb-vs-side.ok li::before { background: rgba(18, 183, 106, 0.15); }
.sb-vs-side.bad li::before { background: rgba(255, 77, 94, 0.15); }
.sb-vs-side.ok { border-color: rgba(18, 183, 106, 0.35); background: linear-gradient(160deg, rgba(18, 183, 106, 0.1), transparent 60%); }
.sb-vs-side.ok h3 i, .sb-vs-side.ok li::before { color: var(--emerald); }
.sb-vs-side.ok li::before { content: "\f00c"; }
.sb-vs-side.bad { border-color: rgba(255, 77, 94, 0.35); background: linear-gradient(160deg, rgba(255, 77, 94, 0.1), transparent 60%); }
.sb-vs-side.bad h3 i, .sb-vs-side.bad li::before { color: var(--coral); }
.sb-vs-side.bad li::before { content: "\f00d"; }
.sb-vs-mark { display: grid; place-items: center; align-self: center; width: 54px; height: 54px; border-radius: 50%; background: var(--bg-glass); border: 1px solid var(--border-subtle); font: 700 1rem var(--font-display); color: var(--text-tertiary); }
.sb-versus .sb-vs-side li { opacity: 1; }

.sb-feature-grid.sb-five { grid-template-columns: repeat(5, 1fr); }

.sb-rules-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sb-small-note { font-size: 0.88rem; color: var(--text-tertiary); }
.sb-oblig { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.4rem; list-style: none; }
.sb-oblig li { display: flex; gap: 0.8rem; padding: 1rem; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--bg-card); }
.sb-oblig i { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(18, 183, 106, 0.14); color: var(--emerald); font-size: 0.7rem; }
.sb-oblig h3 { margin: 0 0 0.2rem; font-size: 0.98rem; }
.sb-oblig p { margin: 0; font-size: 0.86rem; }
.sb-prohibited { position: sticky; top: calc(var(--header-h) + 1rem); padding: 1.8rem; border-radius: 24px; border: 1px solid rgba(255, 77, 94, 0.35); background: radial-gradient(circle at 0% 0%, rgba(255, 77, 94, 0.16), transparent 55%), var(--bg-card); }
.sb-prohibited h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.3rem; font-size: 1.35rem; color: var(--coral); }
.sb-prohibited > p { margin: 0 0 1rem; font-size: 0.92rem; }
.sb-prohibited ul { display: grid; gap: 0.55rem; list-style: none; }
.sb-prohibited li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.94rem; color: var(--text-primary); }
.sb-prohibited li i { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: 0.1rem; border-radius: 50%; background: rgba(255, 77, 94, 0.16); color: var(--coral); font-size: 0.7rem; }

.sb-rulemaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sb-rulemap { position: relative; padding: 1.5rem; border-radius: 20px; border: 1px solid var(--border-subtle); background: var(--bg-card); transition: transform 0.45s var(--ease), border-color 0.3s; }
.sb-rulemap:hover { transform: translateY(-4px); border-color: var(--border-highlight); }
.sb-rulemap-rule { position: absolute; top: 1.2rem; right: 1.2rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid rgba(255, 164, 27, 0.3); background: rgba(255, 164, 27, 0.08); font: 500 0.66rem var(--font-mono); letter-spacing: 0.04em; color: var(--amber); }
.sb-rulemap > i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 13px; background: rgba(41, 171, 226, 0.12); color: var(--sky); }
.sb-rulemap h3 { margin: 0 0 0.35rem; font-size: 1.08rem; }
.sb-rulemap p { margin: 0; font-size: 0.9rem; }
.sb-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.sb-roles > div { padding: 1.3rem 1.5rem; border-radius: 18px; border: 1px dashed var(--border-highlight); }
.sb-roles h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.4rem; font-size: 1.05rem; }
.sb-roles h3 i { color: var(--sky); }
.sb-roles p { margin: 0; font-size: 0.92rem; }

.sb-duty { margin-top: 1.2rem; padding: 1.3rem 1.4rem; border-radius: 18px; border: 1px solid var(--border-subtle); background: var(--bg-card); }
.sb-duty h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem; font-size: 1.1rem; }
.sb-duty h3 small { padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(230, 238, 248, 0.07); font: 500 0.66rem var(--font-mono); color: var(--text-tertiary); }
.sb-duty ul { display: grid; gap: 0.45rem; list-style: none; }
.sb-duty li { position: relative; padding-left: 1.2rem; font-size: 0.92rem; color: var(--text-secondary); }
.sb-duty li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
.sb-rules-split .sb-faq { margin-top: 1.4rem; }

.sb-docs { display: grid; gap: 0.8rem; }
.sb-doc { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; border-radius: 20px; border: 1px solid var(--border-subtle); background: var(--bg-card); transition: border-color 0.3s, transform 0.4s var(--ease); }
.sb-doc:hover { border-color: var(--border-highlight); transform: translateX(4px); }
.sb-doc > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(255, 77, 94, 0.12); color: var(--coral); font-size: 1.4rem; }
.sb-doc:nth-child(3) > i { background: rgba(41, 171, 226, 0.12); color: var(--sky); }
.sb-doc .portfolio-chip { margin-bottom: 0.4rem; }
.sb-doc:first-child .portfolio-chip { color: var(--emerald); border-color: rgba(18, 183, 106, 0.3); background: rgba(18, 183, 106, 0.1); }
.sb-doc h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.sb-doc p { margin: 0; font-size: 0.86rem; color: var(--text-tertiary); }

@media (max-width: 1100px) { .sb-feature-grid.sb-five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) {
    .sb-rules-split, .sb-roles { grid-template-columns: 1fr; }
    .sb-prohibited { position: static; }
    .sb-rulemaps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .sb-versus { grid-template-columns: 1fr; }
    .sb-vs-mark { justify-self: center; }
    .sb-oblig, .sb-rulemaps, .sb-feature-grid.sb-five { grid-template-columns: 1fr; }
    .sb-doc { grid-template-columns: auto 1fr; }
    .sb-doc .btn { grid-column: 1 / -1; }
}

/* ==========================================================================
   Service page template (split hero + animated visual)
   ========================================================================== */
.sb-svc-hero { text-align: left; }
.sb-svc-hero .sb-breadcrumb { justify-content: flex-start; }
.sb-svc-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sb-svc-copy .hero-desc { margin-left: 0; }
.sb-svc-copy .hero-btns,
.sb-svc-copy .sb-assurance { justify-content: flex-start; }
.sb-svc-hero .hero-title { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.sb-vis { position: relative; width: min(100%, 500px); margin-inline: auto; animation: rise 1s 0.3s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Token wallet */
.sb-vis-token { padding-top: 70px; }
.vt-coin { position: absolute; top: 0; right: 8%; z-index: 2; display: grid; place-items: center; width: 120px; height: 120px; }
.vt-coin b { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, var(--amber), var(--coral)); color: #1a0604; font: 800 1.5rem var(--font-display); box-shadow: 0 0 40px rgba(255, 164, 27, 0.55), inset 0 -6px 0 rgba(0, 0, 0, 0.15); animation: coin-spin 6s ease-in-out infinite; }
@keyframes coin-spin { 50% { transform: rotateY(180deg); } }
.vt-orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 164, 27, 0.35); animation: ring-spin 8s linear infinite; }
.vt-orbit.o2 { inset: -18px; border-color: rgba(41, 171, 226, 0.3); animation-duration: 12s; animation-direction: reverse; }
.vt-orbit i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.vt-orbit.o2 i { background: var(--sky); box-shadow: 0 0 10px var(--sky); }
.vt-card { padding: 1.4rem; }
.vt-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.78rem; color: var(--text-tertiary); }
.vt-head small { font: 500 0.7rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.vt-block { font-family: var(--font-mono); }
.vt-block b { color: var(--emerald); }
.vt-bal { display: block; margin: 0.7rem 0 1rem; font: 700 2rem var(--font-display); letter-spacing: -0.03em; }
.vt-bal em { font-style: normal; font-size: 1rem; color: var(--text-tertiary); }
.vt-assets { display: grid; gap: 0.45rem; list-style: none; }
.vt-assets li { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: rgba(230, 238, 248, 0.04); font-size: 0.9rem; font-weight: 600; }
.vt-assets i { width: 18px; color: var(--amber); }
.vt-assets li:nth-child(2) i { color: #a99cff; }
.vt-assets li:nth-child(3) i { color: var(--emerald); }
.vt-assets b { margin-left: auto; font: 500 0.8rem var(--font-mono); color: var(--text-tertiary); }
.vt-assets b.up { color: var(--emerald); }
.vt-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.9rem; }
.vt-actions span { padding: 0.55rem; border-radius: 12px; background: linear-gradient(120deg, rgba(41, 171, 226, 0.2), rgba(18, 183, 106, 0.12)); font-size: 0.82rem; font-weight: 600; text-align: center; }

/* Exchange order book */
.sb-vis-book { padding: 1.2rem; }
.vb-top { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.vb-top b { font: 600 0.85rem var(--font-mono); color: var(--text-secondary); }
.vb-top strong { font: 700 1.6rem var(--font-display); }
.vb-top em { font-style: normal; font-weight: 600; color: var(--emerald); }
.vb-chart { display: block; width: 100%; height: 100px; margin: 0.6rem 0 0.8rem; }
.vb-chart .area { fill: rgba(18, 183, 106, 0.14); }
.vb-chart .line { fill: none; stroke: var(--emerald); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 2.2s 0.6s var(--ease) forwards; filter: drop-shadow(0 0 5px var(--emerald)); }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.vb-book { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.vb-col { display: grid; gap: 0.3rem; }
.vb-col span { position: relative; padding: 0.3rem 0.6rem; border-radius: 6px; font: 500 0.78rem var(--font-mono); overflow: hidden; }
.vb-col span::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--w); z-index: -1; animation: depth 3s ease-in-out infinite alternate; }
.vb-col span:nth-child(2)::before { animation-delay: 0.6s; } .vb-col span:nth-child(3)::before { animation-delay: 1.2s; } .vb-col span:nth-child(4)::before { animation-delay: 1.8s; }
@keyframes depth { to { width: calc(var(--w) * 0.6); } }
.vb-col.asks span { color: var(--coral); } .vb-col.asks span::before { background: rgba(255, 77, 94, 0.14); }
.vb-col.bids span { color: var(--emerald); } .vb-col.bids span::before { background: rgba(18, 183, 106, 0.14); }
.vb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.9rem; }
.vb-btns span { padding: 0.65rem; border-radius: 12px; font-weight: 700; text-align: center; color: #04121f; }
.vb-btns .buy { background: var(--emerald); } .vb-btns .sell { background: var(--coral); }

/* Responsive devices */
.sb-vis-devices { height: 340px; }
.sb-vis-devices > div { position: absolute; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--ink-2); box-shadow: var(--shadow-lg); overflow: hidden; }
body.light-mode .sb-vis-devices > div { background: #fff; }
.vd-desk { left: 0; top: 0; width: 82%; height: 250px; }
.vd-tab { right: 6%; bottom: 0; width: 34%; height: 210px; border-radius: 18px; animation: float 7s ease-in-out infinite; }
.vd-phone { right: 0; bottom: 30px; width: 20%; height: 170px; border-radius: 20px; animation: float 6s 1s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -8px; } }
.vd-bar { display: flex; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); }
.vd-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-color); }
.vd-page { display: grid; gap: 7px; padding: 10px; }
.vd-page span { display: block; border-radius: 6px; }
.vd-page .nav { height: 8px; width: 60%; background: var(--line-color); }
.vd-page .hero { height: 54px; background: linear-gradient(120deg, rgba(41, 171, 226, 0.5), rgba(18, 183, 106, 0.4), rgba(255, 164, 27, 0.4)); background-size: 200% 100%; animation: gradient-flow 5s linear infinite; }
.vd-tab .vd-page .hero { height: 44px; } .vd-phone .vd-page .hero { height: 36px; }
.vd-page .row { display: flex; gap: 6px; }
.vd-page .row i { flex: 1; height: 34px; border-radius: 6px; background: rgba(230, 238, 248, 0.07); animation: shimmer 2.4s ease-in-out infinite; }
.vd-page .row i:nth-child(2) { animation-delay: 0.3s; } .vd-page .row i:nth-child(3) { animation-delay: 0.6s; }
body.light-mode .vd-page .row i { background: rgba(11, 20, 38, 0.06); }
@keyframes shimmer { 50% { opacity: 0.45; } }

/* Crypto checkout */
.sb-vis-checkout { padding: 1.3rem; }
.vc-head { display: grid; gap: 0.1rem; }
.vc-head small { font: 500 0.7rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.vc-head strong { font: 700 2rem var(--font-display); }
.vc-head span { font: 500 0.85rem var(--font-mono); color: var(--emerald); }
.vc-coins { display: flex; gap: 0.5rem; margin: 1rem 0; }
.vc-coins span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--border-subtle); font-size: 0.82rem; font-weight: 600; }
.vc-coins .c1 { border-color: var(--emerald); background: rgba(18, 183, 106, 0.12); }
.vc-coins i { color: var(--emerald); } .vc-coins .c2 i { color: var(--amber); } .vc-coins .c3 i { color: #a99cff; }
.vc-body { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; }
.vc-qr {
    width: 120px; height: 120px; border-radius: 12px; background-color: #fff;
    background-image:
        linear-gradient(90deg, #0b1426 50%, transparent 50%), linear-gradient(#0b1426 50%, transparent 50%),
        repeating-linear-gradient(90deg, #0b1426 0 6px, transparent 6px 12px), repeating-linear-gradient(#0b1426 0 6px, transparent 6px 14px);
    background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
    background-position: 8px 8px, 84px 8px, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-blend-mode: normal, normal, difference, normal;
    border: 8px solid #fff;
    box-shadow: 0 0 0 1px var(--border-subtle);
}
.vc-steps { display: grid; gap: 0.5rem; }
.vc-steps span { display: flex; align-items: center; gap: 0.6rem; font-size: 0.84rem; color: var(--text-tertiary); animation: step-on 8s infinite; }
.vc-steps i { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--line-color); }
.vc-steps .s2 { animation-delay: 2s; } .vc-steps .s3 { animation-delay: 4s; } .vc-steps .s4 { animation-delay: 6s; }
@keyframes step-on { 0% { color: var(--text-tertiary); } 5%, 92% { color: var(--text-primary); } 100% { color: var(--text-tertiary); } }
.vc-steps span i { animation: dot-on 8s infinite; animation-delay: inherit; }
@keyframes dot-on { 0% { background: transparent; border-color: var(--line-color); } 5%, 92% { background: var(--emerald); border-color: var(--emerald); box-shadow: 0 0 8px var(--emerald); } 100% { background: transparent; } }
.vc-steps .s4 { font-weight: 700; }

/* Phones */
.sb-vis-phones { height: 400px; }
.vp-phone { position: absolute; top: 20px; width: 190px; height: 370px; padding: 10px; border-radius: 34px; background: #050b18; border: 1px solid rgba(230, 238, 248, 0.14); box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(230, 238, 248, 0.05); }
.vp-phone.android { left: 6%; transform: rotate(-6deg); animation: float 7s ease-in-out infinite; }
.vp-phone.ios { right: 6%; top: 0; transform: rotate(5deg); animation: float 6s 1.2s ease-in-out infinite; }
.vp-cam { position: absolute; top: 18px; left: 50%; z-index: 2; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #1a2540; }
.vp-notch { position: absolute; top: 14px; left: 50%; z-index: 2; width: 70px; height: 20px; margin-left: -35px; border-radius: 12px; background: #000; }
.vp-screen { position: relative; display: flex; flex-direction: column; gap: 9px; height: 100%; padding: 38px 14px 14px; border-radius: 26px; background: linear-gradient(180deg, #0f1d38, #0a1428); overflow: hidden; color: #e6eef8; }
.vp-screen small { font-size: 0.72rem; color: #8494ab; }
.vp-big { font: 700 1.45rem var(--font-display); }
.vp-chip { align-self: flex-start; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(18, 183, 106, 0.18); color: #2fe07a; font-size: 0.68rem; font-weight: 600; }
.vp-row { height: 34px; border-radius: 10px; background: rgba(230, 238, 248, 0.07); animation: shimmer 2.4s ease-in-out infinite; }
.vp-row.short { width: 70%; }
.vp-ring { display: grid; place-items: center; width: 96px; height: 96px; margin: 0.4rem auto; border-radius: 50%; background: conic-gradient(var(--sky) 0 72%, rgba(230, 238, 248, 0.08) 72% 100%); animation: ring-spin 14s linear infinite; }
.vp-ring b { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #0a1428; font: 700 1.3rem var(--font-display); animation: ring-spin 14s linear infinite reverse; }
.vp-tabs { display: flex; justify-content: space-around; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(230, 238, 248, 0.08); }
.vp-tabs i { width: 18px; height: 18px; border-radius: 6px; background: rgba(230, 238, 248, 0.12); }
.vp-tabs i:first-child { background: var(--sky); }
.vp-badge { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--bg-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-lg); font-size: 0.82rem; font-weight: 600; }
.vp-badge.b1 { left: 0; bottom: 30px; } .vp-badge.b1 i { color: var(--emerald); }
.vp-badge.b2 { right: 0; bottom: 70px; } .vp-badge.b2 i { color: var(--sky); }

/* Template extras */
.sb-stack { margin-top: 1.6rem; }
.sb-stack small { display: block; margin-bottom: 0.5rem; font: 500 0.7rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.sb-stack div { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sb-stack span { padding: 0.25rem 0.65rem; border-radius: 8px; border: 1px solid var(--border-subtle); font: 500 0.76rem var(--font-mono); color: var(--text-secondary); }
.sb-chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.6rem; }
.sb-chips-row span { padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-card); font-size: 0.86rem; color: var(--text-secondary); }
.sb-secure { border-color: rgba(18, 183, 106, 0.35); background: radial-gradient(circle at 0% 0%, rgba(18, 183, 106, 0.16), transparent 55%), var(--bg-card); }
.sb-secure h3 { color: var(--emerald); }
.sb-secure li i { background: rgba(18, 183, 106, 0.16); color: var(--emerald); }
.sb-related-list { display: grid; gap: 0.5rem; margin-top: 1.4rem; }
.sb-related-list > small { font: 500 0.7rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); }
.sb-related { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--bg-card); color: inherit; transition: border-color 0.3s, transform 0.35s var(--ease); }
.sb-related > i:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(41, 171, 226, 0.12); color: var(--sky); }
.sb-related strong { display: block; font: 600 0.95rem var(--font-display); }
.sb-related small { display: block; font-size: 0.8rem; color: var(--text-tertiary); }
.sb-related > i:last-child { margin-left: auto; color: var(--text-tertiary); transition: transform 0.3s var(--ease), color 0.3s; }
.sb-related:hover { border-color: var(--border-highlight); transform: translateX(3px); }
.sb-related:hover > i:last-child { color: var(--sky); transform: translateX(3px); }

@media (max-width: 1024px) {
    .sb-svc-grid { grid-template-columns: 1fr; }
    .sb-vis { margin-top: 1rem; }
}
@media (max-width: 560px) {
    .sb-vis-phones { height: 340px; }
    .vp-phone { width: 150px; height: 300px; }
    .sb-vis-devices { height: 280px; }
    .vd-desk { height: 200px; }
    .vd-tab { height: 160px; } .vd-phone { height: 130px; }
    .vc-body { grid-template-columns: 1fr; }
    .vc-qr { margin-inline: auto; }
}

/* Odd case out: the last case card fills the row */
.sb-casefiles > .sb-casefile:not(.is-featured):last-child:nth-child(even) { grid-column: 1 / -1; flex-direction: row; }
.sb-casefiles > .sb-casefile:not(.is-featured):last-child:nth-child(even) .sb-casefile-art { flex: 0 0 32%; height: auto; border-bottom: 0; border-right: 1px solid var(--border-subtle); }
@media (max-width: 900px) {
    .sb-casefiles > .sb-casefile:not(.is-featured):last-child:nth-child(even) { flex-direction: column; }
    .sb-casefiles > .sb-casefile:not(.is-featured):last-child:nth-child(even) .sb-casefile-art { flex: none; height: 120px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
}

/* Split service heroes read left-aligned beside their visual */
.sb-svc-hero .hero-content,
.sb-svc-hero .sb-svc-copy { text-align: left; }
.sb-svc-hero .hero-desc { margin-left: 0; margin-right: 0; }
@media (max-width: 1024px) { .sb-svc-hero .hero-content, .sb-svc-hero .sb-svc-copy { text-align: center; } .sb-svc-hero .hero-desc { margin-inline: auto; } .sb-svc-copy .hero-btns, .sb-svc-copy .sb-assurance, .sb-svc-hero .sb-breadcrumb { justify-content: center; } }

/* ERP dashboard visual */
.sb-vis-erp { padding: 0; overflow: hidden; }
.ve-bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-subtle); font-size: 0.8rem; }
.ve-bar b { font-family: var(--font-display); }
.sb-vis-erp .sb-console-dots { display: flex; gap: 6px; }
.sb-vis-erp .sb-console-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.sb-vis-erp .sb-console-dots i:nth-child(2) { background: #febc2e; }
.sb-vis-erp .sb-console-dots i:nth-child(3) { background: #28c840; }
.ve-live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font: 600 0.68rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--emerald); }
.ve-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.ve-body { display: grid; grid-template-columns: 140px 1fr; }
.ve-nav { display: grid; align-content: start; gap: 0.25rem; padding: 0.8rem 0.6rem; list-style: none; border-right: 1px solid var(--border-subtle); }
.ve-nav li { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.6rem; border-radius: 10px; font-size: 0.78rem; color: var(--text-secondary); animation: nav-cycle 10s infinite; }
.ve-nav li i { width: 14px; color: var(--text-tertiary); animation: nav-icon 10s infinite; animation-delay: inherit; }
.ve-nav .n2 { animation-delay: 2s; } .ve-nav .n3 { animation-delay: 4s; } .ve-nav .n4 { animation-delay: 6s; } .ve-nav .n5 { animation-delay: 8s; }
@keyframes nav-cycle { 0%, 18% { background: rgba(41, 171, 226, 0.16); color: var(--text-primary); } 20%, 100% { background: transparent; color: var(--text-secondary); } }
@keyframes nav-icon { 0%, 18% { color: var(--sky); } 20%, 100% { color: var(--text-tertiary); } }
.ve-main { display: grid; gap: 0.7rem; padding: 0.9rem; }
.ve-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ve-kpis > div { padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(230, 238, 248, 0.05); }
.ve-kpis small { display: block; font: 500 0.62rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.ve-kpis b { display: block; margin: 0.15rem 0; font: 700 1.2rem var(--font-display); }
.ve-kpis em { font-style: normal; font-size: 0.72rem; color: var(--emerald); }
.ve-chart { display: flex; align-items: flex-end; gap: 5%; height: 110px; padding: 0.7rem; border-radius: 12px; background: rgba(230, 238, 248, 0.03); }
.ve-chart i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--sky), rgba(41, 171, 226, 0.2)); transform-origin: bottom; animation: bar-grow 5s var(--ease) infinite; }
.ve-chart i:nth-child(even) { background: linear-gradient(180deg, var(--emerald), rgba(18, 183, 106, 0.2)); }
.ve-chart i:nth-child(2) { animation-delay: 0.08s; } .ve-chart i:nth-child(3) { animation-delay: 0.16s; } .ve-chart i:nth-child(4) { animation-delay: 0.24s; }
.ve-chart i:nth-child(5) { animation-delay: 0.32s; } .ve-chart i:nth-child(6) { animation-delay: 0.4s; } .ve-chart i:nth-child(7) { animation-delay: 0.48s; } .ve-chart i:nth-child(8) { animation-delay: 0.56s; }
@keyframes bar-grow { 0% { transform: scaleY(0.15); } 30%, 80% { transform: scaleY(1); } 100% { transform: scaleY(0.15); } }
.ve-stock { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; font-size: 0.75rem; color: var(--text-secondary); }
.ve-stock div { height: 6px; border-radius: 6px; background: rgba(230, 238, 248, 0.08); overflow: hidden; }
.ve-stock div i { display: block; height: 100%; width: 92%; border-radius: inherit; background: var(--brand-gradient); transform-origin: left; animation: stock-fill 5s var(--ease) infinite; }
@keyframes stock-fill { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
.ve-stock b { color: var(--emerald); }
.sb-roles:has(> div:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .sb-roles:has(> div:nth-child(3)) { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ve-body { grid-template-columns: 1fr; } .ve-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); } .ve-nav li { flex-shrink: 0; } }
/* Checkout: crypto-only amount, crisp QR */
.vc-head strong em { font-style: normal; font-size: 1rem; color: var(--text-tertiary); }
.sb-vis-checkout .vc-qr { display: block; width: 120px; height: 120px; padding: 0; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--border-subtle), 0 0 30px -8px rgba(18, 183, 106, 0.5); }