/* Service explorer — sits below the mosaic on /services. Uses px/em only: mosaic page sets a canvas rem scale on . */ .svc-detail { --svc-bg: #000; --svc-surface: #0a0a0a; --svc-elevated: #111; --svc-line: rgba(255, 255, 255, 0.1); --svc-line-strong: rgba(255, 255, 255, 0.16); --svc-ink: #ffffff; --svc-muted: rgba(255, 255, 255, 0.55); --svc-faint: rgba(255, 255, 255, 0.38); --svc-radius: 22px; --svc-radius-lg: 28px; --svc-frame: min(1120px, calc(100% - 48px)); --svc-nav-top: 96px; position: relative; z-index: 2; background: var(--svc-bg); color: var(--svc-ink); font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; border-top: 1px solid var(--svc-line); } .svc-detail *, .svc-detail *::before, .svc-detail *::after { box-sizing: border-box; } .svc-detail__frame { width: var(--svc-frame); max-width: 1120px; margin: 0 auto; padding: 88px 0 40px; } .svc-detail__intro { position: relative; padding: 8px 0 4px; } .svc-detail__eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--svc-faint); } .svc-detail__title { margin: 14px 0 0; max-width: 18ch; font-size: clamp(32px, 4.2vw, 48px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: var(--svc-ink); } .svc-detail__lede { margin: 16px 0 0; max-width: 540px; font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: -0.012em; color: var(--svc-muted); } .svc-detail__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; } .svc-detail__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .svc-detail__btn:active { transform: scale(0.98); } .svc-detail__btn--primary { background: #fff; color: #000; border: 1px solid #fff; } .svc-detail__btn--primary:hover { background: #e8e8e8; } .svc-detail__btn--ghost { background: transparent; color: var(--svc-ink); border: 1px solid var(--svc-line-strong); } .svc-detail__btn--ghost:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.28); } .svc-detail__explorer { margin-top: 0; scroll-margin-top: 100px; } .svc-detail__explorer-head { max-width: 560px; margin-bottom: 36px; } .svc-detail__explorer-head h2 { margin: 12px 0 0; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; color: var(--svc-ink); } .svc-detail__explorer-head p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--svc-muted); } .svc-detail__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; } .svc-detail__nav { position: sticky; top: var(--svc-nav-top); max-height: calc(100svh - var(--svc-nav-top) - 24px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .svc-detail__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .svc-detail__nav-btn { width: 100%; display: block; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font: inherit; transition: background 0.2s ease, border-color 0.2s ease; } .svc-detail__nav-btn:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--svc-line); } .svc-detail__nav-btn.is-active { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100% ); border-color: var(--svc-line-strong); } .svc-detail__nav-label { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.72); } .svc-detail__nav-btn.is-active .svc-detail__nav-label { color: #fff; } .svc-detail__nav-tag { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; letter-spacing: -0.01em; color: var(--svc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .svc-detail__panel { min-width: 0; min-height: 0; } .svc-detail__article { position: relative; isolation: isolate; overflow: hidden; flex-shrink: 0; scroll-margin-top: 12px; border-radius: var(--svc-radius-lg); border: 1px solid rgba(255, 255, 255, 0.12); background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 55%), linear-gradient(165deg, #171717 0%, #0c0c0c 52%, #080808 100%); padding: 28px 28px 30px; animation: svc-detail-fade 0.28s ease; } @keyframes svc-detail-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .svc-detail__article::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1; background: radial-gradient(85% 75% at 100% 0%, var(--svc-glow-a, rgba(96, 165, 250, 0.22)), transparent 58%), radial-gradient(75% 65% at 0% 100%, var(--svc-glow-b, rgba(167, 139, 250, 0.14)), transparent 55%); } .svc-detail__article > * { position: relative; z-index: 1; } .svc-detail__article--saas { --svc-glow-a: rgba(96, 165, 250, 0.2); --svc-glow-b: rgba(56, 189, 248, 0.12); } .svc-detail__article--web { --svc-glow-a: rgba(52, 211, 153, 0.16); --svc-glow-b: rgba(45, 212, 191, 0.1); } .svc-detail__article--ai { --svc-glow-a: rgba(167, 139, 250, 0.2); --svc-glow-b: rgba(244, 114, 182, 0.1); } .svc-detail__article--devops { --svc-glow-a: rgba(125, 211, 252, 0.18); --svc-glow-b: rgba(148, 163, 184, 0.12); } .svc-detail__article--mvp { --svc-glow-a: rgba(251, 146, 60, 0.18); --svc-glow-b: rgba(250, 204, 21, 0.1); } .svc-detail__article--fintech { --svc-glow-a: rgba(74, 222, 128, 0.16); --svc-glow-b: rgba(34, 197, 94, 0.1); } .svc-detail__article--custom { --svc-glow-a: rgba(129, 140, 248, 0.18); --svc-glow-b: rgba(96, 165, 250, 0.1); } .svc-detail__article--trading { --svc-glow-a: rgba(248, 113, 113, 0.16); --svc-glow-b: rgba(251, 146, 60, 0.1); } .svc-detail__article--quant { --svc-glow-a: rgba(56, 189, 248, 0.18); --svc-glow-b: rgba(99, 102, 241, 0.12); } .svc-detail__article--billing { --svc-glow-a: rgba(250, 204, 21, 0.14); --svc-glow-b: rgba(251, 146, 60, 0.1); } .svc-detail__article--crm { --svc-glow-a: rgba(45, 212, 191, 0.16); --svc-glow-b: rgba(96, 165, 250, 0.1); } .svc-detail__article--video { --svc-glow-a: rgba(244, 114, 182, 0.16); --svc-glow-b: rgba(192, 132, 252, 0.12); } .svc-detail__article-top { display: flex; align-items: flex-start; gap: 16px; } .svc-detail__icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient( 145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100% ); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .svc-detail__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .svc-detail__article-copy .svc-detail__eyebrow { margin: 2px 0 0; } .svc-detail__article h3 { margin: 6px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--svc-ink); } .svc-detail__short { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--svc-muted); } .svc-detail__overview { margin: 12px 0 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.42); } .svc-detail__cols { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .svc-detail__block { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 18px 18px 20px; } .svc-detail__block h4 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--svc-faint); } .svc-detail__block ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .svc-detail__block li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); } .svc-detail__dot { width: 5px; height: 5px; margin-top: 7px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); } .svc-detail__process { margin-top: 20px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%), rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 18px 18px 20px; } .svc-detail__process h4 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--svc-faint); } .svc-detail__process ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .svc-detail__process li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient( 145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100% ); font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); } .svc-detail__step { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100% ); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #fff; } .svc-detail__cta { border-top: 1px solid var(--svc-line); padding: 72px 0 96px; } .svc-detail__cta-inner { width: var(--svc-frame); max-width: 720px; margin: 0 auto; text-align: center; border-radius: var(--svc-radius-lg); border: 1px solid rgba(255, 255, 255, 0.12); background: radial-gradient(90% 80% at 50% 0%, rgba(96, 165, 250, 0.14), transparent 60%), radial-gradient(70% 70% at 100% 100%, rgba(167, 139, 250, 0.1), transparent 55%), linear-gradient(165deg, #141414 0%, #0a0a0a 100%); padding: 48px 32px; } .svc-detail__cta-inner--hero { max-width: 860px; text-align: left; padding: 48px 40px; } .svc-detail__cta-inner--hero .svc-detail__title { margin-top: 14px; max-width: 16ch; font-size: clamp(28px, 4vw, 42px); } .svc-detail__cta-inner--hero .svc-detail__lede { margin-top: 16px; max-width: 560px; } .svc-detail__cta-inner--hero .svc-detail__actions { margin-top: 28px; justify-content: flex-start; } .svc-detail__cta-inner h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; color: var(--svc-ink); } .svc-detail__cta-inner p { margin: 12px auto 0; max-width: 420px; font-size: 15px; line-height: 1.55; color: var(--svc-muted); } .svc-detail__cta-inner--hero p.svc-detail__eyebrow { margin: 0; } .svc-detail__cta-inner--hero p.svc-detail__lede { margin-left: 0; margin-right: 0; max-width: 560px; } .svc-detail__cta-inner .svc-detail__actions { justify-content: center; } .svc-detail__cta-inner--hero .svc-detail__actions { justify-content: flex-start; } @media (max-width: 899px) { .svc-detail__frame { padding: 64px 0 24px; } .svc-detail__layout { grid-template-columns: 1fr; gap: 20px; } .svc-detail__nav { position: static; max-height: none; overflow: visible; } .svc-detail__nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .svc-detail__cols, .svc-detail__process ol { grid-template-columns: 1fr; } } @media (max-width: 640px) { .svc-detail { --svc-frame: calc(100% - 32px); } .svc-detail__nav-list { grid-template-columns: 1fr; } .svc-detail__article { padding: 22px 18px 24px; } .svc-detail__cta-inner { padding: 36px 20px; } .svc-detail__cta-inner--hero { padding: 36px 22px; } } @media (prefers-reduced-motion: reduce) { .svc-detail__article { animation: none; } .svc-detail__btn { transition: none; } }