/* ============================================================ Casino App Development (/service/casino-game-development-company) Dark hero + light body, blue/indigo accent. BEM-ish `cas-` prefix; scroll-reveal via `.cas-anim` on , mirroring ready-made.css / logistic.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(.cas-page) { overflow-x: clip; } .cas-page { --cas-blue: #0072f6; --cas-blue-dk: #0a58c2; --cas-indigo: #2f2ad0; --cas-ink: #101010; --cas-body: #6b6b6b; --cas-muted: #8a8a8a; --cas-line: #ececec; --cas-dark: #07070c; position: relative; background: #fff; color: var(--cas-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .cas-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. */ .cas-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; } .cas-page :where(p) { margin: 0; } .cas-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .cas-blue { color: var(--cas-blue); } .cas-grad { background: linear-gradient(90deg, #0b7cff 0%, #7a3ff0 55%, #ff3fb0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- shared section furniture ---------- */ .cas-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin: 0 auto 54px; max-width: 1120px; } .cas-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border: 1px solid rgba(0, 114, 246, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--cas-blue); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .cas-eyebrow img { width: 15px; height: 16px; object-fit: contain; } .cas-eyebrow--grad { border-color: rgba(124, 58, 237, 0.24); color: #7a3ff0; } .cas-title { font-weight: 800; font-size: clamp(30px, 4.1vw, 56px); line-height: 1.18; color: var(--cas-ink); } .cas-lead { max-width: 900px; font-size: 16px; line-height: 25px; color: var(--cas-body); } /* ---------- pill button ---------- */ /* Label sits left of a dark arrow disc; on hover the two swap sides, which is why the JS publishes the measured label width as --cas-btn-label-w. */ .cas-btn { --cas-btn-icon-w: 44px; --cas-btn-gap: 14px; --cas-btn-pad-l: 32px; --cas-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--cas-btn-gap); width: max-content; padding: 9px var(--cas-btn-pad-r) 9px var(--cas-btn-pad-l); border-radius: 999px; background: linear-gradient(90deg, #1f7bff 0%, var(--cas-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); } .cas-btn:hover, .cas-btn:focus-visible { padding-left: var(--cas-btn-pad-r); padding-right: var(--cas-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(47, 42, 208, 0.35); } .cas-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); } .cas-btn__icon { display: grid; place-items: center; flex: none; width: var(--cas-btn-icon-w); height: var(--cas-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 act as a presentational hint, so without it the box keeps the attribute height and the art renders squashed. */ .cas-band__decor { position: absolute; z-index: 0; height: auto; pointer-events: none; user-select: none; } .cas-band > .container { position: relative; z-index: 1; } /* Each value is solved from where the object sits in the Figma band (1440x427) MINUS that PNG's own transparent padding, so the visible art lands on the Figma position regardless of how much empty margin the file carries. */ .cas-band--blue .cas-band__decor--chip { left: 5.99%; top: -2.53%; width: 8.38%; } /* Right-hand decor is anchored with `right` rather than `left` so it can be scaled up on narrow screens without ever crossing the viewport edge. */ .cas-band--blue .cas-band__decor--dice { right: 7.44%; top: 4.05%; width: 6.72%; } /* Bottom-anchored: translateY resolves against the element's own height, so the art keeps sitting on the band's bottom edge however tall the band grows when the copy rewraps on small screens. */ .cas-band--blue .cas-band__decor--cards { left: 10.39%; bottom: 0; width: 9.95%; transform: translateY(8.6%); } .cas-band--orange .cas-band__decor--dice { left: 8.44%; top: 4.22%; width: 10.14%; } .cas-band--orange .cas-band__decor--coin { right: 7.18%; top: 1.54%; width: 8.11%; } .cas-band--orange .cas-band__decor--chips { right: 8.47%; bottom: 0; width: 11.92%; transform: translateY(-3.31%); } /* ============================================================ SERVICES GRID ============================================================ */ .cas-svc { position: relative; padding: 86px 0 96px; overflow: hidden; background: radial-gradient( 70% 50% at 50% 0%, rgba(0, 114, 246, 0.06) 0%, rgba(255, 255, 255, 0) 70% ), #fff; } /* Edge decor cut from the Figma plates. The source crops sit on the plate's near-white backdrop, so `multiply` drops that backdrop against this section's own near-white background instead of stamping a visible white box. */ .cas-deco { position: absolute; z-index: 0; /* `multiply` neutralises the plate's white backdrop; the feathered mask hides the residual gradient tint that a flat white-balance cannot remove, so the cut-out reads as floating art rather than a pasted rectangle. */ mix-blend-mode: multiply; -webkit-mask-image: radial-gradient( closest-side, #000 62%, rgba(0, 0, 0, 0) 100% ); mask-image: radial-gradient(closest-side, #000 62%, rgba(0, 0, 0, 0) 100%); pointer-events: none; user-select: none; } .cas-svc > .container, .cas-tech > .container { position: relative; z-index: 1; } .cas-svc__deco--l { left: 0; top: 138px; width: 132px; } .cas-svc__deco--r { right: 0; top: 148px; width: 134px; } .cas-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 42px; } .cas-card { display: flex; flex-direction: column; align-items: center; padding: 0 0 30px; border: 1px solid rgba(16, 16, 16, 0.05); border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(17, 19, 24, 0.05); text-align: center; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .cas-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(17, 19, 24, 0.11); } /* The step number and the round glyph badge are baked into the exported artwork, so the media block is a single image rather than an overlay stack. */ /* The artwork ships clean from Figma — the step number and the glyph disc are separate elements layered on top, rather than baked into the bitmap. */ .cas-card__media { position: relative; width: 100%; aspect-ratio: 413 / 345; } /* `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. */ .cas-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .cas-card__num { position: absolute; left: 18px; top: 18px; padding: 4px 12px; border-radius: 9px; background: rgba(255, 255, 255, 0.72); color: var(--cas-accent, #0072f6); font-weight: 700; font-size: 15px; line-height: 1.5; letter-spacing: 0.02em; } .cas-card__title { margin: 22px 26px 0; font-weight: 700; font-size: 19px; line-height: 1.35; color: #0d1220; } .cas-card__rule { margin: 12px 0 16px; width: 62px; height: 3px; border-radius: 2px; background: var(--cas-accent, #0072f6); } .cas-card__text { margin: 0 26px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 13px; line-height: 21px; color: var(--cas-body); } /* ============================================================ PROCESS TIMELINE ============================================================ */ /* Sticky stack, ported from the sticky-pdm reference. The reference drives it with GSAP ScrollTrigger pins (pinSpacing: false) on top of Locomotive Scroll; `position: sticky` produces the identical result natively. Locomotive was not ported because it requires overflow:hidden on html/body plus a [data-scroll-container] wrapper around the whole document, which would take over scrolling for the entire site — breaking the fixed header, the scroll-reveal observers and the floating chat widgets. */ .cas-proc { /* Site header is fixed at 76px; the extra 14px is the reference's own gap (its baseOffset was 90 at this breakpoint). */ --cas-proc-stick: 90px; padding: 80px 0 0; background: #fff; } /* The reference puts exactly 75px between the heading and the first row, so the shared heading block's own bottom margin is dropped here rather than added to it. */ .cas-proc .cas-head { margin-bottom: 0; } .cas-proc__panel { padding-top: 75px; } /* Each step pins at the same offset, so the next one rides up and covers the previous — which is why the row needs an opaque fill. */ .cas-proc__item { position: sticky; top: var(--cas-proc-stick); width: 100%; background: #fff; } .cas-proc__flex { display: flex; padding: 45px 0 65px; border-top: 1px solid var(--cas-line); } /* Oversized, heavily faded numeral — it reads as a watermark for the step rather than a label, so it stays out of the copy's way. */ .cas-proc__num { display: flex; /* The box stretches to the row's full height (default align-self), so centring inside it centres the numeral against the step's copy block. Horizontal alignment stays at the gutter's left edge. */ align-items: center; flex: none; width: 200px; max-width: 100%; color: rgba(0, 114, 246, 0.2); font-size: 160px; font-weight: 800; /* Sub-1 line-height crops the numeral's built-in leading so it sits level with the title rather than floating below it. */ line-height: 0.8; letter-spacing: -0.04em; } /* `min-width: 0` lets this flex child shrink below the paragraph's 700px intrinsic width; without it the row overflows between 768px and ~1000px, where the desktop layout still applies but the container is already narrow. */ .cas-proc__detail { flex: 1; min-width: 0; border-left: 1px solid var(--cas-line); padding-left: 52px; } .cas-proc__title { margin: 0; font-size: 24px; /* Reference uses line-height 1; raised just enough that titles which wrap at narrow widths do not clip their descenders. */ line-height: 1.3; font-weight: 600; color: var(--cas-ink); } .cas-proc__text { margin: 24px 0 0; width: 700px; max-width: 100%; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 32px; font-weight: 400; color: var(--cas-body); } /* ============================================================ TECHNOLOGY STACK ============================================================ */ .cas-tech { position: relative; padding: 80px 0 92px; background: linear-gradient(180deg, #fdfcff 0%, #f6f7fd 100%); overflow: hidden; } .cas-tech__deco--cards { left: 8px; top: 6px; width: 178px; } .cas-tech__deco--dice { right: 28px; top: 22px; width: 112px; } .cas-tech__deco--dots { right: 0; top: 142px; width: 48px; } .cas-tech__deco--chip-r { right: 62px; top: 192px; width: 138px; } .cas-tech__deco--chip-l { left: 0; top: 232px; width: 74px; } /* This heading is the longest on the page — a slightly smaller step keeps it on the same two lines the design uses. */ .cas-tech .cas-title { font-size: clamp(28px, 3.4vw, 47px); } .cas-tech__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .cas-tech__card { display: flex; flex-direction: column; align-items: center; padding: 26px 18px 30px; border: 1px solid rgba(16, 16, 16, 0.06); border-radius: 14px; background: #fff; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .cas-tech__card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(17, 19, 24, 0.09); } .cas-tech__icon { display: grid; place-items: center; width: 108px; height: 108px; overflow: clip; } .cas-tech__icon img { width: 100%; height: 100%; object-fit: contain; } .cas-tech__rule { margin: 14px 0 10px; width: 44px; height: 3px; border-radius: 2px; background: var(--cas-accent, #0072f6); } .cas-tech__name { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--cas-accent, #0072f6); } .cas-tech__text { margin-top: 10px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 12px; line-height: 19px; color: var(--cas-body); } /* ============================================================ FEATURES (user / admin panel) ============================================================ */ .cas-feat { padding: 86px 0 96px; background: linear-gradient(160deg, #f7f8fe 0%, #fbf8fd 55%, #f7f9ff 100%); } .cas-feat__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: 28px; background: rgba(255, 255, 255, 0.55); } .cas-feat__col { padding: 0 44px 44px; } .cas-feat__col + .cas-feat__col { border-left: 1px solid rgba(16, 16, 16, 0.08); } .cas-feat__pill { display: block; margin: -28px auto 34px; padding: 17px 34px; width: max-content; border-radius: 999px; color: #fff; font-weight: 700; font-size: 18px; text-align: center; } .cas-feat__pill--user { background: linear-gradient(90deg, #8b3ff5 0%, #6f2ae0 100%); box-shadow: 0 12px 26px rgba(124, 47, 235, 0.28); } .cas-feat__pill--admin { background: linear-gradient(90deg, #1f8bff 0%, #0f63e8 100%); box-shadow: 0 12px 26px rgba(20, 110, 235, 0.28); } /* Shrink-wrap the list and centre the block, so the items sit centred in the column while their icons and labels still align to a shared left edge. */ .cas-feat__list { display: flex; flex-direction: column; gap: 26px; width: max-content; max-width: 100%; margin-inline: auto; } .cas-feat__item { display: flex; align-items: center; gap: 16px; font-weight: 600; font-size: 21px; line-height: 1.3; color: #14161c; } .cas-feat__item img { flex: none; width: 42px; height: 34px; object-fit: contain; } /* ============================================================ HIRE DEVELOPERS ============================================================ */ .cas-hire { padding: 84px 0 92px; background: #fff; } .cas-hire__layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 46px; align-items: center; } .cas-hire__media { width: 100%; height: auto; aspect-ratio: 1 / 1.08; border-radius: 6px; object-fit: cover; } .cas-hire__points { display: flex; flex-direction: column; gap: 20px; } .cas-hire__point { display: flex; gap: 12px; padding: 22px 26px; border-radius: 6px; background: #eef4ff; font-weight: 700; font-size: 17px; line-height: 1.4; color: #0d1220; } .cas-hire__point::before { content: "•"; color: #0d1220; } /* The points list sits in a tight 20px rhythm, so the CTA needs a clearly larger gap to read as a separate action rather than another list item. */ .cas-hire__cta { margin-top: 34px; } /* ============================================================ TYPES OF CASINO APPS ============================================================ */ .cas-types { padding: 80px 0 92px; background: #fff; } .cas-types__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--cas-line); border-left: 1px solid var(--cas-line); } .cas-types__cell { padding: 26px 24px 30px; border-right: 1px solid var(--cas-line); border-bottom: 1px solid var(--cas-line); transition: background 0.25s ease; } .cas-types__cell:hover { background: #fafbff; } .cas-types__icon { display: grid; place-items: center; width: 44px; height: 44px; overflow: clip; } .cas-types__icon img { width: 100%; height: 100%; object-fit: contain; } .cas-types__name { margin-top: 20px; font-weight: 700; font-size: 21px; line-height: 1.3; color: #0d1220; } .cas-types__text { margin-top: 10px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 22px; color: var(--cas-body); } /* ============================================================ WHY CHOOSE — alternating media rows ============================================================ */ .cas-why { padding: 84px 0 60px; background: #fff; } .cas-why__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center; padding: 42px 0; } /* The middle row sits on a full-bleed tint; the pseudo-element bleeds past the container instead of breaking the page out of it. */ .cas-why__row--tint { position: relative; margin: 20px 0; } /* z-index 0 (not -1): at -1 the band paints behind `.cas-why`'s own white background and disappears. The row's children are lifted to 1 to stay above. */ .cas-why__row--tint::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 0; width: 100vw; transform: translateX(-50%); background: #f5f7fd; } .cas-why__row--tint > * { position: relative; z-index: 1; } .cas-why__row--flip .cas-why__media { order: -1; } .cas-why__title { font-weight: 800; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.16; color: #0d1220; } .cas-why__text { margin-top: 18px; max-width: 530px; font-size: 22px; line-height: 34px; color: #6f7276; } .cas-why__media { width: 100%; height: auto; aspect-ratio: 16 / 11; border-radius: 4px; object-fit: cover; } /* ============================================================ FAQ ============================================================ */ .cas-faq { padding: 70px 0 110px; background: linear-gradient( 140deg, rgb(244, 246, 253) 0%, rgb(238, 242, 252) 45%, rgb(247, 248, 253) 100% ); } .cas-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. */ .cas-faq__aside { position: sticky; top: 110px; } .cas-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .cas-faq__promo { margin-top: 120px; 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; } .cas-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; } .cas-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .cas-faq__list { display: flex; flex-direction: column; gap: 18px; } .cas-faq__item { padding: 24px 40px; border: 1px solid rgba(16, 16, 16, 0.06); border-radius: 26px; background: rgba(255, 255, 255, 0.86); overflow: hidden; transition: background 0.2s ease, box-shadow 0.2s ease; } .cas-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .cas-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: 600; font-size: 19px; line-height: 1.5; color: #000; } .cas-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .cas-faq__mark { position: relative; flex: none; width: 26px; height: 26px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .cas-faq__mark::before, .cas-faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: #101010; transform: translate(-50%, -50%); transition: transform 0.25s ease, opacity 0.25s ease; } .cas-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .cas-faq__item[open] .cas-faq__mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(180deg); } /* Animated by the blade script:

cannot transition its own height, so this wrapper is driven from 0 to its measured height and back. */ .cas-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .cas-faq__item[open] .cas-faq__a-wrap { height: auto; opacity: 1; } .cas-faq__a { padding-top: 14px; max-width: 523px; font-size: 17px; line-height: 25px; color: #7d7d7d; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199px) { .cas-tech__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cas-hero__tag { display: none; } /* Below the desktop measure the decor collides with the headings. */ .cas-deco { display: none; } } @media (max-width: 991px) { .cas-hero { padding-top: 84px; } .cas-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } .cas-stat:nth-child(odd) { border-left: 0; } .cas-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .cas-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cas-hire__layout, .cas-why__row { grid-template-columns: minmax(0, 1fr); gap: 30px; } .cas-why__row--flip .cas-why__media { order: 0; } .cas-why__text { font-size: 18px; line-height: 29px; } .cas-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .cas-faq__aside { position: static; top: auto; } .cas-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. */ .cas-hero__title br, .cas-title br, .cas-lead br, .cas-band__title br, .cas-faq__title br { display: none; } .cas-tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cas-feat__panel { grid-template-columns: minmax(0, 1fr); } .cas-feat__col { padding: 0 20px 36px; } .cas-feat__col + .cas-feat__col { border-left: 0; border-top: 1px solid rgba(16, 16, 16, 0.08); padding-top: 34px; } .cas-feat__pill { margin-top: -26px; } .cas-feat__col + .cas-feat__col .cas-feat__pill { margin-top: 0; } .cas-feat__item { font-size: 17px; } /* The 200px number gutter plus a 52px indent leaves no room for the copy on a phone, so the number moves above the detail and the divider goes with it. */ .cas-proc { --cas-proc-stick: 76px; } .cas-proc__panel { padding-top: 40px; } .cas-proc__flex { display: block; padding: 26px 0 34px; } .cas-proc__num { width: auto; margin-bottom: 2px; font-size: 92px; } .cas-proc__detail { border-left: 0; padding-left: 0; } .cas-proc__title { font-size: 20px; } .cas-proc__text { margin-top: 14px; font-size: 15px; line-height: 26px; } .cas-faq__item { padding: 20px 24px; } .cas-faq__q { font-size: 17px; } /* Percentage widths shrink the decor to near-invisibility on a phone, so bump each one. The right-hand pieces are `right`-anchored and the bottom pieces `bottom`-anchored, so growing them cannot push past the viewport. */ .cas-band--blue .cas-band__decor--chip { left: 3%; width: 15%; } .cas-band--blue .cas-band__decor--dice { right: 3%; width: 13%; } .cas-band--blue .cas-band__decor--cards { left: 3%; width: 19%; } .cas-band--orange .cas-band__decor--dice { left: 3%; width: 19%; } .cas-band--orange .cas-band__decor--coin { right: 3%; width: 15%; } .cas-band--orange .cas-band__decor--chips { right: 3%; width: 21%; } } @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. */ .cas-btn { --cas-btn-icon-w: 36px; --cas-btn-gap: 10px; --cas-btn-pad-l: 18px; --cas-btn-pad-r: 7px; max-width: 100%; } .cas-btn__label { font-size: 11.5px; letter-spacing: 0; } .cas-btn__icon svg { width: 16px; height: 16px; } .cas-svc__grid, .cas-types__grid { grid-template-columns: minmax(0, 1fr); } .cas-tech__grid { grid-template-columns: minmax(0, 1fr); } .cas-stats__grid { grid-template-columns: minmax(0, 1fr); } .cas-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 full-width block. 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 anyway. */ @media (max-width: 420px) { /* Stays a shrink-to-fit centred pill rather than a full-width bar: the label wraps and centres, and the arrow disc stays tucked against it instead of being stranded at the far edge. */ .cas-btn { --cas-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. */ .cas-btn__label { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.35; } .cas-btn:hover, .cas-btn:focus-visible { padding-left: var(--cas-btn-pad-l); padding-right: var(--cas-btn-pad-r); } .cas-btn:hover .cas-btn__label, .cas-btn:focus-visible .cas-btn__label, .cas-btn:hover .cas-btn__icon, .cas-btn:focus-visible .cas-btn__icon { transform: none; } .cas-hero__title { font-size: 34px; } .cas-hero__text, .cas-lead { font-size: 14px; line-height: 22px; } .cas-title { font-size: 26px; } .cas-band__title { font-size: 24px; } .cas-stat__value { font-size: 32px; } .cas-card__title { font-size: 17px; margin-inline: 18px; } .cas-card__text { margin-inline: 18px; } .cas-feat__item { gap: 12px; font-size: 15px; } .cas-feat__item img { width: 32px; height: 26px; } .cas-feat__pill { padding: 14px 22px; font-size: 15px; } .cas-types__cell, .cas-hire__point { padding: 18px 16px; } .cas-hire__point { font-size: 15px; } .cas-why__title { font-size: 24px; } .cas-why__text { font-size: 16px; line-height: 26px; } .cas-faq__item { padding: 16px 18px; } .cas-faq__q { font-size: 15px; gap: 10px; } .cas-faq__a { font-size: 15px; line-height: 23px; } .cas-faq__promo { padding: 24px 20px; } .cas-eyebrow { padding: 7px 14px; font-size: 11px; letter-spacing: 0.1em; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .cas-anim .cas-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .cas-anim .cas-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cas-anim .cas-reveal { opacity: 1; transform: none; transition: none; } }