/* ============================================================ AI Clone App Development (/service/ai-clone-app-development) Dark hero + light body, blue/indigo accent. BEM-ish `aic-` prefix; scroll-reveal via `.aic-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(.aic-page) { overflow-x: clip; } .aic-page { --aic-blue: #0072f6; --aic-blue-dk: #0a58c2; --aic-indigo: #2f2ad0; --aic-ink: #101010; --aic-body: #6b6b6b; --aic-muted: #8a8a8a; --aic-line: #ececec; --aic-dark: #07070c; position: relative; background: #fff; color: var(--aic-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .aic-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. */ .aic-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--aic-ink); } .aic-page :where(p) { margin: 0; color: var(--aic-body); } .aic-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .aic-blue { color: var(--aic-blue); } /* ---------- shared section furniture ---------- */ .aic-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin: 0 auto 54px; max-width: 1120px; } .aic-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(--aic-blue); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; } .aic-eyebrow img { width: 15px; height: 16px; object-fit: contain; } .aic-title { font-weight: 800; font-size: clamp(30px, 4.1vw, 56px); line-height: 1.18; color: var(--aic-ink); } .aic-lead { max-width: 900px; font-size: 16px; line-height: 25px; color: var(--aic-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 --aic-btn-label-w. */ .aic-btn { --aic-btn-icon-w: 44px; --aic-btn-gap: 14px; --aic-btn-pad-l: 32px; --aic-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--aic-btn-gap); width: max-content; padding: 9px var(--aic-btn-pad-r) 9px var(--aic-btn-pad-l); border-radius: 999px; background: linear-gradient(90deg, #1f7bff 0%, var(--aic-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); } .aic-btn:hover, .aic-btn:focus-visible { padding-left: var(--aic-btn-pad-r); padding-right: var(--aic-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(47, 42, 208, 0.35); } .aic-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); } .aic-btn__icon { display: grid; place-items: center; flex: none; width: var(--aic-btn-icon-w); height: var(--aic-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. */ .aic-band > .container { position: relative; z-index: 1; } /* ============================================================ SERVICES GRID ============================================================ */ .aic-case { 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; } .aic-case > .container, .aic-tech > .container { position: relative; z-index: 1; } .aic-case__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 42px; } .aic-card { display: flex; flex-direction: column; align-items: center; 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; } .aic-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. */ .aic-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. */ .aic-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .aic-card__title { margin: 22px 26px 0; font-weight: 700; font-size: 19px; line-height: 1.35; color: #0d1220; } .aic-card__rule { margin: 12px 0 22px; width: 62px; height: 3px; border-radius: 2px; background: var(--aic-accent, #0072f6); } /* ================= CLONES ================= */ /* Same anatomy as `.rm-ind` on the ready-made page: a cross-fading showcase beside a list of industries. The accent colour is published per row and lifted onto the section by the script, so the arrows and the active row always match the artwork on screen. */ .aic-clones { --aic-clones-accent: #f0a81e; padding: 80px 0; } .aic-clones__layout { display: grid; grid-template-columns: minmax(0, 1fr) 375px; gap: 22px; align-items: start; } .aic-clones__showcase { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 100px; align-self: start; height: fit-content; } /* Every slide lives in the same box and cross-fades, so switching industries never reflows the section. The first slide is in flow and sets the height. */ .aic-clones__stage { position: relative; border-radius: 32px; overflow: hidden; background: #f2f4f8; user-select: none; } /* A "Drag" badge replaces the cursor over any drag zone (the showcase stage and the technology slider). Only fine pointers get it, so touch devices keep their native behaviour. */ @media (hover: hover) and (pointer: fine) { .js-drag { cursor: none; } } .aic-drag { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(17, 17, 17, 0.86); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate( calc(var(--aic-drag-x, 0px) - 50%), calc(var(--aic-drag-y, 0px) - 50%) ) scale(0.85); transition: opacity 0.2s ease, transform 0.08s linear; } .aic-drag svg { width: 16px; height: 16px; } .js-drag.has-drag .aic-drag { opacity: 1; transform: translate( calc(var(--aic-drag-x, 0px) - 50%), calc(var(--aic-drag-y, 0px) - 50%) ) scale(1); } /* While the showcase is actually being dragged the pill takes the accent. */ .aic-clones__stage.is-dragging .aic-drag { background: var(--aic-clones-accent); } .aic-clones__slide { display: block; width: 100%; height: auto; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } /* `:first-of-type`, not `:first-child`: the drag badge is the stage's first child, and the in-flow slide is what sets the stage height. */ .aic-clones__slide:not(:first-of-type) { position: absolute; inset: 0; height: 100%; } .aic-clones__slide.is-on { opacity: 1; } /* Touch and coarse pointers keep a grab cursor instead of the badge. */ @media (hover: none), (pointer: coarse) { .js-drag { cursor: grab; } .aic-clones__stage.is-dragging { cursor: grabbing; } .aic-drag { display: none; } } .aic-clones__nav { display: flex; align-items: center; gap: 12px; } .aic-clones__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--aic-clones-accent) 18%, #fff); color: var(--aic-clones-accent); transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; } .aic-clones__arrow svg { width: 18px; height: 18px; } .aic-clones__arrow:hover, .aic-clones__arrow:focus-visible { background: var(--aic-clones-accent); color: #fff; transform: translateY(-2px); } .aic-clones__count { margin-left: 6px; font-size: 14px; letter-spacing: 0.08em; color: #8b93a3; } .aic-clones__count b { font-weight: 700; color: var(--aic-ink); } /* Sits at the far end of the same row as the arrows and takes the active industry's accent, so it always reads as belonging to the slide on screen. */ .aic-clones__cta { /* Trimmed from the page default so it matches the 44px arrows. */ --aic-btn-disc-w: 30px; --aic-btn-gap: 14px; --aic-btn-pad-l: 22px; --aic-btn-pad-r: 7px; margin-left: auto; padding-top: 7px; padding-bottom: 7px; font-size: 13px; background: var(--aic-clones-accent); color: #fff; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .aic-clones__cta .aic-btn__disc { background: #fff; color: var(--aic-clones-accent); } .aic-clones__cta:hover, .aic-clones__cta:focus-visible { color: #fff; box-shadow: 0 14px 30px color-mix(in srgb, var(--aic-clones-accent) 34%, transparent); } .aic-clones__list { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #e6ebf3; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(11, 18, 32, 0.06); } /* Each row is a card with a left accent bar that grows in on hover/active. */ .aic-clones__item { position: relative; display: block; width: 100%; padding: 15px 18px; border: 1px solid transparent; border-radius: 14px; background: transparent; text-align: left; overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .aic-clones__item::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--aic-clones-accent); transform: scaleY(0); opacity: 0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .aic-clones__item:hover { background: color-mix(in srgb, var(--aic-clones-accent) 8%, #fff); border-color: color-mix(in srgb, var(--aic-clones-accent) 24%, #fff); transform: translateX(2px); } .aic-clones__item:hover::before { transform: scaleY(1); opacity: 1; } .aic-clones__item.is-active { background: linear-gradient( 135deg, var(--aic-clones-accent) 0%, color-mix(in srgb, var(--aic-clones-accent) 78%, #000) 100% ); border-color: transparent; box-shadow: 0 12px 26px color-mix(in srgb, var(--aic-clones-accent) 34%, transparent); transform: none; } .aic-clones__item.is-active::before { background: rgba(255, 255, 255, 0.85); transform: scaleY(1); opacity: 1; } .aic-clones__item:focus-visible { outline: 2px solid var(--aic-clones-accent); outline-offset: 2px; } .aic-clones__name { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--aic-ink); transition: color 0.25s ease; } /* Chevron marker — right when closed, down when the row is open. */ .aic-clones__name::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 3px; border-right: 2px solid #b4bdcd; border-bottom: 2px solid #b4bdcd; transform: rotate(-45deg); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease; } .aic-clones__item:hover .aic-clones__name::after, .aic-clones__item.is-active .aic-clones__name::after { transform: rotate(45deg); } .aic-clones__item:hover .aic-clones__name::after { border-color: var(--aic-clones-accent); } .aic-clones__item.is-active .aic-clones__name::after { border-color: #fff; } .aic-clones__meta { display: grid; grid-template-rows: 0fr; margin-top: 0; font-size: 14px; line-height: 1.6; color: #616161; opacity: 0; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease; } .aic-clones__meta-content { min-height: 0; overflow: hidden; } .aic-clones__meta-in { display: block; } .aic-clones__item:hover .aic-clones__meta, .aic-clones__item.is-active .aic-clones__meta { grid-template-rows: 1fr; margin-top: 8px; opacity: 1; } .aic-clones__item.is-active .aic-clones__name { color: #fff; } .aic-clones__item.is-active .aic-clones__meta { color: rgba(255, 255, 255, 0.88); } /* Badge sets under the showcase. All sets share one grid cell so the column keeps the height of the largest set and switching industries never reflows the layout; only the active set is painted. */ .aic-clones__badges { display: grid; margin: 14px 0 16px; } /* Even columns rather than a wrapping row, so the pills line up whatever the set holds (3 to 6 items). `align-content: center` centres the rows in the shared cell, which is as tall as the largest set. */ .aic-clones__badgeset { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 8px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .aic-clones__badgeset.is-on { opacity: 1; visibility: visible; } .aic-clones__badgeset li { display: grid; place-items: center; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--aic-clones-accent) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--aic-clones-accent) 8%, #fff); color: var(--aic-clones-accent); font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 1.4; font-weight: 500; text-align: center; } @media (max-width: 767px) { .aic-clones__badgeset { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .aic-clones__layout { grid-template-columns: minmax(0, 1fr); } .aic-clones__showcase { position: static; } .aic-clones__stage { border-radius: 20px; } .aic-clones__stage { border-radius: 20px; } } @media (max-width: 560px) { .aic-clones__nav { flex-wrap: wrap; } .aic-clones__cta { margin-left: 0; } } /* ============================================================ PROCESS TIMELINE ============================================================ */ /* Numbered rail on the left, dashed connector into each card. The rail's vertical line is one pseudo-element on the list so it stays unbroken between steps; each step draws its own short horizontal connector. */ .aic-proc { --aic-proc-disc: 68px; --aic-proc-gap: 58px; --aic-proc-rowgap: 22px; padding: 80px 0 96px; background: linear-gradient(180deg, #fafcff 0%, #eef3ff 55%, #f6f9ff 100%); } .aic-proc .aic-head { margin-bottom: 46px; } .aic-proc__items { position: relative; display: grid; gap: var(--aic-proc-rowgap); max-width: 1120px; margin: 0 auto; } /* The spine is drawn per step rather than once down the list: rows are taller than the disc, so a list-level inset of half a disc left the line running past the first and last numerals. Each segment spans its own row and bridges the gap to the next; the end rows stop at 50%, which is exactly the disc's centre because the disc is centred in its row. */ .aic-proc__item::before { content: ""; position: absolute; left: calc(var(--aic-proc-disc) / 2 - 1px); top: 0; bottom: calc(-1 * var(--aic-proc-rowgap)); border-left: 2px dashed rgba(0, 114, 246, 0.4); } .aic-proc__item:first-child::before { top: 50%; } .aic-proc__item:last-child::before { bottom: 50%; } /* Steps dim and shrink back until the scroll observer marks one active, so the step nearest the viewport's middle reads as the one you are on. The fade sits on the card and the numeral rather than on the row, because the row is also a `.aic-reveal` target and `.aic-anim .aic-reveal.is-in` pins its opacity to 1. */ .aic-proc__item { position: relative; display: grid; grid-template-columns: var(--aic-proc-disc) 1fr; column-gap: var(--aic-proc-gap); align-items: center; } .aic-proc__card { opacity: 0.45; } .aic-proc__item.is-active .aic-proc__card { opacity: 1; } .aic-proc__num { position: relative; z-index: 1; transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; display: flex; align-items: center; justify-content: center; width: var(--aic-proc-disc); height: var(--aic-proc-disc); border-radius: 50%; /* Opaque on purpose: the fill and the white ring below are what mask the dashed spine passing behind the disc. Inactive steps dim their ring and numeral colour rather than their opacity, which would let the spine show straight through. */ background: #fff; /* Inner blue ring, then a white gap, then a faint outer ring — the design's halo, done with shadows so the box stays exactly one disc wide. */ box-shadow: inset 0 0 0 2px rgba(0, 114, 246, 0.4), 0 0 0 5px #fff, 0 0 0 7px rgba(0, 114, 246, 0.08); color: rgba(0, 114, 246, 0.45); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } /* Horizontal dashed run from the disc to the card, capped with a solid dot. `--aic-proc-gap` is the distance from the disc to the card's left edge, so offsetting by it minus half the dot centres the dot on that edge. */ .aic-proc__num::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--aic-proc-gap) - 14px); margin-left: 7px; border-top: 2px dashed rgba(0, 114, 246, 0.4); } .aic-proc__num::before { content: ""; position: absolute; left: 100%; top: 50%; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 calc(var(--aic-proc-gap) - 7px); border-radius: 50%; background: var(--aic-blue); } .aic-proc__card { position: relative; display: flex; align-items: center; gap: 30px; padding: 24px 34px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(19, 51, 122, 0.07); overflow: hidden; /* Grows to the right only, so the numeral stays welded to the rail. The container's own side padding absorbs the extra width. */ transform-origin: left center; transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; } .aic-proc__item.is-active .aic-proc__card { transform: scale(1.04); box-shadow: 0 18px 46px rgba(19, 51, 122, 0.14); } .aic-proc__item.is-active .aic-proc__num { background: var(--aic-blue); color: #fff; box-shadow: inset 0 0 0 2px var(--aic-blue), 0 0 0 5px #fff, 0 0 0 7px rgba(0, 114, 246, 0.28); } /* Faint dot grid in the card's right edge, matching the design's texture. */ .aic-proc__card::after { content: ""; position: absolute; right: 30px; top: 50%; width: 54px; height: 42px; transform: translateY(-50%); background-image: radial-gradient(rgba(0, 114, 246, 0.22) 1.6px, transparent 1.6px); background-size: 11px 11px; pointer-events: none; } /* The PNGs already carry the circular plate, so this is only a sizing box. */ .aic-proc__icon { display: block; flex: none; width: 84px; height: 84px; } .aic-proc__icon img { width: 100%; height: 100%; object-fit: contain; } /* Title and copy share one text flow so the copy wraps under the title exactly as the design does, instead of sitting in its own block. */ .aic-proc__text { margin: 0; padding-right: 70px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 30px; color: var(--aic-body); } .aic-proc__title { font-family: "Gabarito", "Poppins", sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--aic-ink); } .aic-proc__sep { margin: 0 10px; color: rgba(0, 114, 246, 0.45); } /* ============================================================ TECHNOLOGY STACK ============================================================ */ /* Two columns of category cards wired to a central hub. The hub column is a fixed 360px and the rows a fixed height, so the connector SVG is drawn 1:1 against the same geometry instead of being stretched to fit. */ .aic-tech { --aic-tech-row: 190px; --aic-tech-rowgap: 28px; position: relative; padding: 80px 0 92px; background: linear-gradient(180deg, #fbfbff 0%, #f2f4ff 48%, #f7f8ff 100%); overflow: hidden; } /* Dot grids in the top corners, pink on the left and blue on the right, each faded out with a radial mask so they dissolve into the wash. */ .aic-tech::before, .aic-tech::after { content: ""; position: absolute; top: 0; width: 460px; height: 220px; background-size: 15px 15px; pointer-events: none; } .aic-tech::before { left: 0; background-image: radial-gradient(rgba(236, 72, 153, 0.5) 1.6px, transparent 1.6px); mask-image: radial-gradient(ellipse at top left, #000 0%, rgba(0, 0, 0, 0) 72%); } .aic-tech::after { right: 0; background-image: radial-gradient(rgba(37, 99, 235, 0.5) 1.6px, transparent 1.6px); mask-image: radial-gradient(ellipse at top right, #000 0%, rgba(0, 0, 0, 0) 72%); } .aic-tech .aic-title { font-size: clamp(28px, 3.4vw, 47px); max-width: 1080px; } .aic-tech__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); grid-auto-rows: var(--aic-tech-row); row-gap: var(--aic-tech-rowgap); align-items: center; } /* Explicit placement so the cards can stay in reading order in the markup while alternating sides of the hub. */ .aic-tech__card:nth-of-type(1) { grid-area: 1 / 1; margin-left: 12px; } .aic-tech__card:nth-of-type(2) { grid-area: 1 / 3; margin-right: 12px; } .aic-tech__card:nth-of-type(3) { grid-area: 2 / 1; } .aic-tech__card:nth-of-type(4) { grid-area: 2 / 3; } .aic-tech__card:nth-of-type(5) { grid-area: 3 / 1; margin-left: 48px; } .aic-tech__card:nth-of-type(6) { grid-area: 3 / 3; margin-right: 48px; } .aic-tech__card { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 26px; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(19, 51, 122, 0.08); } /* Accent slab peeking out of the card's outer edge. Sits behind the card fill, which is why only the exposed sliver reads. */ .aic-tech__card::before { content: ""; position: absolute; z-index: -1; top: 16px; bottom: 16px; width: 26px; border-radius: 13px; background: var(--aic-accent, #0072f6); } .aic-tech__card--l::before { left: -11px; } .aic-tech__card--r::before { right: -11px; } /* The PNGs ship as finished rounded tiles, so this is only a sizing box. */ .aic-tech__icon { display: grid; place-items: center; align-self: center; flex: none; width: 66px; height: 66px; } .aic-tech__icon img { width: 100%; height: 100%; object-fit: contain; } .aic-tech__body { flex: 1; min-width: 0; } .aic-tech__name { margin-bottom: 12px; font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aic-accent, #0072f6); } /* Balanced columns put the larger half first, which is the split the design uses (3|3, 3|2, 2|2), and the column-rule draws the divider for free. */ .aic-tech__list { columns: 2; column-gap: 26px; column-rule: 1px solid var(--aic-line); } .aic-tech__list li { display: flex; align-items: center; gap: 10px; break-inside: avoid; padding: 6px 0; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 1.3; /* Labels are short but the column is only half the card — without this "React Native" and "Anthropic API" wrap onto a second line. */ white-space: nowrap; color: var(--aic-ink); } .aic-tech__list img { flex: none; width: 24px; height: 24px; object-fit: contain; } .aic-tech__hub { position: relative; display: grid; place-items: center; grid-area: 1 / 2 / 4 / 3; height: calc(var(--aic-tech-row) * 3 + var(--aic-tech-rowgap) * 2); } .aic-tech__wires { position: absolute; inset: 0; pointer-events: none; } /* Flat white with a hard edge at exactly 116px radius — the wire endpoints are plotted on that radius, so a soft radial fade here left them floating in the halo instead of sitting on the circle. */ /* Flex, not grid: as a 3-row grid the fixed height stretched the rows and spread the icon, title and subtitle apart instead of stacking them. */ .aic-tech__core { display: flex; flex-direction: column; align-items: center; justify-content: center; /* Sized off the content, not the other way round: icon + two title lines + two subtitle lines need ~185px of height, and a circle only offers its full width at the centre — 260px is the smallest that keeps the subtitle inside the ring. Changing it means re-plotting the SVG endpoints to match. */ width: 260px; height: 260px; padding: 0 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(124, 92, 246, 0.16), 0 0 0 28px rgba(124, 92, 246, 0.05), 0 18px 40px rgba(19, 51, 122, 0.06); text-align: center; } .aic-tech__core img { width: 68px; height: 68px; object-fit: contain; } .aic-tech__core strong { margin-top: 12px; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--aic-ink); } .aic-tech__core span { margin-top: 10px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 12.5px; line-height: 1.45; color: var(--aic-body); } /* ============================================================ FEATURES (user / admin panel) ============================================================ */ /* Horizontal auto-scrolling rail, ported from `.llm-ind__rail`. Same drift + drag + seam-wrap behaviour; the numerals are stroked in the page's blue rather than white, because this section sits on a light background. */ .aic-feat { padding: 80px 0 92px; background: #fff; overflow: hidden; } .aic-feat__rail { /* No scroll-snap: it fights the continuous auto-scroll. */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; /* Stop scroll re-anchoring on image load, which fights the drag. */ overflow-anchor: none; /* overflow-x also makes overflow-y `auto`, so the outlined numbers — whose glyphs overflow their line box — need headroom or they get clipped. The negative margin keeps the section's spacing unchanged. */ padding: 26px 0 10px; margin-top: -26px; cursor: grab; /* Entrance: the rail slides up into place when the section arrives. */ opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; } .aic-feat__rail.is-inview { opacity: 1; transform: none; } .aic-feat__rail::-webkit-scrollbar { display: none; } /* Mouse click-drag in progress */ .aic-feat__rail.is-grabbing { cursor: grabbing; user-select: none; } .aic-feat__rail.is-grabbing img { pointer-events: none; } .aic-feat__track { display: flex; gap: 23px; /* Aligns the first card with the container's left edge while the rail itself stays full-bleed. */ padding: 0 max(20px, calc((100vw - 1240px) / 2)); } .aic-featcard { position: relative; flex: none; width: 428px; /* Room for the number, which straddles the top edge of the card. */ padding-top: 33px; } .aic-featcard__num { position: absolute; z-index: 2; top: 0; left: 47px; height: 66px; line-height: 66px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 94px; letter-spacing: -3.8px; color: transparent; -webkit-text-stroke: 3px var(--aic-blue); pointer-events: none; } .aic-featcard__media { position: relative; height: 428px; border-radius: 30px; overflow: hidden; box-shadow: 0 5px 28px rgba(0, 0, 0, 0.08); } .aic-featcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .aic-featcard:hover .aic-featcard__media img { transform: scale(1.05); } .aic-featcard__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000 74%); filter: blur(3px); pointer-events: none; } .aic-featcard__label { position: absolute; left: 34px; right: 34px; bottom: 30px; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; } /* 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. */ .aic-hire__cta { margin-top: 34px; } /* ============================================================ WHY CHOOSE — alternating media rows ============================================================ */ /* Blue-to-indigo run used on the heading's second line. `.aic-grad` ends in pink, which does not match this section. */ .aic-grad-bi { background: linear-gradient(90deg, #1f6bff 0%, #4b3ff0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .aic-why { position: relative; padding: 84px 0 92px; background: linear-gradient(180deg, #fdfdff 0%, #f7f9ff 100%); overflow: hidden; } /* Dot grid at the top left and a soft disc bleeding off the right edge — the two background marks the design carries. */ .aic-why::before { content: ""; position: absolute; left: 22px; top: 46px; width: 130px; height: 190px; background-image: radial-gradient(rgba(43, 110, 246, 0.28) 1.5px, transparent 1.5px); background-size: 17px 17px; mask-image: linear-gradient(160deg, #000 20%, rgba(0, 0, 0, 0) 85%); pointer-events: none; } .aic-why::after { content: ""; position: absolute; right: -180px; top: 90px; width: 460px; height: 460px; border-radius: 50%; background: rgba(224, 233, 252, 0.5); pointer-events: none; } .aic-why > .container { position: relative; z-index: 1; } .aic-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .aic-why__card { display: flex; align-items: center; /* The PNGs carry only a hairline of transparent margin, so the gap has to do the spacing work. */ gap: 24px; padding: 26px 28px 26px 18px; border: 1px solid rgba(16, 16, 16, 0.05); border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(19, 51, 122, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .aic-why__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(19, 51, 122, 0.1); } /* The PNGs ship with their own tinted plate, so this is a sizing box carrying the dashed orbit ring. The ring is the ::after so it can overhang the disc without affecting layout. */ .aic-why__icon { position: relative; display: block; flex: none; width: 116px; height: 116px; } .aic-why__icon img { width: 100%; height: 100%; object-fit: contain; } .aic-why__icon::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(43, 110, 246, 0.3); border-color: color-mix(in srgb, var(--aic-accent) 35%, transparent); } .aic-why__body { flex: 1; min-width: 0; } .aic-why__title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--aic-ink); } .aic-why__rule { display: block; margin: 12px 0 14px; width: 30px; height: 3px; border-radius: 2px; background: var(--aic-accent, #0072f6); } .aic-why__text { font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 26px; color: var(--aic-body); } /* ============================================================ Accelerate ============================================================ */ .aic-acc { padding: 80px 0; background: #e2f2ff; } .aic-acc__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. */ .aic-acc__row--tint { position: relative; margin: 20px 0; } /* z-index 0 (not -1): at -1 the band paints behind `.aic-acc`'s own white background and disappears. The row's children are lifted to 1 to stay above. */ .aic-acc__row--tint::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 0; width: 100vw; transform: translateX(-50%); background: #e2f2ff; } .aic-acc__row--tint > * { position: relative; z-index: 1; } .aic-acc__row--flip .aic-acc__media { order: -1; } .aic-acc__title { font-weight: 800; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.16; color: #0d1220; } .aic-acc__text { margin-top: 18px; max-width: 530px; font-size: 22px; line-height: 34px; color: #6f7276; } .aic-acc__media { width: auto; height: 100%; border-radius: 4px; object-fit: cover; margin: auto; } /* ============================================================ FAQ ============================================================ */ .aic-faq { padding: 70px 0 110px; background: linear-gradient( 140deg, rgb(244, 246, 253) 0%, rgb(238, 242, 252) 45%, rgb(247, 248, 253) 100% ); } .aic-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. */ .aic-faq__aside { position: sticky; top: 110px; } .aic-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .aic-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; } .aic-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; color: var(--aic-line); } .aic-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .aic-faq__list { display: flex; flex-direction: column; gap: 18px; } .aic-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; } .aic-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .aic-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; } .aic-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .aic-faq__mark { position: relative; flex: none; width: 26px; height: 26px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .aic-faq__mark::before, .aic-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; } .aic-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .aic-faq__item[open] .aic-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. */ .aic-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .aic-faq__item[open] .aic-faq__a-wrap { height: auto; opacity: 1; } .aic-faq__a { padding-top: 14px; max-width: 523px; font-size: 17px; line-height: 25px; color: #7d7d7d; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199px) { /* Below the desktop width the hub cannot hold its fixed column, so the wiring is dropped and the hub becomes a banner above the cards. */ .aic-tech__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 22px; } .aic-tech__card:nth-of-type(n) { grid-area: auto; margin: 0; } /* `order` still drives grid auto-placement, so this puts the hub above the cards without needing an explicit row. */ .aic-tech__hub { grid-area: auto; grid-column: 1 / -1; order: -1; height: auto; margin-bottom: 20px; } /* Both columns keep their slab on the left here: on the right it would sit in the container's padding and get clipped by the viewport edge. */ .aic-tech__card--r::before { right: auto; left: -11px; } .aic-tech__wires { display: none; } } @media (max-width: 991px) { .aic-hero { padding-top: 84px; } .aic-case__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .aic-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aic-acc__row { grid-template-columns: minmax(0, 1fr); gap: 30px; } .aic-acc__row--flip .aic-acc__media { order: 0; } .aic-acc__text { font-size: 18px; line-height: 29px; } .aic-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .aic-faq__aside { position: static; top: auto; } .aic-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. */ .aic-hero__title br, .aic-title br, .aic-lead br, .aic-band__title br, .aic-faq__title br { display: none; } .aic-tech__grid { grid-template-columns: minmax(0, 1fr); } .aic-featcard { width: 300px; padding-top: 23px; } .aic-featcard__media { height: 300px; } .aic-featcard__num { left: 30px; height: 46px; line-height: 46px; font-size: 66px; letter-spacing: -2.6px; -webkit-text-stroke-width: 2px; } .aic-featcard__label { left: 24px; right: 24px; bottom: 22px; font-size: 28px; } /* The rail keeps its place on a phone but shrinks, and the card stacks its icon above the copy so the text keeps a usable measure. */ .aic-proc { --aic-proc-disc: 46px; /* Below ~30px the connector has no room for a dash plus the dot. */ --aic-proc-gap: 32px; padding: 60px 0 70px; } .aic-proc__num { font-size: 15px; } .aic-proc__card { display: block; padding: 20px 22px; } .aic-proc__card::after { display: none; } .aic-proc__icon { width: 58px; height: 58px; margin-bottom: 16px; } /* A 4% grow would push the card past the viewport at this width. */ .aic-proc__item.is-active .aic-proc__card { transform: scale(1.02); } .aic-proc__text { padding-right: 0; font-size: 14px; line-height: 26px; } .aic-proc__title { font-size: 19px; } .aic-faq__item { padding: 20px 24px; } .aic-faq__q { font-size: 17px; } } @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. */ .aic-btn { --aic-btn-icon-w: 36px; --aic-btn-gap: 10px; --aic-btn-pad-l: 18px; --aic-btn-pad-r: 7px; max-width: 100%; } .aic-btn__label { font-size: 11.5px; letter-spacing: 0; } .aic-btn__icon svg { width: 16px; height: 16px; } .aic-case__grid, .aic-types__grid { grid-template-columns: minmax(0, 1fr); } .aic-tech__card { padding: 18px 20px; gap: 14px; } .aic-tech__icon { width: 54px; height: 54px; } .aic-tech__list { column-gap: 16px; } .aic-tech__list li { font-size: 13px; } /* ---- stats ---- */ .aic-stats { padding: 50px 0 16px; } .aic-stats__card { grid-template-columns: repeat(2, 1fr); row-gap: 20px; min-height: auto; padding: 26px 12px; } .aic-stat:nth-child(2n) { border-right: 0; } .aic-stat__value { font-size: 28px; line-height: 28px; } .aic-stat__trend { font-size: 18px; } .aic-stat__label { font-size: 11px; } } /* ---------- 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. */ .aic-btn { --aic-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. */ .aic-btn__label { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.35; } .aic-btn:hover, .aic-btn:focus-visible { padding-left: var(--aic-btn-pad-l); padding-right: var(--aic-btn-pad-r); } .aic-btn:hover .aic-btn__label, .aic-btn:focus-visible .aic-btn__label, .aic-btn:hover .aic-btn__icon, .aic-btn:focus-visible .aic-btn__icon { transform: none; } .aic-hero__title { font-size: 34px; } .aic-hero__text, .aic-lead { font-size: 14px; line-height: 22px; } .aic-title { font-size: 26px; } .aic-band__title { font-size: 24px; } .aic-card__title { font-size: 17px; margin-inline: 18px; } .aic-why__grid { grid-template-columns: minmax(0, 1fr); } .aic-why__card { gap: 18px; padding: 20px 22px 20px 16px; } .aic-why__icon { width: 92px; height: 92px; } .aic-why__title { font-size: 18px; } .aic-why__text { font-size: 14px; line-height: 24px; } .aic-acc__title { font-size: 24px; } .aic-acc__text { font-size: 16px; line-height: 26px; } .aic-faq__item { padding: 16px 18px; } .aic-faq__q { font-size: 15px; gap: 10px; } .aic-faq__a { font-size: 15px; line-height: 23px; } .aic-faq__promo { padding: 24px 20px; } .aic-eyebrow { padding: 7px 14px; font-size: 11px; letter-spacing: 0.1em; } /* ---- stats ---- */ .aic-stats__card { grid-template-columns: repeat(2, 1fr); padding: 20px 8px; row-gap: 16px; border-radius: 16px; } .aic-stat { padding: 8px 10px; } .aic-stat__value { font-size: 24px; line-height: 24px; } .aic-stat__trend { font-size: 15px; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .aic-anim .aic-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .aic-anim .aic-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .aic-proc__item.is-active .aic-proc__card { transform: none; } .aic-anim .aic-reveal { opacity: 1; transform: none; transition: none; } }