html { overflow-x: clip; }
body { overflow-x: clip; color: var(--color-text); background: var(--color-bg); font-family: Inter, Arial, Helvetica, sans-serif; line-height: 1.5; }
.background-decor { pointer-events: none; }.background-decor__circle, .background-decor__ring, .background-decor__arc, .background-decor__dots { display: block; pointer-events: none; }.decor-parallax { transform: translate3d(var(--decor-parallax-x, 0px), var(--decor-parallax-y, 0px), 0); transition: transform 220ms ease-out; }.decor-parallax--strong { transform: translate3d(var(--decor-parallax-x-strong, 0px), var(--decor-parallax-y-strong, 0px), 0); }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.header { position: sticky; z-index: 20; top: 0; height: var(--header-height); background: rgba(247,248,252,.9); transition: box-shadow .25s, border-color .25s; border-bottom: 1px solid transparent; }
.header.is-scrolled { border-color: var(--color-border); box-shadow: 0 8px 28px rgba(17,18,35,.06); }
.header__inner { display: flex; align-items: center; gap: 32px; height: 100%; }
.logo { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.03em; }
.logo span { color: var(--color-accent); font-size: 14px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); margin-left: auto; color: #4e5160; font-size: 14px; font-weight: 600; }
.nav a { transition: color .2s; }.nav a:hover, .nav a:focus-visible { color: var(--color-accent); }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; border: 1px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-accent); color: #fff; font-weight: 700; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.button--small { min-height: 42px; padding-inline: 18px; font-size: 14px; }
.button--secondary { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); }.button--secondary:hover { border-color: #c9cbd6; background: #fff; }
.menu-button { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.menu-button span { display: block; height: 2px; margin: 4px 0; background: var(--color-text); transition: transform .2s, opacity .2s; }
.hero { min-height: calc(100vh - var(--header-height)); display: grid; align-items: center; padding: var(--space-6) 0 88px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(440px, .96fr); align-items: center; gap: clamp(40px, 6vw, 88px); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #555868; font-size: 13px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.eyebrow span { width: 25px; height: 2px; background: var(--color-accent); }
h1 { max-width: 730px; margin: 0; font-size: clamp(43px, 4.5vw, 68px); line-height: 1.04; letter-spacing: -.055em; }
h1 strong { color: var(--color-accent); font-weight: inherit; }
.hero__lead { max-width: 640px; margin: 26px 0 0; color: var(--color-muted); font-size: 18px; line-height: 1.72; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.benefits { display: flex; flex-wrap: wrap; gap: 13px 28px; margin-top: 35px; color: #454856; font-size: 13px; font-weight: 600; }
.benefits li { position: relative; padding-left: 18px; }.benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 900; }
.services { position: relative; overflow: hidden; isolation: isolate; scroll-margin-top: var(--header-height); padding: 104px 0 82px; border-top: 1px solid rgba(228,229,236,.7); background: linear-gradient(180deg, #f6f7fb 0, var(--color-section) 13%, var(--color-section) 100%); }.services > .container { position: relative; z-index: 1; }
.background-decor--services { position: absolute; z-index: 0; inset: 0; opacity: 1; transition: opacity .9s ease, transform .9s ease; }.background-decor--services.is-decor-pending { opacity: 0; transform: translate3d(0, 14px, 0); }.background-decor--services.is-decor-visible { opacity: 1; transform: translate3d(0, 0, 0); }.background-decor--services .decor-float { position: absolute; will-change: transform; }.decor-float--circle { top: 6%; left: -190px; width: 430px; height: 430px; animation: decorCircleFloat 32s ease-in-out infinite alternate; }.decor-float--circle .background-decor__circle { width: 100%; height: 100%; border: 1px solid rgba(87,71,245,.11); border-radius: 50%; }.decor-float--arc { right: -125px; bottom: 3%; width: 330px; height: 330px; animation: decorArcFloat 39s linear infinite; }.background-decor__arc { width: 100%; height: 100%; border: 1px solid rgba(87,71,245,.1); border-top-color: transparent; border-left-color: rgba(87,71,245,.045); border-radius: 50%; }.decor-float--dots { right: 5%; bottom: 25%; width: 76px; height: 58px; animation: decorDotsFloat 18s ease-in-out 2.5s infinite alternate; }.background-decor--services .background-decor__dots { width: 100%; height: 100%; background: radial-gradient(circle, rgba(87,71,245,.2) 1px, transparent 1.5px) 0 0 / 13px 13px; opacity: .45; }
.services__header { max-width: 730px; }.section-label { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--color-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.section-label span { width: 24px; height: 2px; background: var(--color-accent); }
.services h2 { margin: 0; font-size: clamp(36px, 3.5vw, 52px); line-height: 1.08; letter-spacing: -.045em; }.services__intro { max-width: 690px; margin: 22px 0 0; color: var(--color-muted); font-size: 17px; line-height: 1.7; }
.services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.service-card { --mouse-x: 50%; --mouse-y: 50%; --rotate-x: 0deg; --rotate-y: 0deg; --icon-x: 0px; --icon-y: 0px; --badge-x: 0px; --badge-y: 0px; --arrow-x: 0px; --arrow-y: 0px; position: relative; display: flex; min-width: 0; min-height: 525px; overflow: hidden; flex-direction: column; border: 1px solid var(--color-card-border); border-radius: var(--radius-md); background: var(--color-surface); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), opacity .55s ease; }
.service-card::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(circle 240px at var(--mouse-x) var(--mouse-y), rgba(87,71,245,.105), rgba(87,71,245,.035) 45%, transparent 72%); opacity: 0; pointer-events: none; transition: opacity var(--transition); }.service-card:hover::before { opacity: 1; }.service-card--featured::before { background: radial-gradient(circle 250px at var(--mouse-x) var(--mouse-y), rgba(87,71,245,.145), rgba(87,71,245,.045) 48%, transparent 72%); }
.service-card__tilt { position: relative; z-index: 1; display: flex; min-height: 100%; flex: 1; flex-direction: column; padding: 29px 27px 25px; transform: perspective(1050px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y)); transform-style: preserve-3d; transition: transform 330ms ease-out; }.service-card.is-tilting .service-card__tilt { transition-duration: 90ms; will-change: transform; }.service-card.is-tilting .service-card__icon, .service-card.is-tilting .service-card__badge, .service-card.is-tilting .service-card__footer b { will-change: transform; }
.service-card:hover { border-color: #d2d3df; box-shadow: var(--shadow-card); transform: translateY(-4px); }.service-card:focus-within { border-color: rgba(87,71,245,.55); box-shadow: var(--shadow-card); }.service-card--featured { border-color: rgba(87,71,245,.52); box-shadow: 0 14px 34px rgba(87,71,245,.1); }.service-card--featured::after { content: ""; position: absolute; z-index: 2; top: -1px; right: 22px; left: 22px; height: 2px; border-radius: 0 0 3px 3px; background: var(--color-accent); pointer-events: none; }.service-card--featured:hover { border-color: rgba(87,71,245,.68); box-shadow: 0 17px 38px rgba(87,71,245,.14); }
.service-card__badge { align-self: flex-start; margin-bottom: 18px; padding: 5px 9px; border: 1px solid #d9d6ff; border-radius: 999px; background: #efedff; color: var(--color-accent-dark); font-size: 11px; font-weight: 800; letter-spacing: .015em; white-space: nowrap; transform: translate3d(var(--badge-x), var(--badge-y), 0); transition: transform var(--transition); }.service-card__icon { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; border: 1px solid #dedcff; border-radius: 13px; background: #f3f2ff; color: var(--color-accent); transform: translate3d(var(--icon-x), var(--icon-y), 0) rotate(0); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }.service-card:hover .service-card__icon { border-color: #cbc7ff; box-shadow: 0 8px 18px rgba(87,71,245,.1); transform: translate3d(var(--icon-x), var(--icon-y), 0) rotate(2deg); }.service-card--featured .service-card__icon { border-color: #cecaff; background: #e9e6ff; }.service-card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }.service-card:hover .service-card__icon svg { transform: scale(1.06); }
.service-card h3 { margin: 27px 0 0; font-size: 22px; line-height: 1.24; letter-spacing: -.025em; }.service-card > p { margin: 16px 0 0; color: #595c69; font-size: 14px; line-height: 1.62; }.service-card ul { display: grid; gap: 10px; margin-top: 25px; color: #434653; font-size: 14px; line-height: 1.4; }.service-card li { position: relative; padding-left: 17px; }.service-card li::before { content: ""; position: absolute; top: .53em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
.service-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 27px; border-top: 1px solid #e8e9ef; }.service-card__footer > span { color: #3f424e; font-size: 13px; font-weight: 800; }.service-card__footer a, .services__note a { position: relative; color: var(--color-accent); font-size: 13px; font-weight: 800; white-space: nowrap; transition: color var(--transition); }.service-card__footer a::after { content: ""; position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }.service-card__footer a:hover, .services__note a:hover { color: var(--color-accent-dark); }.service-card__footer a:hover::after { transform: scaleX(1); }.service-card__footer b { display: inline-block; margin-left: 3px; transform: translate3d(var(--arrow-x), var(--arrow-y), 0); transition: transform var(--transition); }.service-card__footer a:hover b { transform: translate3d(calc(var(--arrow-x) + 5px), var(--arrow-y), 0); }
.service-card__footer a:focus-visible, .services__note a:focus-visible { outline: 3px solid rgba(87,71,245,.25); outline-offset: 4px; border-radius: 3px; }
.services__note { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; padding: 16px 20px; border: 1px solid var(--color-card-border); border-radius: var(--radius-md); background: rgba(255,255,255,.72); color: #555865; font-size: 14px; }.services__note p { margin: 0; }
.services__trust { display: flex; min-height: 126px; align-items: center; justify-content: space-between; gap: 42px; padding: 27px 4px 10px; }.services__trust > p { max-width: 570px; margin: 0; color: #373a46; font-size: 17px; font-weight: 600; line-height: 1.55; }.services__trust ul { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 12px 22px; color: #555865; font-size: 13px; font-weight: 700; }.services__trust li { position: relative; padding-left: 17px; }.services__trust li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 900; }
.approach { position: relative; overflow: hidden; isolation: isolate; scroll-margin-top: var(--header-height); padding: 108px 0 104px; background: linear-gradient(180deg, var(--color-section), #f8f9fc 18%, #f8f9fc); }.approach > .container { position: relative; z-index: 1; }.approach__header { max-width: 720px; }.approach__header h2 { margin: 0; font-size: clamp(38px,3.6vw,54px); line-height: 1.07; letter-spacing: -.045em; }.approach__header > p:last-child { max-width: 690px; margin: 22px 0 0; color: #5d606d; font-size: 17px; line-height: 1.7; }
.approach__layout { display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); align-items: center; gap: clamp(52px,7vw,92px); margin-top: 58px; }.approach__visual { --panel-rx: 0deg; --panel-ry: 0deg; --panel-x: 0px; --panel-y: 0px; position: relative; min-height: 525px; transform: perspective(1100px) rotateX(var(--panel-rx)) rotateY(var(--panel-ry)); transition: transform 340ms ease-out, opacity .8s ease; }.approach__visual.is-panel-active { transition-duration: 90ms; will-change: transform; }
.workspace-window { position: absolute; inset: 42px 10px 42px 0; overflow: hidden; border: 1px solid #d8dae4; border-radius: 19px; background: #fff; box-shadow: 0 24px 55px rgba(31,31,62,.12); transform: translate3d(var(--panel-x),var(--panel-y),0); }.workspace-window__bar { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-bottom: 1px solid #e7e8ee; background: #f7f8fb; color: #727582; font-size: 8px; }.workspace-window__bar > span { width: 7px; height: 7px; border-radius: 50%; background: #d6d8df; }.workspace-window__bar b { margin-left: 8px; font-weight: 600; }.workspace-window__bar i { margin-left: auto; padding: 4px 7px; border-radius: 5px; background: #eceaff; color: var(--color-accent); font-style: normal; font-weight: 700; }
.workspace-window__body { display: grid; grid-template-columns: 38px minmax(0,1fr) 84px; height: 376px; }.workspace-tools { display: flex; align-items: center; flex-direction: column; gap: 15px; padding-top: 18px; border-right: 1px solid #e8e9ef; background: #fafbfc; color: #747785; font-size: 11px; }.workspace-tools span:first-child { color: var(--color-accent); }.workspace-canvas { display: grid; place-items: center; padding: 20px; background: #eff1f6; }.workspace-page { width: 100%; max-width: 260px; overflow: hidden; border-radius: 5px; background: #fff; box-shadow: 0 7px 18px rgba(28,29,48,.1); }.editor-block { position: relative; border: 1px solid transparent; color: #9a9ca6; font-size: 6px; animation: editorSelection 8s ease-in-out infinite; }.editor-block > span { position: absolute; top: 4px; left: 5px; color: #8f879f; font-size: 5px; }.editor-block--header { display: flex; height: 26px; align-items: center; justify-content: flex-end; gap: 7px; padding: 0 8px; }.editor-block--header i { width: 18px; height: 2px; background: #d2d3da; }.editor-block--hero { height: 112px; padding: 28px 13px 10px; background: #161720; color: #fff; animation-delay: -2s; }.editor-block--hero strong { display: block; width: 60%; font-size: 13px; line-height: 1.15; }.editor-block--hero p { width: 43%; height: 3px; margin: 10px 0 0; background: #5a5c67; }.editor-block--hero b { display: block; width: 39px; height: 13px; margin-top: 11px; border-radius: 3px; background: var(--color-accent); }.editor-block--services { display: flex; height: 71px; align-items: center; gap: 6px; padding: 17px 9px 5px; animation-delay: -4s; }.editor-block--services i { flex: 1; height: 40px; border: 1px solid #e1e2e8; border-radius: 4px; background: #fafafa; }.editor-block--form { height: 55px; padding: 17px 10px 5px; background: #f5f5f8; animation-delay: -6s; }.editor-block--form i { display: inline-block; width: 61%; height: 18px; border: 1px solid #dbdce3; border-radius: 3px; background: #fff; }.editor-block--form b { display: inline-block; width: 29%; height: 18px; margin-left: 4px; border-radius: 3px; background: var(--color-accent); }
.workspace-settings { padding: 16px 11px; border-left: 1px solid #e8e9ef; background: #fafbfc; color: #8b8d98; font-size: 6px; }.workspace-settings strong { display: block; margin-bottom: 19px; color: #4f5260; font-size: 8px; }.workspace-settings span { display: block; margin: 13px 0 5px; }.workspace-settings i { display: block; height: 5px; border-radius: 3px; background: #e2e3e9; }.workspace-settings b { display: block; width: 17px; height: 17px; border-radius: 4px; background: var(--color-accent); }.workspace-progress { display: flex; align-items: center; gap: 9px; height: 35px; padding: 0 13px; border-top: 1px solid #e8e9ef; }.workspace-progress span { position: relative; width: 72px; height: 3px; overflow: hidden; border-radius: 3px; background: #e3e4ea; }.workspace-progress span::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform: scaleX(.72); transform-origin: left; animation: editorProgress 8s ease-in-out infinite alternate; }.workspace-progress small { color: #81838e; font-size: 6px; }
.workspace-cursor { position: absolute; z-index: 4; top: 52%; left: 49%; width: 21px; fill: #fff; stroke: var(--color-accent); stroke-width: 1.5; filter: drop-shadow(0 3px 4px rgba(24,24,45,.18)); animation: editorCursor 8s ease-in-out infinite; }.approach__visual.is-panel-active .workspace-cursor { animation-play-state: paused; transform: translate3d(var(--cursor-x,0px),var(--cursor-y,0px),0); }.process-tag { position: absolute; z-index: 3; padding: 7px 10px; border: 1px solid #e1e2ea; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(31,31,62,.07); color: #565966; font-size: 9px; font-weight: 700; transform: translate3d(var(--panel-x-reverse,0px),var(--panel-y-reverse,0px),0); }.process-tag--structure { top: 15px; left: 8%; }.process-tag--design { top: 27%; right: -10px; }.process-tag--responsive { bottom: 14%; left: -12px; }.process-tag--launch { right: 3%; bottom: 13px; color: var(--color-accent); }
.approach__list { border-top: 1px solid #dfe0e7; }.approach-item { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: 27px 0; border-bottom: 1px solid #dfe0e7; transition: transform var(--transition); }.approach-item:last-child { border-bottom: 0; }.approach-item::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: -14px; width: 2px; border-radius: 2px; background: var(--color-accent); opacity: 0; transform: scaleY(.5); transition: opacity var(--transition),transform var(--transition); }.approach-item__mark { display: flex; align-items: center; gap: 9px; color: var(--color-accent); }.approach-item__mark span { font-size: 12px; font-weight: 800; }.approach-item__mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }.approach-item h3 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; transition: color var(--transition); }.approach-item p { margin: 10px 0 0; color: #60636f; font-size: 14px; line-height: 1.65; }.approach-item:hover { transform: translateX(4px); }.approach-item:hover::before { opacity: 1; transform: scaleY(1); }.approach-item:hover svg { transform: translateX(2px) scale(1.04); }.approach-item:hover h3 { color: var(--color-accent-dark); }
.approach__summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 23px; padding-top: 22px; border-top: 1px solid #dfe0e7; }.approach__summary p { max-width: 430px; margin: 0; color: #444754; font-size: 14px; font-weight: 600; }.approach__summary a { color: var(--color-accent); font-size: 13px; font-weight: 800; white-space: nowrap; }.approach__summary a:hover { color: var(--color-accent-dark); }.approach__summary a:focus-visible { outline: 3px solid rgba(87,71,245,.25); outline-offset: 4px; border-radius: 3px; }
.background-decor--approach { position: absolute; z-index: 0; inset: 0; }.decor-float--approach-ring { position: absolute; top: 7%; right: -220px; width: 500px; height: 500px; animation: decorCircleFloat 36s ease-in-out infinite alternate; }.decor-float--approach-ring .background-decor__ring { width: 100%; height: 100%; border: 1px solid rgba(87,71,245,.09); border-radius: 50%; }.decor-float--approach-arc { position: absolute; top: 34%; left: 3%; width: 410px; height: 410px; animation: decorArcFloat 44s linear infinite; }.decor-float--approach-arc .background-decor__arc { width: 100%; height: 100%; border: 1px solid rgba(87,71,245,.085); border-bottom-color: transparent; border-radius: 50%; }.decor-float--approach-dots { position: absolute; bottom: 5%; left: 2%; width: 70px; height: 55px; animation: decorDotsFloat 20s ease-in-out infinite alternate; }.decor-float--approach-dots .background-decor__dots { width: 100%; height: 100%; background: radial-gradient(circle,rgba(87,71,245,.2) 1px,transparent 1.5px) 0 0/12px 12px; opacity: .42; }.approach [data-approach-reveal] { transition: opacity .8s ease,transform .8s ease; }.approach .is-approach-pending { opacity: 0; transform: translate3d(0,18px,0); }.approach .is-approach-visible { opacity: 1; transform: translate3d(0,0,0); }.approach .approach__visual.is-approach-pending { transform: perspective(1100px) translate3d(0,18px,0) rotateX(var(--panel-rx)) rotateY(var(--panel-ry)); }.approach .approach__visual.is-approach-visible { transform: perspective(1100px) rotateX(var(--panel-rx)) rotateY(var(--panel-ry)); }
.services__grid { margin-top: 36px; }.approach__header > p:last-child { margin-top: 18px; }.approach__layout { margin-top: 44px; }.approach-item { padding-block: 31px; }.approach-item h3 { font-weight: 750; }.approach__summary { margin-top: 32px; padding: 27px 18px 0; }.approach__summary p { font-size: 15px; line-height: 1.55; }
.workspace-window { background: linear-gradient(180deg,#fff,#fbfbfd); box-shadow: 0 30px 70px rgba(31,31,62,.15),0 8px 22px rgba(31,31,62,.08),inset 0 1px rgba(255,255,255,.95); }.workspace-window::after { content: ""; position: absolute; z-index: 5; top: -35%; bottom: -35%; left: -35%; width: 14%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); opacity: 0; pointer-events: none; transform: skewX(-15deg); animation: editorGlint 13s ease-in-out 3s infinite; }
.editor-block { animation: none; transition: border-color .4s ease,background-color .4s ease,box-shadow .4s ease; }.editor-block::after { content: ""; position: absolute; top: 5px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); opacity: 0; transition: opacity .35s ease; }.approach__visual.is-step-hero .editor-block--hero,.approach__visual.is-step-services .editor-block--services,.approach__visual.is-step-form .editor-block--form,.approach__visual.is-step-complete .editor-block--form { border-color: rgba(87,71,245,.72); background-color: rgba(87,71,245,.035); box-shadow: inset 0 0 0 1px rgba(87,71,245,.08); }.approach__visual.is-step-hero .editor-block--hero::after,.approach__visual.is-step-services .editor-block--services::after,.approach__visual.is-step-form .editor-block--form::after,.approach__visual.is-step-complete .editor-block--form::after { opacity: 1; }
.workspace-cursor { animation: none; transition: transform 1.15s cubic-bezier(.22,.7,.25,1),opacity .3s ease; }.approach__visual.is-step-hero .workspace-cursor { transform: translate3d(-26px,-48px,0) rotate(-5deg); }.approach__visual.is-step-services .workspace-cursor { transform: translate3d(28px,13px,0) rotate(2deg); }.approach__visual.is-step-form .workspace-cursor,.approach__visual.is-step-complete .workspace-cursor { transform: translate3d(43px,82px,0) rotate(4deg); }.approach__visual.is-panel-active .workspace-cursor { transform: translate3d(var(--cursor-x,0px),var(--cursor-y,0px),0); }
.workspace-progress__track { position: relative; display: flex; width: 112px; height: 5px; overflow: visible; align-items: center; justify-content: space-between; border-radius: 5px; background: #e3e4ea; }.workspace-progress__track > b { position: absolute; inset: 0; border-radius: inherit; background: var(--color-accent); transform: scaleX(var(--editor-progress,.18)); transform-origin: left; transition: transform 1.1s ease; }.workspace-progress__track > i { position: relative; z-index: 1; width: 6px; height: 6px; border: 1px solid #c7c8d0; border-radius: 50%; background: #fff; transition: background-color .4s ease,border-color .4s ease; }.approach__visual.is-step-hero { --editor-progress: .27; }.approach__visual.is-step-services { --editor-progress: .57; }.approach__visual.is-step-form { --editor-progress: .82; }.approach__visual.is-step-complete { --editor-progress: 1; }.approach__visual.is-step-hero .workspace-progress__track i:first-of-type,.approach__visual.is-step-services .workspace-progress__track i:nth-of-type(-n+2),.approach__visual.is-step-form .workspace-progress__track i:nth-of-type(-n+3),.approach__visual.is-step-complete .workspace-progress__track i { border-color: var(--color-accent); background: var(--color-accent); }.workspace-progress span::after { display: none; }
.project-ready-float { position: absolute; z-index: 6; right: -16px; bottom: 14px; transform: translate3d(var(--ready-x,0px),var(--ready-y,0px),0); }.project-ready-card { padding: 10px 13px; border: 1px solid #dcdde6; border-radius: 10px; background: #fff; box-shadow: 0 12px 25px rgba(31,31,62,.1); color: #464956; font-size: 10px; font-weight: 800; animation: readyFloat 6.4s ease-in-out infinite alternate; }.project-ready-card span { display: inline-grid; width: 17px; height: 17px; margin-right: 5px; place-items: center; border-radius: 50%; background: #eeecff; color: var(--color-accent); }
.decor-float--approach-ring { right: -305px; width: 620px; height: 620px; opacity: .66; animation: approachRingFloat 34s ease-in-out infinite alternate; }.decor-float--approach-ring .background-decor__ring { border-color: rgba(87,71,245,.065); }
.approach__visual { transform: none; }.approach-editor__float { min-height: 525px; animation: approachEditorFloat 7.6s ease-in-out .6s infinite alternate; will-change: transform; }.approach-editor__parallax { --panel-rx: 0deg; --panel-ry: 0deg; --panel-x: 0px; --panel-y: 0px; position: relative; min-height: 525px; transform: perspective(1100px) rotateX(var(--panel-rx)) rotateY(var(--panel-ry)); transition: transform 340ms ease-out; }.approach-editor__parallax.is-panel-active { transition-duration: 90ms; will-change: transform; }.approach-editor__panel { position: relative; min-height: 525px; }.approach .approach__visual.is-approach-pending { transform: translate3d(0,18px,0); }.approach .approach__visual.is-approach-visible { transform: translate3d(0,0,0); }
.approach-editor__parallax.is-panel-active .workspace-cursor { animation-play-state: paused; transform: translate3d(var(--cursor-x,0px),var(--cursor-y,0px),0); }.approach-editor__parallax.is-step-hero .editor-block--hero,.approach-editor__parallax.is-step-services .editor-block--services,.approach-editor__parallax.is-step-form .editor-block--form,.approach-editor__parallax.is-step-complete .editor-block--form { border-color: rgba(87,71,245,.72); background-color: rgba(87,71,245,.035); box-shadow: inset 0 0 0 1px rgba(87,71,245,.08); }.approach-editor__parallax.is-step-hero .editor-block--hero::after,.approach-editor__parallax.is-step-services .editor-block--services::after,.approach-editor__parallax.is-step-form .editor-block--form::after,.approach-editor__parallax.is-step-complete .editor-block--form::after { opacity: 1; }.approach-editor__parallax.is-step-hero .workspace-cursor { transform: translate3d(-26px,-48px,0) rotate(-5deg); }.approach-editor__parallax.is-step-services .workspace-cursor { transform: translate3d(28px,13px,0) rotate(2deg); }.approach-editor__parallax.is-step-form .workspace-cursor,.approach-editor__parallax.is-step-complete .workspace-cursor { transform: translate3d(43px,82px,0) rotate(4deg); }.approach-editor__parallax.is-step-hero { --editor-progress: .27; }.approach-editor__parallax.is-step-services { --editor-progress: .57; }.approach-editor__parallax.is-step-form { --editor-progress: .82; }.approach-editor__parallax.is-step-complete { --editor-progress: 1; }.approach-editor__parallax.is-step-hero .workspace-progress__track i:first-of-type,.approach-editor__parallax.is-step-services .workspace-progress__track i:nth-of-type(-n+2),.approach-editor__parallax.is-step-form .workspace-progress__track i:nth-of-type(-n+3),.approach-editor__parallax.is-step-complete .workspace-progress__track i { border-color: var(--color-accent); background: var(--color-accent); }
.service-card.is-reveal-pending { opacity: 0; transform: translateY(18px); }.service-card.is-reveal-visible { opacity: 1; transform: translateY(0); }.service-card.is-reveal-visible:hover { transform: translateY(-4px); }
.portfolio { position: relative; overflow: hidden; padding: 112px 0 104px; scroll-margin-top: calc(var(--header-height) + 20px); background: linear-gradient(180deg,#fbfbfe 0%,#fff 18%,#fafaff 100%); }
.portfolio__container { position: relative; z-index: 2; }.portfolio__header { max-width: 820px; }.portfolio__header h2 { max-width: 790px; margin-top: 14px; font-size: clamp(38px,4vw,58px); line-height: 1.06; letter-spacing: -.045em; }.portfolio__header > p:last-child { max-width: 700px; margin: 20px 0 0; color: #5d606d; font-size: 17px; line-height: 1.7; }
.portfolio-featured,.project-card { border: 1px solid #e1e2eb; background: rgba(255,255,255,.94); box-shadow: 0 24px 65px rgba(31,31,62,.09); transition: border-color .35s ease,box-shadow .35s ease,transform .35s ease; }.portfolio-featured { display: grid; grid-template-columns: minmax(0,1.56fr) minmax(330px,1fr); gap: 40px; margin-top: 48px; padding: 34px; border-radius: 28px; }.portfolio-featured:hover,.project-card:hover { border-color: rgba(87,71,245,.32); box-shadow: 0 30px 75px rgba(31,31,62,.12); }
.portfolio-visual { --portfolio-rx:0deg; --portfolio-ry:0deg; --portfolio-x:0px; --portfolio-y:0px; --portfolio-inner-x:0px; --portfolio-inner-y:0px; --portfolio-phone-x:0px; --portfolio-phone-y:0px; --portfolio-mouse-x:50%; --portfolio-mouse-y:50%; position: relative; border-radius: 22px; perspective: 1100px; isolation: isolate; }.portfolio-visual::before { content:""; position:absolute; z-index:0; inset:-1px; border-radius:inherit; background:radial-gradient(circle at var(--portfolio-mouse-x) var(--portfolio-mouse-y),rgba(109,94,255,.2),transparent 35%); opacity:0; transition:opacity .35s ease; pointer-events:none; }.portfolio-visual.is-portfolio-active::before { opacity:1; }.portfolio-visual__tilt { position:relative; z-index:1; height:100%; transform:perspective(1100px) rotateX(var(--portfolio-rx)) rotateY(var(--portfolio-ry)) translate3d(var(--portfolio-x),var(--portfolio-y),0); transition:transform .35s ease; transform-style:preserve-3d; }.portfolio-visual.is-portfolio-active .portfolio-visual__tilt { transition-duration:90ms; }
.portfolio-visual--featured { min-height: 545px; overflow: visible; background: linear-gradient(145deg,#efeff9,#e2e1f4 55%,#f7f7fb); }.portfolio-visual--featured::after { content:""; position:absolute; inset:12% 7%; z-index:0; border-radius:50%; background:rgba(87,71,245,.12); filter:blur(30px); }.project-browser { position:absolute; z-index:2; top:9%; left:5%; width:84%; overflow:hidden; border:7px solid #24252c; border-bottom-width:10px; border-radius:15px 15px 10px 10px; background:#15161b; box-shadow:0 28px 45px rgba(25,25,48,.22); transform:translate3d(var(--portfolio-inner-x),var(--portfolio-inner-y),20px); transition:transform .35s ease; }.project-browser__bar { display:flex; align-items:center; gap:5px; height:25px; padding:0 9px; background:#24252c; }.project-browser__bar span { width:6px; height:6px; border-radius:50%; background:#696b75; }.project-browser__bar b { margin:auto; color:#9b9ca5; font-size:7px; font-weight:600; }.project-browser__screen { aspect-ratio:16/10; overflow:hidden; background:#111; }.project-browser img,.project-phone img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; transition:transform .5s ease; }.portfolio-visual.is-portfolio-active .project-browser img { transform:scale(1.015); }
.project-phone { position:absolute; z-index:4; right:4%; bottom:4%; width:22%; padding:5px; border:2px solid #32333a; border-radius:21px; background:#1b1c21; box-shadow:0 22px 35px rgba(26,26,48,.28),inset 0 0 0 1px rgba(255,255,255,.15); transform:translate3d(var(--portfolio-phone-x),var(--portfolio-phone-y),45px); animation:portfolioPhoneFloat 7.5s ease-in-out infinite alternate; }.project-phone::before { content:""; position:absolute; z-index:3; top:8px; left:50%; width:31%; height:5px; border-radius:5px; background:#111218; transform:translateX(-50%); }.project-phone__screen { aspect-ratio:390/844; overflow:hidden; border-radius:15px; background:#fff; }.project-phone-services { height:100%; padding:16px 7px 7px; overflow:hidden; background:#fff; color:#15171b; font-family:Arial,Helvetica,sans-serif; }.project-phone-services__header { display:flex; align-items:center; justify-content:space-between; padding-bottom:6px; border-bottom:1px solid #ededed; }.project-phone-services__header strong { font-size:8px; letter-spacing:-.04em; }.project-phone-services__header strong span { color:#f2b900; }.project-phone-services__header > i { position:relative; width:9px; height:6px; border-top:1px solid #191a1d; border-bottom:1px solid #191a1d; }.project-phone-services__intro { padding:10px 1px 7px; }.project-phone-services__intro small { display:block; color:#c39200; font-size:3px; font-weight:800; letter-spacing:.05em; }.project-phone-services__intro b { display:block; margin-top:4px; font-size:14px; line-height:1; }.project-phone-services__intro p { margin:4px 0 0; color:#6e7076; font-size:5px; line-height:1.3; }.project-phone-services__list { display:grid; gap:5px; }.project-phone-service { display:grid; grid-template-columns:20px minmax(0,1fr); gap:5px; min-height:46px; align-items:center; padding:5px; border:1px solid #e6e6e6; border-radius:6px; background:#fff; box-shadow:0 3px 8px rgba(22,23,27,.035); }.project-phone-service > span { position:relative; display:grid; width:20px; height:20px; place-items:center; border-radius:5px; background:#fff7d8; }.project-phone-service > span::before,.project-phone-service > span::after,.project-phone-service > span i { content:""; display:block; border:1px solid #c49300; }.project-phone-service > span::before { width:9px; height:6px; border-radius:2px; }.project-phone-service > span::after { position:absolute; bottom:4px; width:12px; border-width:0 0 1px; }.project-phone-service > span i { position:absolute; top:4px; width:4px; height:4px; border-radius:50%; background:#f7c928; }.project-phone-service b { display:block; font-size:5.5px; line-height:1.15; }.project-phone-service p { margin:2px 0; overflow:hidden; color:#777980; font-size:4px; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; }.project-phone-service small { color:#a47800; font-size:4px; font-weight:700; }.project-phone-services__button { display:grid; height:23px; margin-top:6px; place-items:center; border-radius:5px; background:#f4c400; color:#171717; font-size:5px; font-weight:800; }.project-float-tag { position:absolute; z-index:5; padding:8px 11px; border:1px solid #e0e0ea; border-radius:9px; background:#fff; box-shadow:0 10px 24px rgba(31,31,62,.1); color:#4e5060; font-size:10px; font-weight:800; transform:translate3d(var(--portfolio-inner-x),var(--portfolio-inner-y),50px); transition:transform .35s ease; }.project-float-tag--one { top:3%; right:3%; }.project-float-tag--two { bottom:8%; left:1%; }.project-float-tag--three { right:28%; bottom:2%; padding-inline:9px; }
.project-phone-services { padding:15px 6px 6px; }.project-phone-services__header { padding-bottom:5px; }.project-phone-services__intro { padding:7px 1px 5px; }.project-phone-services__intro b { margin-top:3px; font-size:13px; }.project-phone-services__intro p { margin-top:3px; font-size:4.5px; line-height:1.25; }.project-phone-services__list { gap:4px; }.project-phone-service { grid-template-columns:18px minmax(0,1fr); gap:4px; min-height:36px; padding:4px; }.project-phone-service > span { width:18px; height:18px; }.project-phone-services__button { height:20px; margin-top:4px; }
.portfolio-featured__content { align-self:center; }.project-status,.project-badge { display:inline-flex; align-items:center; min-height:27px; padding:5px 9px; border:1px solid #dfdef5; border-radius:7px; background:#f4f2ff; color:var(--color-accent-dark); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.055em; }.project-badge { background:#fff8dd; border-color:#eee0a8; color:#735d00; }.project-kicker { margin:17px 0 4px; color:#777986; font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }.portfolio h3 { margin:0; font-size:clamp(29px,2.8vw,42px); line-height:1.08; letter-spacing:-.035em; }.project-description,.project-card__content > p:not(.project-kicker) { margin:15px 0 0; color:#5c5f6b; font-size:14px; line-height:1.65; }.project-detail { margin-top:18px; }.project-detail h4 { margin:0 0 7px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; }.project-detail p { margin:0; color:#60636f; font-size:13px; line-height:1.55; }.project-detail ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; margin:0; padding:0; list-style:none; color:#5d606d; font-size:12px; }.project-detail li::before { content:""; display:inline-block; width:5px; height:5px; margin-right:7px; border-radius:50%; background:var(--color-accent); vertical-align:2px; }.project-tech { display:flex; flex-wrap:wrap; gap:7px; margin:21px 0 0; padding:0; list-style:none; }.project-tech li { padding:6px 8px; border:1px solid #e1e2e9; border-radius:6px; background:#f7f7fa; color:#555866; font-size:10px; font-weight:750; }.project-link { display:inline-flex; align-items:center; gap:7px; margin-top:21px; color:var(--color-accent); font-size:13px; font-weight:850; }.project-link span { transition:transform .25s ease; }.project-link:hover { color:var(--color-accent-dark); }.project-link:hover span { transform:translateX(4px); }.project-link:focus-visible { outline:3px solid rgba(87,71,245,.25); outline-offset:5px; border-radius:3px; }
.portfolio__grid { display:grid; grid-template-columns:minmax(0,1.78fr) minmax(300px,1fr); align-items:start; gap:24px; margin-top:24px; }.portfolio__concepts { display:contents; }.project-card { overflow:hidden; border-radius:24px; }.project-card__content { padding:27px 28px 30px; }.project-card--mes { display:grid; grid-template-columns:1fr; }.portfolio-visual--mes { min-height:365px; margin:18px 18px 0; overflow:hidden; background:linear-gradient(145deg,#e8e9f1,#f7f7fa); }.mes-window { display:grid; grid-template-columns:25% 1fr; inset:auto; margin:30px; overflow:hidden; border:1px solid #d9dae3; border-radius:12px; background:#fff; box-shadow:0 20px 40px rgba(31,31,62,.14); transform:perspective(1100px) rotateX(var(--portfolio-rx)) rotateY(var(--portfolio-ry)) translate3d(var(--portfolio-x),var(--portfolio-y),0); }.mes-sidebar { display:flex; flex-direction:column; gap:8px; padding:18px 12px; background:#27283a; color:#aeb0c2; font-size:8px; }.mes-sidebar strong { margin-bottom:18px; color:#fff; font-size:12px; }.mes-sidebar span { padding:7px; border-radius:5px; }.mes-sidebar .is-current { background:var(--color-accent); color:#fff; }.mes-workspace { padding:17px; }.mes-toolbar { display:flex; align-items:center; justify-content:space-between; color:#30323d; font-size:10px; }.mes-toolbar i { padding:6px 8px; border-radius:5px; background:var(--color-accent); color:#fff; font-size:7px; font-style:normal; }.mes-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:17px; }.mes-metrics span { padding:10px; border:1px solid #e5e6ec; border-radius:7px; background:#fafafd; }.mes-metrics small { display:block; color:#898b97; font-size:6px; }.mes-metrics b { display:block; margin-top:4px; font-size:13px; }.mes-table { margin-top:15px; border:1px solid #e6e7ed; border-radius:7px; overflow:hidden; font-size:7px; }.mes-table > div { display:grid; grid-template-columns:1.2fr 1fr .7fr; gap:7px; padding:9px; border-bottom:1px solid #ededf2; }.mes-table > div:first-child { background:#f4f4f8; }.mes-table > div:last-child { border:0; }.mes-table span { color:#666976; }
.project-card--mes { align-self:start; align-content:start; }.portfolio-visual--mes { min-height:400px; }.mes-toolbar > div { display:grid; gap:2px; }.mes-toolbar small { color:#858793; font-size:6px; font-weight:700; }.mes-summary { display:grid; grid-template-columns:1fr 1fr auto; gap:7px; align-items:center; margin-top:12px; padding:9px; border:1px solid #e5e6ec; border-radius:7px; background:#fafafd; }.mes-summary span { display:grid; gap:2px; }.mes-summary small { color:#898b97; font-size:5px; }.mes-summary b { color:#3b3d48; font-size:8px; }.mes-summary i { padding:5px 7px; border-radius:5px; background:#eeecff; color:var(--color-accent-dark); font-size:5px; font-style:normal; font-weight:800; white-space:nowrap; }
.concept-visual { min-height:210px; margin:14px 14px 0; overflow:hidden; border-radius:17px; }.concept-visual .portfolio-visual__tilt { padding:20px; }.concept-visual--service { color:#fff; background:#17191e; }.concept-service__nav,.concept-industry__nav { display:flex; align-items:center; justify-content:space-between; font-size:6px; }.concept-service__nav b { color:#f2c64f; font-size:8px; }.concept-service__nav span { color:#9a9da5; }.concept-service__hero { padding-top:25px; }.concept-service__hero small,.concept-industry__hero small { color:#f2c64f; font-size:6px; text-transform:uppercase; }.concept-service__hero strong,.concept-industry__hero strong { display:block; margin-top:6px; font-size:17px; line-height:1.08; }.concept-service__hero i,.concept-industry__hero i { display:block; width:44px; height:10px; margin-top:12px; border-radius:4px; background:#f2c64f; }.concept-service__cards { display:flex; gap:6px; margin-top:20px; }.concept-service__cards span { flex:1; height:34px; border:1px solid #333740; border-radius:6px; background:#202329; }.concept-visual--industry { background:#f1f2f3; color:#1d2930; }.concept-industry__nav b { font-size:8px; }.concept-industry__nav span { color:#747b80; }.concept-industry__hero { display:grid; grid-template-columns:1.2fr 1fr; gap:14px; padding-top:22px; }.concept-industry__hero small { color:#66747b; }.concept-industry__hero > span { border-radius:5px; background:linear-gradient(140deg,#606f76,#1e2b31); }.concept-industry__hero i { background:#384950; }.concept-industry__line { height:4px; margin-top:18px; background:linear-gradient(90deg,#384950 35%,#d5d9db 35%); }
.project-card--auto-service { grid-column:2; grid-row:1; align-self:start; }.project-card--industry { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%); align-items:center; }.project-card--industry .concept-visual { min-height:300px; margin:14px; }.project-card--industry .project-card__content { padding:34px 38px 36px; }.project-card--industry h3 { max-width:560px; font-size:clamp(28px,3vw,40px); }.project-card--industry .project-card__content > p:not(.project-kicker) { max-width:620px; }.project-card--industry .project-tech { margin-top:18px; }.project-card--industry .project-link { margin-top:18px; }
.project-card--industry .concept-industry__nav { font-size:7px; }.project-card--industry .concept-industry__nav b { font-size:10px; }.project-card--industry .concept-industry__hero { grid-template-columns:1.05fr 1fr; gap:18px; padding-top:29px; }.project-card--industry .concept-industry__hero strong { font-size:24px; }.project-card--industry .concept-industry__hero p { width:74%; height:4px; margin:12px 0 0; border-radius:3px; background:#cbd0d3; }.project-card--industry .concept-industry__hero i { display:grid; width:72px; height:18px; margin-top:14px; place-items:center; color:#fff; font-size:5px; font-style:normal; }.concept-industry__image { position:relative; min-height:145px; overflow:hidden; border-radius:7px; background:linear-gradient(145deg,#7d8b91,#27383f); }.concept-industry__image::before { content:""; position:absolute; right:12%; bottom:0; width:62%; height:67%; background:linear-gradient(135deg,transparent 18%,rgba(255,255,255,.18) 19% 22%,transparent 23%),linear-gradient(90deg,#26363d 0 19%,#53646b 19% 31%,#2f4249 31% 64%,#69777c 64%); clip-path:polygon(0 35%,24% 35%,24% 16%,44% 16%,44% 30%,100% 0,100% 100%,0 100%); }.concept-industry__image::after { content:""; position:absolute; right:8%; bottom:14%; width:75%; height:1px; background:rgba(255,255,255,.35); box-shadow:0 -21px rgba(255,255,255,.2),0 21px rgba(255,255,255,.18); }.concept-industry__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:17px; }.concept-industry__stats span { padding:8px; border-top:1px solid #cfd4d6; }.concept-industry__stats b { display:block; font-size:10px; }.concept-industry__stats small { display:block; margin-top:2px; color:#778086; font-size:5px; }.portfolio__footer { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:48px; padding-top:28px; border-top:1px solid #dddfe7; }.portfolio__footer p { max-width:650px; margin:0; color:#50535f; font-size:15px; font-weight:650; line-height:1.55; }.portfolio__footer .project-link { flex:none; margin-top:0; }
.portfolio__grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:24px; }.project-card--secondary { display:flex; grid-column:auto; grid-row:auto; min-height:650px; height:100%; flex-direction:column; align-self:stretch; }.project-card--secondary .portfolio-visual { width:calc(100% - 28px); min-height:0; aspect-ratio:16/10; flex:none; margin:14px 14px 0; overflow:hidden; }.project-card--secondary .project-card__content { display:flex; min-width:0; flex:1; flex-direction:column; padding:24px 26px 28px; }.project-card--secondary h3,.project-card--industry h3 { max-width:none; font-size:28px; line-height:1.12; text-wrap:balance; }.project-card--secondary .project-card__content > p:not(.project-kicker) { max-width:none; margin-top:13px; font-size:14px; line-height:1.6; }.project-card--secondary .project-tech { margin-top:18px; }.project-card--secondary .project-link,.project-card--industry .project-link { margin-top:auto; padding-top:22px; }.project-features { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }.project-features li { padding:6px 8px; border:1px solid #e0dff1; border-radius:6px; background:#f4f2ff; color:#5b5486; font-size:9px; font-weight:750; }
.project-card--secondary .mes-window { position:absolute; inset:14px; width:auto; height:auto; margin:0; grid-template-columns:27% 1fr; }.project-card--secondary .mes-sidebar { gap:4px; padding:10px 7px; font-size:6px; }.project-card--secondary .mes-sidebar strong { margin-bottom:8px; font-size:9px; }.project-card--secondary .mes-sidebar span { padding:5px; }.project-card--secondary .mes-workspace { padding:9px; }.project-card--secondary .mes-toolbar { font-size:7px; }.project-card--secondary .mes-toolbar i { padding:4px 5px; font-size:5px; }.project-card--secondary .mes-metrics { gap:4px; margin-top:7px; }.project-card--secondary .mes-metrics span { padding:5px; }.project-card--secondary .mes-metrics b { margin-top:2px; font-size:9px; }.project-card--secondary .mes-table { margin-top:7px; font-size:5px; }.project-card--secondary .mes-table > div { gap:3px; padding:5px; }.project-card--secondary .mes-table > div:nth-child(n+5) { display:none; }.project-card--secondary .mes-summary { display:none; }
.concept-service__hero { position:relative; padding-top:16px; }.concept-service__hero p { width:57%; margin:7px 0 0; color:#979ba3; font-size:5px; line-height:1.35; }.concept-service__hero i { display:grid; width:48px; height:15px; margin-top:9px; place-items:center; color:#17191e; font-size:5px; font-style:normal; font-weight:800; }.concept-service__car { position:absolute; right:0; bottom:0; width:45%; height:48px; border-radius:45% 55% 12% 12% / 55% 55% 18% 18%; background:linear-gradient(155deg,#61656c,#25282e 62%); box-shadow:inset 0 4px rgba(255,255,255,.08); }.concept-service__car::before { content:""; position:absolute; left:14%; right:14%; bottom:-4px; height:9px; border-radius:8px; background:radial-gradient(circle at 13% 50%,#111 0 17%,#555 18% 25%,transparent 27%),radial-gradient(circle at 87% 50%,#111 0 17%,#555 18% 25%,transparent 27%); }.project-card--secondary .concept-service__cards { gap:4px; margin-top:13px; }.project-card--secondary .concept-service__cards span { height:25px; }
.project-card--secondary.project-card--industry { display:flex; grid-template-columns:none; align-items:stretch; }.project-card--secondary.project-card--industry .concept-visual { min-height:0; margin:14px 14px 0; }.project-card--secondary.project-card--industry .project-card__content { padding:24px 26px 28px; }.project-card--secondary .concept-visual .portfolio-visual__tilt { padding:14px; }.project-card--secondary .concept-industry__nav { font-size:5px; }.project-card--secondary .concept-industry__nav b { font-size:7px; }.project-card--secondary .concept-industry__hero { grid-template-columns:1fr 1fr; gap:8px; padding-top:13px; }.project-card--secondary .concept-industry__hero strong { font-size:16px; }.project-card--secondary .concept-industry__hero p { height:3px; margin-top:7px; }.project-card--secondary .concept-industry__hero i { width:52px; height:14px; margin-top:8px; font-size:4px; }.project-card--secondary .concept-industry__image { min-height:82px; }.project-card--secondary .concept-industry__stats { gap:4px; margin-top:8px; }.project-card--secondary .concept-industry__stats span { padding:5px 3px; }.project-card--secondary .concept-industry__stats b { font-size:7px; }.project-card--secondary .concept-industry__stats small { font-size:4px; }
.portfolio__footer { margin-top:54px; }.background-decor--portfolio { position:absolute; inset:0; z-index:0; pointer-events:none; }.portfolio-decor { position:absolute; display:block; }.portfolio-decor--circle { top:19%; left:-270px; width:560px; height:560px; border:1px solid rgba(87,71,245,.075); border-radius:50%; animation:portfolioDecorFloat 30s ease-in-out infinite alternate; }.portfolio-decor--arc { top:47%; right:-180px; width:420px; height:420px; border:1px solid rgba(87,71,245,.09); border-left-color:transparent; border-radius:50%; animation:portfolioDecorFloat 36s ease-in-out -8s infinite alternate-reverse; }.portfolio-decor--dots { top:7%; right:9%; width:76px; height:56px; background:radial-gradient(circle,rgba(87,71,245,.22) 1px,transparent 1.5px) 0 0/12px 12px; opacity:.45; animation:portfolioDecorFloat 24s ease-in-out -4s infinite alternate; }.portfolio [data-portfolio-reveal] { transition:opacity .8s ease,transform .8s ease; }.portfolio .is-portfolio-pending { opacity:0; transform:translate3d(0,18px,0); }.portfolio .is-portfolio-visible { opacity:1; transform:translate3d(0,0,0); }
.process { --process-progress:14.28%; position:relative; overflow:hidden; padding:112px 0 104px; scroll-margin-top:calc(var(--header-height) + 20px); background:linear-gradient(180deg,#fff 0%,#fafaff 100%); }.process__container { position:relative; z-index:2; }.process__header { max-width:820px; }.process__header h2 { max-width:760px; margin-top:14px; font-size:clamp(38px,4vw,58px); line-height:1.06; letter-spacing:-.045em; }.process__header > p:last-child { max-width:700px; margin:20px 0 0; color:#5d606d; font-size:17px; line-height:1.7; }.process__workspace { display:grid; grid-template-columns:minmax(280px,32%) minmax(0,68%); gap:24px; margin-top:48px; }.process__navigation,.process__stage { border:1px solid #e0e1e9; border-radius:24px; background:rgba(255,255,255,.94); box-shadow:0 24px 60px rgba(31,31,62,.08); }.process__navigation { display:grid; align-content:start; gap:3px; padding:14px; }.process-tab { position:relative; display:grid; grid-template-columns:38px 1fr 8px; min-height:65px; align-items:center; gap:9px; width:100%; padding:10px 13px; border-radius:11px; background:transparent; color:#686b77; text-align:left; cursor:pointer; transition:background-color .25s,color .25s,transform .25s; }.process-tab::before { content:""; position:absolute; top:10px; bottom:10px; left:0; width:2px; border-radius:2px; background:var(--color-accent); opacity:0; transform:scaleY(.4); transition:opacity .25s,transform .25s; }.process-tab span { color:#9799a5; font-size:11px; font-weight:850; transition:color .25s; }.process-tab b { font-size:13px; line-height:1.3; }.process-tab i { width:6px; height:6px; border:1px solid #c7c8d2; border-radius:50%; }.process-tab:hover { background:#f8f7ff; color:#343642; }.process-tab.is-active { background:#f3f1ff; box-shadow:inset 0 0 0 1px rgba(87,71,245,.08); color:#222430; }.process-tab.is-active::before { opacity:1; transform:scaleY(1); }.process-tab.is-active span { color:var(--color-accent); }.process-tab.is-active i { border-color:var(--color-accent); background:var(--color-accent); box-shadow:0 0 0 3px rgba(87,71,245,.12); }.process-tab:focus-visible { outline:3px solid rgba(87,71,245,.25); outline-offset:2px; }
.process__stage { --process-rx:0deg; --process-ry:0deg; --process-inner-x:0px; --process-inner-y:0px; position:relative; min-height:675px; padding:36px 38px 28px; overflow:hidden; perspective:1200px; }.process__stage::before { content:""; position:absolute; inset:-20%; background:radial-gradient(circle at 65% 45%,rgba(87,71,245,.09),transparent 34%); pointer-events:none; }.process__stage-tilt { position:relative; min-height:550px; transform:perspective(1200px) rotateX(var(--process-rx)) rotateY(var(--process-ry)); transform-style:preserve-3d; transition:transform .32s ease; }.process-panel { position:relative; z-index:1; }.process-panel.is-process-entering { animation:processPanelEnter .36s ease both; }.process-panel__step { margin:0; color:var(--color-accent); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }.process-panel h3 { max-width:620px; margin:9px 0 0; font-size:clamp(30px,3vw,43px); line-height:1.08; letter-spacing:-.035em; }.process-panel__description { max-width:650px; min-height:69px; margin:15px 0 0; color:#5c5f6b; font-size:14px; line-height:1.65; }.process-result { display:flex; align-items:center; gap:11px; max-width:650px; margin-top:18px; padding:12px 14px; border:1px solid #e1dff8; border-radius:11px; background:#f6f4ff; }.process-result > span { display:grid; width:25px; height:25px; flex:none; place-items:center; border-radius:50%; background:var(--color-accent); color:#fff; font-size:11px; }.process-result small { display:block; color:#77748e; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }.process-result p { margin:3px 0 0; color:#3e4050; font-size:12px; font-weight:650; }
.process-scene { position:relative; height:225px; margin-top:22px; overflow:hidden; border:1px solid #e1e2e9; border-radius:15px; background:#f6f7fa; transform:translate3d(var(--process-inner-x),var(--process-inner-y),20px); transition:transform .3s ease; }.scene-window-bar { display:flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-bottom:1px solid #e4e5eb; background:#fff; }.scene-window-bar i { width:6px; height:6px; border-radius:50%; background:#d2d3da; }.scene-window-bar b { margin-left:7px; color:#777986; font-size:7px; }.process-scene--chat { display:grid; grid-template-columns:1.25fr .75fr; padding-top:30px; }.process-scene--chat .scene-window-bar { position:absolute; inset:0 0 auto; }.scene-chat { display:flex; flex-direction:column; gap:8px; justify-content:center; padding:14px 20px; }.scene-chat p { max-width:80%; margin:0; padding:8px 10px; border-radius:9px 9px 9px 3px; background:#fff; color:#565966; font-size:8px; box-shadow:0 4px 10px rgba(30,31,50,.05); }.scene-chat p:nth-child(2) { align-self:flex-end; border-radius:9px 9px 3px 9px; background:#eeecff; }.scene-brief { display:grid; align-content:center; gap:7px; padding:15px; border-left:1px solid #e2e3e9; background:#fff; }.scene-brief span { padding:7px; border:1px solid #e5e6eb; border-radius:5px; color:#777985; font-size:7px; }.scene-brief b { color:var(--color-accent); font-size:8px; }
.process-scene--flow { display:grid; place-items:center; }.scene-flow { display:grid; width:76%; place-items:center; gap:5px; }.scene-flow > b,.scene-flow div b { min-width:78px; padding:7px; border:1px solid #dedfe7; border-radius:6px; background:#fff; color:#555866; font-size:7px; text-align:center; }.scene-flow > b:nth-of-type(2) { border-color:rgba(87,71,245,.45); background:#f1efff; color:var(--color-accent); }.scene-flow > span { width:1px; height:10px; background:#c9cad4; }.scene-flow div { display:flex; gap:25px; }.process-scene--flow > small { position:absolute; right:14px; bottom:12px; color:var(--color-accent); font-size:7px; }
.process-scene--design { display:grid; grid-template-columns:.55fr .8fr 1.25fr; gap:13px; padding:19px; }.scene-palette { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }.scene-palette span { border-radius:8px; background:#5747f5; }.scene-palette span:nth-child(2) { background:#171825; }.scene-palette span:nth-child(3) { background:#e9e7ff; }.scene-palette span:nth-child(4) { background:#f2c94c; }.scene-type,.scene-ui-card { padding:14px; border:1px solid #e0e1e7; border-radius:10px; background:#fff; }.scene-type b { font-size:29px; }.scene-type p { margin:7px 0 12px; font-size:8px; }.scene-type i { display:block; width:80%; height:4px; margin-top:7px; border-radius:3px; background:#e0e1e6; }.scene-ui-card { display:flex; flex-direction:column; justify-content:center; }.scene-ui-card small { color:var(--color-accent); font-size:7px; }.scene-ui-card strong { margin-top:9px; font-size:15px; }.scene-ui-card p { width:72%; height:5px; background:#e3e4e9; }.scene-ui-card .scene-button { display:grid; width:70px; height:22px; place-items:center; border-radius:5px; background:var(--color-accent); color:#fff; font-size:7px; }
.process-scene--code { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; padding:18px; background:#20212b; }.scene-code { padding:13px; border-radius:8px; background:#171820; color:#c9c9d4; font:7px/2 monospace; }.scene-code span { margin-right:9px; color:#5f6270; }.scene-code b { display:block; margin-top:11px; color:#8ed8a5; font:7px Arial; }.scene-preview { padding:15px; border-radius:8px; background:#fff; }.scene-preview i { display:block; height:5px; background:#eeeef2; }.scene-preview strong { display:block; margin-top:25px; font-size:15px; }.scene-preview p { width:72%; height:5px; background:#dedfe5; }.scene-preview .scene-button { display:block; width:47px; height:17px; border-radius:4px; background:var(--color-accent); }
.process-scene--check,.process-scene--launch,.process-scene--support { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:19px; }.scene-checklist,.scene-launch-list { display:grid; align-content:center; gap:7px; }.scene-checklist span,.scene-launch-list span { padding:7px 9px; border:1px solid #e0e1e7; border-radius:6px; background:#fff; color:#575a66; font-size:8px; }.scene-checklist span { color:#31764a; }.scene-devices { position:relative; display:grid; place-items:center; border-radius:9px; background:#fff; }.scene-devices b { width:72%; height:76px; border:5px solid #343640; border-radius:6px; background:#eeecff; }.scene-devices i { position:absolute; right:15%; bottom:39px; width:23px; height:48px; border:3px solid #343640; border-radius:5px; background:#fff; }.scene-devices small { color:#39754d; font-size:7px; }.scene-launch-list i { color:#3b8d58; font-style:normal; }.scene-globe { display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,#fff 0 44%,#eceaff 45% 47%,transparent 48%),repeating-radial-gradient(circle,transparent 0 17px,rgba(87,71,245,.12) 18px 19px); }.scene-globe b { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:var(--color-accent); color:#fff; font-size:19px; }.scene-globe span { padding:5px 8px; border-radius:5px; background:#fff; color:#367d50; font-size:7px; font-weight:800; }.scene-update,.scene-support-chat { display:flex; flex-direction:column; justify-content:center; padding:17px; border:1px solid #e0e1e7; border-radius:9px; background:#fff; }.scene-update small { color:#838591; font-size:7px; }.scene-update b { margin-top:6px; font-size:16px; }.scene-update p { font-size:8px; }.scene-update span,.scene-support-chat i { color:#377e50; font-size:7px; font-style:normal; font-weight:800; }.scene-support-chat p { margin:4px 0; padding:8px; border-radius:7px; background:#f2f1ff; color:#555866; font-size:7px; }.scene-support-chat p:nth-child(2) { background:#f5f5f7; }
.process-progress { position:relative; z-index:2; margin-top:22px; padding-top:17px; border-top:1px solid #e0e1e8; }.process-progress__meta { display:flex; justify-content:space-between; color:#686b77; font-size:9px; font-weight:750; }.process-progress__track { position:relative; height:18px; margin-top:9px; }.process-progress__track > span { position:absolute; top:4px; left:0; width:var(--process-progress); height:3px; border-radius:3px; background:var(--color-accent); transition:width .35s ease; }.process-progress__track::before { content:""; position:absolute; top:4px; left:0; right:0; height:3px; border-radius:3px; background:#e2e3e9; }.process-progress__track > div { position:relative; display:flex; justify-content:space-between; }.process-progress__track i { width:11px; height:11px; border:2px solid #d7d8df; border-radius:50%; background:#fff; transition:border-color .25s,background-color .25s; }.process-progress__track i.is-complete { border-color:var(--color-accent); background:var(--color-accent); }.process__note { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:52px; padding-top:27px; border-top:1px solid #dddfe7; }.process__note p { max-width:760px; margin:0; color:#50535f; font-size:14px; line-height:1.6; }.process__note a { flex:none; color:var(--color-accent); font-size:13px; font-weight:850; }.process__note a span { transition:transform .25s; }.process__note a:hover span { display:inline-block; transform:translateX(4px); }.process__note a:focus-visible { outline:3px solid rgba(87,71,245,.25); outline-offset:5px; border-radius:3px; }
.background-decor--process { position:absolute; inset:0; z-index:0; pointer-events:none; }.process-decor { position:absolute; display:block; }.process-decor--arc { top:18%; left:-190px; width:420px; height:420px; border:1px solid rgba(87,71,245,.07); border-right-color:transparent; border-radius:50%; animation:processDecorFloat 31s ease-in-out infinite alternate; }.process-decor--circle { right:-260px; bottom:4%; width:560px; height:560px; border:1px solid rgba(87,71,245,.07); border-radius:50%; animation:processDecorFloat 38s ease-in-out -8s infinite alternate-reverse; }.process-decor--dots { top:11%; right:8%; width:126px; height:18px; background:radial-gradient(circle,rgba(87,71,245,.23) 2px,transparent 2.5px) 0 0/18px 18px; opacity:.5; }.process [data-process-reveal] { transition:opacity .8s ease,transform .8s ease; }.process .is-process-pending { opacity:0; transform:translate3d(0,18px,0); }.process .is-process-visible { opacity:1; transform:none; }
.pricing-calculator { position:relative; overflow:hidden; padding:112px 0 104px; scroll-margin-top:calc(var(--header-height) + 20px); background:linear-gradient(180deg,#fafaff,#fff 18%,#fbfbfe); }.pricing-calculator__container { position:relative; z-index:2; }.pricing-calculator__header { max-width:820px; }.pricing-calculator__header h2 { max-width:790px; margin-top:14px; font-size:clamp(38px,4vw,58px); line-height:1.06; letter-spacing:-.045em; }.pricing-calculator__header > p:last-child { max-width:700px; margin:20px 0 0; color:#5d606d; font-size:17px; line-height:1.7; }.pricing-calculator__layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(340px,1fr); gap:28px; align-items:start; margin-top:48px; }.project-calculator,.project-estimate { border:1px solid #e0e1e9; border-radius:25px; background:rgba(255,255,255,.95); box-shadow:0 24px 60px rgba(31,31,62,.08); }.project-calculator { overflow:hidden; }.calculator-step { margin:0; padding:31px 32px 33px; border:0; border-bottom:1px solid #e3e4eb; }.calculator-step:last-child { border-bottom:0; }.calculator-step legend { display:flex; align-items:center; gap:10px; padding:0; color:#262834; font-size:18px; font-weight:850; }.calculator-step legend span { display:grid; width:30px; height:30px; place-items:center; border-radius:8px; background:#efedff; color:var(--color-accent); font-size:10px; }.calculator-step > p { margin:9px 0 0; color:#737580; font-size:13px; }.calculator-options { display:grid; gap:11px; margin-top:20px; }.calculator-options--types { grid-template-columns:repeat(3,minmax(0,1fr)); }.calculator-options--compact { grid-template-columns:repeat(3,minmax(0,1fr)); }.calculator-option { position:relative; display:flex; min-width:0; min-height:178px; flex-direction:column; padding:18px 16px 16px; border:1px solid #dfe0e8; border-radius:13px; background:#fff; cursor:pointer; transition:border-color .24s,background-color .24s,box-shadow .24s,transform .24s; }.calculator-option > input { position:absolute; width:1px; height:1px; opacity:0; }.calculator-option__indicator { width:17px; height:17px; margin-bottom:13px; border:2px solid #c7c8d1; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 4px #fff; }.calculator-option > small { position:absolute; top:14px; right:12px; padding:4px 6px; border-radius:5px; background:#f0eeff; color:var(--color-accent-dark); font-size:6px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }.calculator-option strong { font-size:13px; line-height:1.3; }.calculator-option p { margin:8px 0 13px; color:#737580; font-size:10px; line-height:1.5; }.calculator-option > b { margin-top:auto; color:#4b4e5b; font-size:10px; }.calculator-option:has(input:checked) { border-color:rgba(87,71,245,.55); background:#faf9ff; box-shadow:0 10px 24px rgba(87,71,245,.08),inset 0 0 0 1px rgba(87,71,245,.08); }.calculator-option:has(input:checked) .calculator-option__indicator { border-color:var(--color-accent); background:var(--color-accent); }.calculator-option:has(input:focus-visible) { outline:3px solid rgba(87,71,245,.24); outline-offset:3px; }.calculator-option:hover { border-color:rgba(87,71,245,.34); transform:translateY(-2px); }
.calculator-stepper { display:flex; align-items:center; gap:0; width:max-content; margin-top:18px; overflow:hidden; border:1px solid #dfe0e8; border-radius:10px; background:#fff; }.calculator-stepper button { width:46px; height:46px; background:#f6f6f9; color:#4c4f5b; font-size:19px; cursor:pointer; }.calculator-stepper input { width:60px; height:46px; border:0; border-inline:1px solid #e1e2e8; background:#fff; color:#292b36; font-size:16px; font-weight:800; text-align:center; appearance:textfield; }.calculator-stepper input::-webkit-inner-spin-button { appearance:none; }.calculator-stepper span { padding:0 15px; color:#737580; font-size:11px; }.calculator-stepper button:focus-visible,.calculator-stepper input:focus-visible { position:relative; outline:3px solid rgba(87,71,245,.25); outline-offset:-3px; }.calculator-step--pages.is-disabled { opacity:.68; }.calculator-step--pages.is-disabled .calculator-stepper { pointer-events:none; }
.calculator-functions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }.calculator-functions label { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto; min-height:76px; align-items:center; gap:10px; padding:12px 13px; border:1px solid #e0e1e8; border-radius:11px; background:#fff; cursor:pointer; transition:border-color .23s,background-color .23s; }.calculator-functions input { position:absolute; width:1px; height:1px; opacity:0; }.calculator-functions label > span { display:grid; width:20px; height:20px; place-items:center; border:1px solid #c9cad3; border-radius:5px; color:transparent; font-size:9px; }.calculator-functions strong { display:block; font-size:11px; }.calculator-functions p { margin:3px 0 0; color:#7a7c87; font-size:8px; line-height:1.35; }.calculator-functions label > b { color:#575a66; font-size:9px; white-space:nowrap; }.calculator-functions label:has(input:checked) { border-color:rgba(87,71,245,.42); background:#faf9ff; }.calculator-functions label:has(input:checked) > span { border-color:var(--color-accent); background:var(--color-accent); color:#fff; }.calculator-functions label:has(input:focus-visible) { outline:3px solid rgba(87,71,245,.24); outline-offset:2px; }
.project-estimate { position:sticky; top:calc(var(--header-height) + 24px); padding:30px; background:linear-gradient(145deg,#f8f7ff,#fff 58%); }.project-estimate::before { content:""; position:absolute; z-index:-1; top:4%; right:4%; width:130px; height:130px; border-radius:50%; background:rgba(87,71,245,.08); filter:blur(28px); }.project-estimate__eyebrow { margin:0; color:var(--color-accent); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.11em; }.project-estimate h3 { margin:8px 0 0; font-size:23px; letter-spacing:-.025em; }.project-estimate__price { margin-top:21px; color:#222431; font-size:clamp(34px,3.3vw,48px); font-weight:900; line-height:1; letter-spacing:-.045em; transition:opacity .2s,transform .2s; }.project-estimate__price.is-updating { opacity:.35; transform:translate3d(0,5px,0); }.project-estimate__caption { margin:7px 0 0; color:#777985; font-size:10px; }.project-scale { margin-top:24px; padding:13px; border:1px solid #e0def4; border-radius:10px; background:rgba(255,255,255,.7); }.project-scale > div:first-child { display:flex; justify-content:space-between; color:#686b77; font-size:9px; }.project-scale b { color:var(--color-accent-dark); }.project-scale__track { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:9px; }.project-scale__track i { height:4px; border-radius:3px; background:#dddde5; }.project-scale__track i.is-active { background:var(--color-accent); }.project-estimate__selection { display:grid; gap:8px; margin-top:23px; padding:0; list-style:none; }.project-estimate__selection li { display:flex; align-items:center; gap:8px; color:#555865; font-size:11px; }.project-estimate__selection li::before { content:"✓"; display:grid; width:17px; height:17px; flex:none; place-items:center; border-radius:50%; background:#eeecff; color:var(--color-accent); font-size:7px; font-weight:900; }.project-estimate__warning { margin:18px 0 0; padding:11px; border:1px solid #e7dfb9; border-radius:9px; background:#fffbed; color:#655d38; font-size:9px; line-height:1.5; }.estimate-breakdown { margin-top:22px; border-top:1px solid #dfdfe8; border-bottom:1px solid #dfdfe8; }.estimate-breakdown > button { display:flex; width:100%; align-items:center; justify-content:space-between; padding:14px 0; background:transparent; color:#4d505c; font-size:11px; font-weight:800; cursor:pointer; }.estimate-breakdown > button span { transition:transform .23s; }.estimate-breakdown > button[aria-expanded="true"] span { transform:rotate(180deg); }.estimate-breakdown > button:focus-visible { outline:3px solid rgba(87,71,245,.25); outline-offset:3px; }.estimate-breakdown dl { display:grid; gap:8px; margin:0; padding:0 0 14px; }.estimate-breakdown dl div { display:flex; justify-content:space-between; gap:15px; color:#70727e; font-size:9px; }.estimate-breakdown dl div:last-child { padding-top:8px; border-top:1px solid #e2e2e9; color:#292b36; font-weight:850; }.estimate-breakdown dt,.estimate-breakdown dd { margin:0; }.project-estimate__cta { width:100%; margin-top:23px; }.project-estimate__reset { display:block; margin:13px auto 0; background:transparent; color:#777985; font-size:10px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }.project-estimate__reset:focus-visible { outline:3px solid rgba(87,71,245,.25); outline-offset:3px; }
.pricing-calculator__note { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:52px; padding-top:27px; border-top:1px solid #dddfe7; }.pricing-calculator__note p { max-width:760px; margin:0; color:#50535f; font-size:14px; line-height:1.6; }.pricing-calculator__note a { flex:none; color:var(--color-accent); font-size:13px; font-weight:850; }.pricing-calculator__note a span { transition:transform .25s; }.pricing-calculator__note a:hover span { display:inline-block; transform:translateX(4px); }.pricing-calculator__note a:focus-visible { outline:3px solid rgba(87,71,245,.25); outline-offset:5px; border-radius:3px; }.background-decor--pricing { position:absolute; inset:0; z-index:0; pointer-events:none; }.pricing-decor { position:absolute; display:block; }.pricing-decor--ring { left:-280px; bottom:4%; width:560px; height:560px; border:1px solid rgba(87,71,245,.07); border-radius:50%; animation:pricingDecorFloat 34s ease-in-out infinite alternate; }.pricing-decor--arc { top:18%; right:-210px; width:430px; height:430px; border:1px solid rgba(87,71,245,.08); border-left-color:transparent; border-radius:50%; animation:pricingDecorFloat 29s ease-in-out -7s infinite alternate-reverse; }.pricing-decor--dots { top:34%; left:64%; width:54px; height:72px; background:radial-gradient(circle,rgba(87,71,245,.2) 1.5px,transparent 2px) 0 0/13px 13px; opacity:.42; }.pricing-calculator [data-pricing-reveal] { transition:opacity .8s ease,transform .8s ease; }.pricing-calculator .is-pricing-pending { opacity:0; transform:translate3d(0,18px,0); }.pricing-calculator .is-pricing-visible { opacity:1; transform:none; }
.reveal { animation: reveal .65s both ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes visualEnter { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes decorCircleFloat { to { transform: translate3d(8px, -7px, 0) scale(1.015); } }
@keyframes decorArcFloat { to { transform: rotate(360deg); } }
@keyframes decorDotsFloat { to { transform: translate3d(-6px, 8px, 0); opacity: .72; } }
@keyframes decorBreathe { to { transform: translate3d(3px, -5px, 0) scale(1.018); opacity: .72; } }
@keyframes editorSelection { 0%, 18% { border-color: rgba(87,71,245,.72); box-shadow: inset 0 0 0 1px rgba(87,71,245,.1); } 24%, 100% { border-color: transparent; box-shadow: none; } }
@keyframes editorCursor { 0%, 100% { transform: translate3d(-8px,4px,0); } 38% { transform: translate3d(16px,-18px,0); } 68% { transform: translate3d(25px,15px,0); } }
@keyframes editorProgress { to { transform: scaleX(.88); } }
@keyframes readyFloat { to { transform: translate3d(0,-6px,0); } }
@keyframes editorGlint { 0%,72% { left:-35%; opacity:0; } 76% { opacity:.32; } 87% { left:125%; opacity:.06; } 91%,100% { left:125%; opacity:0; } }
@keyframes approachRingFloat { to { transform: translate3d(-8px,12px,0) scale(1.012); } }
@keyframes approachEditorFloat { to { transform: translate3d(1px,-7px,0); } }
@keyframes portfolioPhoneFloat { to { transform:translate3d(var(--portfolio-phone-x),calc(var(--portfolio-phone-y) - 5px),45px); } }
@keyframes portfolioDecorFloat { to { transform:translate3d(9px,-8px,0); } }
@keyframes processPanelEnter { from { opacity:0; transform:translate3d(0,10px,0); } to { opacity:1; transform:none; } }
@keyframes processDecorFloat { to { transform:translate3d(9px,-9px,0); } }
@keyframes pricingDecorFloat { to { transform:translate3d(8px,-8px,0); } }
@keyframes processSceneRise { from { opacity:0; transform:translate3d(0,7px,0); } to { opacity:1; transform:none; } }
@keyframes processStatusIn { from { opacity:0; } to { opacity:1; } }
@media (hover: none), (pointer: coarse) { .service-card:hover { border-color: var(--color-card-border); box-shadow: none; transform: none; }.service-card--featured:hover { border-color: rgba(87,71,245,.52); box-shadow: 0 14px 34px rgba(87,71,245,.1); }.service-card:hover::before { opacity: 0; }.service-card:hover .service-card__icon, .service-card:hover .service-card__icon svg, .service-card__footer a:hover b { transform: none; }.service-card__footer a:hover::after { transform: scaleX(0); } }
@media (hover: none), (pointer: coarse) { .portfolio-featured:hover,.project-card:hover { border-color:#e1e2eb; box-shadow:0 24px 65px rgba(31,31,62,.09); }.portfolio-visual__tilt,.project-browser,.project-phone,.project-float-tag { transform:none !important; }.portfolio-visual::before { display:none; }.project-card:active,.portfolio-featured:active { transform:scale(.995); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.service-card.is-reveal-pending { opacity: 1; transform: none; }.service-card::before { opacity: 0 !important; }.service-card__tilt, .service-card__icon, .service-card__badge, .service-card__footer b, .service-card__footer a:hover b { transform: none !important; }.service-card__footer a:hover::after { transform: none; }.background-decor, .background-decor.is-decor-pending, .decor-float, .decor-parallax, .background-decor__ring, .background-decor__dots { opacity: 1; transform: none !important; }.approach .is-approach-pending, .approach__visual, .approach-editor__float, .approach-editor__parallax, .workspace-window, .workspace-cursor, .process-tag, .project-ready-float, .project-ready-card { opacity: 1; transform: none !important; }.approach-editor__float { animation: none !important; }.workspace-window::after { display: none; }.approach__visual { --editor-progress: 1 !important; }.approach__visual .editor-block--form { border-color: rgba(87,71,245,.72); background-color: rgba(87,71,245,.035); }.visual-enter { opacity: 1; transform: none; }.device-parallax { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .portfolio .is-portfolio-pending,.portfolio-visual__tilt,.project-browser,.project-phone,.project-float-tag,.portfolio-decor { opacity:1; transform:none !important; animation:none !important; }.portfolio-visual::before { display:none; }.project-link span { transform:none !important; } }
@media (hover: none), (pointer: coarse) { .process__stage-tilt,.process-scene { transform:none !important; }.process-tab { min-height:48px; }.process-tab:hover { background:transparent; }.process-tab.is-active:hover { background:#f3f1ff; } }
@media (prefers-reduced-motion: no-preference) { .process-panel.is-process-entering .process-scene > * { animation:processSceneRise .55s ease both; }.process-panel.is-process-entering .process-scene > *:nth-child(2) { animation-delay:.12s; }.process-panel.is-process-entering .scene-brief b,.process-panel.is-process-entering .scene-update span,.process-panel.is-process-entering .scene-globe span { animation:processStatusIn .8s ease .35s both; } }
@media (prefers-reduced-motion: reduce) { .process .is-process-pending,.process__stage-tilt,.process-scene,.process-panel,.process-decor { opacity:1; transform:none !important; animation:none !important; transition:none !important; }.process-progress__track > span,.process-tab,.process-tab::before,.process__note a span { transition:none !important; }.process__note a:hover span { transform:none; } }
@media (hover: none), (pointer: coarse) { .project-estimate { position:relative; top:auto; }.calculator-option:hover { border-color:#dfe0e8; transform:none; }.calculator-option:has(input:checked):hover { border-color:rgba(87,71,245,.55); }.calculator-functions label { min-height:76px; } }
@media (prefers-reduced-motion: reduce) { .pricing-calculator .is-pricing-pending,.pricing-decor,.calculator-option,.project-estimate__price,.pricing-calculator__note a span { opacity:1; transform:none !important; animation:none !important; transition:none !important; }.pricing-calculator__note a:hover span,.estimate-breakdown > button span { transform:none !important; } }

/* Calculator estimate: sticky behavior and restrained state feedback. */
.pricing-calculator { overflow:visible; }
.background-decor--pricing { overflow:hidden; }
.project-estimate {
  position:sticky;
  top:calc(var(--header-height) + 24px);
  align-self:start;
  height:auto;
  max-height:none;
  overflow:visible;
}
.project-estimate::before { pointer-events:none; }
.project-estimate.is-estimate-updating::before { animation:estimateGlowPulse .3s ease-out; }
.project-estimate__price { transform-origin:left center; }
.project-estimate__price.is-updating { animation:estimatePriceUpdate .23s ease-out; }
.project-estimate__selection.is-updating li { animation:estimateItemIn .24s ease-out both; }
.project-estimate__selection.is-updating li:nth-child(2) { animation-delay:25ms; }
.project-estimate__selection.is-updating li:nth-child(3) { animation-delay:50ms; }
.project-estimate__selection.is-updating li:nth-child(n+4) { animation-delay:70ms; }
.project-scale b { transition:opacity .2s ease,color .2s ease; }
.project-scale b.is-updating { animation:estimateScaleUpdate .22s ease-out; }
.project-scale__track i { transition:background-color .22s ease,box-shadow .22s ease; }
.project-scale__track i.is-active { box-shadow:0 0 9px rgba(87,71,245,.2); }
.estimate-breakdown [data-breakdown-content] {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .26s ease,opacity .2s ease;
}
.estimate-breakdown [data-breakdown-content] > dl { min-height:0; overflow:hidden; }
.estimate-breakdown > button[aria-expanded="true"] + [data-breakdown-content] { grid-template-rows:1fr; opacity:1; }

@keyframes estimatePriceUpdate {
  0% { color:var(--color-accent); transform:translate3d(0,2px,0) scale(.985); text-shadow:0 4px 18px rgba(87,71,245,.18); }
  55% { transform:translate3d(0,-2px,0) scale(1.035); }
  100% { color:#222431; transform:none; text-shadow:none; }
}
@keyframes estimateItemIn { from { opacity:0; transform:translate3d(0,5px,0); } to { opacity:1; transform:none; } }
@keyframes estimateScaleUpdate { 0% { opacity:.35; } 55% { color:var(--color-accent); } 100% { opacity:1; } }
@keyframes estimateGlowPulse { 0% { opacity:.55; transform:scale(.92); } 50% { opacity:1; transform:scale(1.08); } 100% { opacity:1; transform:none; } }

@media (max-width:900px) {
  .project-estimate { position:static; top:auto; height:auto; max-height:none; overflow:visible; }
}
@media (prefers-reduced-motion:reduce) {
  .project-estimate.is-estimate-updating::before,
  .project-estimate__price.is-updating,
  .project-estimate__selection.is-updating li,
  .project-scale b.is-updating { animation:none !important; }
  .project-scale b,.project-scale__track i,
  .estimate-breakdown [data-breakdown-content] { transition:none !important; }
}
.project-link--pending { color:#777986; cursor:default; }
.project-link--pending:hover { color:#777986; }
.contact-method { grid-template-columns:38px minmax(0,1fr); align-items:center; transition:border-color .22s,box-shadow .22s,transform .22s; }
.contact-method:hover { border-color:rgba(87,71,245,.28); box-shadow:0 10px 25px rgba(52,45,120,.07); transform:translateY(-1px); }
.contact-method--primary { border-color:rgba(87,71,245,.24); background:rgba(248,247,255,.82); }
.contact-method__icon { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; background:#eeecff; color:var(--color-accent); }
.contact-method__icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-method--primary .contact-method__icon svg { fill:currentColor; stroke:none; }
.contact-method > div { min-width:0; }
.contact-method > div > span { display:flex; align-items:center; gap:7px; color:#777987; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.contact-method > div > span small { padding:3px 5px; border-radius:5px; background:#e8e5ff; color:var(--color-accent-dark); font-size:6px; font-weight:850; letter-spacing:.04em; }
.contact-method strong { display:block; margin-top:4px; font-weight:750; }
.contact-method strong a { display:inline-flex; max-width:100%; align-items:center; gap:7px; color:#3e4150; font-size:12px; }
.contact-method strong a span { overflow-wrap:anywhere; color:inherit; font-size:inherit; text-transform:none; letter-spacing:normal; }
.contact-method strong a i,.site-footer__group [data-contact-value] a i { color:var(--color-accent); font-style:normal; transition:transform .22s; }
.contact-method:hover strong a { color:var(--color-accent-dark); }.contact-method:hover strong a i { transform:translateX(3px); }
.contact-method em { display:block; margin-top:4px; color:#898b97; font-size:8px; font-style:normal; }
.site-footer__group [data-contact-value] a { display:inline-flex; align-items:center; gap:5px; color:#d5d6de; }.site-footer__group [data-contact-value] a:hover { color:#fff; text-shadow:0 0 15px rgba(128,116,255,.3); }.site-footer__group [data-contact-value] a:hover i { transform:translateX(3px); }
.form-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
.contact-form__status.is-success { border-color:#bcdcc7; background:#f2fbf5; color:#34714a; }
.contact-form__status a { color:var(--color-accent); font-weight:850; text-decoration:underline; text-underline-offset:3px; }
.contact-form[data-form-state="submitting"] { cursor:progress; }
.contact-form__submit:disabled { cursor:wait; opacity:.72; }
.contact-form[data-form-state="submitting"] .contact-form__submit::after { content:""; display:inline-block; width:12px; height:12px; margin-left:9px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:contactSubmitSpin .7s linear infinite; }
.phone-app,.phone-submit,.project-phone-services,.project-phone-services__button,.concept-service__hero i { color:#30323a; }

/* Hero cutout portrait: all stage layers are visually transparent. */
.hero { position:relative; min-height:calc(100svh - var(--header-height)); overflow:visible; padding:clamp(28px,4svh,48px) 0 0; }
.hero__grid { position:relative; z-index:2; grid-template-columns:minmax(0,1.16fr) minmax(430px,.84fr); gap:clamp(34px,4.5vw,74px); }
.hero__content { position:relative; z-index:3; }
.hero__title { max-width:710px; font-size:clamp(41px,4.25vw,64px); line-height:1.035; }
.hero__title-intro,.hero__title-main { display:block; }
.hero__title-intro { animation:heroContentEnter .5s .13s both ease-out; }
.hero__title-main { margin-top:.1em; animation:heroContentEnter .55s .21s both ease-out; }
.hero__title-accent { display:block; color:var(--color-accent); white-space:nowrap; }
.hero .eyebrow { margin-bottom:18px; }
.hero__accent { max-width:620px; margin:24px 0 0; color:#313442; font-size:15px; font-weight:800; line-height:1.55; }
.hero__lead { max-width:620px; margin-top:13px; font-size:16px; }
.hero-visual { position:relative; isolation:isolate; align-self:end; width:min(42vw,590px); max-width:100%; height:min(68vh,620px); min-width:430px; min-height:520px; margin-right:20px; justify-self:end; overflow:visible; }
.hero-visual__background { position:absolute; z-index:0; inset:0; pointer-events:none; }
.hero-visual__glow { position:absolute; top:28%; left:24%; width:65%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(109,94,245,.095),rgba(133,174,255,.035) 48%,transparent 72%); filter:blur(18px); }
.hero-visual__ring { position:absolute; top:12%; left:9%; width:86%; aspect-ratio:1; }.hero-visual__ring-drift,.hero-visual__ring-parallax,.hero-visual__ring span { display:block; width:100%; height:100%; }.hero-visual__ring span { border:1px solid rgba(87,71,245,.14); border-radius:50%; }
.hero-visual__arc { position:absolute; right:3%; bottom:7%; width:64%; aspect-ratio:1; }.hero-visual__arc-drift,.hero-visual__arc-parallax,.hero-visual__arc span { display:block; width:100%; height:100%; }.hero-visual__arc-drift { transform:rotate(-22deg); }.hero-visual__arc span { border:1px solid transparent; border-right-color:rgba(87,71,245,.16); border-bottom-color:rgba(87,71,245,.1); border-radius:50%; }
.hero-visual__dots { position:absolute; top:25%; right:0; width:48px; height:62px; background:radial-gradient(circle,rgba(87,71,245,.28) 1px,transparent 1.5px) 0 0/12px 12px; opacity:.44; }
.hero-visual__portrait { position:absolute; z-index:2; inset:0; overflow:hidden; border-radius:0 0 48% 48% / 0 0 14% 14%; pointer-events:none; }
.hero-visual__portrait-drift,.hero-visual__portrait-parallax { position:absolute; inset:0; }
.hero-visual__portrait img { position:absolute; right:auto; bottom:-72px; left:45.5%; display:block; width:364.6px!important; height:595.1px!important; max-width:none; object-fit:contain; transform:translateX(-50%); filter:drop-shadow(0 7px 9px rgba(35,36,69,.07)); }
.hero-visual__cards { position:absolute; z-index:4; inset:0; pointer-events:none; }
.hero-visual__card { position:absolute; }
.hero-visual__card-surface { border:1px solid rgba(87,71,245,.13); background:rgba(255,255,255,.95); box-shadow:0 13px 34px rgba(37,39,74,.09); }
.hero-visual__card--interface { top:60%; left:0; width:170px; }.hero-visual__interface-drift,.hero-visual__interface-parallax { width:100%; }.hero-visual__card--interface .hero-visual__card-surface { overflow:hidden; border-radius:14px; }
.hero-site-card__bar { display:flex; height:28px; align-items:center; gap:4px; padding:0 9px; border-bottom:1px solid #ececf4; background:#fafafe; }.hero-site-card__bar i { width:4px; height:4px; border-radius:50%; background:#c7c8d3; }.hero-site-card__bar small { margin-left:auto; color:#6e7180; font-size:7px; font-weight:800; }
.hero-site-card__content { height:101px; padding:13px; }.hero-site-card__content>b,.hero-site-card__content>span,.hero-site-card__content>em { display:block; border-radius:999px; }.hero-site-card__content>b { width:92px; height:7px; background:#3c3e4a; }.hero-site-card__content>span { width:70px; height:3px; margin-top:7px; background:#d7d8e1; }.hero-site-card__content>div { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:14px; }.hero-site-card__content>div i { height:25px; border:1px solid #e4e4ed; border-radius:5px; background:#f8f8fc; }.hero-site-card__content>em { width:44px; height:9px; margin-top:9px; background:#6254ed; }
.hero-visual__card--status { top:55%; right:-110px; min-width:168px; }.hero-visual__status-surface { display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:13px; }.hero-visual__status-surface>span { display:grid; width:24px; height:24px; flex:none; place-items:center; border-radius:50%; background:#e9f8ef; color:#29975a; font-size:10px; font-weight:900; }.hero-visual__card--status b,.hero-visual__card--status small { display:block; }.hero-visual__card--status b { color:#414451; font-size:10px; }.hero-visual__card--status small { margin-top:2px; color:#858894; font-size:7px; }
.hero-visual__card--stack { right:-50px; bottom:5%; }.hero-visual__stack-surface { display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:999px; color:#666976; font-size:7px; font-weight:850; letter-spacing:.035em; white-space:nowrap; }.hero-visual__card--stack i { width:3px; height:3px; border-radius:50%; background:#8e83f3; }
.hero__bottom-fade { display:none; }
.hero-enter__eyebrow { animation:heroContentEnter .45s .05s both ease-out; }.hero-enter__details { animation:heroContentEnter .55s .3s both ease-out; }.hero__actions { animation:heroContentEnter .55s .38s both ease-out; }.hero .benefits { animation:heroContentEnter .55s .46s both ease-out; }
@keyframes heroContentEnter { from { opacity:0; transform:translate3d(0,14px,0); } to { opacity:1; transform:none; } }

/* Hero visual motion: base position, autonomous drift and pointer parallax use separate layers. */
.hero-visual__glow { animation:heroVisualGlow 15s -6s ease-in-out infinite alternate; will-change:transform,opacity; }
.hero-visual__portrait { animation:heroVisualEnter .45s .08s both ease-out; }
.hero-visual__portrait-drift { animation:heroVisualPhotoDrift 11s -4s ease-in-out infinite; will-change:transform; }
.hero-visual__portrait-parallax { transform:translate3d(calc(var(--parallax-x,0) * 2px),calc(var(--parallax-y,0) * 2px),0); transition:transform 190ms ease-out; }
.hero-visual__ring { animation:heroVisualEnter .42s both ease-out; }
.hero-visual__ring-drift { animation:heroVisualRingDrift 17s -8s ease-in-out infinite; will-change:transform; }
.hero-visual__ring-parallax { transform:translate3d(var(--ring-parallax-x,0px),var(--ring-parallax-y,0px),0); transition:transform 250ms ease-out; }
.hero-visual__arc { animation:heroVisualEnter .44s .05s both ease-out; }
.hero-visual__arc-drift { animation:heroVisualArcDrift 60s -17s linear infinite; will-change:transform; }
.hero-visual__arc-parallax { transform:translate3d(var(--arc-parallax-x,0px),var(--arc-parallax-y,0px),0); transition:transform 270ms ease-out; }
.hero-visual__dots { animation:heroVisualDotsDrift 14s -5s ease-in-out infinite alternate; will-change:transform,opacity; }
.hero-visual__card--interface { animation:heroVisualEnter .46s .16s both ease-out; }
.hero-visual__interface-drift { animation:heroVisualInterfaceDrift 9.6s -2.7s ease-in-out infinite; will-change:transform; }
.hero-visual__interface-parallax { transform:translate3d(var(--interface-parallax-x,0px),var(--interface-parallax-y,0px),0); transition:transform 210ms ease-out; }
.hero-visual__card--status { animation:heroVisualEnter .45s .24s both ease-out; }
.hero-visual__status-drift { animation:heroVisualStatusDrift 11.4s -6.1s ease-in-out infinite; will-change:transform; }
.hero-visual__status-parallax { transform:translate3d(var(--status-parallax-x,0px),var(--status-parallax-y,0px),0); transition:transform 220ms ease-out; }
.hero-visual__status-surface>span { animation:heroVisualStatusIcon .45s .42s both ease-out; }
.hero-visual__card--stack { animation:heroVisualEnter .42s .32s both ease-out; }
.hero-visual__stack-drift { animation:heroVisualStackDrift 13.7s -9.2s ease-in-out infinite; will-change:transform; }
.hero-visual__stack-parallax { transform:translate3d(var(--tech-parallax-x,0px),var(--tech-parallax-y,0px),0); transition:transform 230ms ease-out; }
@media (hover:hover) and (pointer:fine) { .hero-visual__card--interface:hover .hero-visual__card-surface { transform:translateY(-1px); background:#fff; }.hero-visual__card-surface { transition:transform .22s ease,background-color .22s ease; } }
@keyframes heroVisualEnter { from { opacity:0; transform:translate3d(0,9px,0); } to { opacity:1; transform:none; } }
@keyframes heroVisualGlow { to { opacity:.78; transform:translate3d(5px,-4px,0); } }
@keyframes heroVisualPhotoDrift { 0%,100% { transform:translate3d(0,0,0); } 38% { transform:translate3d(1px,-2px,0); } 72% { transform:translate3d(-1px,-1px,0); } }
@keyframes heroVisualRingDrift { 0%,100% { transform:translate3d(0,0,0); } 45% { transform:translate3d(-4px,3px,0); } 78% { transform:translate3d(2px,-2px,0); } }
@keyframes heroVisualArcDrift { from { transform:rotate(-22deg) translate3d(0,0,0); } 50% { transform:rotate(158deg) translate3d(3px,-2px,0); } to { transform:rotate(338deg) translate3d(0,0,0); } }
@keyframes heroVisualDotsDrift { to { opacity:.58; transform:translate3d(-3px,4px,0); } }
@keyframes heroVisualInterfaceDrift { 0%,100% { transform:translate3d(0,0,0) rotate(0); } 34% { transform:translate3d(3px,-6px,0) rotate(.35deg); } 69% { transform:translate3d(-2px,-3px,0) rotate(-.2deg); } }
@keyframes heroVisualStatusDrift { 0%,100% { transform:translate3d(0,0,0) rotate(0); } 41% { transform:translate3d(-4px,-3px,0) rotate(-.2deg); } 76% { transform:translate3d(2px,4px,0) rotate(.15deg); } }
@keyframes heroVisualStackDrift { 0%,100% { transform:translate3d(0,0,0); } 31% { transform:translate3d(2px,3px,0); } 66% { transform:translate3d(5px,-2px,0); } }
@keyframes heroVisualStatusIcon { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes heroVisualPhotoDriftTouch { 50% { transform:translate3d(.5px,-1px,0); } }
@keyframes heroVisualInterfaceDriftTouch { 50% { transform:translate3d(1px,-3px,0); } }
@keyframes heroVisualStatusDriftTouch { 50% { transform:translate3d(-2px,-2px,0); } }
@keyframes heroVisualStackDriftTouch { 50% { transform:translate3d(2px,-1px,0); } }
@keyframes heroVisualRingDriftTouch { 50% { transform:translate3d(-2px,1.5px,0); } }
@keyframes heroVisualArcDriftTouch { from { transform:rotate(-22deg); } 50% { transform:rotate(158deg) translate3d(1px,-1px,0); } to { transform:rotate(338deg); } }
@keyframes heroVisualGlowTouch { 50% { opacity:.86; transform:translate3d(2px,-2px,0); } }
@keyframes heroVisualDotsDriftTouch { to { opacity:.51; transform:translate3d(-1px,2px,0); } }
@media (hover:none),(pointer:coarse) { .hero-visual__portrait-parallax,.hero-visual__ring-parallax,.hero-visual__arc-parallax,.hero-visual__interface-parallax,.hero-visual__status-parallax,.hero-visual__stack-parallax { transform:none!important; transition:none!important; }.hero-visual__portrait-drift { animation-name:heroVisualPhotoDriftTouch; }.hero-visual__ring-drift { animation-name:heroVisualRingDriftTouch; }.hero-visual__arc-drift { animation-name:heroVisualArcDriftTouch; }.hero-visual__glow { animation-name:heroVisualGlowTouch; }.hero-visual__dots { animation-name:heroVisualDotsDriftTouch; }.hero-visual__interface-drift { animation-name:heroVisualInterfaceDriftTouch; }.hero-visual__status-drift { animation-name:heroVisualStatusDriftTouch; }.hero-visual__stack-drift { animation-name:heroVisualStackDriftTouch; } }
@media (prefers-reduced-motion:reduce) { .hero-visual__glow,.hero-visual__portrait,.hero-visual__portrait-drift,.hero-visual__portrait-parallax,.hero-visual__ring,.hero-visual__ring-drift,.hero-visual__ring-parallax,.hero-visual__arc,.hero-visual__arc-parallax,.hero-visual__dots,.hero-visual__card,.hero-visual__interface-drift,.hero-visual__interface-parallax,.hero-visual__status-drift,.hero-visual__status-parallax,.hero-visual__stack-drift,.hero-visual__stack-parallax,.hero-visual__status-surface>span { opacity:1; animation:none!important; transform:none!important; transition:none!important; }.hero-visual__arc-drift { animation:none!important; transform:rotate(-22deg)!important; } }

/* Final page: FAQ, contact and footer. */
.faq,.contact { position:relative; scroll-margin-top:calc(var(--header-height) + 20px); }
.faq { overflow:hidden; padding:108px 0; background:#fff; }
.faq__container,.contact__container { position:relative; z-index:2; }
.faq__layout { display:grid; grid-template-columns:minmax(290px,.57fr) minmax(0,1fr); gap:clamp(44px,7vw,96px); align-items:start; }
.faq__intro { position:sticky; top:calc(var(--header-height) + 28px); }
.faq__intro h2,.contact__info h2 { margin:15px 0 0; font-size:clamp(38px,4.2vw,58px); line-height:1.06; letter-spacing:-.045em; }
.faq__intro > p:not(.section-label) { margin:20px 0 0; color:#626573; font-size:16px; line-height:1.7; }
.faq__intro .faq__aside { margin-top:30px; padding-top:22px; border-top:1px solid #e2e3eb; font-size:13px; }
.faq__link { display:inline-flex; gap:9px; margin-top:22px; color:var(--color-accent); font-size:13px; font-weight:850; }
.faq__link span { transition:transform .22s; }.faq__link:hover span { transform:translateX(4px); }
.faq__list { border-top:1px solid #dddfe8; }
.faq-item { position:relative; border-bottom:1px solid #dddfe8; transition:background-color .26s,box-shadow .26s; }
.faq-item.is-open { background:linear-gradient(90deg,rgba(87,71,245,.045),transparent 80%); box-shadow:-16px 0 34px rgba(87,71,245,.035); }
.faq-item h3 { margin:0; }
.faq-item h3 button { display:flex; width:100%; min-height:78px; align-items:center; justify-content:space-between; gap:24px; padding:22px 3px; background:transparent; color:#242631; font-size:17px; font-weight:830; line-height:1.4; text-align:left; cursor:pointer; }
.faq-item h3 button i { position:relative; width:24px; height:24px; flex:none; border:1px solid #d9d8ea; border-radius:50%; background:#fff; transition:transform .27s,border-color .27s,background-color .27s; }
.faq-item h3 button i::before,.faq-item h3 button i::after { content:""; position:absolute; top:11px; left:6px; width:10px; height:1.5px; border-radius:2px; background:var(--color-accent); }.faq-item h3 button i::after { transform:rotate(90deg); transition:transform .27s; }
.faq-item h3 button[aria-expanded="true"] i { border-color:var(--color-accent); background:#efedff; transform:rotate(180deg); }.faq-item h3 button[aria-expanded="true"] i::after { transform:rotate(0); }
.faq-item h3 button:focus-visible { outline:3px solid rgba(87,71,245,.24); outline-offset:4px; border-radius:7px; }
.faq-item__answer { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .28s ease,opacity .23s ease; }
.faq-item__answer > div { min-height:0; overflow:hidden; }
.faq-item__answer p { max-width:720px; margin:0; padding:0 44px 25px 3px; color:#656875; font-size:14px; line-height:1.72; transform:translateY(-5px); transition:transform .28s ease; }
.faq-item.is-open .faq-item__answer { grid-template-rows:1fr; opacity:1; }.faq-item.is-open .faq-item__answer p { transform:none; }
.background-decor--faq,.background-decor--contact { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.faq-decor,.contact-decor { position:absolute; display:block; }
.faq-decor--arc { top:12%; left:-270px; width:500px; height:500px; border:1px solid rgba(87,71,245,.07); border-right-color:transparent; border-radius:50%; }
.faq-decor--ring { right:-240px; bottom:7%; width:470px; height:470px; border:1px solid rgba(87,71,245,.075); border-radius:50%; }
.faq-decor--dots { top:28%; right:8%; width:55px; height:70px; opacity:.24; background:radial-gradient(circle,rgba(87,71,245,.55) 1.4px,transparent 2px) 0 0/14px 14px; }

.contact { overflow:hidden; padding:110px 0 100px; background:linear-gradient(145deg,#f4f3ff 0%,#fafaff 48%,#f2f4fc 100%); }
.contact__layout { display:grid; grid-template-columns:minmax(0,.88fr) minmax(430px,1.12fr); gap:clamp(42px,7vw,90px); align-items:start; }
.contact__lead { max-width:580px; margin:22px 0 0; color:#585b69; font-size:17px; line-height:1.7; }.contact__note { margin:17px 0 0; color:#737684; font-size:13px; }
.contact-steps { display:grid; gap:12px; margin:34px 0 0; padding:0; list-style:none; }.contact-steps li { display:flex; align-items:center; gap:12px; color:#444754; font-size:13px; }.contact-steps b { display:grid; width:28px; height:28px; flex:none; place-items:center; border-radius:8px; background:#e8e5ff; color:var(--color-accent); font-size:9px; }
.contact-status { display:inline-flex; align-items:center; gap:8px; margin-top:30px; padding:9px 12px; border:1px solid #dcd9f5; border-radius:999px; background:rgba(255,255,255,.65); color:#4d5060; font-size:10px; font-weight:800; }.contact-status span { width:7px; height:7px; border-radius:50%; background:#45a56c; box-shadow:0 0 0 4px rgba(69,165,108,.12); }
.contact-methods { display:grid; gap:10px; margin-top:25px; }.contact-method { display:grid; grid-template-columns:125px 1fr; gap:15px; padding:13px 15px; border:1px solid rgba(220,221,234,.9); border-radius:11px; background:rgba(255,255,255,.6); }.contact-method span { color:#777987; font-size:9px; text-transform:uppercase; letter-spacing:.06em; }.contact-method strong { color:#4b4e5b; font-size:11px; font-weight:750; }
.contact-form { position:relative; padding:34px; border:1px solid rgba(211,211,230,.9); border-radius:25px; background:rgba(255,255,255,.93); box-shadow:0 28px 70px rgba(45,38,110,.11); }
.contact-form::before { content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; opacity:.45; background:radial-gradient(circle at var(--form-light-x,80%) var(--form-light-y,10%),rgba(87,71,245,.17),transparent 34%); transition:opacity .25s; }
.contact-form__heading span { color:#222431; font-size:23px; font-weight:900; letter-spacing:-.025em; }.contact-form__heading p { margin:8px 0 24px; color:#757784; font-size:12px; }
.form-field { display:grid; gap:7px; margin-top:16px; }.form-field label,.contact-choice legend { color:#4f5260; font-size:11px; font-weight:820; transition:color .2s; }
.form-field input,.form-field select,.form-field textarea { width:100%; border:1px solid #dfe0e8; border-radius:11px; background:#fff; color:#232530; font:inherit; font-size:13px; outline:0; transition:border-color .2s,box-shadow .2s; }.form-field input,.form-field select { min-height:47px; padding:0 14px; }.form-field textarea { min-height:145px; resize:vertical; padding:13px 14px; line-height:1.55; }
.form-field:focus-within label { color:var(--color-accent); }.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:rgba(87,71,245,.7); box-shadow:0 0 0 4px rgba(87,71,245,.08); }
.form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"],.form-field textarea[aria-invalid="true"] { border-color:#c96868; box-shadow:0 0 0 3px rgba(201,104,104,.08); }
.form-error { min-height:13px; color:#a94d4d; font-size:9px; line-height:1.3; }
.contact-choice { margin:17px 0 0; padding:0; border:0; }.contact-choice > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }.contact-choice label { cursor:pointer; }.contact-choice input { position:absolute; opacity:0; pointer-events:none; }.contact-choice label span { display:block; padding:10px 13px; border:1px solid #dddfe8; border-radius:9px; background:#fff; color:#626572; font-size:10px; font-weight:780; transition:border-color .2s,background .2s,color .2s; }.contact-choice input:checked + span { border-color:rgba(87,71,245,.5); background:#efedff; color:var(--color-accent-dark); }.contact-choice input:focus-visible + span { outline:3px solid rgba(87,71,245,.23); outline-offset:3px; }
.contact-estimate { margin-top:20px; padding:17px; border:1px solid #d8d4ff; border-radius:13px; background:#f7f5ff; }.contact-estimate.is-highlighted { animation:contactEstimatePulse .7s ease; }.contact-estimate > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:15px; }.contact-estimate span { color:var(--color-accent); font-size:9px; font-weight:850; text-transform:uppercase; }.contact-estimate strong { font-size:12px; }.contact-estimate ul { display:grid; gap:5px; margin:12px 0; padding:0; color:#636674; font-size:10px; list-style:none; }.contact-estimate > b { font-size:15px; }.contact-estimate__actions { display:flex; gap:16px; margin-top:13px; }.contact-estimate__actions a,.contact-estimate__actions button { padding:0; background:transparent; color:var(--color-accent); font-size:9px; font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.form-consent { margin-top:20px; }.form-consent > label { display:flex; align-items:flex-start; gap:9px; color:#5f626f; font-size:10px; line-height:1.45; }.form-consent input { margin-top:2px; accent-color:var(--color-accent); }.form-consent > button { margin:7px 0 0 24px; padding:0; background:transparent; color:var(--color-accent); font-size:9px; text-decoration:underline; cursor:pointer; }.form-consent .form-error { display:block; margin-left:24px; }
.contact-form__status { display:none; margin-top:18px; padding:12px 14px; border:1px solid #d8d5f1; border-radius:10px; background:#f7f5ff; color:#4e5160; font-size:10px; line-height:1.5; }.contact-form__status:not(:empty) { display:block; }.contact-form__status.is-error { border-color:#e4c5c5; background:#fff7f7; color:#944747; }
.contact-form__submit { width:100%; margin-top:20px; }.contact-form__footnote { margin:11px 0 0; color:#80828e; font-size:9px; line-height:1.5; text-align:center; }
.contact-decor--ring { top:4%; left:-230px; width:560px; height:560px; border:1px solid rgba(87,71,245,.09); border-radius:50%; animation:contactDecorFloat 28s ease-in-out infinite alternate; }.contact-decor--arc { right:-190px; bottom:5%; width:420px; height:420px; border:1px solid rgba(87,71,245,.11); border-left-color:transparent; border-radius:50%; animation:contactDecorFloat 32s ease-in-out -8s infinite alternate-reverse; }.contact-decor--glow { top:25%; right:20%; width:260px; height:260px; border-radius:50%; background:rgba(87,71,245,.08); filter:blur(70px); }
@keyframes contactDecorFloat { to { transform:translate3d(5px,-8px,0) rotate(4deg); } } @keyframes contactEstimatePulse { 50% { box-shadow:0 0 0 5px rgba(87,71,245,.1); } }
@keyframes contactSubmitSpin { to { transform:rotate(360deg); } }

.site-footer { padding:68px 0 25px; background:#242532; color:#f7f7fb; }.site-footer__grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:50px; }.site-footer__logo { color:#fff; font-size:18px; font-weight:900; }.site-footer__brand p { max-width:270px; margin:18px 0 0; color:#b9bbc7; font-size:12px; line-height:1.65; }.site-footer__group { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }.site-footer__group h2 { margin:0 0 7px; color:#888b9e; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.site-footer__group a,.site-footer__group p { margin:0; color:#d5d6de; font-size:11px; line-height:1.5; }.site-footer__group a:hover { color:#fff; }.site-footer__group span { color:#aeb0bc; }.site-footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); color:#9295a4; font-size:9px; }.site-footer__bottom div { display:flex; gap:22px; }.site-footer__bottom button { padding:0; background:transparent; color:#b8bac5; cursor:pointer; }.site-footer__bottom a { color:#d8d9e0; }

.policy-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; animation:policyFadeIn .22s ease both; }.policy-modal[hidden] { display:none; }.policy-modal__backdrop { position:absolute; inset:0; background:rgba(20,20,31,.58); backdrop-filter:blur(5px); }.policy-modal__dialog { position:relative; width:min(560px,100%); padding:35px; border-radius:22px; background:#fff; box-shadow:0 30px 90px rgba(10,10,25,.3); animation:policyDialogIn .24s ease both; }.policy-modal__dialog h2 { margin:12px 0 17px; font-size:28px; }.policy-modal__dialog > p:not(.section-label) { color:#626573; font-size:13px; line-height:1.65; }.policy-modal__dialog .button { margin-top:18px; }.policy-modal__close { position:absolute; top:15px; right:16px; display:grid; width:35px; height:35px; place-items:center; border-radius:50%; background:#f0eff7; color:#363844; font-size:22px; cursor:pointer; }.policy-modal__close:focus-visible,.site-footer a:focus-visible,.site-footer button:focus-visible { outline:3px solid rgba(132,120,255,.55); outline-offset:4px; }.is-modal-open { overflow:hidden; }
@keyframes policyFadeIn { from { opacity:0; } } @keyframes policyDialogIn { from { opacity:0; transform:translate3d(0,10px,0) scale(.985); } }
[data-final-reveal] { transition:opacity .75s ease,transform .75s ease; }.is-final-pending { opacity:0; transform:translate3d(0,16px,0); }.is-final-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .faq-item,.faq-item__answer,.faq-item__answer p,.faq-item h3 button i,.faq-item h3 button i::after,
  .contact-decor,.contact-estimate.is-highlighted,.policy-modal,.policy-modal__dialog,[data-final-reveal] {
    animation:none !important; transition:none !important; transform:none !important;
  }
  .is-final-pending { opacity:1; }
}