/* ============================================================ Smart Contract Development (/service/smart-contracts-development) Blue -> violet system (#3B5BFF -> #8B5CF6) on a light body, dark bands. BEM-ish `sc-` prefix; scroll-reveal armed by `.sc-anim` on . Motion: floating hero art + chips, hash ticker, self-typing Solidity card, cursor-spotlight service cards, sticky-stacked case studies, orbiting network logos, scroll-filled process spine, expanding industry gallery, conic ring on the final CTA. ============================================================ */ @property --sc-spin { syntax: ""; inherits: true; initial-value: 0deg; } body:has(.sc-page) { overflow-x: clip; } .sc-page { --sc-blue: #3b5bff; --sc-violet: #8b5cf6; --sc-cyan: #22d3ee; --sc-blue-dk: #2a43d9; --sc-blue-lt: #e4e8ff; --sc-grad: linear-gradient(120deg, #3b5bff 0%, #8b5cf6 100%); --sc-grad-light: linear-gradient(120deg, #9db1ff 0%, #c4b5fd 100%); --sc-ink: #0b0f1f; --sc-body: #5b6275; --sc-muted: #8d94a8; --sc-line: #e6e8f2; --sc-soft: #f5f6ff; --sc-dark: #0a0d1f; --sc-dark-2: #11152b; --sc-ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; background: #fff; color: var(--sc-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .sc-page .container { max-width: 1240px; } .sc-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.025em; color: var(--sc-ink); } .sc-page :where(p) { margin: 0; color: var(--sc-body); } .sc-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .sc-page :where(img) { max-width: 100%; height: auto; } .sc-page :where(dl, dd) { margin: 0; } .sc-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; } .sc-grad-text { background: var(--sc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .sc-grad-text--light { background: var(--sc-grad-light); -webkit-background-clip: text; background-clip: text; } /* ---------- section furniture ---------- */ .sc-head { max-width: 860px; margin: 0 auto 56px; text-align: center; } .sc-head--left { margin-left: 0; text-align: left; } .sc-title { font-weight: 700; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.14; } .sc-sub { margin-top: 18px; font-family: "Poppins", sans-serif; font-size: 16px; line-height: 1.75; } .sc-head p.sc-sub { max-width: 760px; margin-inline: auto; } .sc-head--left p.sc-sub { margin-inline: 0; } /* ---------- pill button (label and disc swap sides on hover) ---------- */ .sc-btn { --sc-btn-icon-w: 46px; --sc-btn-gap: 14px; --sc-btn-pad-l: 30px; --sc-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; gap: var(--sc-btn-gap); width: max-content; max-width: 100%; padding: 9px var(--sc-btn-pad-r) 9px var(--sc-btn-pad-l); border: 0; border-radius: 999px; background: var(--sc-grad); color: #fff; overflow: hidden; text-decoration: none; box-shadow: 0 10px 26px rgba(59, 91, 255, 0.3); transition: box-shadow 0.25s ease, transform 0.25s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .sc-btn__label { display: inline-block; flex: none; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .sc-btn__icon { display: grid; place-items: center; flex: none; width: var(--sc-btn-icon-w); height: var(--sc-btn-icon-w); border-radius: 50%; background: var(--sc-ink); color: #fff; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .sc-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .sc-btn:hover, .sc-btn:focus-visible { padding-left: var(--sc-btn-pad-r); padding-right: var(--sc-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(59, 91, 255, 0.42); } .sc-btn:hover .sc-btn__label, .sc-btn:focus-visible .sc-btn__label { transform: translateX(calc(var(--sc-btn-icon-w) + var(--sc-btn-gap))); } .sc-btn:hover .sc-btn__icon, .sc-btn:focus-visible .sc-btn__icon { transform: translateX( calc(-1 * (var(--sc-btn-label-w, 190px) + var(--sc-btn-gap))) ); } .sc-btn:hover .sc-btn__icon svg, .sc-btn:focus-visible .sc-btn__icon svg { transform: rotate(45deg); } .sc-btn--light { background: #fff; color: var(--sc-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); } .sc-btn--light:hover, .sc-btn--light:focus-visible { color: var(--sc-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26); } .sc-btn--light .sc-btn__icon { background: var(--sc-grad); } .sc-btn--ghost-dark { background: #fff; border: 1.5px solid var(--sc-line); color: var(--sc-ink); box-shadow: none; } .sc-btn--ghost-dark:hover, .sc-btn--ghost-dark:focus-visible { color: var(--sc-ink); border-color: var(--sc-blue-lt); box-shadow: 0 14px 30px rgba(59, 91, 255, 0.14); } .sc-btn--ghost-dark .sc-btn__icon { background: var(--sc-grad); } /* ---------- scroll reveal ---------- */ /* `:where()` keeps this at one-class specificity, so a component's own `transition` (hover lift, flex grow) written later in the file wins. Those components list `opacity` in their transitions so the reveal still fades. */ :where(.sc-anim) .sc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.6s var(--sc-ease); } :where(.sc-anim) .sc-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { :where(.sc-anim) .sc-reveal { opacity: 1; transform: none; transition: none; } .sc-page *, .sc-page *::before, .sc-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ HERO ============================================================ */ .sc-hero { position: relative; padding: 96px 0 0; border-bottom: 1px solid var(--sc-line); overflow: hidden; isolation: isolate; } .sc-hero__bg { position: absolute; inset: 0; z-index: -3; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 100%), url("../images/smart-contracts/hero-bg.webp") center / cover no-repeat, #f3f5ff; } /* Fine dot grid, fading toward the copy so text stays clean. */ .sc-hero__grid { position: absolute; inset: 0; z-index: -2; background-image: radial-gradient( rgba(59, 91, 255, 0.16) 1px, transparent 1.2px ); background-size: 26px 26px; -webkit-mask-image: radial-gradient( ellipse 70% 80% at 70% 40%, #000 20%, transparent 75% ); mask-image: radial-gradient( ellipse 70% 80% at 70% 40%, #000 20%, transparent 75% ); } .sc-hero__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: sc-drift 14s ease-in-out infinite alternate; } .sc-hero__orb--a { top: -120px; right: 8%; width: 460px; height: 460px; background: radial-gradient(circle, #b7c2ff, transparent 70%); } .sc-hero__orb--b { bottom: 40px; left: -140px; width: 420px; height: 420px; background: radial-gradient(circle, #d7c8ff, transparent 70%); animation-delay: -7s; } @keyframes sc-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(30px, 40px, 0) scale(1.08); } } .sc-hero__layout { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: 40px; padding-bottom: 72px; } .sc-hero__title { font-size: clamp(38px, 5vw, 66px); line-height: 1.04; font-weight: 700; } .sc-hero__text { max-width: 560px; margin-top: 22px; font-family: "Poppins", sans-serif; font-size: 17px; line-height: 1.75; } .sc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; margin-top: 34px; } .sc-hero__media { --px: 0px; --py: 0px; position: relative; transform: translate3d(var(--px), var(--py), 0); transition: transform 0.35s ease-out, opacity 0.55s ease; } :where(.sc-anim) .sc-hero__media.sc-reveal { transform: translate3d(var(--px), calc(var(--py) + 18px), 0); } :where(.sc-anim) .sc-hero__media.sc-reveal.is-in { transform: translate3d(var(--px), var(--py), 0); } .sc-hero__halo { position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient( circle, rgba(139, 92, 246, 0.28), rgba(59, 91, 255, 0.1) 45%, transparent 70% ); filter: blur(30px); animation: sc-breathe 6s ease-in-out infinite; } @keyframes sc-breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } } .sc-hero__art { position: relative; display: block; width: 100%; filter: drop-shadow(0 30px 50px rgba(30, 41, 120, 0.22)); animation: sc-float 7s ease-in-out infinite; } @keyframes sc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* ============================================================ WHAT IS ============================================================ */ .sc-what { padding: 110px 0 100px; background: #fff; } .sc-what__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 64px; } .sc-what__media { position: relative; } .sc-what__media > img { display: block; width: 100%; border-radius: 28px; filter: drop-shadow(0 24px 40px rgba(30, 41, 120, 0.16)); } /* ============================================================ SERVICES ============================================================ */ .sc-services { padding: 100px 0 110px; background: linear-gradient( 180deg, #fff, var(--sc-soft) 30%, var(--sc-soft) 70%, #fff ); } .sc-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .sc-svc { --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; padding: 30px 28px 32px; border: 1px solid var(--sc-line); border-radius: 24px; background: #fff; overflow: hidden; transition: opacity 0.55s ease, transform 0.4s var(--sc-ease), box-shadow 0.4s ease, border-color 0.3s ease; } .sc-svc:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 30px 60px rgba(30, 41, 120, 0.14); } /* Cursor spotlight: a soft radial that follows the pointer. */ .sc-svc__glow { position: absolute; inset: 0; background: radial-gradient( 260px circle at var(--mx) var(--my), rgba(59, 91, 255, 0.14), transparent 60% ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .sc-svc:hover .sc-svc__glow { opacity: 1; } .sc-svc__num { display: block; margin-bottom: 22px; font-size: 13px; font-weight: 600; color: var(--sc-muted); transition: color 0.3s ease; } .sc-svc:hover .sc-svc__num { color: var(--sc-blue); } .sc-svc__title { position: relative; font-size: 21px; font-weight: 700; line-height: 1.25; } .sc-svc__text { position: relative; margin-top: 12px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.72; } /* ============================================================ CTA BANDS ============================================================ */ .sc-cta { padding: 30px 0; background: #fff; } .sc-cta__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 60px; border-radius: 30px; background: radial-gradient( 600px 300px at 90% 0%, rgba(139, 92, 246, 0.35), transparent 60% ), radial-gradient( 500px 300px at 0% 100%, rgba(59, 91, 255, 0.3), transparent 60% ), var(--sc-dark); color: #fff; overflow: hidden; isolation: isolate; } /* Hex lattice, drifting slowly. */ .sc-cta__hex { position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 34L0 84V50l28 16 28-16v34L28 100z' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E"); background-size: 56px 100px; animation: sc-hexdrift 30s linear infinite; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 85%); mask-image: linear-gradient(90deg, #000 30%, transparent 85%); } @keyframes sc-hexdrift { to { background-position: 56px 100px; } } .sc-cta__copy { max-width: 640px; } .sc-cta__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.18; color: #fff; } .sc-cta__text { margin-top: 14px; font-family: "Poppins", sans-serif; font-size: 15.5px; line-height: 1.72; color: rgba(255, 255, 255, 0.7); } .sc-cta .sc-btn { flex: none; } /* ============================================================ SOLUTIONS (dark) ============================================================ */ .sc-sol { position: relative; margin-top: 110px; padding: 110px 0 120px; background: var(--sc-dark); overflow: hidden; } .sc-sol .sc-title, .sc-why .sc-title { color: #fff; } .sc-sol .sc-sub, .sc-why .sc-sub { color: rgba(255, 255, 255, 0.66); } .sc-sol__glow { position: absolute; top: -200px; left: 50%; width: 900px; height: 500px; transform: translateX(-50%); background: radial-gradient( closest-side, rgba(59, 91, 255, 0.3), transparent ); filter: blur(40px); pointer-events: none; } .sc-sol__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .sc-sol__card { position: relative; padding: 32px 28px; border-radius: 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); transition: opacity 0.55s ease, transform 0.4s var(--sc-ease), background 0.3s ease, border-color 0.3s ease; } /* Gradient border painted on hover via a masked pseudo. */ .sc-sol__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--sc-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; } .sc-sol__card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.06); } .sc-sol__card:hover::before { opacity: 1; } .sc-sol__ico { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 22px; border-radius: 16px; background: var(--sc-grad); box-shadow: 0 12px 26px rgba(59, 91, 255, 0.35); transition: transform 0.45s var(--sc-ease); } .sc-sol__card:hover .sc-sol__ico { transform: rotate(-8deg) scale(1.06); } .sc-sol__ico img { width: 28px; height: 28px; object-fit: contain; } .sc-sol__card h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff; } .sc-sol__card p { margin-top: 12px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.72; color: rgba(255, 255, 255, 0.62); } /* ============================================================ CASE STUDIES (sticky stack) ============================================================ */ .sc-cases { padding: 110px 0 120px; background: #fff; } .sc-cases__stack { display: grid; gap: 32px; } .sc-case { position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border: 1px solid var(--sc-line); border-radius: 28px; background: #fff; box-shadow: 0 -10px 40px rgba(30, 41, 120, 0.06), 0 30px 60px rgba(30, 41, 120, 0.12); overflow: hidden; } .sc-case__media { display: grid; place-items: center; padding: 30px; background: linear-gradient(160deg, var(--sc-soft), #eef0ff); } .sc-case__media img { width: 100%; max-width: 440px; border-radius: 20px; transition: transform 0.6s var(--sc-ease); } .sc-case:hover .sc-case__media img { transform: scale(1.03); } .sc-case__body { display: flex; flex-direction: column; justify-content: center; padding: 40px 44px; } .sc-case__name { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; } .sc-case__psr { display: grid; gap: 16px; margin-top: 24px; } .sc-case__psr > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding-top: 16px; border-top: 1px solid var(--sc-line); } .sc-case__psr dt { font-family: "Poppins", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-muted); padding-top: 3px; } .sc-case__psr dd { font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.7; color: var(--sc-body); } /* Problem / Solution / Result each carry a signal colour on the label. */ .sc-case__psr .is-problem dt { color: #e0364c; } .sc-case__psr .is-solution dt { color: var(--sc-blue); } .sc-case__psr .is-result dt { color: #16a34a; } .sc-case__psr .is-result dd { color: var(--sc-ink); font-weight: 500; } /* ============================================================ NETWORKS (orbit) ============================================================ */ .sc-net { padding: 60px 0 110px; background: linear-gradient(180deg, #fff, var(--sc-soft)); overflow: hidden; } .sc-net__layout { display: grid; grid-template-columns: minmax(0, 1fr) 560px; align-items: center; gap: 40px; } .sc-orbit { --r-in: 132px; --r-out: 236px; --sc-spin: 0deg; position: relative; width: 560px; height: 560px; margin-left: auto; animation: sc-orbit-spin 60s linear infinite; } @keyframes sc-orbit-spin { to { --sc-spin: 360deg; } } .sc-orbit__ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed rgba(59, 91, 255, 0.3); transform: translate(-50%, -50%); } .sc-orbit__ring--in { width: calc(var(--r-in) * 2); height: calc(var(--r-in) * 2); } .sc-orbit__ring--out { width: calc(var(--r-out) * 2); height: calc(var(--r-out) * 2); border-color: rgba(139, 92, 246, 0.28); } .sc-orbit__core { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 128px; height: 128px; border-radius: 50%; background: var(--sc-grad); color: #fff; box-shadow: 0 20px 50px rgba(59, 91, 255, 0.4), inset 0 0 0 6px rgba(255, 255, 255, 0.18); transform: translate(-50%, -50%); text-align: center; line-height: 1; } .sc-orbit__core .sc-mono { font-size: 34px; font-weight: 600; } .sc-orbit__core small { font-family: "Poppins", sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; } /* Satellites: rotate to the angle, push out, rotate back so the logo is upright. Inner ring counter-rotates for depth. */ .sc-orbit__sat { --a: calc(var(--deg) + var(--sc-spin)); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r-out)) rotate(calc(-1 * var(--a))); } .sc-orbit__sat--in { --a: calc(var(--deg) - var(--sc-spin) * 1.6); transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r-in)) rotate(calc(-1 * var(--a))); } .sc-orbit__logo { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 12px 30px rgba(30, 41, 120, 0.16); transition: transform 0.35s var(--sc-ease), box-shadow 0.35s ease; } .sc-orbit__logo:hover { transform: scale(1.14); box-shadow: 0 18px 40px rgba(59, 91, 255, 0.3); } .sc-orbit__logo img { width: 52px; height: 52px; border-radius: 50%; } .sc-orbit:hover { animation-play-state: paused; } /* ============================================================ PROCESS (scroll-filled spine) ============================================================ */ .sc-proc { padding: 110px 0 120px; background: #fff; } .sc-proc__list { position: relative; max-width: 1000px; margin: 0 auto; } .sc-step { --sc-node: 64px; /* node centre, measured from the top of the step */ position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 130px; padding: 18px 0; } /* Rail: one segment per step, from this node's centre to the next node's centre, so it starts at the first node and stops at the last. The gradient fill scales in as each step lights up. */ .sc-step::before, .sc-step::after { content: ""; position: absolute; top: var(--sc-node); bottom: calc(-1 * var(--sc-node)); left: 50%; width: 3px; border-radius: 3px; transform: translateX(-50%); } .sc-step::before { background: var(--sc-line); } .sc-step::after { background: var(--sc-grad); transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform 0.6s var(--sc-ease); } .sc-step.is-lit::after { transform: translateX(-50%) scaleY(1); } .sc-step:last-child::before, .sc-step:last-child::after { display: none; } .sc-step__node { position: absolute; top: calc(var(--sc-node) - 30px); left: 50%; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; background: #fff; box-shadow: 0 0 0 3px var(--sc-line); transform: translateX(-50%); transition: box-shadow 0.4s ease, background 0.4s ease; } .sc-step__node img { width: 28px; height: 28px; object-fit: contain; filter: brightness(0.2); transition: filter 0.3s ease; } /* Crisp ring only: a blurred drop shadow plus a fractional scale read as a soft, out-of-focus node. */ .sc-step.is-lit .sc-step__node { background: var(--sc-grad); box-shadow: 0 0 0 3px var(--sc-blue-lt); } .sc-step.is-lit .sc-step__node img { filter: brightness(10); } .sc-step__card { grid-column: 2; padding: 26px 28px; border: 1px solid var(--sc-line); border-radius: 20px; background: #fff; transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.5s var(--sc-ease); } .sc-step:nth-child(even) .sc-step__card { grid-column: 1; text-align: right; } .sc-step.is-lit .sc-step__card { border-color: transparent; box-shadow: 0 24px 50px rgba(30, 41, 120, 0.12); } .sc-step__num { font-size: 12px; font-weight: 600; color: var(--sc-muted); transition: color 0.3s ease; } .sc-step.is-lit .sc-step__num { color: var(--sc-blue); } .sc-step__card h3 { margin-top: 8px; font-size: 21px; font-weight: 700; } .sc-step__card p { margin-top: 10px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.72; } /* ============================================================ INDUSTRIES (expanding gallery) ============================================================ */ .sc-ind { padding: 40px 0 120px; background: #fff; } .sc-ind__rows { display: grid; gap: 16px; } .sc-ind__row { display: flex; gap: 16px; height: 400px; } .sc-ind__panel { position: relative; flex: 1; min-width: 0; border-radius: 24px; overflow: hidden; cursor: pointer; outline: none; transition: flex-grow 0.7s var(--sc-ease), opacity 0.55s ease, transform 0.6s var(--sc-ease); } .sc-ind__panel.is-open { flex: 3; } .sc-ind__panel:focus-visible { box-shadow: 0 0 0 3px var(--sc-blue); } .sc-ind__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1s var(--sc-ease); } .sc-ind__panel.is-open img { transform: scale(1); } .sc-ind__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10, 13, 31, 0.05) 30%, rgba(10, 13, 31, 0.86) 100% ); transition: opacity 0.4s ease; } .sc-ind__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 24px; color: #fff; } .sc-ind__body .sc-mono { display: inline-block; padding: 4px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); font-size: 11px; } .sc-ind__body h3 { margin-top: 10px; font-size: 19px; font-weight: 700; line-height: 1.25; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sc-ind__panel.is-open .sc-ind__body h3 { font-size: 24px; -webkit-line-clamp: 2; } .sc-ind__body p { max-height: 0; margin-top: 0; font-family: "Poppins", sans-serif; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); opacity: 0; overflow: hidden; transition: max-height 0.6s var(--sc-ease), opacity 0.4s ease, margin 0.4s ease; } .sc-ind__panel.is-open .sc-ind__body p { max-height: 120px; margin-top: 10px; opacity: 1; transition-delay: 0.15s; } /* ============================================================ TECH STACK (tabbed box) ============================================================ */ .sc-stack { padding: 100px 0 110px; background: var(--sc-soft); } .sc-stack__box { border: 1px solid var(--sc-line); border-radius: 26px; background: #fff; box-shadow: 0 26px 60px rgba(30, 41, 120, 0.08); overflow: hidden; } .sc-stack__tabs { display: flex; gap: 8px; padding: 18px; border-bottom: 1px solid var(--sc-line); background: linear-gradient(180deg, #fbfcff, #f4f5ff); overflow-x: auto; scrollbar-width: none; } .sc-stack__tabs::-webkit-scrollbar { display: none; } .sc-stack__tab { flex: 0 0 auto; padding: 11px 20px; border: 1px solid var(--sc-line); border-radius: 999px; background: #fff; color: var(--sc-body); font-family: "Poppins", sans-serif; font-size: 14.5px; font-weight: 700; white-space: nowrap; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .sc-stack__tab:hover { border-color: #c9d2ff; color: var(--sc-blue-dk); } .sc-stack__tab[aria-selected="true"] { border-color: transparent; background: var(--sc-grad); color: #fff; box-shadow: 0 10px 24px rgba(59, 91, 255, 0.28); } /* Panels stack in one grid cell for the cross-fade; inactive ones collapse to zero height so the box hugs the active panel instead of the tallest. */ .sc-stack__panels { display: grid; padding: 32px 40px; } .sc-stack__panel { grid-area: 1 / 1; height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } .sc-stack__panel.is-on { height: auto; overflow: visible; } .sc-stack__panel.is-on { opacity: 1; visibility: visible; } .sc-stack__panel ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .sc-stack__panel li { transform: translateY(10px); opacity: 0; transition: transform 0.45s var(--sc-ease), opacity 0.45s ease; } .sc-stack__panel.is-on li { transform: none; opacity: 1; } /* Chips cascade in when their panel becomes the active one. */ .sc-stack__panel li:nth-child(1) { transition-delay: 0.04s; } .sc-stack__panel li:nth-child(2) { transition-delay: 0.09s; } .sc-stack__panel li:nth-child(3) { transition-delay: 0.14s; } .sc-stack__panel li:nth-child(4) { transition-delay: 0.19s; } .sc-stack__panel li:nth-child(5) { transition-delay: 0.24s; } .sc-stack__panel li:nth-child(6) { transition-delay: 0.29s; } .sc-stack__panel li:nth-child(7) { transition-delay: 0.34s; } .sc-stack__panel li:nth-child(8) { transition-delay: 0.39s; } .sc-stack__chip { display: inline-flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 24px 12px 16px; border: 1px solid var(--sc-line); border-radius: 14px; background: #fbfcff; color: var(--sc-ink); font-size: 15.5px; font-weight: 700; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .sc-stack__chip:hover { transform: translateY(-3px); border-color: #c9d2ff; box-shadow: 0 14px 30px rgba(30, 41, 120, 0.1); } .sc-stack__chip img { width: 48px; height: 48px; border-radius: 50%; object-fit: contain; transition: transform 0.35s ease; } .sc-stack__chip:hover img { transform: scale(1.1) rotate(-4deg); } /* ============================================================ WHY US (dark) ============================================================ */ .sc-why { position: relative; padding: 110px 0 120px; background: var(--sc-dark); overflow: clip; /* `hidden` would make a scroll container and kill the sticky aside */ } .sc-why__glow { position: absolute; right: -200px; bottom: -200px; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient( closest-side, rgba(139, 92, 246, 0.28), transparent ); filter: blur(40px); pointer-events: none; } .sc-why__layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } .sc-why__aside { position: sticky; top: 120px; } .sc-why__item { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; align-items: start; gap: 18px; padding: 26px 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; transition: opacity 0.55s ease, background 0.35s ease, transform 0.4s var(--sc-ease); } .sc-why__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sc-why__item:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(8px); } .sc-why__num { font-size: 15px; font-weight: 600; padding-top: 3px; color: rgba(255, 255, 255, 0.35); transition: color 0.3s ease; } .sc-why__item:hover .sc-why__num { color: #b9c4ff; } .sc-why__item h3 { font-size: 20px; font-weight: 700; color: #fff; } .sc-why__item p { margin-top: 8px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.62); } .sc-why__check { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; transition: background 0.35s ease, border-color 0.35s ease, transform 0.4s var(--sc-ease); } .sc-why__check svg { width: 15px; height: 15px; } .sc-why__item:hover .sc-why__check { background: var(--sc-grad); border-color: transparent; transform: rotate(360deg); } /* ============================================================ FINAL CTA ============================================================ */ .sc-final { padding: 100px 0 40px; background: #fff; } .sc-final__inner { position: relative; max-width: 900px; margin: 0 auto; padding: 70px 48px; border-radius: 34px; background: #fff; text-align: center; overflow: hidden; isolation: isolate; box-shadow: 0 30px 80px rgba(30, 41, 120, 0.12); } /* Spinning conic border. */ .sc-final__ring { position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--sc-spin), var(--sc-blue), var(--sc-violet), var(--sc-cyan), var(--sc-blue) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sc-orbit-spin 6s linear infinite; } .sc-final__inner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient( 500px 240px at 50% 0%, rgba(59, 91, 255, 0.12), transparent 70% ); } .sc-final__title { margin-top: 20px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.14; } .sc-final__text { max-width: 640px; margin: 18px auto 32px; font-family: "Poppins", sans-serif; font-size: 16px; line-height: 1.75; } /* ============================================================ FAQ ============================================================ */ .sc-faq { padding: 90px 0 110px; background: #fff; } .sc-faq__layout { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); align-items: start; gap: 56px; } .sc-faq__aside { position: sticky; top: 120px; } .sc-faq__title { font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1.14; } .sc-faq__promo { margin-top: 28px; padding: 30px 28px; border-radius: 22px; background: radial-gradient(300px 160px at 100% 0%, rgba(139, 92, 246, 0.35), transparent 70%), var(--sc-dark); color: #fff; } .sc-faq__promo h3 { font-size: 21px; font-weight: 700; color: #fff; } .sc-faq__promo p { margin: 10px 0 22px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.66); } .sc-faq__item { border-bottom: 1px solid var(--sc-line); } .sc-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 17.5px; font-weight: 600; color: var(--sc-ink); cursor: pointer; list-style: none; transition: color 0.25s ease; } .sc-faq__q::-webkit-details-marker { display: none; } .sc-faq__q:hover { color: var(--sc-blue-dk); } .sc-faq__mark { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--sc-line); border-radius: 50%; transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--sc-ease); } .sc-faq__mark::before, .sc-faq__mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--sc-ink); translate: -50% -50%; transition: background 0.3s ease, opacity 0.3s ease; } .sc-faq__mark::after { rotate: 90deg; } .sc-faq__item[open] .sc-faq__mark { border-color: transparent; background: var(--sc-grad); transform: rotate(180deg); } .sc-faq__item[open] .sc-faq__mark::before, .sc-faq__item[open] .sc-faq__mark::after { background: #fff; } .sc-faq__item[open] .sc-faq__mark::after { opacity: 0; } .sc-faq__a-wrap { overflow: hidden; } .sc-faq__item[open] .sc-faq__a { animation: sc-faq-in 0.4s var(--sc-ease); } @keyframes sc-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .sc-faq__a { padding: 0 60px 24px 0; font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1.78; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199.98px) { .sc-services__grid, .sc-sol__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-net__layout { grid-template-columns: minmax(0, 1fr) 460px; } .sc-orbit { --r-in: 110px; --r-out: 196px; width: 460px; height: 460px; } .sc-orbit__logo { width: 64px; height: 64px; } .sc-orbit__logo img { width: 44px; height: 44px; } .sc-case__body { padding: 32px; } .sc-ind__row { height: 360px; } } @media (max-width: 991.98px) { .sc-hero { padding-top: 56px; } .sc-hero__layout { grid-template-columns: 1fr; gap: 36px; padding-bottom: 56px; } .sc-hero__media { order: -1; max-width: 560px; margin: 0 auto; } .sc-hero__title { font-size: clamp(34px, 7vw, 52px); } .sc-what__layout { grid-template-columns: 1fr; gap: 72px; } .sc-what__media { max-width: 600px; margin: 0 auto; } .sc-cta__inner { flex-direction: column; align-items: flex-start; padding: 44px 36px; } .sc-case { grid-template-columns: 1fr; top: 84px; } .sc-case__media { padding: 24px; } .sc-case__media img { max-width: 320px; } .sc-net__layout { grid-template-columns: 1fr; gap: 40px; } /* Orbit collapses into a chip grid; satellites stop moving. */ .sc-orbit { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: auto; height: auto; margin-left: 0; animation: none; } .sc-orbit__ring, .sc-orbit__core { display: none; } .sc-orbit__sat, .sc-orbit__sat--in { position: static; transform: none; } .sc-orbit__logo { width: 68px; height: 68px; } .sc-step { --sc-node: 46px; grid-template-columns: 1fr; padding: 14px 0 14px 84px; } .sc-step::before, .sc-step::after, .sc-step__node { left: 30px; } .sc-step__card, .sc-step:nth-child(even) .sc-step__card { grid-column: 1; text-align: left; } .sc-stack__panels { padding: 22px 18px; } .sc-why__layout, .sc-faq__layout { grid-template-columns: 1fr; gap: 40px; } .sc-why__aside, .sc-faq__aside { position: static; } } @media (max-width: 767.98px) { .sc-services__grid, .sc-sol__grid { grid-template-columns: 1fr; } .sc-svc { min-height: 0; } .sc-what, .sc-services, .sc-sol, .sc-cases, .sc-proc, .sc-stack, .sc-why, .sc-faq { padding-top: 72px; padding-bottom: 80px; } .sc-sol { margin-top: 40px; } .sc-head { margin-bottom: 36px; } /* Gallery: plain stacked cards, everything open. */ .sc-ind__row { flex-direction: column; height: auto; } .sc-ind__panel, .sc-ind__panel.is-open { flex: none; height: 260px; } .sc-ind__panel img { transform: none; } .sc-ind__body p, .sc-ind__panel.is-open .sc-ind__body p { max-height: 140px; margin-top: 10px; opacity: 1; } .sc-ind__body h3, .sc-ind__panel.is-open .sc-ind__body h3 { font-size: 20px; } .sc-case__psr > div { grid-template-columns: 1fr; gap: 6px; } .sc-case__body { padding: 26px 22px; } .sc-final__inner { padding: 52px 24px; } .sc-cta__inner { padding: 36px 24px; } .sc-faq__a { padding-right: 0; } .sc-why__item { grid-template-columns: 40px minmax(0, 1fr); padding: 22px 12px; } .sc-why__check { display: none; } } @media (max-width: 479.98px) { .sc-btn { --sc-btn-pad-l: 20px; --sc-btn-icon-w: 40px; } .sc-btn__label { font-size: 12px; white-space: normal; text-align: left; } .sc-hero__title { font-size: 32px; } .sc-orbit__logo { width: 58px; height: 58px; } .sc-orbit__logo img { width: 40px; height: 40px; } }