/* ============================================================ Crypto Wallet App Development (/service/crypto-wallet-development-services) Full-dark page, blue/indigo accent. BEM-ish `cry-` prefix; scroll-reveal via `.cry-anim` on , mirroring casino.css / ready-made.css / llm.css. ============================================================ */ /* The global stylesheets set `overflow-x: hidden` on , which makes it a scroll container and silently disables `position: sticky` inside it. `clip` prevents the same horizontal overflow without creating a scroll container. Scoped with :has() so only this page is affected. */ body:has(.cry-page) { overflow-x: clip; background: #05050f; } .cry-page { --cry-blue: #0072f6; --cry-blue-lt: #3a91ff; --cry-indigo: #2f2ad0; --cry-bg: #05050f; --cry-bg-2: #0a0a18; --cry-bg-3: #000; --cry-panel: #121219; --cry-panel-2: #17171f; --cry-line: rgba(255, 255, 255, 0.09); --cry-ink: #fff; --cry-body: rgba(255, 255, 255, 0.66); --cry-muted: rgba(255, 255, 255, 0.45); position: relative; background: var(--cry-bg); color: var(--cry-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .cry-page .container { max-width: 1240px; } /* `:where()` keeps these resets at zero added specificity, so the component rules further down can set their own margin/padding without needing to out-specify the reset. */ .cry-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; } .cry-page :where(p) { margin: 0; } .cry-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .cry-blue { color: var(--cry-blue); } /* ---------- shared section furniture ---------- */ /* Centred variant (bands, industries, why, tech stack). */ .cry-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin: 0 auto 54px; max-width: 1000px; } /* Split variant: uppercase display heading left, supporting copy right — used by Services, Types, Advanced Features and Feature-rich. */ .cry-head--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; gap: 40px; max-width: none; text-align: left; } .cry-title { font-weight: 800; font-size: clamp(30px, 4.1vw, 52px); line-height: 1.18; color: var(--cry-ink); } /* The uppercase display heads in the design run wider and tighter than the sentence-case ones. */ .cry-title--display { font-size: clamp(28px, 3.9vw, 50px); line-height: 1.14; text-transform: uppercase; letter-spacing: -0.01em; } .cry-lead { max-width: 900px; font-size: 16px; line-height: 26px; color: var(--cry-body); } .cry-head--split .cry-lead { margin-top: 6px; font-weight: 500; color: rgba(255, 255, 255, 0.82); } /* ---------- pill button ---------- */ /* Label sits left of a white arrow disc; on hover the two swap sides, which is why the JS publishes the measured label width as --cry-btn-label-w. */ .cry-btn { --cry-btn-icon-w: 44px; --cry-btn-gap: 14px; --cry-btn-pad-l: 32px; --cry-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--cry-btn-gap); width: max-content; padding: 9px var(--cry-btn-pad-r) 9px var(--cry-btn-pad-l); border-radius: 999px; background: linear-gradient(90deg, #1f7bff 0%, var(--cry-indigo) 100%); color: #fff; overflow: hidden; text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .cry-btn:hover, .cry-btn:focus-visible { padding-left: var(--cry-btn-pad-r); padding-right: var(--cry-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(47, 42, 208, 0.4); } .cry-btn__label { display: inline-block; flex: none; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 14px; 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); } .cry-btn__icon { display: grid; place-items: center; flex: none; width: var(--cry-btn-icon-w); height: var(--cry-btn-icon-w); border-radius: 50%; background: #fff; color: #0b1220; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.25s ease; } /* The glyph is drawn pointing up-right, so a 45deg turn lands it pointing straight right on hover. Rotating the rather than a background-image so it can carry width/height and lazy loading; `object-fit: cover` keeps the focal art in frame at every width. */ .cry-band { position: relative; padding: 78px 0; background: #05050f; color: #fff; overflow: hidden; isolation: isolate; } .cry-band__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; } .cry-band__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; } .cry-band__title { max-width: 980px; font-weight: 600; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.2; } .cry-band__text { max-width: 760px; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, 0.72); } .cry-band__list { display: flex; flex-direction: column; gap: 12px; list-style: none; text-align: left; } .cry-band__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.85); } .cry-band__list li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--cry-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat; } /* ============================================================ SERVICES — numbered rows ============================================================ */ .cry-svc { /* Site header is fixed at 76px; the extra 14px is the same gap the casino process stack uses at this breakpoint. */ --cry-svc-stick: 90px; position: relative; padding: 90px 0 96px; background: var(--cry-bg-3); /* `overflow: hidden` here would make this section a scroll container and silently kill the sticky rows below — `clip` prevents the same horizontal spill without that side effect. */ overflow: clip; } .cry-svc__head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 30px; margin-bottom: 46px; } .cry-svc__coin { justify-self: end; width: 272px; max-width: 100%; height: auto; } .cry-svc__list { display: flex; flex-direction: column; gap: 14px; } /* Icon | number | title occupy a fixed measure so every row's description starts on the same vertical rule, as in the design. Sticky stack, ported from the casino process list: every row pins at the same offset and the next one rides up and covers it — which is why the row needs an opaque fill, and why the rows carry no `cry-reveal` (a row that had not revealed yet would pin while still transparent, letting the one underneath show through the stack). */ .cry-svc__row { position: sticky; top: var(--cry-svc-stick); display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 30px 34px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; background: var(--cry-panel); transition: background 0.25s ease, border-color 0.25s ease; } /* No lift on hover: a `transform` on a pinned row shifts it out of its sticky offset, so only the fill and the border respond. */ .cry-svc__row:hover { background: var(--cry-panel-2); border-color: rgba(0, 114, 246, 0.35); } .cry-svc__icon { display: grid; place-items: center; width: 96px; height: 96px; } .cry-svc__icon img { width: 100%; height: 100%; object-fit: contain; } .cry-svc__name { font-weight: 600; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.28; color: #fff; } .cry-svc__text { font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 24px; color: var(--cry-body); } /* ============================================================ TYPES OF WALLETS ============================================================ */ .cry-types { padding: 86px 0 96px; background: var(--cry-bg); } .cry-types__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .cry-types__cell { padding: 26px 24px 30px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100% ); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .cry-types__cell:hover { border-color: rgba(0, 114, 246, 0.45); transform: translateY(-5px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5); } .cry-types__icon { display: grid; place-items: center; width: 38px; height: 38px; } .cry-types__icon img { width: 100%; height: 100%; object-fit: contain; } .cry-types__name { margin-top: 22px; font-weight: 600; font-size: 20px; line-height: 1.3; color: #fff; } .cry-types__text { margin-top: 12px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 22px; color: var(--cry-body); } /* ============================================================ ADVANCED FEATURES — horizontal rail ============================================================ */ .cry-adv { padding: 86px 0 96px; background: var(--cry-bg-3); } /* The design runs the cards off the right edge of the viewport, so the track bleeds past the container while keeping its left gutter. */ .cry-adv__slider { position: relative; z-index: 1; display: block; /* Bleed to the viewport edge while keeping the container's left gutter. */ margin-right: calc(50% - 50vw); padding-right: max(24px, calc(50vw - 50%)); /* Until Swiper takes over the track is a plain flex row, so leaving it scrollable keeps the cards reachable if the script never runs. Swiper stamps `swiper-initialized` on itself once it has, and from then on it owns the translation. */ overflow-x: auto; scrollbar-width: none; } .cry-adv__slider::-webkit-scrollbar { display: none; } .cry-adv__slider.swiper-initialized { overflow: hidden; } .cry-adv__card { /* Slides are stretched to equal height so the cards line up whatever the copy length; Swiper writes the width inline from slidesPerView. */ height: auto; display: flex; flex-direction: column; padding: 14px 14px 26px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.012) 100% ); transition: border-color 0.25s ease, transform 0.25s ease; } .cry-adv__card:hover { border-color: rgba(0, 114, 246, 0.45); transform: translateY(-5px); } /* `height: auto` is required: the width/height attributes on the act as a presentational hint and would otherwise pin the box height, leaving `aspect-ratio` inert. Same reason on every other aspect-ratio image below. */ .cry-adv__card img { width: 100%; height: auto; aspect-ratio: 313 / 264; border-radius: 8px; object-fit: cover; } .cry-adv__name { margin-top: 20px; font-weight: 600; font-size: 19px; line-height: 1.3; color: #fff; } .cry-adv__text { margin-top: 12px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 22px; color: var(--cry-body); } /* ============================================================ PROCESS — centre-rail zig-zag ============================================================ */ .cry-proc { padding: 86px 0 96px; background: var(--cry-bg); } .cry-proc { /* Sampled from the Figma render: the filled dot and the completed rail share one blue, the pending dot and rail share one grey. */ --cry-proc-done: #081ec8; --cry-proc-pending: #353543; } .cry-proc__list { position: relative; margin-top: 60px; } /* The rail is drawn as one connector per step rather than once on the list: each runs from its own dot's centre down to the next dot's centre, so the rail starts at the first dot and stops at the last, as the design does. */ .cry-proc__step::before { content: ""; position: absolute; left: 50%; top: 50%; bottom: -50%; width: 2px; transform: translateX(-50%); background: var(--cry-proc-pending); } .cry-proc__step:last-child::before { content: none; } /* Steps the reader has already passed are joined by a solid blue connector. */ .cry-proc__step.is-done::before { background: var(--cry-proc-done); } /* The step the reader is level with fills only halfway to the next dot and burns out to white at the tip; the rest stays the pending grey. */ .cry-proc__step.is-active::before { background: linear-gradient( 180deg, var(--cry-proc-done) 0%, var(--cry-proc-done) 40%, #fff 50%, var(--cry-proc-pending) 50%, var(--cry-proc-pending) 100% ); } /* 94px of padding either side of the 124px artwork puts ~312px between dot centres, which is the step rhythm measured off the Figma frame. */ .cry-proc__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; gap: 0; padding: 94px 0; } /* Steps the reader has not reached yet sit back; the one they are level with comes forward. Scoped to `.cry-anim` (set in the head whenever scripting is on) for the same reason the reveal is — without JS nothing is ever marked active, and every step would stay dimmed. The rail is painted by the step's own ::before, so the dimming goes on the children to keep it at full strength. */ .cry-anim .cry-proc__media, .cry-anim .cry-proc__detail, .cry-anim .cry-proc__dot { opacity: 0.4; transform: scale(0.93); transition: opacity 0.35s ease, transform 0.35s ease; } /* The dot keeps full opacity even when pending — its fill and outline already carry the state, and fading it would wash out the rail it sits on. */ .cry-anim .cry-proc__dot { opacity: 1; } .cry-anim .cry-proc__step.is-active .cry-proc__media, .cry-anim .cry-proc__step.is-active .cry-proc__detail, .cry-anim .cry-proc__step.is-active .cry-proc__dot { opacity: 1; transform: none; } .cry-proc__media { display: grid; place-items: center; padding: 0 40px; } .cry-proc__media img { width: 124px; height: 124px; object-fit: contain; } .cry-proc__detail { padding: 0 40px; } /* Odd steps put the artwork left of the rail and the copy right; even steps mirror, with the copy right-aligned so it reads back toward the rail. Grid `order` does the swap so the DOM stays in reading order. */ .cry-proc__step:nth-child(odd) .cry-proc__media { order: 1; } .cry-proc__step:nth-child(odd) .cry-proc__dot { order: 2; } .cry-proc__step:nth-child(odd) .cry-proc__detail { order: 3; text-align: left; } .cry-proc__step:nth-child(even) .cry-proc__detail { order: 1; text-align: right; } .cry-proc__step:nth-child(even) .cry-proc__dot { order: 2; } .cry-proc__step:nth-child(even) .cry-proc__media { order: 3; } /* Sits above the rail it interrupts, and the numeral is a hollow glyph — the design draws it as an outline, which `-webkit-text-stroke` reproduces without shipping an image per step. Poppins, not the page's Gabarito: the stroke is centred on the glyph contour, so any feature narrower than twice the stroke fills in solid, and Gabarito's "1" has exactly such a wedge at its apex. Poppins' geometric digits stay open at this size — and match the design's numerals anyway. */ .cry-proc__dot { position: relative; z-index: 1; display: grid; place-items: center; justify-self: center; width: 78px; height: 78px; border-radius: 50%; background: var(--cry-proc-pending); /* Sized so the numeral's cap height lands at the 34px the design uses inside the 78px disc. */ font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 46px; letter-spacing: 0.01em; color: transparent; -webkit-text-stroke: 1.7px rgba(255, 255, 255, 0.42); transition: background 0.35s ease, -webkit-text-stroke-color 0.35s ease, transform 0.35s ease; } .cry-proc__step.is-done .cry-proc__dot, .cry-proc__step.is-active .cry-proc__dot { background: var(--cry-proc-done); -webkit-text-stroke-color: #fff; } .cry-proc__title { font-weight: 600; font-size: 23px; line-height: 1.3; color: #fff; } .cry-proc__text { margin-top: 12px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 24px; color: var(--cry-body); } /* ============================================================ SECURITY — media + accordion ============================================================ */ .cry-sec { padding: 86px 0 96px; background: var(--cry-bg); } /* 549px of media against a 1238px content width in the Figma frame. */ .cry-sec__layout { display: grid; grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); align-items: start; gap: 40px; } /* Without the media column the copy takes the full measure rather than sitting in a half-width column beside an empty cell. */ .cry-sec__layout--solo { grid-template-columns: minmax(0, 1fr); } /* The copy column is the shorter of the two, so it is the one that pins and tracks the taller image as it scrolls past. 90px clears the fixed 76px header with the same 14px breathing room the sticky service rows use. */ .cry-sec__body { position: sticky; top: 90px; } .cry-sec__media { width: 100%; height: auto; aspect-ratio: 549 / 708; border-radius: 10px; object-fit: cover; } .cry-sec__title { font-weight: 700; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.2; color: #fff; } .cry-sec__text { margin-top: 16px; font-size: 16px; line-height: 26px; color: var(--cry-body); } .cry-sec__list { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; } .cry-sec__item { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; background: var(--cry-panel); overflow: hidden; transition: background 0.2s ease, border-color 0.2s ease; } .cry-sec__item[open] { border-color: rgba(0, 114, 246, 0.35); background: var(--cry-panel-2); } .cry-sec__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; line-height: 1.4; color: #fff; } .cry-sec__q::-webkit-details-marker { display: none; } .cry-sec__q::before { content: "•"; margin-right: -6px; color: var(--cry-blue); } /* Chevron drawn in CSS so no extra asset is needed; it rotates to point down when the row opens. */ .cry-sec__chev { position: relative; flex: none; width: 20px; height: 20px; transition: transform 0.3s ease; } .cry-sec__chev::before { content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; border-right: 2px solid rgba(255, 255, 255, 0.75); border-bottom: 2px solid rgba(255, 255, 255, 0.75); transform: translateY(-50%) rotate(-45deg); } .cry-sec__item[open] .cry-sec__chev { transform: rotate(90deg); } /* Animated by the blade script:

cannot transition its own height. */ .cry-sec__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .cry-sec__item[open] .cry-sec__a-wrap { height: auto; opacity: 1; } .cry-sec__a { padding: 0 24px 22px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 24px; color: var(--cry-body); } /* ============================================================ FEATURE-RICH CARDS ============================================================ */ .cry-rich { padding: 86px 0 96px; background: var(--cry-bg-2); } .cry-rich__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .cry-rich__cell { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: start; gap: 18px; padding: 24px 22px 26px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.012) 100% ); overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease; } .cry-rich__cell:hover { border-color: rgba(0, 114, 246, 0.45); transform: translateY(-5px); } .cry-rich__icon { width: 72px; height: 72px; object-fit: contain; } .cry-rich__no { position: absolute; right: 20px; top: 16px; font-weight: 700; font-size: 26px; line-height: 1; color: rgba(255, 255, 255, 0.18); } .cry-rich__name { font-weight: 600; font-size: 17px; line-height: 1.3; color: #fff; } .cry-rich__text { margin-top: 10px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 13px; line-height: 20px; color: var(--cry-body); } /* The short accent rule under each description in the design. */ .cry-rich__rule { display: block; margin-top: 14px; width: 26px; height: 2px; border-radius: 2px; background: var(--cry-accent, #0072f6); } /* ============================================================ TECH STACK — vertical tabs ============================================================ */ .cry-stack { padding: 86px 0 96px; background: var(--cry-bg); } /* Tabs ride above the panel rather than beside it. A side column of eight rows forced the panel to match its height, which is what left a two-item tab with a screen of dead space under it. */ .cry-stack__layout { display: flex; flex-direction: column; gap: 18px; } /* A faint blue bloom in the top-left lifts the panel off the flat section background without needing an image. */ .cry-stack__panel { display: grid; grid-template-columns: minmax(0, 1fr); padding: 32px 34px 38px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; background: radial-gradient( 62% 58% at 4% 0%, rgba(31, 90, 255, 0.16) 0%, rgba(31, 90, 255, 0) 68% ), var(--cry-panel); } /* Panes stack in one grid cell and the open one sizes the panel. Every group holds five items or fewer and the card grid is six tracks wide, so each pane is a single row and the panel height barely moves between tabs. */ .cry-stack__pane { display: grid; grid-area: 1 / 1; align-content: start; min-width: 0; animation: cry-stack-in 0.3s ease both; } .cry-stack__pane.is-hidden { display: none; } @keyframes cry-stack-in { from { opacity: 0; transform: translateY(6px); } } .cry-stack__panel-title { padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: 600; font-size: 24px; line-height: 1.2; color: #fff; } /* A capped track width keeps the card size identical whatever the tab holds — a 1fr max would blow a two-item tab up into two enormous cards. `auto-fit` then drops the unused tracks so a short row centres instead of hugging the left edge with a void beside it. */ .cry-stack__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 214px)); justify-content: center; align-content: start; gap: 16px; } .cry-stack__card { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 26px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; background: rgba(255, 255, 255, 0.03); text-align: center; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .cry-stack__card:hover { border-color: rgba(0, 114, 246, 0.45); background: rgba(0, 114, 246, 0.07); transform: translateY(-4px); } /* The supplied marks already sit on their own dark disc, so the well is only here to keep the monogram fallback the same size and shape. */ .cry-stack__logo { display: grid; place-items: center; width: 64px; height: 64px; } .cry-stack__logo img { width: 100%; height: 100%; object-fit: contain; } .cry-stack__card-name { margin-top: 16px; font-weight: 700; font-size: 16px; line-height: 1.3; color: #fff; } .cry-stack__card-text { margin-top: 8px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 12px; line-height: 18px; color: var(--cry-muted); } /* Monogram stand-in for a tech whose brand mark has not been supplied yet. */ .cry-stack__mono { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; background: rgba(0, 114, 246, 0.14); color: var(--cry-blue-lt); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; } /* Scrolls sideways rather than wrapping, so the chip row stays one line at every width and the panel below never shifts down a step. `order` lifts it above the panel, which stays first in the DOM so the content is read before the controls. */ .cry-stack__tabs { order: -1; display: flex; gap: 6px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; background: var(--cry-panel); overflow-x: auto; scrollbar-width: none; } .cry-stack__tabs::-webkit-scrollbar { display: none; } .cry-stack__tab { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 1 0 auto; padding: 13px 18px; border: 0; border-radius: 11px; background: transparent; color: rgba(255, 255, 255, 0.72); font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .cry-stack__tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .cry-stack__tab[aria-selected="true"] { background: linear-gradient(90deg, #1f7bff 0%, var(--cry-indigo) 100%); color: #fff; box-shadow: 0 10px 24px rgba(47, 42, 208, 0.32); } .cry-stack__tab[aria-selected="true"] /* ============================================================ INDUSTRIES ============================================================ */ .cry-ind { padding: 86px 0 96px; background: var(--cry-bg); } .cry-ind__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } /* Figma tints the lower-left corner of each card with a soft blue bloom. */ .cry-ind__cell { padding: 26px 24px 30px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; background: radial-gradient( 74% 58% at 8% 104%, rgba(31, 90, 255, 0.28) 0%, rgba(31, 90, 255, 0) 72% ), #0b0b16; transition: border-color 0.25s ease, transform 0.25s ease; } .cry-ind__cell:hover { border-color: rgba(0, 114, 246, 0.45); transform: translateY(-5px); } .cry-ind__icon { width: 44px; height: 44px; object-fit: contain; } .cry-ind__name { margin-top: 22px; font-weight: 600; font-size: 21px; line-height: 1.28; color: #fff; } .cry-ind__text { margin-top: 14px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 23px; color: var(--cry-body); } /* ============================================================ WHY CHOOSE — numbered rows ============================================================ */ .cry-why { padding: 86px 0 96px; background: var(--cry-bg); } .cry-why__list { margin-top: 46px; } .cry-why__row { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 20px; min-height: 132px; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .cry-why__row:first-child { border-top: 1px solid rgba(255, 255, 255, 0.12); } /* The row the reader is level with opens: its numeral and title go blue and the description fades in beside them. The description keeps its space whether or not the row is open, and the row carries a min-height to match — animating the row's height instead would relayout the whole list on every frame and shift the rows below out from under the scroll. Only opacity and transform change here, so nothing reflows. */ .cry-why__text { font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 24px; color: var(--cry-body); opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .cry-why__row.is-active .cry-why__text { opacity: 1; transform: none; } /* The open row also steps up in size, so it reads as the one in focus even before the description has finished unfolding. */ .cry-why__row.is-active .cry-why__no { transform: scale(1.2); -webkit-text-stroke-color: var(--cry-blue); } .cry-why__row.is-active .cry-why__name { transform: scale(1.12); color: var(--cry-blue); } /* Outlined numeral — the design draws it as a hollow glyph, which -webkit-text-stroke reproduces without shipping an image per row. Poppins for the same reason as the process dots: Gabarito's "1" fills in solid at the apex once the stroke is wider than the wedge there. */ .cry-why__no { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.55); /* Scaled rather than resized: `font-size` relayouts on every frame, which both stutters the animation and rewraps the title mid-transition. `transform` is composited, so the text keeps its original line breaks. */ transform-origin: left center; will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-text-stroke-color 0.35s ease; } .cry-why__name { font-weight: 500; font-size: clamp(19px, 2vw, 26px); line-height: 1.3; color: #fff; transform-origin: left center; will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease; } /* ============================================================ FAQ ============================================================ */ .cry-faq { padding: 80px 0 110px; background: var(--cry-bg-3); } .cry-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: start; } /* The heading + promo track the list while it scrolls. */ .cry-faq__aside { position: sticky; top: 110px; } .cry-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(34px, 4.6vw, 66px); line-height: 1.2; color: #fff; } .cry-faq__promo { margin-top: 90px; padding: 32px 30px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; background: linear-gradient(241deg, #196dff 30%, #001da0 100%); color: #fff; } .cry-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; } .cry-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 15px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .cry-faq__list { display: flex; flex-direction: column; gap: 14px; } .cry-faq__item { padding: 20px 28px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: var(--cry-panel); overflow: hidden; transition: background 0.2s ease, border-color 0.2s ease; } .cry-faq__item[open] { background: var(--cry-panel-2); border-color: rgba(255, 255, 255, 0.14); } .cry-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 500; font-size: 17px; line-height: 1.5; color: #fff; } .cry-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .cry-faq__mark { position: relative; flex: none; width: 24px; height: 24px; } .cry-faq__mark::before, .cry-faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; background: #fff; transform: translate(-50%, -50%); transition: transform 0.25s ease, opacity 0.25s ease; } .cry-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .cry-faq__item[open] .cry-faq__mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(180deg); } .cry-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .cry-faq__item[open] .cry-faq__a-wrap { height: auto; opacity: 1; } .cry-faq__a { padding-top: 12px; max-width: 523px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 23px; color: var(--cry-body); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199px) { /* The description drops under the title; the icon spans both rows so it stays centred against the pair instead of being centred on the title alone. */ .cry-svc__row { grid-template-columns: 84px minmax(0, 1fr); row-gap: 10px; } .cry-svc__icon { grid-row: 1 / -1; width: 84px; height: 84px; } .cry-svc__text { grid-column: 2; } } @media (max-width: 991px) { .cry-hero { padding-top: 92px; } .cry-head--split { grid-template-columns: minmax(0, 1fr); gap: 18px; } .cry-hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 60px; } .cry-hero__trust-item:nth-child(odd) { border-left: 0; } .cry-hero__trust-item:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); } .cry-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } .cry-stat:nth-child(odd) { border-left: 0; } .cry-svc__head { grid-template-columns: minmax(0, 1fr); } .cry-svc__coin { justify-self: start; width: 180px; } .cry-types__grid, .cry-rich__grid, .cry-ind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cry-sec__layout { grid-template-columns: minmax(0, 1fr); gap: 30px; } /* Chips stop sharing the row evenly and take their natural width, so the row scrolls instead of squeezing eight labels into the viewport. */ .cry-stack__tab { flex: 0 0 auto; padding: 12px 16px; font-size: 14px; } .cry-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .cry-faq__aside { position: static; top: auto; } .cry-faq__promo { margin-top: 26px; } } @media (max-width: 767px) { /* Forced line breaks are tuned for the desktop measure — let the text reflow naturally once the column gets narrow. */ .cry-hero__title br, .cry-title br, .cry-lead br, .cry-band__title br, .cry-faq__title br { display: none; } /* Matches the site header's shorter fixed height at this breakpoint. */ .cry-svc { --cry-svc-stick: 76px; } .cry-svc__row { grid-template-columns: 62px minmax(0, 1fr); gap: 18px; padding: 22px; } .cry-svc__icon { width: 62px; height: 62px; } /* The rail's zig-zag has no room on a phone: everything stacks right of a rail pinned to the far left, and the step artwork is dropped. */ .cry-proc__step::before { left: 32px; } .cry-proc__step { grid-template-columns: 64px minmax(0, 1fr); padding: 34px 0; } .cry-proc__media { display: none; } .cry-proc__step:nth-child(odd) .cry-proc__dot, .cry-proc__step:nth-child(even) .cry-proc__dot { order: 1; justify-self: start; } .cry-proc__step:nth-child(odd) .cry-proc__detail, .cry-proc__step:nth-child(even) .cry-proc__detail { order: 2; padding: 0 0 0 20px; text-align: left; } .cry-proc__dot { width: 64px; height: 64px; font-size: 38px; -webkit-text-stroke-width: 1.4px; } /* The description drops under the title once there is no room beside it. */ .cry-why__row { grid-template-columns: 76px minmax(0, 1fr); row-gap: 8px; min-height: 0; padding: 22px 0; } .cry-why__reveal { grid-column: 2; } .cry-why__no { font-size: 34px; } .cry-faq__item { padding: 18px 20px; } } @media (max-width: 575px) { /* The label is nowrap so the hover swap can measure it; shrink the type and the padding instead so the longest CTA still fits a 360px viewport. */ .cry-btn { --cry-btn-icon-w: 36px; --cry-btn-gap: 10px; --cry-btn-pad-l: 18px; --cry-btn-pad-r: 7px; max-width: 100%; } .cry-btn__label { font-size: 11.5px; letter-spacing: 0; } .cry-btn__icon svg { width: 16px; height: 16px; } .cry-hero__trust { grid-template-columns: minmax(0, 1fr); } .cry-hero__trust-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } .cry-hero__trust-item:first-child { border-top: 0; } .cry-stats__grid, .cry-types__grid, .cry-rich__grid, .cry-ind__grid { grid-template-columns: minmax(0, 1fr); } .cry-stat { border-left: 0; padding: 0; } } /* ---------- 320px tier ---------- */ /* Below ~420px the longest CTA ("Book a Free 30-Minute Consultation") cannot fit on one line at any readable size, so the label is allowed to wrap and the button becomes a shrink-to-fit centred pill. Wrapping breaks the hover label/disc swap (it measures a single-line width), so that animation is switched off here — it is a pointer affordance and these widths are touch. */ @media (max-width: 420px) { .cry-btn { --cry-btn-pad-l: 20px; width: auto; max-width: 100%; justify-content: center; gap: 10px; } /* The base rule sets `flex: none`, which keeps the label at its max-content width and pushes the arrow disc past the button edge once it wraps. */ .cry-btn__label { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.35; } .cry-btn:hover, .cry-btn:focus-visible { padding-left: var(--cry-btn-pad-l); padding-right: var(--cry-btn-pad-r); } .cry-btn:hover .cry-btn__label, .cry-btn:focus-visible .cry-btn__label, .cry-btn:hover .cry-btn__icon, .cry-btn:focus-visible .cry-btn__icon { transform: none; } .cry-hero__title { font-size: 32px; } .cry-hero__text, .cry-lead { font-size: 14px; line-height: 22px; } .cry-title, .cry-title--display { font-size: 25px; } .cry-band__title { font-size: 23px; } .cry-stat__value { font-size: 32px; } .cry-svc__row { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px; } .cry-svc__icon { width: 48px; height: 48px; } .cry-svc__name { font-size: 18px; } .cry-svc__text { font-size: 14px; line-height: 22px; } .cry-types__cell, .cry-ind__cell { padding: 20px 18px 24px; } .cry-rich__cell { grid-template-columns: 60px minmax(0, 1fr); padding: 20px 18px; } .cry-rich__icon { width: 56px; height: 56px; } .cry-sec__q { padding: 16px 18px; font-size: 15px; } .cry-sec__a { padding: 0 18px 18px; } .cry-faq__item { padding: 16px 18px; } .cry-faq__q { font-size: 15px; gap: 10px; } .cry-faq__promo { padding: 24px 20px; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .cry-anim .cry-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .cry-anim .cry-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cry-anim .cry-reveal { opacity: 1; transform: none; transition: none; } /* The pending step stays dimmed — that is state, not motion — but it no longer scales, and neither transition animates. */ .cry-anim .cry-proc__media, .cry-anim .cry-proc__detail, .cry-anim .cry-proc__dot { transform: none; transition: none; } }