:root {
    --color-bg: #02050a;
    --color-bg-elevated: #090f19;
    --color-surface: #101824;
    --color-surface-strong: #141e2b;
    --color-text: #ffffff;
    --color-muted: #b0b2b7;
    --color-muted-deep: #7f8794;
    --color-primary: #6366f3;
    --color-accent: #6366f3;
    --color-action: #6366f3;
    --color-action-hover: #5558df;
    --color-border: #242c38;
    --color-border-strong: #3a4656;
    --font-sans: "Plus Jakarta Sans", sans-serif;
    --shadow-panel: 0 30px 80px rgba(0, 0, 0, 0.34);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --shell: 1440px;
    --gutter: clamp(1.5rem, 4vw, 4rem);
}

/* Homepage v2: editorial depth system with accessible scroll-linked parallax. */
.home-page main { overflow: clip; }
.home-page [data-home-parallax] { --home-parallax-y: 0px; will-change: transform; }
.home-page .hero,.home-page .what-section,.home-page .catalogue-section,.home-page .workflow-section,.home-page .services-section,.home-page .contact-section { position: relative; isolation: isolate; border-bottom: 1px solid var(--color-border); }
.home-page .hero { min-height: 760px; }
.home-page .hero__grid { min-height: 700px; grid-template-columns: minmax(580px,.9fr) minmax(580px,1.1fr); gap: clamp(2.5rem,4vw,4.5rem); padding-block: 3.5rem 4rem; }
.home-page .hero__copy h1 { max-width: 660px; font-size: clamp(4rem,5vw,5.2rem); line-height: .94; letter-spacing: -.065em; }
.home-page .hero__copy p { max-width: 610px; }
.home-page .hero__actions .button { border-radius: 4px; }
.home-depth-field { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.home-depth-field i { position: absolute; display: block; width: 34vw; height: 120%; border-inline: 1px solid color-mix(in srgb,var(--color-primary) 15%,transparent); transform: translate3d(0,var(--home-parallax-y),0) skewX(-22deg); }
.home-depth-field i:first-child { top: -8%; left: 43%; }.home-depth-field i:nth-child(2) { top: -14%; right: -5%; }
.home-depth-field b { position: absolute; right: -1.5rem; bottom: 0; color: color-mix(in srgb,var(--color-primary) 7%,transparent); font-size: clamp(11rem,22vw,25rem); line-height: .7; transform: translate3d(0,var(--home-parallax-y),0); }

.home-page .software-map { min-height: 570px; perspective: 1200px; transform-style: preserve-3d; }
.home-page .software-map::before,.home-page .software-map::after { content: ""; position: absolute; left: 50%; top: 49%; width: 64%; aspect-ratio: 1.75; border: 1px solid color-mix(in srgb,var(--color-primary) 38%,transparent); border-radius: 50%; background: none; transform: translate(-50%,-50%) rotate(-5deg); pointer-events: none; }
.home-page .software-map::after { width: 88%; opacity: .42; transform: translate(-50%,-50%) rotate(8deg); }
.software-map__plane { position: absolute; left: 50%; top: 50%; width: 300px; height: 210px; border: 1px solid color-mix(in srgb,var(--color-primary) 38%,transparent); background: color-mix(in srgb,var(--color-primary) 3%,var(--color-bg)); transform: translate3d(-50%,calc(-50% + var(--home-parallax-y)),0) rotateX(64deg) rotateZ(45deg); }
.software-map__plane--back { width: 410px; height: 280px; opacity: .42; }.software-map__plane--front { width: 210px; height: 150px; border-color: color-mix(in srgb,var(--color-primary) 64%,transparent); }
.home-page .software-map__connections { z-index: 1; opacity: .72; }
.home-page .software-map__connections path { stroke-width: 1.1; stroke-dasharray: 5 7; }
.home-page .software-map__hub { z-index: 5; width: 100px; height: 76px; border-radius: 4px; background: var(--color-bg-elevated); animation: none; transform: translate3d(-50%,calc(-50% + var(--home-parallax-y)),40px) rotateX(5deg) rotateZ(-2deg); box-shadow: 10px 12px 0 color-mix(in srgb,var(--color-primary) 22%,transparent),0 22px 45px rgba(0,0,0,.16); }
.home-page .software-node { --home-hover-y: 0px; width: 29%; min-height: 104px; padding: 1.05rem; background: var(--color-bg-elevated); border-radius: 4px; box-shadow: 8px 9px 0 color-mix(in srgb,var(--color-primary) 8%,transparent),0 15px 35px rgba(0,0,0,.09); transform: translate3d(0,calc(var(--home-parallax-y) + var(--home-hover-y)),0); }
.home-page .software-node::after { content: ""; position: absolute; right: -1px; bottom: -7px; left: -1px; height: 6px; background: var(--color-primary); opacity: .16; transform: skewX(-45deg); transform-origin: left top; }
.home-page .software-node:hover,.home-page .software-node.is-active { --home-hover-y: -7px; border-color: var(--color-primary); box-shadow: 10px 13px 0 color-mix(in srgb,var(--color-primary) 15%,transparent),0 18px 40px rgba(0,0,0,.12); }
.home-page .software-node--1 { top: 5%; left: 30%; }.home-page .software-node--2 { top: 26%; right: 0; }.home-page .software-node--3 { bottom: 18%; left: 0; }.home-page .software-node--4 { right: 7%; bottom: 4%; }.home-page .software-node--5 { bottom: -1%; left: 34%; }
.home-page .software-node__icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 3px; background: color-mix(in srgb,var(--color-primary) 8%,transparent); }

.home-section-index { position: absolute; z-index: -1; top: 2rem; right: var(--gutter); color: color-mix(in srgb,var(--color-primary) 7%,transparent); font-size: clamp(9rem,18vw,20rem); font-weight: 800; line-height: .8; letter-spacing: -.09em; transform: translate3d(0,var(--home-parallax-y),0); pointer-events: none; }
.home-page .what-section { min-height: 760px; }
.home-page .what-layout { grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr); gap: clamp(4rem,7vw,8rem); padding-block: 9rem; }
.home-page .what-intro h2 { max-width: 650px; font-size: clamp(3.2rem,3.8vw,4.2rem); line-height: .96; letter-spacing: -.06em; }
.home-page .what-intro h2::first-letter { color: inherit; }
.home-page .capability-path { gap: 0; border-top: 1px solid var(--color-border-strong); }
.home-page .capability-path::before,.home-page .capability-path li::before { display: none; }
.home-page .capability-path li { min-height: 440px; padding: 8rem 2rem 2rem; border-right: 1px solid var(--color-border-strong); }
.home-page .capability-path li:first-child { border-left: 1px solid var(--color-border-strong); }
.home-page .capability-path__number { top: .8rem; left: 1.6rem; color: color-mix(in srgb,var(--color-primary) 11%,transparent); font-size: 6.5rem; font-weight: 800; line-height: 1; letter-spacing: -.08em; transform: translate3d(0,var(--home-parallax-y),0); }
.home-page .capability-path__icon { width: 76px; height: 64px; margin-bottom: 2.4rem; color: var(--color-primary); background: transparent; border: 0; border-bottom: 3px solid currentColor; border-radius: 0; transform: translate3d(0,var(--home-parallax-y),0); }
.home-page .capability-path h3 { font-size: clamp(1.3rem,1.7vw,1.7rem); }

.home-page .catalogue-section { padding-block: 8.5rem 9rem; }
.home-page .catalogue-heading h2 { font-size: clamp(3.8rem,5vw,5.7rem); line-height: .94; letter-spacing: -.06em; }
.home-page .catalogue-actions button { border-radius: 3px; }
.home-page .product-rail { grid-auto-columns: minmax(430px,35vw); gap: 2rem; padding: 1.5rem .2rem 2rem; }
.home-page .catalogue-card { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.home-page .catalogue-card:hover { border: 0; box-shadow: none; transform: none; }
.home-page .catalogue-card__media { overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: 4px; background: var(--color-bg-elevated); box-shadow: 11px 12px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); transform: translate3d(0,var(--home-parallax-y),0); }
.home-page .catalogue-card__media img { transform: scale(1.08); }
.home-page .catalogue-card:hover .catalogue-card__media img { transform: scale(1.12); }
.home-page .catalogue-card__content { min-height: 190px; padding: 1.85rem 4.25rem 1.75rem 1.5rem; border-bottom: 1px solid var(--color-border); }
.home-page .catalogue-card__arrow { right: 1.5rem; bottom: 1.5rem; border-radius: 3px; }

.home-page .workflow-section .shell { padding-block: 9rem; }
.home-page .workflow-heading h2 { font-size: clamp(3.6rem,4.8vw,5.4rem); line-height: .95; letter-spacing: -.06em; }
.home-page .workflow-list { padding-top: 6rem; border-top: 1px solid var(--color-border-strong); }
.home-page .workflow-list::before { top: 8rem; left: 2%; right: 3%; background: var(--color-primary); opacity: .48; }
.home-page .workflow-list li { min-height: 300px; padding-right: 2.4rem; }
.home-page .workflow-list li::after { content: "0" counter(list-item); position: absolute; z-index: -1; top: -7.5rem; left: 0; color: color-mix(in srgb,var(--color-primary) 8%,transparent); font-size: 7rem; font-weight: 800; line-height: 1; letter-spacing: -.08em; }
.home-page .workflow-list__number { top: 1.15rem; left: 50px; border-radius: 3px; transform: translate3d(0,var(--home-parallax-y),0); }
.home-page .workflow-list__icon { width: 54px; height: 54px; border-radius: 3px; background: var(--color-bg); transform: translate3d(0,var(--home-parallax-y),0); }

.home-page .services-section { min-height: 780px; }
.home-page .services-layout { grid-template-columns: .84fr 1.16fr; padding-block: 9rem; }
.home-page .services-copy h2 { font-size: clamp(3.5rem,4.7vw,5.2rem); line-height: .95; letter-spacing: -.06em; }
.home-page .service-links a { color: var(--color-text); }
.home-page .services-section .service-visual { min-height: 510px; overflow: visible; color: #111827; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: translate3d(0,var(--home-parallax-y),0); }
.home-page .services-section .service-visual::before,.home-page .services-section .service-visual::after { content: ""; position: absolute; inset: 8% 2% 2% 14%; border: 1px solid color-mix(in srgb,var(--color-primary) 30%,transparent); background: transparent; filter: none; transform: translate(30px,-26px); }
.home-page .services-section .service-visual::after { inset: 14% 8% 8% 8%; transform: translate(60px,-45px); opacity: .45; }
.home-page .services-section .service-visual__bar,.home-page .services-section .service-visual__body,.home-page .services-section .service-visual__blocks { position: relative; z-index: 2; border: 1px solid color-mix(in srgb,var(--color-primary) 48%,var(--color-border)); background: var(--color-bg-elevated); }
.home-page .services-section .service-visual__bar { height: 52px; border-bottom: 0; }
.home-page .services-section .service-visual__bar i { background: var(--color-border-strong); }.home-page .services-section .service-visual__bar span { height: 2px; background: var(--color-primary); }
.home-page .services-section .service-visual__body { grid-template-columns: .7fr 1.3fr; padding: 2rem; border-block: 0; }
.home-page .services-section .service-visual__copy span { height: 2px; border-radius: 0; background: var(--color-border-strong); }.home-page .services-section .service-visual__copy b { height: 3px; background: var(--color-primary); border-radius: 0; }
.home-page .services-section .service-visual__media { min-height: 250px; border: 1px solid var(--color-border); border-radius: 2px; background: transparent; transform: translate3d(0,var(--home-parallax-y),0); }
.home-page .services-section .service-visual__media::before { top: 20%; left: 23%; width: 48%; height: 48%; border: 1px solid var(--color-primary); border-radius: 0; transform: rotate(45deg); }
.home-page .services-section .service-visual__blocks { gap: 0; padding: 0 2rem 2rem; border-top: 0; }
.home-page .services-section .service-visual__blocks span { height: 85px; border-radius: 0; background: transparent; border-color: var(--color-border); }

.home-page .contact-section { min-height: 790px; color: #fff; background: #060a12; border-bottom-color: #242c38; }
.home-page .contact-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(90deg,transparent calc(100% - 1px),rgba(99,102,243,.11) 1px); background-size: calc((100% - (var(--gutter) * 2)) / 6) 100%; }
.home-page .contact-layout { padding-block: 8rem; }
.home-page .contact-copy h2 { font-size: clamp(3.7rem,5vw,5.6rem); line-height: .95; letter-spacing: -.06em; }
.home-page .contact-copy > p,.home-page .contact-methods small { color: #aeb5c2; }
.home-page .contact-methods a { color: #fff; border-color: #2d3745; }
.home-page .contact-methods a > span:first-child { color: #aeb1ff; border-radius: 3px; }
.home-page .contact-form { padding-left: clamp(2rem,5vw,5rem); border-left: 1px solid #303949; }
.home-page .contact-form label { color: #e4e7eb; }
.home-page .contact-form input,.home-page .contact-form select,.home-page .contact-form textarea { color: #fff; background: #0a1019; border-color: #384354; border-radius: 3px; }
.home-page .contact-section .home-section-index { color: rgba(99,102,243,.09); }

html[data-theme="light"] .home-page .hero,html[data-theme="light"] .home-page .what-section,html[data-theme="light"] .home-page .workflow-section,html[data-theme="light"] .home-page .services-section { background: #fff; }
html[data-theme="light"] .home-page .catalogue-section { background: #f7f8fb; }
html[data-theme="light"] .home-page .software-map__hub,html[data-theme="light"] .home-page .software-node,html[data-theme="light"] .home-page .services-section .service-visual__bar,html[data-theme="light"] .home-page .services-section .service-visual__body,html[data-theme="light"] .home-page .services-section .service-visual__blocks { background: #fff; }
html[data-theme="light"] .home-page .software-map__plane { background: rgba(255,255,255,.8); }
html[data-theme="light"] .home-page .contact-section .contact-form label { color: #e4e7eb; }
html[data-theme="light"] .home-page .contact-section .contact-form input,html[data-theme="light"] .home-page .contact-section .contact-form select,html[data-theme="light"] .home-page .contact-section .contact-form textarea { color: #fff; background: #0a1019; border-color: #384354; }
html[data-theme="light"] .home-page .contact-section .form-required-note,html[data-theme="light"] .home-page .contact-section .recaptcha-notice { color: #8f98a7; }

@media (max-width: 1240px) {
    .home-page .hero__grid { grid-template-columns: minmax(0,.86fr) minmax(540px,1.14fr); }.home-page .hero__copy h1 { font-size: clamp(3.8rem,5.7vw,4.8rem); }.home-page .software-node { width: 31%; }.home-page .what-layout { grid-template-columns: 1fr; }.home-page .capability-path li { min-height: 360px; }
}
@media (max-width: 980px) {
    .home-page .hero__grid { min-height: auto; grid-template-columns: 1fr; }.home-page .software-map { width: min(100%,780px); }.home-page .what-layout,.home-page .services-layout { grid-template-columns: 1fr; }.home-page .services-section .service-visual { width: min(100%,760px); }.home-page .contact-form { padding-left: 0; border-left: 0; }
}
@media (max-width: 680px) {
    .home-page [data-home-parallax] { transform: none !important; will-change: auto; }.home-depth-field,.home-page .home-section-index,.home-page .software-map__plane { display: none; }
    .home-page .hero__grid { padding-block: 4rem; }.home-page .hero__copy h1 { font-size: clamp(3rem,13vw,4rem); }.home-page .software-map { grid-template-columns: 1fr; gap: .8rem; }.home-page .software-node { position: static; width: auto; min-height: 82px; border-radius: 3px; box-shadow: 5px 6px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); }.home-page .software-node--5 { grid-column: auto; }
    .home-page .what-layout,.home-page .workflow-section .shell,.home-page .services-layout,.home-page .contact-layout { padding-block: 5.5rem; }.home-page .what-intro h2,.home-page .catalogue-heading h2,.home-page .workflow-heading h2,.home-page .services-copy h2,.home-page .contact-copy h2 { font-size: clamp(2.7rem,12vw,3.7rem); }
    .home-page .capability-path { border-top: 0; border-left: 1px solid var(--color-border-strong); }.home-page .capability-path li,.home-page .capability-path li:first-child { min-height: 0; padding: 1rem 0 3rem 2rem; border: 0; }.home-page .capability-path__number { position: static; display: block; margin-bottom: -2rem; font-size: 4.8rem; }.home-page .capability-path__icon { margin-left: auto; }
    .home-page .catalogue-section { padding-block: 5.5rem; }.home-page .product-rail { grid-auto-columns: 86vw; gap: 1rem; }.home-page .catalogue-card__content { min-height: 190px; }
    .home-page .workflow-list { padding-top: 3rem; border-top: 0; }.home-page .workflow-list li::after { top: 0; right: 0; left: auto; font-size: 5rem; }.home-page .workflow-list::before { display: none; }
    .home-page .services-section .service-visual { min-height: 390px; }.home-page .services-section .service-visual::before,.home-page .services-section .service-visual::after { display: none; }.home-page .services-section .service-visual__body { grid-template-columns: 1fr; }.home-page .services-section .service-visual__copy { display: grid; }.home-page .services-section .service-visual__media { min-height: 180px; }.home-page .services-section .service-visual__blocks { padding-inline: 1.25rem; }
    .home-page .contact-form { padding-top: 2.5rem; border-top: 1px solid #303949; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page [data-home-parallax] { transform: none !important; will-change: auto; }
}

/* CMS campaign popup */
body.has-campaign-popup { overflow: hidden; }
.campaign-popup { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: clamp(1rem,4vw,3rem); background: rgba(3,7,18,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 220ms ease,visibility 220ms ease; }
.campaign-popup.is-visible { opacity: 1; visibility: visible; }
.campaign-popup__card { position: relative; width: min(100%,780px); transform: translateY(18px) scale(.975); transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
.campaign-popup.is-visible .campaign-popup__card { transform: none; }
.campaign-popup__media { display: block; overflow: hidden; background: #111827; border: 1px solid rgba(255,255,255,.2); border-radius: clamp(12px,2vw,22px); box-shadow: 0 32px 90px rgba(0,0,0,.5),0 0 0 1px rgba(99,102,241,.16); }
.campaign-popup__media img { width: 100%; max-height: min(76svh,820px); display: block; object-fit: contain; }
.campaign-popup__close { position: absolute; z-index: 2; top: clamp(-10px,-1vw,-7px); right: clamp(-10px,-1vw,-7px); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: #fff; background: #111827; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 12px 32px rgba(0,0,0,.35); cursor: pointer; transition: color 180ms ease,background 180ms ease,transform 180ms ease; }
.campaign-popup__close:hover { color: #fff; background: var(--color-primary); transform: rotate(4deg) scale(1.05); }
.campaign-popup__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.campaign-popup__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 620px) { .campaign-popup { padding: 1rem; }.campaign-popup__card { width: calc(100% - 12px); }.campaign-popup__close { top: -8px; right: -8px; width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .campaign-popup,.campaign-popup__card,.campaign-popup__close { transition: none; } }

/* Contact page: direct conversation workspace. */
.contact-page main { overflow: clip; }
.contact-page__status { margin-block: 1.5rem; }
.contact-hero { min-height: 790px; }
.contact-hero__grid { position: relative; min-height: 790px; display: grid; grid-template-columns: minmax(0,.92fr) minmax(540px,1.08fr); align-items: center; gap: clamp(3.5rem,6vw,7.5rem); padding-block: clamp(4.5rem,7vw,7rem); }
.contact-intro { position: relative; z-index: 2; align-self: start; padding-top: clamp(1rem,3vw,3.5rem); }
.contact-intro h1 { max-width: 680px; margin-bottom: 1.6rem; font-size: clamp(4rem,5.6vw,6.2rem); line-height: .94; letter-spacing: -.07em; text-wrap: balance; }
.contact-intro > p:not(.contact-intro__note) { max-width: 650px; margin-bottom: 2.3rem; color: var(--color-muted); font-size: clamp(1rem,1.35vw,1.28rem); line-height: 1.72; }
.contact-channels { max-width: 680px; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-channels a { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 48px minmax(0,1fr) 22px; align-items: center; gap: .9rem; padding: 1rem 1.1rem; color: var(--color-text); background: color-mix(in srgb,var(--color-primary) 8%,var(--color-bg-elevated)); border: 1px solid color-mix(in srgb,var(--color-primary) 28%,var(--color-border)); border-radius: 4px; transition: border-color 180ms ease,background 180ms ease,transform 180ms ease; }
.contact-channels a:nth-child(2) { background: color-mix(in srgb,#25d366 8%,var(--color-bg-elevated)); border-color: color-mix(in srgb,#25d366 26%,var(--color-border)); }
.contact-channels a:hover,.contact-channels a:focus-visible { border-color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 13%,var(--color-bg-elevated)); transform: translateY(-3px); }
.contact-channels a > span:first-child { width: 48px; height: 48px; display: grid; place-items: center; color: var(--color-primary); border: 1px solid currentColor; }
.contact-channels a:nth-child(2) > span:first-child { color: #25d366; }
.contact-channels svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-channels a > svg { width: 20px; color: var(--color-muted); }
.contact-channels small,.contact-channels strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-channels small { margin-bottom: .25rem; color: var(--color-muted); font-size: .71rem; }
.contact-channels strong { font-size: .84rem; }
.contact-intro__note { max-width: 650px; display: flex; align-items: flex-start; gap: .75rem; margin: 1.2rem 0 0; color: var(--color-muted-deep); font-size: .76rem; line-height: 1.6; }
.contact-intro__note span { width: 9px; height: 9px; flex: 0 0 auto; margin-top: .18rem; background: var(--color-primary); border-radius: 50%; box-shadow: 0 0 0 6px color-mix(in srgb,var(--color-primary) 10%,transparent); }

.contact-signal { position: absolute; z-index: -1; inset: auto 50% 0 0; height: 390px; overflow: hidden; pointer-events: none; opacity: .82; }
.contact-signal::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(99,102,243,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,243,.07) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,transparent,#000 30%,#000); }
.contact-signal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.contact-signal__path { fill: none; stroke: var(--color-primary); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 8 8; animation: contact-signal-flow 12s linear infinite; }
.contact-signal__path--soft { opacity: .35; stroke-width: 1; animation-duration: 18s; animation-direction: reverse; }
.contact-signal circle { fill: var(--color-primary); filter: drop-shadow(0 0 6px var(--color-primary)); animation: contact-node-pulse 2.8s ease-in-out infinite alternate; }
.contact-signal__word { position: absolute; color: color-mix(in srgb,var(--color-primary) 72%,var(--color-muted)); font-size: .58rem; font-weight: 750; letter-spacing: .22em; text-transform: uppercase; }
.contact-signal__word--one { left: 7%; bottom: 32%; }.contact-signal__word--two { left: 31%; bottom: 54%; }.contact-signal__word--three { right: 9%; bottom: 26%; }

.contact-page-form { position: relative; z-index: 3; display: grid; gap: 1.25rem; padding: clamp(1.6rem,3vw,2.5rem); background: color-mix(in srgb,var(--color-bg-elevated) 94%,transparent); border: 1px solid var(--color-border-strong); border-radius: 5px; box-shadow: 16px 18px 0 color-mix(in srgb,var(--color-primary) 8%,transparent),var(--shadow-panel); }
.contact-page-form::before { content: ""; position: absolute; top: -1px; left: clamp(1.6rem,3vw,2.5rem); width: 88px; height: 3px; background: var(--color-primary); }
.contact-page-form header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: .25rem; }
.contact-page-form header h2 { margin: 0; font-size: clamp(1.8rem,2.3vw,2.45rem); }
.contact-page-form header p { flex: 0 0 auto; margin: .45rem 0 0; color: var(--color-muted); font-size: .72rem; }
.contact-page-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 1rem; }
.contact-page-form label { display: grid; gap: .48rem; color: var(--color-text); font-size: .78rem; font-weight: 700; }
.contact-page-form label > span i { color: #ff6b74; font-style: normal; }
.contact-page-form input,.contact-page-form select,.contact-page-form textarea { width: 100%; color: var(--color-text); background: color-mix(in srgb,var(--color-bg) 78%,transparent); border: 1px solid var(--color-border-strong); border-radius: 3px; font: 500 .86rem/1.5 var(--font-sans); transition: border-color 160ms ease,box-shadow 160ms ease,background 160ms ease; }
.contact-page-form input,.contact-page-form select { min-height: 56px; padding: .8rem .9rem; }
.contact-page-form textarea { min-height: 168px; padding: .9rem; resize: vertical; }
.contact-page-form input::placeholder,.contact-page-form textarea::placeholder { color: var(--color-muted-deep); opacity: 1; }
.contact-page-form input:focus,.contact-page-form select:focus,.contact-page-form textarea:focus { outline: none; border-color: #a8aaff; background: var(--color-bg); box-shadow: 0 0 0 3px rgba(99,102,243,.2); }
.contact-page-form .button { width: 100%; min-height: 58px; justify-content: center; border-radius: 3px; }
.contact-page-form .button.is-submitting { opacity: .72; cursor: wait; }
.contact-page-form .button.is-submitting svg { animation: contact-submit 800ms ease-in-out infinite alternate; }
.contact-page-form .recaptcha-notice { margin: -.25rem 0 0; text-align: center; }

.contact-next { padding-block: clamp(5rem,7vw,7.5rem); }
.contact-next__heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; margin-bottom: 3.5rem; }
.contact-next__heading h2 { margin: 0; font-size: clamp(3rem,4vw,4.5rem); }
.contact-next__heading p { max-width: 500px; justify-self: end; margin: 0; color: var(--color-muted); font-size: 1rem; line-height: 1.7; }
.contact-next__steps { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--color-border-strong); }
.contact-next__steps li { min-height: 280px; display: grid; grid-template-columns: 86px 1fr; align-content: start; gap: 1.25rem; padding: 2.2rem clamp(1.5rem,2.4vw,2.4rem); border-right: 1px solid var(--color-border-strong); }
.contact-next__steps li:first-child { padding-left: 0; }.contact-next__steps li:last-child { padding-right: 0; border-right: 0; }
.contact-next__steps li > span { color: var(--color-primary); font-size: clamp(2.4rem,3.5vw,3.7rem); font-weight: 800; line-height: .9; letter-spacing: -.08em; }
.contact-next__steps h3 { margin-bottom: .75rem; font-size: clamp(1.05rem,1.4vw,1.35rem); }
.contact-next__steps p { margin: 0; color: var(--color-muted); font-size: .86rem; line-height: 1.7; }

.contact-official { background: var(--color-bg-elevated); }
.contact-official__grid { display: grid; grid-template-columns: minmax(230px,.65fr) minmax(0,1.35fr); gap: clamp(3rem,5vw,6rem); padding-block: clamp(3.5rem,5vw,5rem); }
.contact-official header h2 { margin-bottom: .7rem; font-size: clamp(1.65rem,2.2vw,2.2rem); }
.contact-official header p { max-width: 360px; margin: 0; color: var(--color-muted); font-size: .78rem; line-height: 1.65; }
.contact-official__items { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.contact-official__items > * { min-width: 0; display: grid; align-content: start; gap: .55rem; padding-inline: clamp(1rem,1.8vw,1.8rem); color: var(--color-text); border-left: 1px solid var(--color-border); }
.contact-official__items > *:first-child { padding-left: 0; border-left: 0; }
.contact-official__items span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--color-primary); }
.contact-official__items svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-official__items small { color: var(--color-muted); font-size: .67rem; }
.contact-official__items strong { overflow-wrap: anywhere; font-size: .76rem; line-height: 1.55; }
.contact-official__items em { color: var(--color-muted-deep); font-size: .64rem; font-style: normal; line-height: 1.5; }
.contact-official__items a:hover strong,.contact-official__items a:focus-visible strong { color: #aeb0ff; }

html[data-theme="light"] .contact-page { background: #fdfdfd; }
html[data-theme="light"] .contact-page .contact-hero,html[data-theme="light"] .contact-page .contact-next { background: #fff; }
html[data-theme="light"] .contact-page-form { background: #fff; box-shadow: 16px 18px 0 rgba(99,102,243,.07),0 28px 70px rgba(40,45,72,.1); }
html[data-theme="light"] .contact-page-form input,html[data-theme="light"] .contact-page-form select,html[data-theme="light"] .contact-page-form textarea { background: #fff; }
html[data-theme="light"] .contact-page-form input:focus,html[data-theme="light"] .contact-page-form select:focus,html[data-theme="light"] .contact-page-form textarea:focus { background: #fff; }
html[data-theme="light"] .contact-official { background: #f6f7fb; }

@keyframes contact-signal-flow { to { stroke-dashoffset: -160; } }
@keyframes contact-node-pulse { to { opacity: .35; } }
@keyframes contact-submit { to { transform: translateX(5px); } }
@media (max-width: 1120px) {
    .contact-hero__grid { grid-template-columns: minmax(0,.82fr) minmax(500px,1.18fr); gap: 2.5rem; }.contact-intro h1 { font-size: clamp(3.5rem,5.6vw,5rem); }.contact-channels { grid-template-columns: 1fr; max-width: 480px; }.contact-official__grid { grid-template-columns: 1fr; }.contact-official__items { grid-template-columns: repeat(2,1fr); gap: 1.5rem 0; }.contact-official__items > *:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
    .contact-hero__grid { min-height: 0; grid-template-columns: 1fr; padding-block: 4.5rem 6rem; }.contact-intro { padding-top: 0; }.contact-intro h1 { max-width: 760px; }.contact-channels { max-width: none; grid-template-columns: 1fr 1fr; }.contact-signal { inset: 18% 0 auto; height: 350px; opacity: .45; }.contact-page-form { margin-top: 2rem; }.contact-next__heading { grid-template-columns: 1fr; }.contact-next__heading p { justify-self: start; }.contact-next__steps { grid-template-columns: 1fr; }.contact-next__steps li,.contact-next__steps li:first-child,.contact-next__steps li:last-child { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--color-border); }.contact-next__steps li:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
    .contact-page__status { width: calc(100% - (var(--gutter) * 2)); padding-inline: 1rem; }.contact-intro h1 { font-size: clamp(3.25rem,14vw,4.25rem); }.contact-intro > p:not(.contact-intro__note) { font-size: .94rem; }.contact-channels { grid-template-columns: 1fr; }.contact-channels a { min-height: 82px; }.contact-page-form { margin-inline: calc(var(--gutter) * -.35); padding: 1.4rem; box-shadow: 7px 8px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); }.contact-page-form header { display: grid; gap: .25rem; }.contact-page-form header p { margin-top: 0; }.contact-page-form__grid { grid-template-columns: 1fr; }.contact-page-form textarea { min-height: 190px; }.contact-next__steps li { grid-template-columns: 68px 1fr; }.contact-official__items { grid-template-columns: 1fr; gap: 0; }.contact-official__items > *,.contact-official__items > *:nth-child(3) { padding: 1.3rem 0; border-left: 0; border-bottom: 1px solid var(--color-border); }.contact-official__items > *:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-signal__path,.contact-signal circle,.contact-page-form .button.is-submitting svg { animation: none; }.contact-channels a { transition: none; }
}

/* WordPress v2: editorial publishing studio. */
.service-experience--wordpress { --service-accent: #6366f3; --wp-blue: #3858e9; --wp-ink: #05070c; --wp-line: #344157; }
.wpstudio-hero { padding-block: 2.75rem 1.75rem; background-image: linear-gradient(rgba(99,102,243,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,243,.035) 1px, transparent 1px); background-size: 72px 72px; }
.wpstudio-hero__grid { min-height: 650px; display: grid; grid-template-columns: minmax(0,.76fr) minmax(700px,1.24fr); align-items: center; gap: clamp(3rem,5vw,6rem); }
.wpstudio-hero__copy h1 { max-width: 650px; }
.wpstudio-hero__copy > p { max-width: 610px; }

.wpstudio-editor { overflow: hidden; color: #eef2f8; background: #080e17; border: 1px solid #3b485d; border-radius: 7px; box-shadow: 0 34px 90px rgba(0,0,0,.34); }
.wpstudio-editor button { font-family: var(--font-sans); }
.wpstudio-editor__topbar { min-height: 54px; display: flex; align-items: center; gap: .8rem; padding: .65rem .85rem; border-bottom: 1px solid #2d384a; }
.wpstudio-editor__mark { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; }
.wpstudio-editor__mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.wpstudio-editor__add { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--service-accent); border: 1px solid #898cff; border-radius: 3px; font-size: 1.15rem; }
.wpstudio-editor__tools { color: #98a4b7; font-size: .8rem; }
.wpstudio-editor__saved { margin-left: auto; display: flex; align-items: center; gap: .45rem; color: #aab5c5; font-size: .61rem; }
.wpstudio-editor__saved i { width: 7px; height: 7px; background: #55e6a2; border-radius: 50%; box-shadow: 0 0 10px rgba(85,230,162,.58); }
.wpstudio-editor__publish { padding: .55rem .8rem; color: #fff; background: var(--wp-blue); border: 1px solid #6580ff; border-radius: 3px; font-size: .63rem; }
.wpstudio-editor__body { min-height: 465px; display: grid; grid-template-columns: 168px minmax(0,1fr) 150px; }
.wpstudio-editor__library { padding: 1.15rem .8rem; border-right: 1px solid #2d384a; }
.wpstudio-editor__library > strong, .wpstudio-editor__settings > strong { display: block; margin-bottom: 1rem; font-size: .67rem; }
.wpstudio-editor__library > div { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.wpstudio-editor__library button { min-height: 68px; display: grid; place-items: center; align-content: center; gap: .3rem; padding: .5rem; color: #aeb8c8; background: transparent; border: 1px solid transparent; border-radius: 3px; font-size: .56rem; cursor: pointer; transition: color 180ms ease,background 180ms ease,border-color 180ms ease; }
.wpstudio-editor__library button span { font: 600 1rem/1 serif; }
.wpstudio-editor__library button[aria-pressed="true"] { color: #fff; background: rgba(99,102,243,.15); border-color: #656ce0; }
.wpstudio-editor__canvas { min-width: 0; padding: 1.2rem; background: #eef1f6; }
.wpstudio-editor__page { position: relative; min-height: 420px; overflow: hidden; padding: clamp(1.5rem,3vw,2.7rem); color: #121827; background: #fff; box-shadow: 0 15px 35px rgba(20,28,45,.12); }
.wpstudio-editor__page > span { color: var(--wp-blue); font: 750 .58rem/1 var(--font-sans); letter-spacing: .05em; }
.wpstudio-editor__page h2 { max-width: 310px; margin: 2.2rem 0 .8rem; color: #121827; font-size: clamp(1.8rem,2.6vw,2.7rem); line-height: .98; }
.wpstudio-editor__page p { max-width: 330px; margin: 0; color: #505a6d; font-size: .72rem; }
.wpstudio-editor__page-action { display: inline-block; margin-top: 1.2rem; padding: .62rem .85rem; color: #fff; background: var(--service-accent); border-radius: 2px; font-size: .62rem; font-weight: 700; }
.wpstudio-editor__page figure { position: absolute; right: 0; bottom: 0; width: 39%; height: 66%; margin: 0; overflow: hidden; background: #d6dde8; }
.wpstudio-editor__page figure::before { content: ""; position: absolute; inset: 13% 14% 0 26%; background: #b4c0d2; clip-path: polygon(46% 0,100% 100%,0 100%); }
.wpstudio-editor__page figure i { position: absolute; z-index: 1; bottom: 0; width: 14%; background: #26334a; transform-origin: bottom; }
.wpstudio-editor__page figure i:nth-child(1) { right: 14%; height: 62%; transform: skew(-8deg); }.wpstudio-editor__page figure i:nth-child(2) { right: 34%; height: 48%; }.wpstudio-editor__page figure i:nth-child(3) { right: 55%; height: 35%; transform: skew(9deg); }
.wpstudio-editor__selection { position: absolute; top: 22%; left: 6%; width: 57%; height: 84px; pointer-events: none; border: 2px solid var(--wp-blue); transition: top 180ms ease,height 180ms ease,width 180ms ease; }
.wpstudio-editor__selection::before,.wpstudio-editor__selection::after { content: ""; position: absolute; width: 6px; height: 6px; background: #fff; border: 1px solid var(--wp-blue); border-radius: 50%; }.wpstudio-editor__selection::before { top: -4px; left: -4px; }.wpstudio-editor__selection::after { right: -4px; bottom: -4px; }
.wpstudio-editor[data-block="paragraph"] .wpstudio-editor__selection { top: 45%; width: 54%; height: 60px; }.wpstudio-editor[data-block="image"] .wpstudio-editor__selection { top: 34%; left: 61%; width: 38%; height: 65%; }.wpstudio-editor[data-block="button"] .wpstudio-editor__selection { top: 62%; width: 28%; height: 48px; }.wpstudio-editor[data-block="columns"] .wpstudio-editor__selection { top: 32%; width: 92%; height: 62%; }
.wpstudio-editor__settings { display: grid; align-content: start; gap: .6rem; padding: 1.15rem .9rem; border-left: 1px solid #2d384a; }
.wpstudio-editor__settings span { color: #aeb8c8; font-size: .6rem; }.wpstudio-editor__settings i { height: 36px; border: 1px solid #2e3a4c; border-radius: 3px; }

.wpstudio-intro,.wpstudio-editing,.wpstudio-directions,.wpstudio-platform,.wpstudio-process,.wpstudio-handover,.wpstudio-faq { padding-block: 8rem; }
.wpstudio-intro__grid { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: clamp(4rem,8vw,9rem); }
.wpstudio-intro__grid > div:first-child p { max-width: 610px; }
.wpstudio-content-model { min-height: 420px; display: grid; grid-template-columns: 170px minmax(0,1fr) 160px; align-items: stretch; color: #dce3ee; background: #07101b; border: 1px solid #3c485c; border-radius: 6px; }
.wpstudio-content-model__rail,.wpstudio-content-model__fields { display: grid; align-content: center; gap: .65rem; padding: 1rem; }
.wpstudio-content-model__rail { border-right: 1px solid #303c50; }.wpstudio-content-model__fields { border-left: 1px solid #303c50; }
.wpstudio-content-model strong { margin-bottom: .5rem; font-size: .65rem; }.wpstudio-content-model span { min-height: 48px; display: flex; align-items: center; padding: .65rem; color: #aab4c4; border: 1px solid #2f3b4e; border-radius: 3px; font-size: .58rem; }.wpstudio-content-model span.is-selected { color: #fff; background: rgba(99,102,243,.17); border-color: #7075ee; }
.wpstudio-content-model__preview { position: relative; align-self: center; min-height: 330px; margin: 1rem; padding: 2rem; overflow: hidden; color: #101726; background: #fff; }
.wpstudio-content-model__preview small { color: var(--wp-blue); font-size: .56rem; font-weight: 750; }.wpstudio-content-model__preview h3 { max-width: 280px; margin-top: 1.6rem; color: #101726; font-size: clamp(1.35rem,2vw,2.1rem); }.wpstudio-content-model__preview i { display: block; width: 45%; height: 6px; margin-top: .55rem; background: #d2d8e1; }.wpstudio-content-model__preview i:nth-of-type(2) { width: 38%; }.wpstudio-content-model__preview i:nth-of-type(3) { width: 31%; }.wpstudio-content-model__preview b { position: absolute; right: 0; bottom: 0; width: 42%; height: 62%; background: #c7d0de; }

.wpstudio-heading { display: flex; justify-content: space-between; align-items: end; gap: 4rem; margin-bottom: 4rem; }
.wpstudio-heading > div { max-width: 940px; }.wpstudio-heading p { max-width: 650px; margin-bottom: 0; }
.wpstudio-heading > aside { width: min(100%,340px); padding-left: 1.2rem; border-left: 1px solid var(--color-border-strong); }.wpstudio-heading > aside strong,.wpstudio-heading > aside span { display: block; }.wpstudio-heading > aside strong { margin-bottom: .45rem; color: var(--service-accent); font-size: .68rem; }.wpstudio-heading > aside span { color: var(--color-muted); font-size: .75rem; }
.wpstudio-editing__workspace { display: grid; grid-template-columns: .72fr 1.28fr; min-height: 570px; padding-inline: 0 !important; border: 1px solid var(--color-border-strong); border-radius: 7px; overflow: hidden; }
.wpstudio-outcome-list { display: grid; background: color-mix(in srgb,var(--color-bg-elevated) 88%,var(--service-accent)); border-right: 1px solid var(--color-border-strong); }
.wpstudio-outcome-list button { display: grid; grid-template-columns: 48px minmax(0,1fr) 22px; align-items: center; gap: 1rem; padding: 1.25rem; text-align: left; color: var(--color-text); background: transparent; border: 0; border-bottom: 1px solid var(--color-border-strong); cursor: pointer; font-family: var(--font-sans); transition: color 180ms ease,background 180ms ease; }
.wpstudio-outcome-list button:last-child { border-bottom: 0; }.wpstudio-outcome-list button[aria-selected="true"] { color: #fff; background: var(--service-accent); }
.wpstudio-outcome-list button > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid currentColor; }.wpstudio-outcome-list button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }.wpstudio-outcome-list button > svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }.wpstudio-outcome-list button strong,.wpstudio-outcome-list button small { display: block; }.wpstudio-outcome-list button strong { margin-bottom: .35rem; font-size: .9rem; }.wpstudio-outcome-list button small { color: var(--color-muted); font-size: .66rem; line-height: 1.45; }.wpstudio-outcome-list button[aria-selected="true"] small { color: #e4e5ff; }
.wpstudio-editing__preview { min-width: 0; background: #eef1f6; }
.wpstudio-editing__bar { min-height: 52px; display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; color: #1d2738; background: #f9fafc; border-bottom: 1px solid #d4dbe5; }.wpstudio-editing__bar span svg { width: 22px; height: 22px; fill: none; stroke: #1d2738; stroke-width: 1.7; }.wpstudio-editing__bar small { color: #596579; }.wpstudio-editing__bar-action { display: inline-block; margin-left: auto; padding: .48rem .75rem; color: #fff; background: var(--wp-blue); border-radius: 3px; font: 650 .62rem/1 var(--font-sans); }
.wpstudio-editing__surface { min-height: 518px; display: grid; grid-template-columns: 96px 1fr; padding: 1.3rem; }.wpstudio-editing__surface > aside { display: grid; align-content: start; gap: .8rem; padding: 1rem; color: #687487; background: #fff; border-right: 1px solid #d8dde6; font: 650 .67rem/1 monospace; }.wpstudio-editing__surface > aside b { color: #1c2535; font: 650 .62rem/1 var(--font-sans); }.wpstudio-editing__surface > article { position: relative; overflow: hidden; padding: clamp(2rem,4vw,4rem); color: #121827; background: #fff; }.wpstudio-editing__surface article small { color: var(--wp-blue); font-size: .57rem; font-weight: 750; }.wpstudio-editing__surface h3 { max-width: 460px; margin: 2rem 0 .8rem; color: #121827; font-size: clamp(1.8rem,3vw,3.2rem); line-height: 1; }.wpstudio-editing__surface p { max-width: 410px; color: #4b5668; font-size: .76rem; }.wpstudio-editing__surface article > span { display: block; width: 36%; height: 7px; margin-top: .65rem; background: #d3d9e3; }.wpstudio-editing__surface article > span:nth-of-type(2) { width: 28%; }.wpstudio-editing__surface figure { position: absolute; right: 0; bottom: 0; width: 42%; height: 48%; margin: 0; background: #c4cede; }.wpstudio-editing__focus { position: absolute; top: 20%; left: 6%; width: 58%; height: 98px; border: 2px solid var(--wp-blue); transition: top 180ms ease,left 180ms ease,width 180ms ease,height 180ms ease; }.wpstudio-editing__workspace[data-outcome="1"] .wpstudio-editing__focus { top: 8%; left: 4%; width: 92%; height: 84%; }.wpstudio-editing__workspace[data-outcome="2"] .wpstudio-editing__focus { top: 42%; left: 54%; width: 42%; height: 48%; }.wpstudio-editing__workspace[data-outcome="3"] .wpstudio-editing__focus { top: 70%; width: 35%; height: 54px; }

.wpstudio-directions { background: color-mix(in srgb,var(--color-bg-elevated) 55%,var(--color-bg)); }
.wpstudio-directions__spread { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 0; padding-inline: var(--gutter); list-style: none; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.wpstudio-directions__spread > li { min-width: 0; padding: 2.4rem 2rem 2.6rem; }.wpstudio-directions__spread > li + li { border-left: 1px solid var(--color-border-strong); }.wpstudio-directions__spread > li > span { display: block; color: var(--service-accent); font-size: clamp(3.4rem,5vw,5.5rem); font-weight: 700; line-height: .9; }.wpstudio-directions__spread h3 { margin: 1.4rem 0 .55rem; }.wpstudio-directions__spread p { min-height: 86px; font-size: .8rem; }
.wpstudio-direction-preview { position: relative; height: 285px; margin-top: 2rem; padding: 2rem 1.2rem; overflow: hidden; color: #e9eef7; background: #07101b; border: 1px solid #3b485d; }.wpstudio-direction-preview header { position: absolute; top: 0; right: 0; left: 0; height: 25px; display: flex; gap: 4px; align-items: center; padding-inline: 9px; border-bottom: 1px solid #344054; }.wpstudio-direction-preview header i { width: 5px; height: 5px; background: #68758a; border-radius: 50%; }.wpstudio-direction-preview strong { position: relative; z-index: 2; display: block; max-width: 185px; font-size: .78rem; }.wpstudio-direction-preview > b { position: relative; z-index: 2; display: block; width: 50%; height: 6px; margin-top: .65rem; background: #536079; }.wpstudio-direction-preview > b:nth-of-type(2) { width: 38%; }.wpstudio-direction-preview > b:nth-of-type(3) { width: 20%; height: 22px; background: var(--service-accent); }.wpstudio-direction-preview figure { position: absolute; right: 8%; bottom: 12%; width: 35%; height: 48%; margin: 0; background: #26344b; }.wpstudio-direction-preview--2 figure { width: 44%; height: 58%; background: repeating-linear-gradient(0deg,#253249 0 9px,#07101b 9px 19px); }.wpstudio-direction-preview--3 figure { width: 62%; height: 42%; background: repeating-linear-gradient(90deg,#26344b 0 25%,#07101b 25% 33%); }

.wpstudio-platform { color: #fff; background: #091a33; }
.wpstudio-platform .wpstudio-heading p,.wpstudio-platform p { color: #aeb9ca; }
.wpstudio-platform__flow { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 4rem; padding-inline: var(--gutter); list-style: none; }
.wpstudio-platform__flow::before { content: ""; position: absolute; top: 32px; right: 10%; left: 10%; height: 1px; background: #6471cf; }
.wpstudio-platform__flow li { position: relative; z-index: 1; display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding-right: 1.2rem; }.wpstudio-platform__flow li > span { width: 64px; height: 64px; display: grid; place-items: center; color: #b7bbff; background: #091a33; border: 1px solid #737bee; }.wpstudio-platform__flow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; }.wpstudio-platform__flow li > span i { width: 20px; height: 20px; display: block; border: 1px solid currentColor; box-shadow: inset 7px 0 transparent,inset 8px 0 currentColor,inset 0 7px transparent,inset 0 8px currentColor; }.wpstudio-platform__flow h3 { margin: .45rem 0 .3rem; font-size: .92rem; }.wpstudio-platform__flow p { margin: 0; font-size: .67rem; }
.wpstudio-review { display: grid; grid-template-columns: .58fr 1.42fr; gap: 4rem; padding-top: 3rem; border-top: 1px solid #42526c; }.wpstudio-review > div h3 { max-width: 400px; font-size: clamp(1.7rem,2.8vw,2.8rem); }.wpstudio-review > div p { max-width: 400px; }.wpstudio-review ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid #42526c; }.wpstudio-review li { display: grid; grid-template-columns: 40px minmax(130px,.65fr) 1.35fr; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid #42526c; }.wpstudio-review li span { color: #aeb4ff; font: 650 .63rem/1 monospace; }.wpstudio-review li strong { font-size: .75rem; }.wpstudio-review li p { margin: 0; font-size: .69rem; }

.wpstudio-process__rail { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; list-style: none; }.wpstudio-process__rail::before { content: ""; position: absolute; top: 11px; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg,var(--color-border-strong),var(--service-accent),var(--color-border-strong)); }.wpstudio-process__rail > li { position: relative; z-index: 1; min-width: 0; padding-right: 1.6rem; }.wpstudio-process__rail > li + li { padding-left: 1rem; }.wpstudio-process__rail > li > span { display: inline-block; padding-right: .7rem; color: var(--service-accent); background: var(--color-bg); font: 700 1rem/1 monospace; }.wpstudio-process__rail h3 { margin: 1.5rem 0 .5rem; }.wpstudio-process__rail p { min-height: 122px; font-size: .77rem; }
.wpstudio-process__diagram { position: relative; height: 210px; border: 1px solid var(--color-border-strong); background: color-mix(in srgb,var(--service-accent) 3%,var(--color-bg-elevated)); }.wpstudio-process__diagram i,.wpstudio-process__diagram b { position: absolute; display: block; border: 1px solid #6873d9; }.wpstudio-process__diagram i:nth-child(1) { top: 18%; left: 22%; width: 56%; height: 26px; }.wpstudio-process__diagram i:nth-child(2) { top: 48%; left: 10%; width: 32%; height: 42px; }.wpstudio-process__diagram i:nth-child(3) { top: 48%; right: 10%; width: 32%; height: 42px; }.wpstudio-process__diagram b { top: 34%; left: 49.5%; width: 1px; height: 15%; border: 0; background: #6873d9; }.wpstudio-process__diagram b:nth-of-type(2) { top: 39%; left: 25%; width: 50%; height: 1px; }.wpstudio-process__diagram--2 i { left: 14% !important; width: 72% !important; height: 28px !important; }.wpstudio-process__diagram--2 i:nth-child(2) { top: 40%; }.wpstudio-process__diagram--2 i:nth-child(3) { top: 62%; }.wpstudio-process__diagram--2 b { display: none; }.wpstudio-process__diagram--3 i:nth-child(1) { inset: 13% 9% auto; width: auto; height: 38px; }.wpstudio-process__diagram--3 i:nth-child(2) { inset: 42% 54% 12% 9%; width: auto; height: auto; }.wpstudio-process__diagram--3 i:nth-child(3) { inset: 42% 9% 12% 54%; width: auto; height: auto; }.wpstudio-process__diagram--3 b { display: none; }.wpstudio-process__diagram--4 i { left: 18% !important; width: 18px !important; height: 18px !important; background: var(--service-accent); }.wpstudio-process__diagram--4 i:nth-child(2) { top: 40%; }.wpstudio-process__diagram--4 i:nth-child(3) { top: 62%; }.wpstudio-process__diagram--4 b { left: 34%; width: 50%; height: 6px; border: 0; background: #57647b; }.wpstudio-process__diagram--4 b:nth-of-type(1) { top: 22%; }.wpstudio-process__diagram--4 b:nth-of-type(2) { top: 45%; }

.wpstudio-handover { background: color-mix(in srgb,var(--color-bg-elevated) 70%,var(--color-bg)); }
.wpstudio-handover__grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(4rem,8vw,9rem); }.wpstudio-handover__grid > div:first-child p { max-width: 600px; }.wpstudio-handover ul { margin: 2.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }.wpstudio-handover li { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-border-strong); }.wpstudio-handover li span { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: var(--service-accent); font-size: .65rem; }
.wpstudio-guide { min-height: 430px; display: grid; grid-template-columns: 180px 1fr; overflow: hidden; color: #dce4ef; background: #07101b; border: 1px solid #3b485d; border-radius: 6px; }.wpstudio-guide > aside { display: grid; align-content: start; gap: .35rem; padding: 1.3rem .9rem; border-right: 1px solid #344054; }.wpstudio-guide aside strong { margin-bottom: 1rem; }.wpstudio-guide aside span { padding: .65rem; color: #a9b4c5; font-size: .65rem; }.wpstudio-guide aside span.is-active { color: #fff; background: var(--service-accent); }.wpstudio-guide > article { position: relative; padding: 2rem; color: #111827; background: #f8fafc; }.wpstudio-guide article small { font-size: .68rem; font-weight: 700; }.wpstudio-guide article > i { display: block; width: 55%; height: 7px; margin-top: .6rem; background: #cbd3df; }.wpstudio-guide article > i:nth-of-type(2) { width: 45%; }.wpstudio-guide article > i:nth-of-type(3) { width: 35%; }.wpstudio-guide figure { position: absolute; top: 18%; right: 8%; width: 34%; height: 30%; margin: 0; background: #dfe5ed; }.wpstudio-guide ol { position: absolute; right: 8%; bottom: 8%; left: 8%; margin: 0; padding: 1.1rem; list-style: none; background: #e8ecf2; }.wpstudio-guide ol li { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; border: 0; font-size: .66rem; }.wpstudio-guide ol span { width: 19px; height: 19px; display: grid; place-items: center; color: #4d5870; background: #cfd6e1; border-radius: 50%; font-size: .58rem; }

.wpstudio-faq .wpstudio-heading { margin-bottom: 2.5rem; }.wpstudio-faq__list { padding-inline: var(--gutter); }.wpstudio-faq__list details { background: transparent; }.wpstudio-faq__list summary { min-height: 82px; padding-inline: 1.25rem; margin-bottom: .65rem; border: 1px solid var(--color-border-strong); font-size: 1rem; }.wpstudio-faq__list details p { margin: -.65rem 0 .65rem; padding: 1.2rem 1.25rem; border: 1px solid var(--color-border-strong); border-top: 0; }
.wpstudio-cta { padding-block: 0; color: #fff; background: var(--service-accent); }.wpstudio-cta__panel { min-height: 280px; display: flex; align-items: center; justify-content: space-between; gap: 4rem; }.wpstudio-cta h2 { max-width: 950px; margin-bottom: .7rem; color: #fff; font-size: clamp(2.4rem,4.2vw,4.5rem); }.wpstudio-cta p { margin: 0; color: #e7e8ff; }.wpstudio-cta .button { flex: 0 0 auto; color: #15183e; background: #fff; border-radius: 3px; box-shadow: 0 18px 38px rgba(30,32,110,.2); }

html[data-theme="light"] .wpstudio-hero,html[data-theme="light"] .wpstudio-intro,html[data-theme="light"] .wpstudio-editing,html[data-theme="light"] .wpstudio-process,html[data-theme="light"] .wpstudio-faq { background-color: #fff; }
html[data-theme="light"] .wpstudio-editor { box-shadow: 0 30px 70px rgba(24,34,53,.16); }
html[data-theme="light"] .wpstudio-directions { background: #f7f8fb; }
html[data-theme="light"] .wpstudio-handover { background: #eef1f7; }
html[data-theme="light"] .wpstudio-process__rail > li > span { background: #fff; }

@media (max-width: 1240px) {
    .wpstudio-hero__grid { grid-template-columns: 1fr; padding-bottom: 4rem; }
    .wpstudio-hero__copy { max-width: 850px; }
    .wpstudio-editor { width: min(100%,920px); margin-inline: auto; }
    .wpstudio-intro__grid { grid-template-columns: 1fr; }
    .wpstudio-content-model { width: min(100%,900px); margin-inline: auto; }
}

@media (max-width: 900px) {
    .wpstudio-intro,.wpstudio-editing,.wpstudio-directions,.wpstudio-platform,.wpstudio-process,.wpstudio-handover,.wpstudio-faq { padding-block: 6rem; }
    .wpstudio-heading { align-items: flex-start; flex-direction: column; gap: 2rem; }
    .wpstudio-heading > aside { width: 100%; }
    .wpstudio-editing__workspace,.wpstudio-handover__grid { grid-template-columns: 1fr; }
    .wpstudio-outcome-list { grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--color-border-strong); }
    .wpstudio-outcome-list button:nth-child(odd) { border-right: 1px solid var(--color-border-strong); }
    .wpstudio-directions__spread { grid-template-columns: 1fr; }
    .wpstudio-directions__spread > li + li { border-top: 1px solid var(--color-border-strong); border-left: 0; }
    .wpstudio-directions__spread p { min-height: 0; }
    .wpstudio-direction-preview { width: min(100%,620px); }
    .wpstudio-platform__flow,.wpstudio-process__rail { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }
    .wpstudio-platform__flow::before,.wpstudio-process__rail::before { display: none; }
    .wpstudio-review { grid-template-columns: 1fr; gap: 2rem; }
    .wpstudio-process__rail > li,.wpstudio-process__rail > li + li { padding: 0; }
    .wpstudio-process__rail p { min-height: 0; }
    .wpstudio-handover__grid { gap: 4rem; }
    .wpstudio-cta__panel { min-height: 340px; align-items: flex-start; justify-content: center; flex-direction: column; }
}

@media (max-width: 600px) {
    .wpstudio-hero { padding-top: 3.5rem; }
    .wpstudio-hero__grid { min-height: auto; gap: 3rem; }
    .wpstudio-hero__copy h1 { font-size: clamp(2.65rem,12vw,3.7rem); }
    .wpstudio-hero__copy .button { width: 100%; }
    .wpstudio-editor__topbar { gap: .55rem; }.wpstudio-editor__tools,.wpstudio-editor__saved { display: none; }
    .wpstudio-editor__publish { margin-left: auto; }
    .wpstudio-editor__body { min-height: 545px; grid-template-columns: 80px 1fr; }
    .wpstudio-editor__library { padding: .8rem .35rem; }.wpstudio-editor__library > div { grid-template-columns: 1fr; }.wpstudio-editor__library button { min-height: 58px; font-size: .48rem; }.wpstudio-editor__settings { display: none; }
    .wpstudio-editor__canvas { padding: .65rem; }.wpstudio-editor__page { min-height: 500px; padding: 1.4rem; }.wpstudio-editor__page h2 { margin-top: 1.6rem; font-size: 2rem; }.wpstudio-editor__page p { font-size: .65rem; }.wpstudio-editor__page figure { width: 58%; height: 38%; }.wpstudio-editor__selection { top: 16%; left: 5%; width: 88%; height: 108px; }.wpstudio-editor[data-block="paragraph"] .wpstudio-editor__selection { top: 39%; width: 86%; }.wpstudio-editor[data-block="image"] .wpstudio-editor__selection { top: 62%; left: 42%; width: 57%; height: 38%; }.wpstudio-editor[data-block="button"] .wpstudio-editor__selection { top: 52%; width: 54%; }.wpstudio-editor[data-block="columns"] .wpstudio-editor__selection { top: 12%; width: 90%; height: 84%; }
    .wpstudio-intro,.wpstudio-editing,.wpstudio-directions,.wpstudio-platform,.wpstudio-process,.wpstudio-handover,.wpstudio-faq { padding-block: 5rem; }
    .wpstudio-content-model { min-height: 520px; grid-template-columns: 1fr; }.wpstudio-content-model__rail,.wpstudio-content-model__fields { display: none; }.wpstudio-content-model__preview { min-height: 490px; margin: .75rem; }.wpstudio-content-model__preview b { width: 62%; height: 42%; }
    .wpstudio-outcome-list { grid-template-columns: 1fr; }.wpstudio-outcome-list button:nth-child(odd) { border-right: 0; }.wpstudio-outcome-list button:last-child { border-bottom: 0; }.wpstudio-editing__surface { min-height: 500px; grid-template-columns: 58px 1fr; padding: .6rem; }.wpstudio-editing__surface > aside { padding: .7rem .45rem; }.wpstudio-editing__surface > article { padding: 1.5rem; }.wpstudio-editing__surface h3 { font-size: 2rem; }.wpstudio-editing__surface figure { width: 62%; height: 38%; }.wpstudio-editing__focus { top: 16%; left: 5%; width: 90%; }
    .wpstudio-directions__spread > li { padding: 2.3rem 0; }.wpstudio-direction-preview { height: 260px; }
    .wpstudio-platform__flow,.wpstudio-process__rail { grid-template-columns: 1fr; }.wpstudio-platform__flow li { padding: 0; }.wpstudio-review li { grid-template-columns: 32px 1fr; }.wpstudio-review li p { grid-column: 2; }
    .wpstudio-process__rail { gap: 3rem; }.wpstudio-process__diagram { height: 190px; }
    .wpstudio-guide { min-height: 480px; grid-template-columns: 110px 1fr; }.wpstudio-guide > aside { padding: 1rem .45rem; }.wpstudio-guide aside span { padding: .55rem .4rem; font-size: .55rem; }.wpstudio-guide > article { padding: 1.3rem; }.wpstudio-guide figure { top: 28%; right: 7%; width: 50%; height: 24%; }
    .wpstudio-faq__list summary { min-height: 74px; padding-inline: 1rem; font-size: .88rem; }
    .wpstudio-cta__panel { min-height: 390px; }.wpstudio-cta h2 { font-size: clamp(2.35rem,10vw,3.3rem); }.wpstudio-cta .button { width: 100%; }
}

/* Web Development v2: build pipeline and engineering system map. */
.service-experience--web-development { --service-accent: #6366f3; --devbuild-success: #55e6a2; }
.devbuild-hero { padding-block: 3.5rem 2.25rem; background-image: linear-gradient(rgba(99,102,243,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,243,.045) 1px, transparent 1px); background-size: 72px 72px; }
.devbuild-hero__grid { min-height: 680px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(670px, 1.2fr); align-items: center; gap: clamp(3rem, 5vw, 6rem); }
.devbuild-hero__copy h1 { max-width: 680px; }
.devbuild-hero__copy > p { max-width: 610px; }
.devbuild-console { overflow: hidden; color: #e9edf5; background: #050b13; border: 1px solid #3d4b67; border-radius: 8px; box-shadow: 0 34px 90px rgba(0,0,0,.38); }
.devbuild-console__topline { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; color: #9aa6b8; border-bottom: 1px solid #283348; font: 600 .66rem/1 var(--font-sans); }
.devbuild-console__topline strong { display: flex; align-items: center; gap: .5rem; color: var(--devbuild-success); font-weight: 650; }
.devbuild-console__topline i { width: 8px; height: 8px; background: var(--devbuild-success); border-radius: 50%; box-shadow: 0 0 12px rgba(85,230,162,.72); }
.devbuild-console__stages { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #283348; }
.devbuild-console__stages::before { content: ""; position: absolute; top: 31px; right: 11%; left: 11%; height: 1px; background: #354464; }
.devbuild-console__stages button { position: relative; z-index: 1; min-height: 82px; display: grid; place-items: center; align-content: center; gap: .5rem; padding: .75rem; color: #aeb8c8; background: transparent; border: 0; cursor: pointer; font: 650 .67rem/1.2 var(--font-sans); }
.devbuild-console__stages button span { width: 24px; height: 24px; display: grid; place-items: center; color: #c7ccff; background: #111a2c; border: 1px solid #5963c8; border-radius: 50%; font: 650 .56rem/1 monospace; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.devbuild-console__stages button[aria-pressed="true"] { color: #fff; }
.devbuild-console__stages button[aria-pressed="true"] span { color: #fff; background: var(--service-accent); border-color: #9ca0ff; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(99,102,243,.16); }
.devbuild-console__workspace { min-height: 400px; display: grid; grid-template-columns: 145px minmax(0, 1fr) 145px; }
.devbuild-console__workspace > aside { display: grid; align-content: start; gap: .68rem; padding: 1.25rem; color: #8390a4; border-right: 1px solid #283348; font: 500 .61rem/1.2 monospace; }
.devbuild-console__workspace > aside strong { margin-bottom: .45rem; color: #dce2ec; font-weight: 650; }
.devbuild-console__workspace > aside span::before { content: "›"; margin-right: .5rem; color: #6f79df; }
.devbuild-editor { min-width: 0; }
.devbuild-editor header { min-height: 38px; display: flex; align-items: center; padding-inline: 1rem; color: #8e9aae; background: #0b1320; border-bottom: 1px solid #283348; font: 500 .58rem/1 monospace; }
.devbuild-editor pre { min-height: 360px; margin: 0; padding: 1.45rem; overflow: hidden; color: #cdd5e1; font: 500 clamp(.59rem, .72vw, .75rem)/2 monospace; }
.devbuild-editor pre i { color: #526078; font-style: normal; }.devbuild-editor pre b { color: #9ca4ff; font-weight: 500; }.devbuild-editor pre em { color: #5ce2ad; font-style: normal; }.devbuild-editor pre u { display: inline-block; width: 6px; height: 1.1em; margin-left: 4px; vertical-align: middle; background: #fff; animation: terminalBlink 900ms steps(2) infinite; }
.devbuild-modules { display: grid; align-content: center; gap: .75rem; padding: 1rem; border-left: 1px solid #283348; }
.devbuild-module { position: relative; min-height: 58px; display: flex; align-items: center; padding: .75rem .7rem .75rem 1rem; color: #96a3b6; border: 1px solid #34415a; border-radius: 5px; font: 600 .58rem/1.3 var(--font-sans); transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.devbuild-module::before { content: ""; width: 7px; height: 7px; margin-right: .55rem; border: 1px solid #6875df; transform: rotate(45deg); }
.devbuild-console[data-stage="interface"] .devbuild-module--interface, .devbuild-console[data-stage="application"] .devbuild-module--application, .devbuild-console[data-stage="integrations"] .devbuild-module--integrations, .devbuild-console[data-stage="release"] .devbuild-module--release { color: #fff; background: rgba(99,102,243,.14); border-color: #777bf5; transform: translateX(-4px); }

.devbuild-architecture, .devbuild-solutions, .devbuild-standards, .devbuild-process, .devbuild-scope, .devbuild-faq { padding-block: 8rem; }
.devbuild-heading { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: end; gap: clamp(3rem, 7vw, 8rem); margin-bottom: 4rem; }
.devbuild-heading h2 { max-width: 800px; }
.devbuild-heading p { max-width: 600px; margin: 0 0 .4rem auto; }
.devbuild-system-map { display: grid; grid-template-columns: minmax(0, 1fr) 245px; min-height: 330px; padding-inline: 0 !important; overflow: hidden; background: color-mix(in srgb, var(--color-bg-elevated) 92%, var(--service-accent)); border: 1px solid var(--color-border-strong); border-radius: 8px; }
.devbuild-system-map > ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.devbuild-system-map > ol > li { position: relative; min-width: 0; display: grid; align-content: center; padding: clamp(1.25rem, 2.4vw, 2.25rem); border-right: 1px solid var(--color-border); }
.devbuild-system-map small { color: var(--service-accent); font: 650 .62rem/1.2 monospace; text-transform: uppercase; letter-spacing: .08em; }
.devbuild-system-map > ol span { width: 40px; height: 40px; display: grid; place-items: center; margin: 2.6rem 0 1rem; color: #c7c9ff; background: color-mix(in srgb, var(--service-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--service-accent) 55%, var(--color-border)); font: 650 .65rem/1 monospace; }
.devbuild-system-map h3 { margin-bottom: .45rem; font-size: 1rem; }
.devbuild-system-map p { margin: 0; font-size: .77rem; }
.devbuild-system-map > ol > li > i { position: absolute; z-index: 2; top: 50%; right: -6px; width: 11px; height: 11px; background: var(--service-accent); border: 3px solid var(--color-bg-elevated); border-radius: 50%; box-shadow: 0 0 0 1px #777bf5; }
.devbuild-system-map > aside { display: grid; align-content: center; gap: 1rem; padding: 1.5rem; background: #07101b; color: #fff; }
.devbuild-system-map > aside > strong { color: #aeb8c8; font: 650 .65rem/1.2 monospace; text-transform: uppercase; letter-spacing: .08em; }
.devbuild-system-map aside ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.devbuild-system-map aside li { display: flex; align-items: center; gap: .65rem; min-height: 46px; padding: .65rem; color: #cbd3df; border: 1px solid #2e3b51; border-radius: 4px; font-size: .66rem; }
.devbuild-system-map aside svg { width: 18px; height: 18px; fill: none; stroke: #8f94ff; stroke-width: 1.7; }

.devbuild-solutions { background: color-mix(in srgb, var(--color-bg-elevated) 58%, var(--color-bg)); }
.devbuild-solutions__manifest { display: grid; grid-template-columns: .96fr 1.04fr; grid-template-rows: 1fr 1fr auto; padding-inline: 0 !important; border-top: 1px solid var(--color-border-strong); border-left: 1px solid var(--color-border-strong); }
.devbuild-solution { position: relative; min-width: 0; min-height: 285px; padding: clamp(1.6rem, 3vw, 3rem); overflow: hidden; background: var(--color-bg); border-right: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.devbuild-solution--1 { grid-row: 1 / span 2; min-height: 570px; }.devbuild-solution--4 { grid-column: 1 / -1; min-height: 340px; }
.devbuild-solution header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.devbuild-solution header span { color: var(--service-accent); font: 700 1rem/1 monospace; }.devbuild-solution header small { color: var(--color-muted-deep); font: 600 .57rem/1.3 monospace; text-transform: uppercase; letter-spacing: .08em; }
.devbuild-solution h3 { max-width: 520px; margin-bottom: .45rem; font-size: clamp(1.45rem, 2.4vw, 2.2rem); }.devbuild-solution p { max-width: 560px; margin-top: 0; }
.devbuild-solution__specimen { position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: 2rem; left: clamp(1.5rem, 4vw, 4rem); height: 45%; border: 1px solid #36435a; background: #07101b; }
.devbuild-solution__specimen i { position: absolute; left: 8%; width: 58%; height: 6px; background: #45536c; }.devbuild-solution__specimen i:nth-child(1) { top: 18%; width: 28%; background: #8185ff; }.devbuild-solution__specimen i:nth-child(2) { top: 30%; }.devbuild-solution__specimen i:nth-child(3) { top: 40%; width: 42%; }.devbuild-solution__specimen i:nth-child(4) { top: 72%; width: 20%; height: 25px; background: #6366f3; }
.devbuild-solution__specimen b { position: absolute; top: 16%; right: 7%; width: 27%; height: 56%; border: 1px solid #52617a; background: linear-gradient(145deg,#111c2d,#1a2740); }.devbuild-solution__specimen b:nth-of-type(2) { top: auto; right: 38%; bottom: 10%; width: 18%; height: 20%; background: #101a2b; }
.devbuild-solution--2 .devbuild-solution__specimen, .devbuild-solution--3 .devbuild-solution__specimen { top: 2rem; right: 2rem; bottom: 2rem; left: auto; width: 38%; height: auto; }.devbuild-solution--2 h3, .devbuild-solution--2 p, .devbuild-solution--3 h3, .devbuild-solution--3 p { max-width: 52%; }
.devbuild-solution--4 .devbuild-solution__specimen { top: 2rem; right: 3rem; bottom: 2rem; left: auto; width: 47%; height: auto; }.devbuild-solution--4 h3, .devbuild-solution--4 p { max-width: 43%; }

.devbuild-standards { color: #fff; background: #07101b; }
.devbuild-standards .devbuild-heading p, .devbuild-standards__rail p { color: #aeb8c8; }
.devbuild-standards__rail { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid #36455d; }
.devbuild-standards__rail > li { position: relative; min-height: 410px; padding: 2rem 1.5rem 0; border-bottom: 1px solid #36455d; }.devbuild-standards__rail > li + li { border-left: 1px solid #36455d; }
.devbuild-standards__rail > li > span { display: flex; align-items: center; gap: .65rem; color: #a8adff; font: 650 .65rem/1 monospace; }.devbuild-standards__rail > li > span i { width: 15px; height: 15px; border: 1px solid #7b82f5; }.devbuild-standards__rail > li > span i::after { content: ""; display: block; width: 7px; height: 4px; margin: 3px; border-left: 1px solid var(--devbuild-success); border-bottom: 1px solid var(--devbuild-success); transform: rotate(-45deg); }
.devbuild-standards__icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 3.2rem 0 1.1rem; color: #9da2ff; border: 1px solid #4f5a75; }.devbuild-standards__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.devbuild-standards__rail h3 { max-width: 190px; margin-bottom: .55rem; font-size: 1rem; }.devbuild-standards__rail p { min-height: 78px; font-size: .75rem; }
.devbuild-standards__rail pre { margin: 1.4rem 0 0; padding: 1rem; color: #718096; background: #050a11; border: 1px solid #263348; font: 500 .58rem/1.7 monospace; }.devbuild-standards__rail pre b { color: #b9c0ff; font-weight: 500; }

.devbuild-process__rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.devbuild-process__rail::before { content: ""; position: absolute; top: 30px; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg,var(--service-accent),#8d91ff); }
.devbuild-process__rail > li { position: relative; z-index: 1; min-width: 0; padding-right: 2rem; }.devbuild-process__rail > li + li { padding-left: 1rem; }
.devbuild-process__rail > li > span { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 1.5rem; color: #fff; background: var(--service-accent); border: 6px solid var(--color-bg); border-radius: 50%; box-shadow: 0 0 0 1px #777bf5; font: 650 .64rem/1 monospace; }
.devbuild-process__rail h3 { margin-bottom: .4rem; }.devbuild-process__rail p { min-height: 105px; font-size: .8rem; }
.devbuild-process__sketch { position: relative; height: 155px; margin-top: 1.5rem; border: 1px solid var(--color-border-strong); background: color-mix(in srgb, var(--service-accent) 4%, var(--color-bg-elevated)); }
.devbuild-process__sketch i { position: absolute; display: block; border: 1px solid #6874d9; }.devbuild-process__sketch i:nth-child(1) { inset: 20% 35% 52% 12%; }.devbuild-process__sketch i:nth-child(2) { inset: 50% 12% 20% 38%; }.devbuild-process__sketch i:nth-child(3) { top: 37%; left: 48%; width: 10px; height: 10px; background: var(--devbuild-success); border: 0; border-radius: 50%; }
.devbuild-process__sketch--2 i:nth-child(1) { inset: 18% 18% 62%; }.devbuild-process__sketch--2 i:nth-child(2) { inset: 48% 32% 18%; }.devbuild-process__sketch--3 i:nth-child(1) { inset: 15% 55% 15% 10%; }.devbuild-process__sketch--3 i:nth-child(2) { inset: 22% 10% 22% 53%; }.devbuild-process__sketch--4 i:nth-child(3) { top: 42%; left: 46%; width: 34px; height: 34px; border: 2px solid var(--devbuild-success); background: transparent; }

.devbuild-scope { background: color-mix(in srgb, var(--color-bg-elevated) 68%, var(--color-bg)); }
.devbuild-scope__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(4rem, 8vw, 9rem); }
.devbuild-scope__grid > div > p { max-width: 560px; }
.devbuild-tree { display: grid; gap: .72rem; margin-top: 3rem; padding: 1.35rem; color: #9fa8ff; background: #07101b; border: 1px solid #34415a; border-radius: 6px; font: 500 .68rem/1.2 monospace; }
.devbuild-tree strong { color: #e5e9f2; }.devbuild-tree span { padding-left: 2rem; }.devbuild-tree span::before { content: "├─ ▰"; margin-right: .7rem; color: #6874df; }.devbuild-tree span:last-child::before { content: "└─ ▰"; }
.devbuild-scope__grid > ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }
.devbuild-scope__grid > ol > li { display: grid; grid-template-columns: 54px 1fr; gap: 1.25rem; padding: 1.2rem 0; border-bottom: 1px solid var(--color-border-strong); }.devbuild-scope__grid > ol > li > span { color: var(--service-accent); font: 650 .66rem/1.5 monospace; }.devbuild-scope h3, .devbuild-scope li p { margin: 0; }.devbuild-scope h3 { font-size: .96rem; }.devbuild-scope li p { font-size: .77rem; }

.devbuild-faq .devbuild-heading { margin-bottom: 2.5rem; }
.devbuild-faq__list { padding-inline: var(--gutter); }
.devbuild-faq__list details { background: transparent; }
.devbuild-faq__list summary { min-height: 78px; padding-inline: 1.25rem; border: 1px solid var(--color-border-strong); margin-bottom: .7rem; }
.devbuild-faq__list details p { margin: -.7rem 0 .7rem; padding: 1.2rem 1.25rem; border: 1px solid var(--color-border-strong); border-top: 0; }
.devbuild-cta { padding-block: 0; background: #07101b; }
.devbuild-cta__panel { min-height: 280px; display: flex; align-items: center; justify-content: space-between; gap: 3rem; color: #fff; background: #6366f3; }
.devbuild-cta__panel h2 { max-width: 760px; margin-bottom: .65rem; font-size: clamp(2.35rem, 4.4vw, 4.7rem); }.devbuild-cta__panel p { max-width: 760px; margin: 0; color: #e5e6ff; }.devbuild-cta__panel .button { flex: 0 0 auto; color: #101426; background: #fff; box-shadow: none; }

html[data-theme="light"] .devbuild-console { box-shadow: 0 30px 70px rgba(20,30,50,.18); }
html[data-theme="light"] .devbuild-system-map > ol > li > i { border-color: #fff; }
html[data-theme="light"] .devbuild-solutions { background: #eef1f7; }
html[data-theme="light"] .devbuild-solution { background: #fff; }
html[data-theme="light"] .devbuild-process__rail > li > span { border-color: #f6f7fb; }
html[data-theme="light"] .devbuild-scope { background: #eef1f7; }

@media (max-width: 1180px) {
    .devbuild-hero__grid { grid-template-columns: 1fr; padding-bottom: 4rem; }
    .devbuild-hero__copy { max-width: 850px; }
    .devbuild-console { width: min(100%, 900px); margin-inline: auto; }
    .devbuild-system-map { grid-template-columns: 1fr; }
    .devbuild-system-map > aside { grid-template-columns: 170px 1fr; align-items: center; }
    .devbuild-system-map aside ul { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 900px) {
    .devbuild-architecture, .devbuild-solutions, .devbuild-standards, .devbuild-process, .devbuild-scope, .devbuild-faq { padding-block: 6rem; }
    .devbuild-heading, .devbuild-scope__grid { grid-template-columns: 1fr; gap: 2rem; }
    .devbuild-heading p { margin-left: 0; }
    .devbuild-system-map > ol { grid-template-columns: 1fr 1fr; }
    .devbuild-system-map > ol > li:nth-child(2) { border-right: 0; }.devbuild-system-map > ol > li:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }.devbuild-system-map > ol > li > i { display: none; }
    .devbuild-solutions__manifest { grid-template-columns: 1fr; grid-template-rows: auto; }
    .devbuild-solution--1, .devbuild-solution--4 { grid-row: auto; grid-column: auto; min-height: 390px; }
    .devbuild-solution { min-height: 320px; }
    .devbuild-standards__rail, .devbuild-process__rail { grid-template-columns: 1fr 1fr; }
    .devbuild-standards__rail > li:nth-child(3) { border-left: 0; }.devbuild-process__rail::before { display: none; }
    .devbuild-process__rail > li { margin-bottom: 3rem; padding-right: 1rem; }.devbuild-process__rail > li + li { padding-left: 0; }
    .devbuild-scope__grid { gap: 4rem; }
    .devbuild-cta__panel { min-height: 340px; align-items: flex-start; justify-content: center; flex-direction: column; }
}

@media (max-width: 600px) {
    .devbuild-hero { padding-top: 3.5rem; }
    .devbuild-hero__grid { min-height: auto; gap: 3rem; }
    .devbuild-hero__copy h1 { font-size: clamp(2.65rem, 12vw, 3.7rem); }
    .devbuild-hero__copy .button { width: 100%; }
    .devbuild-console__stages { grid-template-columns: 1fr 1fr; }.devbuild-console__stages::before { display: none; }.devbuild-console__stages button:nth-child(odd) { border-right: 1px solid #283348; }.devbuild-console__stages button:nth-child(-n+2) { border-bottom: 1px solid #283348; }
    .devbuild-console__workspace { min-height: 330px; grid-template-columns: 1fr; }.devbuild-console__workspace > aside, .devbuild-modules { display: none; }.devbuild-editor pre { min-height: 290px; padding: 1rem; font-size: .58rem; }
    .devbuild-architecture, .devbuild-solutions, .devbuild-standards, .devbuild-process, .devbuild-scope, .devbuild-faq { padding-block: 5rem; }
    .devbuild-system-map > ol { grid-template-columns: 1fr; }.devbuild-system-map > ol > li, .devbuild-system-map > ol > li:nth-child(2) { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--color-border); }.devbuild-system-map > aside { grid-template-columns: 1fr; }.devbuild-system-map aside ul { grid-template-columns: 1fr; }
    .devbuild-solution, .devbuild-solution--1, .devbuild-solution--4 { min-height: 410px; padding: 1.5rem; }.devbuild-solution--2 .devbuild-solution__specimen, .devbuild-solution--3 .devbuild-solution__specimen, .devbuild-solution--4 .devbuild-solution__specimen { top: auto; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; width: auto; height: 42%; }.devbuild-solution--2 h3, .devbuild-solution--2 p, .devbuild-solution--3 h3, .devbuild-solution--3 p, .devbuild-solution--4 h3, .devbuild-solution--4 p { max-width: none; }
    .devbuild-standards__rail, .devbuild-process__rail { grid-template-columns: 1fr; }.devbuild-standards__rail > li, .devbuild-standards__rail > li + li { min-height: 0; padding: 2rem 0; border-left: 0; }.devbuild-standards__rail p { min-height: 0; }.devbuild-standards__icon { margin-top: 2rem; }.devbuild-standards__rail pre { display: none; }
    .devbuild-process__rail > li { margin-bottom: 2rem; padding: 0; }.devbuild-process__rail p { min-height: 0; }.devbuild-process__sketch { height: 135px; }
    .devbuild-tree { margin-top: 2rem; }.devbuild-scope__grid > ol > li { grid-template-columns: 42px 1fr; gap: .75rem; }
    .devbuild-faq__list summary { min-height: 70px; padding-inline: 1rem; font-size: .86rem; }
    .devbuild-cta__panel { min-height: 390px; }.devbuild-cta__panel .button { width: 100%; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
html[data-theme="light"] {
    color-scheme: light;
    --color-bg: #f6f7fb;
    --color-bg-elevated: #ffffff;
    --color-surface: #ffffff;
    --color-surface-strong: #eef1f7;
    --color-text: #111827;
    --color-muted: #4b5563;
    --color-muted-deep: #6b7280;
    --color-border: #dfe3eb;
    --color-border-strong: #c8d0dc;
    --shadow-panel: 0 24px 64px rgba(26, 35, 53, .12);
}
body { margin: 0; overflow-x: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; }
button { color: inherit; }

:focus-visible { outline: 3px solid #a6b0ff; outline-offset: 4px; }
.shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 1200; padding: .8rem 1rem; background: var(--color-text); color: var(--color-bg); border-radius: var(--radius-sm); transform: translateY(-180%); transition: transform 180ms ease; }
.skip-link:focus { transform: translateY(0); }

html.is-preloading,
html.is-preloading body { overflow: hidden; }
.site-preloader { position: fixed; z-index: 20000; inset: 0; display: none; place-items: center; overflow: hidden; background: var(--color-bg); clip-path: inset(0); }
html.is-preloading .site-preloader { display: grid; }
.site-preloader::before { content: ""; position: absolute; inset: 0; opacity: .45; background: radial-gradient(circle at center, rgba(99, 102, 243, .14), transparent 29%); }
.site-preloader__streams { position: absolute; inset: 0; width: 100%; height: 100%; }
.site-preloader__stream { fill: none; stroke: #7073ff; stroke-width: 1.45; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .82; animation: preloaderStream 900ms cubic-bezier(.22, .8, .2, 1) forwards; }
.site-preloader__stream--two { animation-delay: 80ms; }
.site-preloader__stream--three { animation-delay: 140ms; }
.site-preloader__stream--four { animation-delay: 210ms; }
.site-preloader__stream--five { animation-delay: 260ms; }
.site-preloader__nodes { fill: #777aff; opacity: 0; animation: preloaderNodes 540ms ease 380ms forwards; }
.site-preloader__core { position: relative; z-index: 2; width: min(320px, 72vw); display: grid; justify-items: center; transform: translateY(1.2rem); }
.site-preloader__mark-wrap { position: relative; width: clamp(96px, 11vw, 132px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 1rem; filter: drop-shadow(0 18px 34px rgba(99, 102, 243, .22)); }
.site-preloader__mark-wrap img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.68) rotate(-8deg); animation: preloaderMark 520ms cubic-bezier(.2, .9, .25, 1.2) 420ms forwards; }
.site-preloader__mark-wrap span { position: absolute; z-index: 2; left: -30%; width: 160%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, #898bff 24%, #d95bff 50%, #898bff 76%, transparent); opacity: 0; transform: scaleX(.25); animation: preloaderShard 620ms cubic-bezier(.2, .8, .2, 1) forwards; }
.site-preloader__mark-wrap span:nth-child(1) { top: 22%; animation-delay: 220ms; }
.site-preloader__mark-wrap span:nth-child(2) { top: 36%; animation-delay: 290ms; }
.site-preloader__mark-wrap span:nth-child(3) { top: 50%; animation-delay: 350ms; }
.site-preloader__mark-wrap span:nth-child(4) { top: 64%; animation-delay: 410ms; }
.site-preloader__mark-wrap span:nth-child(5) { top: 78%; animation-delay: 470ms; }
.site-preloader__wordmark { width: 148px; height: 39px; overflow: hidden; opacity: 0; transform: translateY(12px); animation: preloaderWordmark 420ms ease 650ms forwards; }
.site-preloader__wordmark img { width: 200px; max-width: none; height: 52px; transform: translate(-52px, -6px); }
.site-preloader__progress { width: min(236px, 65vw); height: 3px; margin-top: 1.1rem; overflow: hidden; background: var(--color-border); border-radius: 999px; opacity: 0; animation: preloaderWordmark 280ms ease 700ms forwards; }
.site-preloader__progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #6366f3, #a26bf6); border-radius: inherit; transform-origin: left; animation: preloaderProgress 1s cubic-bezier(.2, .75, .25, 1) 360ms both; }
.site-preloader.is-leaving { pointer-events: none; animation: preloaderExit var(--preloader-exit-duration, 520ms) cubic-bezier(.76, 0, .24, 1) forwards; }
html[data-theme="light"] .site-preloader { background: #f6f7fb; }
html[data-theme="light"] .site-preloader::before { opacity: .7; background: radial-gradient(circle at center, rgba(99, 102, 243, .11), transparent 30%); }
html[data-theme="light"] .site-preloader__stream { stroke: #5f63f5; opacity: .66; }
html[data-theme="light"] .site-preloader__nodes { fill: #5f63f5; }
html[data-theme="light"] .site-preloader__mark-wrap { filter: drop-shadow(0 18px 32px rgba(86, 89, 210, .2)); }

@keyframes preloaderStream { to { stroke-dashoffset: 0; } }
@keyframes preloaderNodes { from { opacity: 0; transform: scale(.6); } to { opacity: .9; transform: scale(1); } }
@keyframes preloaderShard { 0% { opacity: 0; transform: scaleX(.25); } 50% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes preloaderMark { to { opacity: 1; transform: none; } }
@keyframes preloaderWordmark { to { opacity: 1; transform: none; } }
@keyframes preloaderProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes preloaderExit { 0% { clip-path: inset(0); } 100% { clip-path: inset(0 0 100% 0); } }

.section-grid { position: relative; isolation: isolate; border-bottom: 1px solid var(--color-border); overflow: hidden; }
.section-grid::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; background-image: linear-gradient(to right, transparent calc(100% - 1px), #1d2633 1px); background-size: clamp(160px, 16.66vw, 240px) 100%; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
h1 { font-size: clamp(3.35rem, 5.2vw, 5.45rem); line-height: 1.04; font-weight: 800; }
h2 { font-size: clamp(2.75rem, 4vw, 4.45rem); line-height: 1.08; font-weight: 750; }
h3 { font-size: 1.12rem; line-height: 1.35; }
p { color: var(--color-muted); }

.button { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: .9rem 1.65rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .98rem; font-weight: 700; line-height: 1.1; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
.button svg, .text-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--color-primary); color: var(--color-text); box-shadow: 0 12px 32px rgba(99, 102, 243, .22); }
.button--primary:hover { background: var(--color-action-hover); }
.button--secondary { border-color: var(--color-border-strong); background: rgba(2, 5, 10, .72); }
.button--secondary:hover { border-color: var(--color-muted); }
.text-link { display: inline-flex; align-items: center; gap: .65rem; color: #b8bbff; font-size: .93rem; font-weight: 650; }
.text-link:hover { color: var(--color-text); }

.site-header { position: relative; z-index: 100; height: 112px; background: rgba(2, 5, 10, .92); border-bottom: 1px solid rgba(36, 44, 56, .72); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 2rem; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; }
.brand img { width: 216px; height: auto; }
.brand__logo--light { display: none; }
.site-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.5rem, 3vw, 3.5rem); }
.site-nav__links, .site-nav__actions, .language-menu ul { margin: 0; padding: 0; list-style: none; }
.site-nav__links { display: flex; align-items: center; gap: clamp(1rem, 1.75vw, 2rem); }
.site-nav__links a { position: relative; display: block; padding: .6rem 0; color: #d8dbe0; font-size: .93rem; font-weight: 550; }
.site-nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--color-primary); transition: right 180ms ease; }
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--color-text); }
.site-nav__links a:hover::after, .site-nav__links a[aria-current="page"]::after { right: 0; }
.site-nav__actions { display: flex; align-items: center; gap: 1rem; }
.header-commerce-nav { display: flex; align-items: center; gap: .35rem; padding-right: .7rem; border-right: 1px solid var(--color-border); }
.header-commerce-nav a { position: relative; width: 42px; height: 42px; display: grid; place-items: center; color: #c9ced8; background: transparent; border: 1px solid transparent; border-radius: 10px; transition: color 180ms ease,background 180ms ease,border-color 180ms ease,transform 180ms ease; }
.header-commerce-nav a:hover,.header-commerce-nav a:focus-visible,.header-commerce-nav a[aria-current="page"] { color: #fff; background: rgba(99,102,243,.14); border-color: rgba(99,102,243,.42); transform: translateY(-2px); }
.header-commerce-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.header-commerce-nav__count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding-inline: 4px; color: #fff; background: #e11d48; border: 2px solid var(--color-bg); border-radius: 999px; font-size: .52rem; font-weight: 800; line-height: 1; }
.header-commerce-nav__count.is-empty { display: none; }
.theme-toggle { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; padding: 0; color: inherit; background: transparent; border: 1px solid var(--color-border-strong); border-radius: 50%; cursor: pointer; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.theme-toggle:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); }
.theme-toggle svg { grid-area: 1 / 1; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity 160ms ease, transform 220ms ease; }
.theme-toggle__moon { opacity: 0; transform: rotate(-25deg) scale(.7); }
html[data-theme="light"] .theme-toggle__sun { opacity: 0; transform: rotate(35deg) scale(.7); }
html[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: none; }
.header-cta { min-height: 52px; padding-inline: 1.45rem; }
.language-menu { position: relative; }
.language-menu > button { min-width: 64px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .35rem; border: 0; background: transparent; font-size: .9rem; cursor: pointer; }
.language-menu > button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.language-menu ul { position: absolute; top: calc(100% + .7rem); right: 0; min-width: 180px; overflow: hidden; background: #0c121d; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-panel); }
.language-menu li + li { border-top: 1px solid var(--color-border); }
.language-menu ul a { display: block; padding: .8rem 1rem; color: var(--color-muted); font-size: .85rem; }
.language-menu ul a:hover { color: var(--color-text); background: #151d2a; }
.nav-toggle { width: 48px; height: 48px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; background: transparent; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.nav-toggle > span:not(.sr-only) { width: 21px; height: 2px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
.nav-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:nth-of-type(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] > span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }

.status-message { position: relative; margin-block: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.status-message__copy { display: flex; gap: .75rem; }
.status-message__close { min-width: 40px; min-height: 40px; border: 0; background: transparent; cursor: pointer; }
.status-message--success { max-width: 820px; min-height: 340px; margin-block: 2rem; padding-block: 3rem; flex-direction: column; justify-content: center; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 20%, rgba(99, 102, 243, .2), transparent 45%), var(--color-surface); border-color: rgba(99, 102, 243, .65); box-shadow: 0 28px 80px rgba(0, 0, 0, .35); animation: successPanelIn 440ms cubic-bezier(.2, .85, .3, 1) both; }
.status-message--success::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(99, 102, 243, .08), transparent 45%); }
.status-message--success .status-message__copy { position: relative; display: grid; max-width: 610px; gap: .55rem; }
.status-message--success .status-message__copy strong { color: var(--color-text); font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.2; letter-spacing: -.035em; }
.status-message--success .status-message__copy span { color: var(--color-muted); }
.status-message--success .status-message__close { position: absolute; z-index: 2; top: 1rem; right: 1rem; border: 1px solid var(--color-border-strong); border-radius: 50%; }
.status-message__icon { position: relative; width: 108px; height: 108px; color: #fff; }
.status-message__icon::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 12px rgba(99, 102, 243, .11), 0 18px 48px rgba(99, 102, 243, .28); animation: successPulse 1.6s ease-out 500ms both; }
.status-message__icon svg { position: relative; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.status-message__icon circle { opacity: .28; }
.status-message__icon path { stroke-dasharray: 42; stroke-dashoffset: 42; animation: successCheck 520ms ease-out 260ms forwards; }

.hero { min-height: 850px; display: flex; align-items: center; }
.hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(600px, 1.18fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); padding-block: 4.5rem 5.5rem; }
.hero__copy { position: relative; z-index: 3; padding-top: 1rem; }
.hero__copy h1 { max-width: 700px; margin-bottom: 1.75rem; }
.hero__copy p { max-width: 650px; margin-bottom: 2.35rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.65; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.software-map { position: relative; width: 100%; min-height: 590px; }
.software-map::before { content: ""; position: absolute; inset: 8% 3% 4%; background: radial-gradient(circle at center, rgba(99, 102, 243, .1), transparent 58%); pointer-events: none; }
.software-map__connections { position: absolute; inset: 0; width: 100%; height: 100%; }
.software-map__connections path { fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-dasharray: 7 8; opacity: .72; animation: lineFlow 18s linear infinite; }
.software-map__hub { position: absolute; z-index: 4; left: 50%; top: 48%; width: 76px; height: 76px; transform: translate(-50%, -50%); display: grid; place-items: center; background: #11182a; border: 1px solid #7074ff; border-radius: var(--radius-md); box-shadow: 0 0 0 12px rgba(99, 102, 243, .05), 0 22px 50px rgba(0, 0, 0, .42); animation: hubFloat 4s ease-in-out infinite; }
.software-map__hub img { width: 51px; height: 51px; }
.software-node { position: absolute; z-index: 3; width: 29%; min-height: 98px; display: flex; align-items: center; gap: 1rem; padding: 1rem; text-align: left; background: linear-gradient(145deg, #121a28, #0b111b); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; box-shadow: 0 12px 38px rgba(0, 0, 0, .25); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.software-node:hover, .software-node.is-active { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 16px 42px rgba(31, 34, 110, .28); }
.software-node--1 { top: 8%; left: 7%; }.software-node--2 { top: 8%; right: 3%; }.software-node--3 { bottom: 12%; left: 7%; }.software-node--4 { bottom: 12%; right: 3%; }.software-node--5 { bottom: -1%; left: 36%; }
.software-node__icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; color: #a7aaff; background: rgba(99, 102, 243, .12); border: 1px solid rgba(99, 102, 243, .35); border-radius: 11px; }
.software-node__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.software-node > span:last-child { font-size: .96rem; font-weight: 700; line-height: 1.35; }

.what-section { min-height: 720px; display: flex; align-items: center; }
.what-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.42fr); gap: clamp(4rem, 7vw, 8rem); align-items: center; padding-block: 8rem; }
.what-intro h2 { max-width: 590px; margin-bottom: 2rem; }
.what-intro h2::first-letter { color: var(--color-primary); }
.what-intro__lead { color: #e7e9ed; font-size: 1.18rem; line-height: 1.65; }
.what-intro p { max-width: 590px; margin-bottom: 1.1rem; }
.capability-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.7rem, 3vw, 3.4rem); margin: 0; padding: 0; list-style: none; }
.capability-path::before { content: ""; position: absolute; left: 4%; right: 4%; top: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary) 10%, var(--color-primary) 90%, transparent); }
.capability-path li { position: relative; padding-top: 5.7rem; }
.capability-path li::before { content: ""; position: absolute; top: 26px; left: 26px; width: 16px; height: 16px; background: var(--color-bg); border: 4px solid var(--color-primary); border-radius: 50%; box-shadow: 0 0 0 6px rgba(99, 102, 243, .12); }
.capability-path__number { position: absolute; top: 0; left: 0; color: #a7aaff; font-size: .78rem; letter-spacing: .12em; }
.capability-path__icon { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: 1.7rem; color: #aeb1ff; background: linear-gradient(145deg, #151d2d, #0b111c); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.capability-path__icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.capability-path h3 { margin-bottom: .8rem; font-size: 1.35rem; }
.capability-path p { margin: 0; font-size: .94rem; line-height: 1.7; }

.catalogue-section { padding-block: 7.5rem 8.5rem; }
.catalogue-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3.5rem; }
.catalogue-heading h2 { margin-bottom: .8rem; }
.catalogue-heading p { max-width: 620px; margin: 0; font-size: 1.05rem; }
.catalogue-actions { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }
.catalogue-actions button { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: 1px solid var(--color-border-strong); border-radius: 50%; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease; }
.catalogue-actions button:first-child svg { transform: rotate(180deg); }
.catalogue-actions button:hover:not(:disabled) { border-color: var(--color-primary); background: rgba(99, 102, 243, .1); }
.catalogue-actions button:disabled { opacity: .3; cursor: default; }
.catalogue-actions button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.catalogue-actions .text-link { margin-left: .65rem; }
.product-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(390px, 31vw); gap: 1rem; padding: .2rem .2rem 1.4rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-color: var(--color-primary) #111722; scrollbar-width: thin; }
.product-rail:focus-visible { outline-offset: 8px; }
.catalogue-card { scroll-snap-align: start; background: linear-gradient(145deg, #101824, #090e17); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.catalogue-card:hover { transform: translateY(-5px); border-color: var(--color-primary); box-shadow: 0 24px 55px rgba(0, 0, 0, .32); }
.catalogue-card > a { min-height: 100%; display: flex; flex-direction: column; }
.catalogue-card__media { position: relative; width: 100%; aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(99, 102, 243, .33), rgba(13, 20, 34, .82) 60%); }
.catalogue-card__media::after { content: ""; position: absolute; inset: 0; border-bottom: 1px solid var(--color-border); pointer-events: none; }
.catalogue-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 360ms ease; }
.catalogue-card:hover .catalogue-card__media img { transform: scale(1.04); }
.catalogue-card__media > span { font-size: 4.5rem; font-weight: 800; color: #c1c3ff; }
.catalogue-card__content { position: relative; min-width: 0; min-height: 235px; flex: 1; padding: 2rem 1.8rem 4.5rem; }
.catalogue-card__content small { display: block; margin-bottom: .75rem; color: #aeb1ff; font-size: .73rem; letter-spacing: .09em; text-transform: uppercase; }
.catalogue-card__content h3 { margin-bottom: .75rem; font-size: 1.45rem; }
.catalogue-card__content p { display: -webkit-box; margin: 0; overflow: hidden; font-size: .9rem; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.catalogue-card__arrow { position: absolute; right: 1.4rem; bottom: 1.35rem; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; }
.catalogue-card__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.catalogue-empty { min-height: 180px; display: grid; place-items: center; padding: 2rem; text-align: center; color: var(--color-muted); background: linear-gradient(145deg, #0d1420, #080d15); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }

.workflow-section .shell { padding-block: 7rem; }
.workflow-heading { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; align-items: end; margin-bottom: 4.5rem; }
.workflow-heading h2 { max-width: 640px; margin-bottom: 0; }
.workflow-heading p { max-width: 590px; margin: 0; font-size: 1.08rem; }
.workflow-list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.workflow-list::before { content: ""; position: absolute; left: 4%; right: 4%; top: 57px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary) 8%, var(--color-primary) 92%, transparent); }
.workflow-list li { position: relative; padding: 0 2rem 0 0; }
.workflow-list__number { position: absolute; top: 39px; left: 54px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center; background: var(--color-primary); border-radius: 50%; font-size: .75rem; font-weight: 700; }
.workflow-list__icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 2.2rem; color: #aeb1ff; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 12px; }
.workflow-list__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.workflow-list h3 { margin-bottom: .6rem; font-size: 1.04rem; }
.workflow-list p { max-width: 245px; margin: 0; font-size: .9rem; line-height: 1.65; }

.services-section { min-height: 820px; display: flex; align-items: center; }
.services-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 7vw, 8rem); align-items: center; padding-block: 7rem; }
.services-copy h2 { max-width: 620px; margin-bottom: 2.4rem; }
.service-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; max-width: 640px; margin-bottom: 2.25rem; }
.service-links a { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--color-border); color: #e4e7eb; font-weight: 550; transition: color 180ms ease, border-color 180ms ease; }
.service-links a:hover { color: var(--color-text); border-color: var(--color-primary); }
.service-links svg { width: 19px; height: 19px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; }
.service-visual { overflow: hidden; min-height: 485px; background: linear-gradient(145deg, #111925, #080d15); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); }
.service-visual__bar { height: 58px; display: flex; align-items: center; gap: 7px; padding: 0 1.25rem; border-bottom: 1px solid var(--color-border); }
.service-visual__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ef6461; }.service-visual__bar i:nth-child(2) { background: #d7ad45; }.service-visual__bar i:nth-child(3) { background: #54ad72; }
.service-visual__bar span { width: 100px; height: 10px; margin-left: auto; border-radius: 8px; background: var(--color-primary); }
.service-visual__body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; padding: 2rem; }
.service-visual__copy { padding-top: 1rem; }.service-visual__copy span { display: block; height: 11px; margin-bottom: 1rem; border-radius: 8px; background: #344052; }.service-visual__copy span:nth-child(2) { width: 78%; }.service-visual__copy span:nth-child(3) { width: 63%; }
.service-visual__copy b { display: block; width: 105px; height: 34px; margin-top: 2rem; border-radius: 7px; background: var(--color-primary); }
.service-visual__media { min-height: 220px; position: relative; overflow: hidden; border-radius: var(--radius-sm); background: linear-gradient(145deg, #282987, var(--color-primary)); }
.service-visual__media::before { content: ""; position: absolute; width: 160px; height: 160px; top: 20%; right: 18%; border: 28px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.service-visual__blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0 2rem 2rem; }.service-visual__blocks span { height: 90px; background: #101826; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

.contact-section { min-height: 760px; display: flex; align-items: center; }
.contact-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(3rem, 7vw, 8rem); padding-block: 7rem; }
.contact-copy h2 { max-width: 620px; margin-bottom: 1.3rem; }.contact-copy > p { max-width: 520px; margin-bottom: 2.8rem; font-size: 1.08rem; }
.contact-methods { display: grid; max-width: 480px; }.contact-methods a { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 1.2rem; padding-block: 1.15rem; border-bottom: 1px solid var(--color-border); }
.contact-methods a > span:first-child { width: 50px; height: 50px; display: grid; place-items: center; color: #aeb1ff; border: 1px solid var(--color-border-strong); border-radius: 11px; }
.contact-methods svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }.contact-methods a > span:last-child { display: grid; }.contact-methods small { color: var(--color-muted-deep); font-size: .76rem; }.contact-methods strong { font-size: 1rem; }
.contact-form { display: grid; gap: 1.2rem; }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.5rem; }
.form-required-note { margin: 0; color: var(--color-muted-deep); font-size: .78rem; }.required-mark { color: #aeb1ff; font-weight: 800; }
.contact-form label, .newsletter-form label:not(.consent-field) { display: grid; gap: .5rem; color: #d6d9de; font-size: .86rem; font-weight: 650; }
.contact-form input, .contact-form select, .contact-form textarea, .newsletter-form input[type="text"], .newsletter-form input[type="email"] { width: 100%; color: var(--color-text); background: rgba(4, 8, 14, .72); border: 1px solid var(--color-border-strong); border-radius: 8px; transition: border-color 160ms ease, box-shadow 160ms ease; }
.contact-form input, .contact-form select, .newsletter-form input[type="text"], .newsletter-form input[type="email"] { min-height: 54px; padding: .75rem .9rem; }.contact-form textarea { min-height: 150px; padding: .9rem; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus, .newsletter-form input:focus { outline: none; border-color: #a8aaff; box-shadow: 0 0 0 3px rgba(99, 102, 243, .2); }.contact-form .button { justify-self: start; }
.recaptcha-notice { max-width: 580px; margin: -.35rem 0 0; color: var(--color-muted-deep); font-size: .72rem; line-height: 1.55; }
.recaptcha-notice a { color: #aeb0ff; text-decoration: underline; text-underline-offset: 2px; }
.recaptcha-notice a:hover { color: var(--color-text); }
.grecaptcha-badge { visibility: hidden !important; }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 2rem; color: var(--color-muted-deep); font-size: .78rem; }
.breadcrumbs a:hover { color: var(--color-text); }
.service-hero { min-height: 820px; padding-bottom: 2.5rem; }
.service-hero__grid { min-height: 650px; display: grid; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); align-items: center; gap: clamp(3rem, 6vw, 7rem); padding-block: 5rem 3.5rem; }
.service-page main .shell, .service-index-page main .shell { padding-left: max(var(--gutter), 5rem); }
.service-hero__copy { position: relative; z-index: 2; }
.service-hero__copy h1, .services-index-hero h1 { max-width: 780px; margin-bottom: 1.6rem; font-size: clamp(3.3rem, 5vw, 5.35rem); line-height: 1.04; }
.service-hero__copy > p, .services-index-hero__grid > div:first-child > p { max-width: 680px; margin-bottom: 2.25rem; font-size: clamp(1.05rem, 1.35vw, 1.22rem); }
.service-visual { position: relative; min-height: 470px; perspective: 1400px; }
.service-visual::after { content: ""; position: absolute; z-index: -1; inset: 20% 4% 2%; background: radial-gradient(ellipse, rgba(99, 102, 243, .22), transparent 64%); filter: blur(10px); }
.service-visual__sheet { position: absolute; top: 12%; width: 62%; height: 72%; border: 1px solid rgba(113, 118, 255, .55); border-radius: 12px; background: linear-gradient(145deg, rgba(22, 31, 48, .92), rgba(7, 12, 21, .84)); transform: rotateY(-8deg); }
.service-visual__sheet--back { right: 0; transform: translateX(9%) scale(.86) rotateY(-8deg); opacity: .52; }
.service-visual__sheet--middle { right: 7%; transform: translateX(3%) scale(.93) rotateY(-8deg); opacity: .72; }
.service-visual__frame { position: absolute; inset: 7% 8% 6% 0; overflow: hidden; border: 1px solid #6268b5; border-radius: 13px; background: #09101a; box-shadow: 0 35px 80px rgba(0, 0, 0, .46); transform: rotateY(-8deg) rotateX(1deg); }
.service-visual__bar { height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 15px; background: #101827; border-bottom: 1px solid var(--color-border); }
.service-visual__bar i { width: 8px; height: 8px; border-radius: 50%; background: #626a78; }.service-visual__bar i:first-child { background: #ff6a78; }.service-visual__bar i:nth-child(2) { background: #f5c553; }.service-visual__bar i:nth-child(3) { background: #5ed18b; }
.service-visual__bar span { margin-left: 12px; color: #777f8d; font-size: .66rem; }
.service-visual__canvas { min-height: 265px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 1rem; padding: 1.35rem; }
.service-visual__summary, .service-visual__focus { min-width: 0; padding: 1.2rem; border: 1px solid var(--color-border); border-radius: 8px; background: #0e1623; }
.service-visual__summary { display: grid; align-content: center; gap: .8rem; }.service-visual__summary strong { font-size: 1.1rem; }.service-visual__summary b { display: block; width: 82%; height: 6px; border-radius: 4px; background: #2a3444; }.service-visual__summary b:nth-of-type(2) { width: 58%; }.service-visual__summary a { width: max-content; margin-top: .25rem; padding: .55rem .8rem; color: #fff; background: var(--color-primary); border-radius: 6px; font-size: .65rem; font-weight: 700; }
.service-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #b4b6ff; background: rgba(99, 102, 243, .12); border: 1px solid rgba(99, 102, 243, .38); border-radius: 8px; }.service-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-visual__focus { display: grid; grid-template-rows: 1fr .62fr .4fr; gap: .8rem; background: linear-gradient(145deg, rgba(99, 102, 243, .15), #0b121d 55%); }.service-visual__focus span { display: block; border: 1px solid rgba(116, 121, 255, .22); border-radius: 6px; background: linear-gradient(135deg, #1f2b42, #111a29); }.service-visual__focus span:first-child { background: linear-gradient(135deg, #24345a, #121a29 60%, #312d76); }
.service-visual__signals { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); }.service-visual__signals span { min-height: 67px; display: grid; place-items: center; padding: .8rem; color: #c3c8d1; text-align: center; font-size: .68rem; }.service-visual__signals span + span { border-left: 1px solid var(--color-border); }
.service-switcher { display: flex; overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: rgba(5, 9, 15, .88); }
.service-switcher a { position: relative; flex: 1 0 155px; min-height: 82px; display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 1rem; color: var(--color-muted); text-align: center; font-size: .76rem; white-space: nowrap; }.service-switcher a + a { border-left: 1px solid var(--color-border); }.service-switcher a::after { content: ""; position: absolute; right: 1rem; bottom: 0; left: 1rem; height: 3px; background: var(--color-primary); transform: scaleX(0); transition: transform 180ms ease; }.service-switcher a:hover, .service-switcher a[aria-current="page"] { color: var(--color-text); background: rgba(99, 102, 243, .07); }.service-switcher a[aria-current="page"]::after { transform: scaleX(1); }.service-switcher svg { width: 22px; height: 22px; fill: none; stroke: #9ea2ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-outcomes__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); gap: clamp(4rem, 8vw, 9rem); padding-block: 8.5rem; }.service-outcomes h2 { max-width: 650px; }.service-outcomes__grid > div > p { max-width: 640px; font-size: 1.05rem; }
.outcome-list { position: relative; margin: 0; padding: 0; list-style: none; }.outcome-list::before { content: ""; position: absolute; top: 1.7rem; bottom: 1.7rem; left: 23px; width: 1px; background: linear-gradient(var(--color-primary), rgba(99, 102, 243, .18)); }.outcome-list li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1.4rem; padding: 0 0 2.15rem; }.outcome-list li:last-child { padding-bottom: 0; }.outcome-list > li > span { position: relative; z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; color: #bdbeff; background: #0b121e; border: 1px solid #5157af; border-radius: 9px; font-size: .72rem; font-weight: 700; }.outcome-list h3 { margin: .15rem 0 .35rem; font-size: 1.05rem; letter-spacing: -.02em; }.outcome-list p { margin: 0; font-size: .88rem; }
.service-scope { padding-block: 7.5rem; }.service-scope .shell:first-child { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }.service-scope h2 { max-width: 720px; }.service-scope .shell:first-child p { max-width: 520px; }
.scope-rail { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 4rem; padding-block: 0; list-style: none; }.scope-rail li { position: relative; min-width: 0; padding-right: 1rem; }.scope-rail li::after { content: ""; position: absolute; top: 23px; left: 54px; right: 8px; height: 1px; background: linear-gradient(90deg, var(--color-primary), var(--color-border-strong)); }.scope-rail li:last-child::after { display: none; }.scope-rail span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 1.2rem; color: #bfc1ff; background: #0b121e; border: 1px solid #5157af; border-radius: 9px; font-size: .73rem; font-weight: 700; }.scope-rail strong { display: block; max-width: 150px; font-size: .84rem; line-height: 1.4; }
.service-process { padding-block: 7.5rem; }.service-process__heading { display: grid; grid-template-columns: .8fr 1.2fr; align-items: end; gap: 4rem; }.service-process__heading p { max-width: 520px; margin-left: auto; }
.process-line { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 4.5rem; padding-block: 0; list-style: none; }.process-line li { position: relative; padding-right: 2.5rem; }.process-line li::after { content: ""; position: absolute; top: 23px; left: 58px; right: 14px; height: 1px; background: var(--color-border-strong); }.process-line li:last-child::after { display: none; }.process-line span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 1.2rem; color: #bec0ff; background: #0a111c; border: 1px solid #4b50a0; border-radius: 9px; font-weight: 750; }.process-line h3 { margin-bottom: .45rem; }.process-line p { margin: 0; font-size: .86rem; }
.service-faq { padding-block: 7.5rem; }.service-faq__grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem, 7vw, 8rem); }.service-faq__grid > div:first-child p { max-width: 360px; }.faq-list { border-top: 1px solid var(--color-border-strong); }.faq-list details { border-bottom: 1px solid var(--color-border-strong); }.faq-list summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; color: #eef0f4; font-size: .95rem; font-weight: 650; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 180ms ease; }.faq-list details[open] summary svg { transform: rotate(180deg); }.faq-list details p { max-width: 760px; margin: -.25rem 3rem 1.6rem 0; }
.service-cta { padding-block: 5rem; }.service-cta__panel { min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding-block: 3rem; background: linear-gradient(110deg, rgba(99, 102, 243, .08), rgba(99, 102, 243, .24)); border: 1px solid rgba(99, 102, 243, .52); border-radius: var(--radius-md); box-shadow: inset 0 1px rgba(255,255,255,.04); }.service-cta h2 { margin-bottom: .7rem; font-size: clamp(2rem, 3.5vw, 3.5rem); }.service-cta p { max-width: 700px; margin: 0; }.service-cta .button { flex: 0 0 auto; }
.services-index-hero { min-height: 720px; display: flex; align-items: center; }.services-index-hero__grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 5rem; padding-block: 5.5rem; }.services-index-hero .button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.services-orbit { position: relative; min-height: 500px; }.services-orbit::before, .services-orbit::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px solid rgba(99, 102, 243, .25); border-radius: 50%; transform: translate(-50%, -50%); }.services-orbit::before { width: 370px; height: 370px; }.services-orbit::after { width: 235px; height: 235px; }.services-orbit__hub { position: absolute; z-index: 2; top: 50%; left: 50%; width: 94px; height: 94px; display: grid; place-items: center; border: 1px solid #696eff; border-radius: 20px; background: #11192a; box-shadow: 0 0 0 16px rgba(99,102,243,.06), 0 24px 60px rgba(0,0,0,.4); transform: translate(-50%, -50%); }.services-orbit__hub img { width: 62px; }.services-orbit__node { position: absolute; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; color: #b4b6ff; background: #0c1421; border: 1px solid #42487d; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.3); }.services-orbit__node svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.services-orbit__node:nth-of-type(2) { top: 2%; left: 44%; }.services-orbit__node:nth-of-type(3) { top: 12%; right: 18%; }.services-orbit__node:nth-of-type(4) { top: 39%; right: 4%; }.services-orbit__node:nth-of-type(5) { right: 13%; bottom: 15%; }.services-orbit__node:nth-of-type(6) { bottom: 2%; left: 44%; }.services-orbit__node:nth-of-type(7) { bottom: 15%; left: 13%; }.services-orbit__node:nth-of-type(8) { top: 39%; left: 4%; }.services-orbit__node:nth-of-type(9) { top: 12%; left: 18%; }
.service-directory { padding-block: 8rem; }.service-directory__intro { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 4rem; margin-bottom: 4rem; }.service-directory__intro p { max-width: 560px; margin-left: auto; }.service-directory__list { display: grid; }.service-directory__row { display: grid; grid-template-columns: 54px 62px minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; min-height: 150px; border-top: 1px solid var(--color-border-strong); }.service-directory__row:last-child { border-bottom: 1px solid var(--color-border-strong); }.service-directory__number { color: var(--color-muted-deep); font-size: .75rem; }.service-directory__icon { width: 56px; height: 56px; display: grid; place-items: center; color: #afb1ff; border: 1px solid #454a82; border-radius: 10px; background: rgba(99,102,243,.07); }.service-directory__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.service-directory__row h3 { margin: 0 0 .35rem; font-size: 1.35rem; }.service-directory__row p { max-width: 760px; margin: 0; font-size: .88rem; }.service-directory__row > a { display: inline-flex; align-items: center; gap: .65rem; color: #bec0ff; font-size: .82rem; font-weight: 700; }.service-directory__row > a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 180ms ease; }.service-directory__row > a:hover svg { transform: translateX(4px); }

.site-footer { padding-block: 5.5rem 0; background: #03070c; }
.newsletter-form { --shell: 1800px; position: relative; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr); gap: clamp(3rem, 5vw, 5rem); margin-bottom: 4.5rem; padding-bottom: 4.8rem; border-bottom: 1px solid var(--color-border-strong); }
.newsletter-form__intro { min-width: 0; padding-right: clamp(1rem, 3vw, 3rem); border-right: 1px solid var(--color-border-strong); }
.newsletter-form__accent { display: block; width: 78px; height: 3px; margin-bottom: 2.3rem; background: var(--color-primary); }
.newsletter-form h2 { max-width: 650px; margin: 0 0 1.25rem; font-size: clamp(2.35rem, 3.4vw, 3.85rem); line-height: 1.02; letter-spacing: -.055em; }
.newsletter-form__intro p { max-width: 520px; margin: 0; color: var(--color-muted); font-size: .96rem; line-height: 1.75; }
.newsletter-form__body { min-width: 0; display: grid; align-content: start; gap: 1.35rem; padding-top: .15rem; }
.newsletter-form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
.newsletter-form input[type="text"], .newsletter-form input[type="email"] { min-height: 60px; padding: .8rem 1rem; border-radius: 6px; }
.newsletter-form .consent-field { margin: .2rem 0 0; font-size: .76rem; line-height: 1.55; }
.newsletter-form .button { min-height: 60px; width: 100%; gap: .9rem; border-radius: 6px; font-size: .94rem; }
.newsletter-form .button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }
.newsletter-form .button:hover svg { transform: translateX(4px); }
.footer-grid { display: grid; grid-template-columns: .72fr 1.58fr; gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; padding-bottom: 4.5rem; }
.footer-brand { display: grid; align-content: start; gap: 1.5rem; }.footer-brand p { max-width: 355px; margin: 0; font-size: .88rem; line-height: 1.75; }
.social-links { display: flex; flex-wrap: wrap; gap: .65rem; }.social-links a { width: 43px; height: 43px; display: grid; place-items: center; color: #dfe1e5; border: 1px solid var(--color-border-strong); border-radius: 9px; transition: color 180ms ease, border-color 180ms ease, transform 180ms ease; }.social-links a:hover { color: #fff; border-color: var(--color-primary); transform: translateY(-3px); }.social-links svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-links a:first-child svg { fill: currentColor; stroke: none; }
.footer-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }.footer-links div { display: grid; align-content: start; gap: .7rem; }.footer-links h2 { margin: 0 0 .4rem; font-size: .93rem; letter-spacing: -.02em; }.footer-links a { color: var(--color-muted); font-size: .82rem; }.footer-links a:hover { color: var(--color-text); }
.consent-field { display: grid; grid-template-columns: 18px 1fr; gap: .7rem; align-items: start; color: var(--color-muted); font-size: .68rem; line-height: 1.5; }.consent-field input { width: 18px; height: 18px; margin: .12rem 0 0; accent-color: var(--color-primary); }
.footer-copyright { padding-block: 1.55rem 2rem; border-top: 1px solid var(--color-border); }.footer-copyright p { margin: 0; padding-inline: 4.5rem; color: #989da6; font-size: .78rem; text-align: center; }

.floating-actions { position: fixed; z-index: 300; inset: auto 0 max(1rem, env(safe-area-inset-bottom)) 0; height: 54px; pointer-events: none; }
.floating-action { position: absolute; bottom: 0; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; box-shadow: 0 15px 35px rgba(0, 0, 0, .34); pointer-events: auto; transition: transform 180ms ease, opacity 180ms ease, background 180ms ease; }
.floating-action:hover { transform: translateY(-3px); }.floating-action svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.floating-action--telegram { left: max(1rem, env(safe-area-inset-left)); bottom: calc(100% + .75rem); color: #fff; background: #229ed9; border: 1px solid #55b9e7; }.floating-action--telegram:hover { background: #1687bd; }.floating-action--telegram svg { fill: currentColor; stroke: none; }
.floating-action--whatsapp { left: max(1rem, env(safe-area-inset-left)); color: #fff; background: #19b65b; border: 1px solid #42d57e; }.floating-action--whatsapp:hover { background: #109c4a; }.floating-action--whatsapp svg path:last-child { fill: currentColor; stroke: none; }
.floating-action--top { right: max(1rem, env(safe-area-inset-right)); color: #fff; background: #111a29; border: 1px solid var(--color-border-strong); opacity: 0; transform: translateY(10px); pointer-events: none; }.floating-action--top.is-visible { opacity: 1; transform: none; pointer-events: auto; }.floating-action--top:hover { background: var(--color-primary); }
.cursor-effect { position: fixed; z-index: 9999; top: 0; left: 0; width: 34px; height: 34px; opacity: 0; pointer-events: none; border: 1px solid rgba(174, 176, 255, .72); border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 243, .24) 0 16%, rgba(99, 102, 243, .08) 17% 45%, transparent 47%); box-shadow: 0 0 24px rgba(99, 102, 243, .2); transform: translate3d(-100px, -100px, 0); transition: width 160ms ease, height 160ms ease, opacity 160ms ease, border-color 160ms ease, background 160ms ease; will-change: transform; }
.cursor-effect.is-visible { opacity: 1; }
.cursor-effect.is-interactive { width: 48px; height: 48px; border-color: rgba(174, 176, 255, .95); background: radial-gradient(circle, rgba(99, 102, 243, .34) 0 12%, rgba(99, 102, 243, .11) 13% 45%, transparent 47%); }
.cursor-effect.is-pressed { width: 27px; height: 27px; background: rgba(99, 102, 243, .2); }

.motion-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 720ms cubic-bezier(.2, .7, .2, 1), transform 720ms cubic-bezier(.2, .7, .2, 1); }.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes lineFlow { to { stroke-dashoffset: -150; } }
@keyframes hubFloat { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-7px); } }
@keyframes successPanelIn { from { opacity: 0; transform: translateY(-16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes successCheck { to { stroke-dashoffset: 0; } }
@keyframes successPulse { from { box-shadow: 0 0 0 0 rgba(99, 102, 243, .35), 0 18px 48px rgba(99, 102, 243, .28); } to { box-shadow: 0 0 0 18px rgba(99, 102, 243, 0), 0 18px 48px rgba(99, 102, 243, .28); } }

@media (max-width: 1240px) {
    .site-header { height: 94px; }.nav-toggle { display: flex; margin-left: auto; }.site-nav { position: fixed; inset: 94px 0 0; display: none; align-content: start; padding: 2rem var(--gutter) 3rem; background: rgba(2, 5, 10, .985); overflow-y: auto; }.site-nav.is-open { display: grid; }.site-nav__links { display: grid; align-content: start; gap: 0; }.site-nav__links a { padding: 1rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--color-border); }.site-nav__links a::after { display: none; }.site-nav__actions { align-items: flex-start; justify-content: space-between; margin-top: 1.5rem; }.language-menu ul { left: 0; right: auto; }
    .hero__grid { grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr); }.software-node { width: 29%; padding: .8rem; }.software-node__icon { width: 40px; height: 40px; flex-basis: 40px; }
    .what-layout { grid-template-columns: 1fr; gap: 4.5rem; }.capability-path { max-width: 970px; }
    .service-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(450px, 1.1fr); gap: 3rem; }.service-visual { min-height: 420px; }.service-switcher a { flex-basis: 150px; }
    .service-outcomes__grid { grid-template-columns: .85fr 1.15fr; gap: 4rem; }.scope-rail { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.5rem; }.scope-rail li:nth-child(3)::after, .scope-rail li:last-child::after { display: none; }
    .services-index-hero__grid { gap: 3rem; }.service-directory__row { grid-template-columns: 42px 58px minmax(0, 1fr) auto; }
    .newsletter-form { grid-template-columns: minmax(320px, .85fr) minmax(480px, 1.15fr); gap: 2.5rem; }.newsletter-form__intro { padding-right: 2rem; }
    .footer-grid { grid-template-columns: .7fr 1.3fr; }
}

@media (min-width: 981px) and (max-height: 800px) { .hero { min-height: calc(100svh - 112px); }.hero__grid { padding-block: 2rem; }.software-map { min-height: min(540px, calc(100svh - 160px)); } }

@media (max-width: 980px) {
    .hero { min-height: auto; }.hero__grid { grid-template-columns: 1fr; padding-block: 5rem; }.hero__copy { max-width: 780px; }.software-map { width: min(100%, 760px); margin-inline: auto; }
    .what-section { min-height: auto; }.what-layout { padding-block: 6rem; }.catalogue-section { padding-block: 6rem; }.catalogue-heading { align-items: start; flex-direction: column; gap: 1.5rem; }.catalogue-actions { width: 100%; }.catalogue-actions .text-link { margin-left: auto; }.product-rail { grid-auto-columns: minmax(360px, 58vw); }
    .workflow-heading { grid-template-columns: 1fr; gap: 1.5rem; }.workflow-list { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; }.workflow-list::before { display: none; }.workflow-list__number { top: -10px; left: 46px; }
    .services-layout, .contact-layout { grid-template-columns: 1fr; padding-block: 6rem; }
    .service-hero { min-height: auto; }.service-hero__grid { min-height: auto; grid-template-columns: 1fr; padding-block: 5rem 3rem; }.service-hero__copy { max-width: 820px; }.service-visual { width: min(100%, 720px); min-height: 460px; margin-inline: auto; }
    .service-outcomes__grid, .service-faq__grid { grid-template-columns: 1fr; gap: 3.5rem; padding-block: 6rem; }.service-scope, .service-process, .service-faq, .service-directory { padding-block: 6rem; }.service-scope .shell:first-child, .service-cta__panel { align-items: flex-start; flex-direction: column; }.service-process__heading, .service-directory__intro { grid-template-columns: 1fr; gap: 1.5rem; }.service-process__heading p, .service-directory__intro p { margin-left: 0; }.process-line { grid-template-columns: 1fr 1fr; gap: 3.5rem 2rem; }.process-line li:nth-child(2)::after { display: none; }
    .services-index-hero__grid { grid-template-columns: 1fr; }.services-orbit { width: min(100%, 650px); margin-inline: auto; }.service-directory__row { grid-template-columns: 42px 58px minmax(0, 1fr); padding-block: 1.5rem; }.service-directory__row > a { grid-column: 3; }
    .newsletter-form { grid-template-columns: 1fr; gap: 2.8rem; }.newsletter-form__intro { max-width: 720px; padding-right: 0; border-right: 0; }.footer-grid { grid-template-columns: 1fr; }.footer-brand p { max-width: 560px; }
}

@media (max-width: 680px) {
    :root { --gutter: 1.25rem; }.site-header { height: 82px; }.site-nav { inset-block-start: 82px; }.brand img { width: 176px; }
    h2 { font-size: clamp(2.45rem, 11vw, 3.4rem); }.hero__grid { padding-block: 4rem 3rem; }.hero__copy h1 { font-size: clamp(2.75rem, 13vw, 4rem); }.hero__copy p { font-size: 1rem; }.hero__actions { display: grid; }.hero__actions .button { width: 100%; }
    .software-map { min-height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; padding-top: 1.5rem; }.software-map__connections, .software-map__hub { display: none; }.software-node { position: static; width: auto; min-height: 84px; transform: none !important; }.software-node--5 { grid-column: 1 / -1; }
    .what-layout, .workflow-section .shell, .services-layout, .contact-layout { padding-block: 4.5rem; }.what-layout { gap: 3rem; }.capability-path { grid-template-columns: 1fr; gap: 0; padding-left: 1.1rem; border-left: 1px solid var(--color-primary); }.capability-path::before { display: none; }.capability-path li { padding: 0 0 2.7rem 2rem; }.capability-path li:last-child { padding-bottom: 0; }.capability-path li::before { top: 18px; left: -1.62rem; width: 13px; height: 13px; border-width: 3px; }.capability-path__number { position: static; display: block; margin-bottom: .75rem; }.capability-path__icon { width: 58px; height: 58px; margin-bottom: 1rem; }.capability-path__icon svg { width: 28px; height: 28px; }
    .catalogue-section { padding-block: 4.5rem 5rem; }.catalogue-heading { margin-bottom: 2.4rem; }.catalogue-actions button { display: none; }.catalogue-actions .text-link { margin-left: 0; }.product-rail { grid-auto-columns: 84vw; gap: .85rem; margin-right: calc(var(--gutter) * -1); }.catalogue-card__content { min-height: 220px; }
    .workflow-heading { margin-bottom: 3rem; }.workflow-list { grid-template-columns: 1fr; gap: 0; padding-left: 1.2rem; border-left: 1px solid var(--color-primary); }.workflow-list li { padding: 0 0 2.5rem 2rem; }.workflow-list li:last-child { padding-bottom: 0; }.workflow-list__number { top: 15px; left: -2.05rem; }.workflow-list__icon { margin-bottom: 1.2rem; }
    .services-section, .contact-section { min-height: auto; }.service-links { grid-template-columns: 1fr; }.service-visual { min-height: 340px; }.service-visual__body { grid-template-columns: 1fr; padding: 1.25rem; }.service-visual__copy { display: none; }.service-visual__media { min-height: 175px; }.service-visual__blocks { padding: 0 1.25rem 1.25rem; gap: .6rem; }.service-visual__blocks span { height: 65px; }
    .field-grid { grid-template-columns: 1fr; }.contact-form .button { width: 100%; }
    .service-page main .shell, .service-index-page main .shell { padding-left: var(--gutter); }.breadcrumbs { margin-bottom: 1.4rem; }.service-hero__grid { padding-block: 4rem 2.5rem; }.service-hero__copy h1, .services-index-hero h1 { font-size: clamp(2.7rem, 12vw, 3.8rem); }.service-hero__copy > p, .services-index-hero__grid > div:first-child > p { font-size: 1rem; }.service-visual { min-height: 330px; }.service-visual__frame { inset: 3% 0 3% 0; transform: none; }.service-visual__sheet { display: none; }.service-visual__bar { height: 38px; }.service-visual__canvas { min-height: 220px; padding: .8rem; gap: .65rem; }.service-visual__summary, .service-visual__focus { padding: .8rem; }.service-visual__summary strong { font-size: .82rem; }.service-visual__summary a { font-size: .55rem; }.service-visual__signals span { min-height: 58px; padding: .55rem; font-size: .57rem; }.service-switcher { margin-right: calc(var(--gutter) * -1); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }.service-switcher a { flex-basis: 145px; min-height: 72px; }
    .service-outcomes__grid { padding-block: 4.75rem; }.outcome-list li { gap: 1rem; }.service-scope, .service-process, .service-faq, .service-directory { padding-block: 4.75rem; }.service-scope .shell:first-child { display: grid; }.scope-rail { grid-template-columns: 1fr 1fr; gap: 2.25rem 1rem; margin-top: 2.5rem; }.scope-rail li::after { display: none; }.scope-rail strong { font-size: .78rem; }.process-line { grid-template-columns: 1fr; gap: 0; margin-top: 3rem; padding-left: calc(var(--gutter) + 1.2rem); border-left: 1px solid rgba(99,102,243,.45); }.process-line li { padding: 0 0 2.5rem 1.5rem; }.process-line li:last-child { padding-bottom: 0; }.process-line li::after { display: none; }.process-line span { margin-left: -2.95rem; }.service-faq__grid { padding-block: 0; }.faq-list summary { min-height: 68px; font-size: .88rem; }.service-cta { padding-block: 3.5rem; }.service-cta__panel { min-height: 0; gap: 2rem; }.service-cta .button { width: 100%; }
    .services-index-hero { min-height: auto; }.services-index-hero__grid { gap: 2rem; padding-block: 4rem; }.services-orbit { min-height: 350px; transform: scale(.88); }.services-orbit::before { width: 290px; height: 290px; }.services-orbit::after { width: 185px; height: 185px; }.services-orbit__hub { width: 78px; height: 78px; }.services-orbit__hub img { width: 52px; }.services-orbit__node { width: 50px; height: 50px; }.service-directory__intro { margin-bottom: 2.5rem; }.service-directory__row { grid-template-columns: 38px 48px minmax(0, 1fr); gap: 1rem; min-height: 0; padding-block: 1.6rem; }.service-directory__icon { width: 46px; height: 46px; }.service-directory__row h3 { font-size: 1.1rem; }.service-directory__row p { font-size: .78rem; }.service-directory__row > a { grid-column: 3; }
    .site-footer { padding-top: 4.5rem; }.newsletter-form { gap: 2.4rem; margin-bottom: 3.8rem; padding-bottom: 3.8rem; }.newsletter-form__accent { margin-bottom: 1.7rem; }.newsletter-form h2 { font-size: clamp(2.35rem, 11vw, 3.3rem); }.newsletter-form__fields { grid-template-columns: 1fr; }.newsletter-form .button { width: 100%; }.footer-grid { gap: 3.5rem; }.footer-links { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }.footer-copyright p { padding-inline: 4.5rem; }.status-message__copy { display: grid; gap: .2rem; }.status-message--success { min-height: 300px; margin-block: 1rem; padding-block: 2.5rem; }.status-message__icon { width: 92px; height: 92px; }.floating-actions { bottom: .8rem; height: 50px; }.floating-action { width: 50px; height: 50px; }.floating-action--telegram, .floating-action--whatsapp { left: .8rem; }.floating-action--top { right: .8rem; }
}

@media (max-width: 420px) { .brand img { width: 156px; }.nav-toggle { width: 44px; height: 44px; }.software-map { grid-template-columns: 1fr; }.software-node--5 { grid-column: auto; }.footer-links { grid-template-columns: 1fr; } }

/* Light theme keeps the same brand hierarchy while lifting content onto calm neutral surfaces. */
html[data-theme="light"] .brand__logo--dark { display: none; }
html[data-theme="light"] .brand__logo--light { display: block; }
html[data-theme="light"] .section-grid::before { background-image: linear-gradient(to right, transparent calc(100% - 1px), #d7dde7 1px); }
html[data-theme="light"] .button--primary { color: #fff; }
html[data-theme="light"] .button--secondary { background: rgba(255, 255, 255, .82); }
html[data-theme="light"] .text-link,
html[data-theme="light"] .catalogue-card__content small,
html[data-theme="light"] .service-directory__row > a,
html[data-theme="light"] .recaptcha-notice a { color: #4f46e5; }
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, .94); border-bottom-color: rgba(200, 208, 220, .86); box-shadow: 0 10px 35px rgba(29, 39, 58, .05); }
html[data-theme="light"] .site-nav__links a { color: #374151; }
html[data-theme="light"] .header-commerce-nav a { color: #4b5563; }
html[data-theme="light"] .header-commerce-nav a:hover,html[data-theme="light"] .header-commerce-nav a:focus-visible,html[data-theme="light"] .header-commerce-nav a[aria-current="page"] { color: #3438d4; }
html[data-theme="light"] .header-commerce-nav__count { border-color: #fff; }
html[data-theme="light"] .language-menu ul { background: #fff; }
html[data-theme="light"] .language-menu ul a:hover { background: #eef1f7; }
html[data-theme="light"] .status-message,
html[data-theme="light"] .software-node,
html[data-theme="light"] .capability-path__icon,
html[data-theme="light"] .catalogue-card,
html[data-theme="light"] .catalogue-empty,
html[data-theme="light"] .workflow-list__icon { background: #fff; }
html[data-theme="light"] .software-map__hub { background: #f0f1ff; box-shadow: 0 0 0 12px rgba(99, 102, 243, .07), 0 22px 50px rgba(31, 41, 55, .12); }
html[data-theme="light"] .software-node { box-shadow: 0 12px 38px rgba(31, 41, 55, .08); }
html[data-theme="light"] .software-node:hover,
html[data-theme="light"] .software-node.is-active { box-shadow: 0 16px 42px rgba(99, 102, 243, .16); }
html[data-theme="light"] .what-intro__lead,
html[data-theme="light"] .service-links a,
html[data-theme="light"] .contact-form label,
html[data-theme="light"] .newsletter-form label:not(.consent-field),
html[data-theme="light"] .faq-list summary { color: #1f2937; }
html[data-theme="light"] .capability-path li::before { background: var(--color-bg); }
html[data-theme="light"] .capability-path__icon,
html[data-theme="light"] .workflow-list__icon,
html[data-theme="light"] .contact-methods a > span:first-child,
html[data-theme="light"] .service-directory__icon { color: #5155d9; background: #f3f4ff; border-color: #b8baf2; }
html[data-theme="light"] .product-rail { scrollbar-color: var(--color-primary) #e5e7eb; }
html[data-theme="light"] .catalogue-card { box-shadow: 0 16px 42px rgba(31, 41, 55, .07); }
html[data-theme="light"] .catalogue-card:hover { box-shadow: 0 24px 55px rgba(31, 41, 55, .13); }
html[data-theme="light"] .catalogue-card__media { background: radial-gradient(circle at 50% 45%, rgba(99, 102, 243, .26), rgba(226, 229, 247, .9) 65%); }
html[data-theme="light"] .catalogue-card__media > span { color: #5558df; }
html[data-theme="light"] .workflow-list__number { color: #fff; }
html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form select,
html[data-theme="light"] .contact-form textarea,
html[data-theme="light"] .newsletter-form input[type="text"],
html[data-theme="light"] .newsletter-form input[type="email"] { background: #fff; }
html[data-theme="light"] .service-visual { color: #fff; --color-border: #283446; --color-border-strong: #465266; }
html[data-theme="light"] .service-switcher { background: rgba(255, 255, 255, .92); }
html[data-theme="light"] .service-switcher a:hover,
html[data-theme="light"] .service-switcher a[aria-current="page"] { background: rgba(99, 102, 243, .08); }
html[data-theme="light"] .outcome-list > li > span,
html[data-theme="light"] .scope-rail span,
html[data-theme="light"] .process-line span { color: #4549ca; background: #f4f4ff; border-color: #aeb1ec; }
html[data-theme="light"] .service-cta__panel { background: linear-gradient(110deg, rgba(99, 102, 243, .06), rgba(99, 102, 243, .17)); box-shadow: inset 0 1px rgba(255, 255, 255, .65); }
html[data-theme="light"] .services-orbit__hub,
html[data-theme="light"] .services-orbit__node { color: #4f53d1; background: #fff; border-color: #aeb1ec; box-shadow: 0 16px 38px rgba(31, 41, 55, .12); }
html[data-theme="light"] .site-footer { background: #edf0f6; }
html[data-theme="light"] .social-links a { color: #374151; }
html[data-theme="light"] .social-links a:hover { color: #fff; }
html[data-theme="light"] .footer-copyright p { color: #5f6877; }
html[data-theme="light"] .floating-action--top { color: #283244; background: #fff; }
html[data-theme="light"] .cursor-effect { border-color: rgba(79, 70, 229, .58); }

@media (max-width: 1240px) {
    html[data-theme="light"] .site-nav { background: #fff; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }.motion-ready [data-reveal] { opacity: 1; transform: none; } }
@media (hover: none), (pointer: coarse) { .cursor-effect { display: none; } }

/* Distinct service experiences */
.service-experience { --service-accent: var(--color-primary); }
.service-experience main { overflow: clip; }
.service-experience main .shell { padding-left: var(--gutter); }
.service-experience main .experience-switcher { padding-inline: 0; }
.experience-hero-copy { position: relative; z-index: 2; }
.experience-hero-copy h1 { max-width: 760px; margin-bottom: 1.6rem; font-size: clamp(3.25rem, 5vw, 5.35rem); line-height: 1.03; }
.experience-hero-copy > p { max-width: 660px; margin-bottom: 2.2rem; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.experience-window-bar { min-height: 44px; display: flex; align-items: center; gap: 7px; padding: .7rem 1rem; color: #8891a0; background: #0c1320; border-bottom: 1px solid #293242; font: 500 .67rem/1 var(--font-sans); }
.experience-window-bar i { width: 8px; height: 8px; border-radius: 50%; background: #667080; }.experience-window-bar i:first-child { background: #ff6672; }.experience-window-bar i:nth-child(2) { background: #f2c354; }.experience-window-bar i:nth-child(3) { background: #59ce86; }.experience-window-bar span { margin-left: .55rem; }
.experience-switcher { --service-switcher-accent: #6366f3; width: min(calc(100% - (var(--gutter) * 2)), calc(var(--shell) - (var(--gutter) * 2))); margin: 2rem auto 0; padding-inline: 0; display: flex; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--color-border-strong); border-radius: 10px; background: color-mix(in srgb, var(--color-bg-elevated) 94%, transparent); box-shadow: 0 18px 48px rgba(0,0,0,.12); scrollbar-width: thin; scroll-snap-type: x proximity; }
.experience-switcher a { position: relative; flex: 1 0 138px; min-width: 0; min-height: 80px; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .8rem .5rem; color: var(--color-muted); white-space: nowrap; scroll-snap-align: center; font-size: .69rem; font-weight: 650; }
.experience-switcher__label { min-width: 0; line-height: 1.2; text-align: center; white-space: normal; }
.experience-switcher a + a { border-left: 1px solid var(--color-border); }
.experience-switcher a::after { content: ""; position: absolute; right: 1rem; bottom: 0; left: 1rem; height: 3px; background: var(--service-switcher-accent); transform: scaleX(0); transition: transform 180ms ease; }
.experience-switcher a:hover, .experience-switcher a:focus-visible, .experience-switcher a[aria-current="page"] { color: var(--color-text); background: color-mix(in srgb, var(--service-switcher-accent) 8%, transparent); }
.experience-switcher a:focus-visible { z-index: 1; outline: 2px solid var(--service-switcher-accent); outline-offset: -3px; }
.experience-switcher a[aria-current="page"]::after { transform: scaleX(1); }
.experience-switcher svg { width: 20px; height: 20px; fill: none; stroke: var(--service-switcher-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.experience-process svg, .commerce-capabilities svg, .maintenance-coverage svg, .email-quality svg { width: 22px; height: 22px; fill: none; stroke: var(--service-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.experience-section-heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); align-items: end; gap: 4rem; margin-bottom: 4rem; }.experience-section-heading h2, .experience-faq h2 { max-width: 760px; }.experience-section-heading p { max-width: 580px; margin: 0 0 .5rem auto; }
.experience-process { padding-block: 7.5rem; }.experience-process__rail { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding-top: 1rem; list-style: none; }.experience-process__rail li { position: relative; padding-right: 2rem; }.experience-process__rail li::after { content: ""; position: absolute; top: 23px; left: 58px; right: 14px; height: 1px; background: linear-gradient(90deg, var(--service-accent), var(--color-border)); }.experience-process__rail li:last-child::after { display: none; }.experience-process__rail > li > span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 1.2rem; color: #fff; background: var(--service-accent); border-radius: 8px; font-size: .72rem; font-weight: 750; }.experience-process__rail h3 { margin-bottom: .35rem; }.experience-process__rail p { margin: 0; font-size: .84rem; }
.experience-faq { padding-block: 7.5rem; }.experience-faq__grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(3rem, 7vw, 8rem); }.experience-faq__grid > div:first-child p { max-width: 360px; }
.experience-cta { padding-block: 5rem; }.experience-cta__panel { min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding-block: 3rem; background: linear-gradient(110deg, color-mix(in srgb, var(--service-accent) 8%, transparent), color-mix(in srgb, var(--service-accent) 24%, transparent)); border: 1px solid color-mix(in srgb, var(--service-accent) 58%, var(--color-border)); border-radius: 14px; }.experience-cta h2 { margin-bottom: .65rem; font-size: clamp(2rem, 3.5vw, 3.5rem); }.experience-cta p { max-width: 700px; margin: 0; }.experience-cta .button { flex: 0 0 auto; }

/* Web design: responsive studio canvas and editorial gallery. */
.service-experience--web-design { --service-accent: #7779ff; }
.design-hero { padding: 5rem 0 2.5rem; }.design-hero__grid { min-height: 610px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(3rem, 6vw, 7rem); }
.design-canvas { position: relative; min-height: 500px; }.design-canvas::before { content: ""; position: absolute; inset: 5% 0; background: radial-gradient(circle, rgba(99,102,243,.18), transparent 58%); }
.design-canvas__ruler { position: absolute; top: 0; right: 3%; left: 6%; display: flex; justify-content: space-between; color: var(--color-muted-deep); font: .62rem/1 monospace; border-top: 1px solid var(--color-border-strong); }.design-canvas__ruler span { padding-top: .65rem; border-left: 1px solid var(--color-border-strong); }
.design-canvas__window { position: absolute; inset: 11% 5% 13% 3%; overflow: hidden; background: #080f19; border: 1px solid #5960a4; border-radius: 10px; box-shadow: 0 30px 75px rgba(0,0,0,.34); }.design-canvas__layout { position: relative; height: calc(100% - 44px); display: grid; align-content: center; gap: .9rem; padding: 3rem; background: linear-gradient(105deg, #0e1726 0 52%, #242d48 52%); }.design-canvas__layout b { max-width: 260px; color: #fff; font-size: 2rem; line-height: 1.06; }.design-canvas__layout em { color: #8a8cff; font-style: normal; }.design-canvas__layout span { width: 220px; height: 7px; background: #344055; border-radius: 8px; }.design-canvas__layout span:nth-of-type(2) { width: 160px; }.design-canvas__layout button { width: max-content; margin-top: .4rem; padding: .7rem 1rem; color: #fff; background: var(--service-accent); border: 0; border-radius: 6px; font-size: .68rem; }.design-canvas__selection { position: absolute; top: 28%; left: 8%; width: 290px; height: 126px; border: 1px dashed #b1b2ff; }.design-canvas__selection i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid #5458da; }.design-canvas__selection i:nth-child(1) { inset: -4px auto auto -4px; }.design-canvas__selection i:nth-child(2) { inset: -4px -4px auto auto; }.design-canvas__selection i:nth-child(3) { inset: auto auto -4px -4px; }.design-canvas__selection i:nth-child(4) { inset: auto -4px -4px auto; }
.design-canvas__type { position: absolute; z-index: 3; top: 5%; right: 0; width: 185px; display: grid; padding: 1.2rem; color: #fff; background: #101825; border: 1px solid #414b63; border-radius: 9px; box-shadow: 0 16px 38px rgba(0,0,0,.35); }.design-canvas__type strong { font-size: 2.1rem; }.design-canvas__type span, .design-canvas__type small { color: #aeb4c0; font-size: .65rem; }.design-canvas__viewports { position: absolute; right: 8%; bottom: 0; left: 9%; display: flex; justify-content: center; gap: 2.5rem; }.design-canvas__viewports span { display: grid; justify-items: center; gap: .45rem; color: var(--color-muted); font-size: .62rem; }.design-canvas__viewports i { width: 35px; height: 25px; border: 1px solid #7a7df4; border-radius: 3px; }.design-canvas__viewports span:nth-child(2) i { width: 19px; }.design-canvas__viewports span:nth-child(3) i { width: 12px; }
.design-principles, .design-types, .design-blueprint { padding-block: 8rem; }.design-principles__rail { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding-top: 1.5rem; list-style: none; border-top: 1px solid var(--color-border-strong); }.design-principles__rail li { min-height: 250px; padding: 2rem 2rem 0 0; }.design-principles__rail li + li { padding-left: 2rem; border-left: 1px solid var(--color-border-strong); }.design-principles__rail > li > span { color: var(--service-accent); font: .72rem/1 monospace; }.design-principles__rail h3 { margin-top: 4rem; }.design-principles__rail p { font-size: .86rem; }
.design-types__intro { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 4rem; margin-bottom: 4rem; }.design-types__intro p { margin-left: auto; max-width: 540px; }.design-types__gallery { display: grid; grid-template-columns: 1.2fr .85fr .68fr 1fr; gap: 1.2rem; align-items: end; }.design-type__screen { position: relative; height: 310px; margin-bottom: 1.4rem; overflow: hidden; background: linear-gradient(145deg, #1b2540, #0a101a); border: 1px solid #3c4760; border-radius: 9px; }.design-type--2 .design-type__screen { height: 390px; }.design-type--3 .design-type__screen { height: 450px; border-radius: 24px; }.design-type--4 .design-type__screen { height: 340px; }.design-type__screen::before { content: ""; position: absolute; inset: 17% 10% 46%; background: linear-gradient(135deg, #6570f2, #b45eed); border-radius: 5px; }.design-type__screen span { position: absolute; left: 10%; width: 60%; height: 7px; background: #536078; border-radius: 7px; }.design-type__screen span:nth-child(1) { top: 61%; }.design-type__screen span:nth-child(2) { top: 68%; width: 45%; }.design-type__screen span:nth-child(3) { top: 80%; width: 30%; height: 27px; background: var(--service-accent); }.design-type h3 { margin-bottom: .4rem; }.design-type p { font-size: .82rem; }
.design-blueprint__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6rem; }.design-blueprint ol { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }.design-blueprint li { min-height: 92px; display: flex; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--color-border-strong); }.design-blueprint li:nth-child(odd) { border-right: 1px solid var(--color-border-strong); }.design-blueprint li span { color: var(--service-accent); font: .7rem/1 monospace; }

/* Web development: terminal and architecture rails. */
.service-experience--web-development { --service-accent: #5b77ff; }
.development-hero { padding: 5rem 0 2.5rem; background-image: linear-gradient(rgba(91,119,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(91,119,255,.05) 1px, transparent 1px); background-size: 72px 72px; }.development-hero__grid { min-height: 610px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 5rem; }.development-terminal { overflow: hidden; background: #060c15; border: 1px solid #43538c; border-radius: 8px; box-shadow: 0 30px 75px rgba(0,0,0,.42); }.development-terminal pre { min-height: 380px; margin: 0; padding: 3rem; color: #dbe2ed; font: 500 clamp(.74rem, 1vw, .92rem)/2.1 monospace; }.development-terminal pre span { color: #56647a; }.development-terminal pre b { color: #7d8ba3; font-weight: 500; }.development-terminal pre em { color: #75deb0; font-style: normal; }.development-terminal pre i { color: #8798ff; font-style: normal; }.development-terminal pre u { display: inline-block; width: 8px; height: 1.15em; margin-left: 4px; vertical-align: middle; background: #fff; animation: terminalBlink 900ms steps(2) infinite; }
.development-architecture, .development-solutions, .development-stack { padding-block: 8rem; }.development-architecture__heading { display: grid; grid-template-columns: 1fr .85fr; gap: 5rem; align-items: end; margin-bottom: 4rem; }.development-architecture__heading p { max-width: 550px; margin-left: auto; }.architecture-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }.architecture-flow li { position: relative; text-align: center; padding-inline: 1.5rem; }.architecture-flow > li > span { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 1.2rem; color: #b9c3ff; border: 1px solid #5264b2; background: #0a1220; }.architecture-flow svg { width: 34px; height: 34px; }.architecture-flow p { font-size: .8rem; }.architecture-flow > li > i { position: absolute; top: 37px; left: calc(50% + 38px); width: calc(100% - 76px); height: 1px; background: linear-gradient(90deg, var(--service-accent), transparent); }.architecture-flow > li > i::after { content: ""; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--service-accent); box-shadow: 0 0 14px var(--service-accent); }
.development-solutions__rail { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }.development-solutions__rail li { display: grid; grid-template-columns: 90px 1fr; gap: 2rem; min-height: 145px; align-items: center; border-bottom: 1px solid var(--color-border-strong); }.development-solutions__rail > li > span { color: var(--service-accent); font: 1rem/1 monospace; }.development-solutions__rail h3 { font-size: 1.45rem; margin-bottom: .3rem; }.development-solutions__rail p { max-width: 680px; margin: 0; }
.development-stack__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 5rem; }.technology-matrix { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #46558f; border-left: 1px solid #46558f; }.technology-matrix span { min-height: 140px; display: grid; align-content: center; gap: .5rem; padding: 1.5rem; border-right: 1px solid #46558f; border-bottom: 1px solid #46558f; }.technology-matrix b { font: 700 1rem/1.2 monospace; }.technology-matrix small { color: var(--color-muted); }

/* WordPress: editorial block workspace. */
.service-experience--wordpress { --service-accent: #6366f3; }
.wordpress-hero { padding: 5rem 0 2.5rem; }.wordpress-hero__grid { min-height: 610px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 5rem; }.wordpress-editor { min-height: 480px; display: grid; grid-template-columns: 150px 1fr; overflow: visible; color: #172033; background: #fff; border: 1px solid #cbd3df; border-radius: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.22); }.wordpress-editor > aside { display: grid; align-content: start; gap: .45rem; padding: 1.4rem 1rem; color: #d8e7f8; background: #111b2a; }.wordpress-editor > aside b { margin-bottom: 1rem; color: #fff; }.wordpress-editor > aside span, .wordpress-editor > aside strong { padding: .55rem .65rem; font-size: .72rem; }.wordpress-editor > aside strong { margin-inline: -.25rem; color: #fff; background: #2879c8; border-radius: 5px; }.wordpress-editor > div { position: relative; min-width: 0; }.wordpress-editor__toolbar { display: flex; align-items: center; min-height: 50px; padding: .6rem 1rem; color: #4b5563; border-bottom: 1px solid #e0e4eb; font-size: .75rem; }.wordpress-editor__toolbar button { margin-left: auto; padding: .55rem .8rem; color: #fff; background: #1684e5; border: 0; border-radius: 5px; }.wordpress-editor__page { width: 75%; margin: 2.5rem auto; padding: 1.5rem; border: 1px solid #b9c3d0; box-shadow: 0 12px 24px rgba(30,40,60,.08); }.wordpress-editor__page h3 { max-width: 260px; font-size: 1.55rem; }.wordpress-editor__page div { height: 120px; margin-block: 1rem; background: linear-gradient(135deg, #ccd9ee, #7ca5d5); }.wordpress-editor__page p { color: #536071; font-size: .74rem; }.wordpress-editor__notice { position: absolute; right: -2rem; bottom: 2rem; padding: .9rem 1rem; color: #226a40; background: #effcf4; border: 1px solid #b8e7c9; border-radius: 7px; box-shadow: 0 12px 28px rgba(30,40,60,.12); font-size: .72rem; }
.wordpress-intro, .wordpress-capabilities, .wordpress-modes { padding-block: 8rem; }.wordpress-intro__grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 6rem; }.wordpress-intro__grid p { max-width: 640px; font-size: 1.05rem; }.wordpress-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.wordpress-blocks span { min-height: 120px; display: grid; place-items: center; color: #31547a; background: #f7faff; border: 1px solid #cbd8e7; border-radius: 8px; font-size: .82rem; font-weight: 700; box-shadow: 0 16px 35px rgba(20,45,75,.08); }
.wordpress-capability-list { display: grid; }.wordpress-capability-list article { display: grid; grid-template-columns: 64px 1fr 280px; align-items: center; gap: 2rem; min-height: 180px; border-top: 1px solid var(--color-border-strong); }.wordpress-capability-list article:last-child { border-bottom: 1px solid var(--color-border-strong); }.wordpress-capability-list article > span { width: 54px; height: 54px; display: grid; place-items: center; color: var(--service-accent); background: color-mix(in srgb, var(--service-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--service-accent) 45%, var(--color-border)); border-radius: 10px; }.wordpress-capability-list svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }.wordpress-capability-list small { color: var(--service-accent); font: .7rem/1 monospace; }.wordpress-capability-list h3 { margin: .5rem 0 .35rem; }.wordpress-capability-list p { max-width: 640px; margin: 0; font-size: .84rem; }.wordpress-capability-list__preview { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 1rem; background: #f7faff; border: 1px solid #ced8e5; border-radius: 8px; }.wordpress-capability-list__preview i { min-height: 28px; background: #d8e2ee; border-radius: 3px; }.wordpress-capability-list__preview i:first-child { grid-column: 1 / -1; background: #8eb8ea; }
.wordpress-modes__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 5rem; }.wordpress-modes__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }.wordpress-modes__choices article { padding: 2rem; background: color-mix(in srgb, var(--service-accent) 7%, var(--color-bg-elevated)); border: 1px solid color-mix(in srgb, var(--service-accent) 24%, var(--color-border)); border-radius: 10px; }.wordpress-modes__choices ul { display: grid; gap: .7rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }.wordpress-modes__choices li::before { content: "✓"; margin-right: .6rem; color: var(--service-accent); }

/* E-commerce: editorial storefront and checkout ledger. */
.service-experience--ecommerce { --service-accent: #fb715e; }
.commerce-hero { padding: 0 0 2.5rem; background: #efe9e1; color: #131820; }.commerce-hero .breadcrumbs, .commerce-hero p { color: #59606a; }.commerce-hero .breadcrumbs a:hover { color: #111827; }.commerce-hero .button--secondary { color: #172033; background: rgba(255,255,255,.55); border-color: #8b8e93; }.commerce-hero__grid { min-height: 650px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 4rem; }.commerce-stage { min-height: 540px; display: grid; grid-template-columns: 1fr 290px; background: linear-gradient(135deg, #e6ded4, #f7f3ed); box-shadow: 0 24px 60px rgba(66,45,30,.14); }.commerce-product { position: relative; display: grid; place-items: center; overflow: hidden; }.commerce-product::before { content: ""; width: 170px; height: 250px; background: #c86f52; border-radius: 70px 70px 24px 24px; box-shadow: 0 25px 35px rgba(93,48,31,.22); }.commerce-product::after { content: ""; position: absolute; top: 95px; width: 58px; height: 58px; border: 16px solid #c86f52; border-bottom: 0; border-radius: 50% 50% 0 0; }.commerce-product i { position: absolute; width: 280px; height: 280px; border-radius: 50%; border: 1px solid rgba(130,105,85,.28); }.commerce-product strong { position: absolute; right: 1.5rem; bottom: 2rem; padding: 1rem; background: rgba(255,255,255,.82); font: 500 1.1rem/1.15 Georgia, serif; }.commerce-stage aside { display: grid; align-content: start; gap: 1.1rem; padding: 2rem 1.4rem; background: rgba(255,255,255,.9); border-left: 1px solid #d2cbc3; }.commerce-stage aside h3 { display: flex; justify-content: space-between; font-size: .9rem; }.commerce-stage aside h3 span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--service-accent); border-radius: 50%; }.commerce-stage aside > div { display: flex; gap: .8rem; }.commerce-stage aside > div > i { width: 48px; height: 58px; background: #c86f52; border-radius: 18px 18px 7px 7px; }.commerce-stage aside p { display: grid; margin: 0; color: #28313d; font-size: .7rem; }.commerce-stage aside small { color: #78808b; }.commerce-stage aside ol { display: grid; gap: 1rem; margin: 0; padding: 0 0 0 1.3rem; list-style: decimal-leading-zero; color: #7c838c; font-size: .72rem; }.commerce-stage aside li.is-active { color: var(--service-accent); font-weight: 750; }.commerce-stage aside button { margin-top: auto; padding: .9rem; color: #fff; background: var(--service-accent); border: 0; border-radius: 7px; font-size: .72rem; font-weight: 700; }
.commerce-ownership, .commerce-models, .commerce-capabilities { padding-block: 8rem; }.commerce-ownership__heading { display: grid; grid-template-columns: .85fr 1.15fr; align-items: end; gap: 5rem; margin-bottom: 4rem; }.commerce-ownership__heading p { max-width: 620px; margin-left: auto; }.commerce-ledger { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 2.5rem 0 0; list-style: none; border-top: 3px solid #8a6852; }.commerce-ledger li { padding-right: 2rem; }.commerce-ledger li + li { padding-left: 2rem; border-left: 1px solid var(--color-border-strong); }.commerce-ledger span { color: var(--service-accent); font: .72rem/1 monospace; }.commerce-ledger h3 { margin-top: 3rem; }.commerce-ledger p { font-size: .84rem; }
.commerce-models__split { display: grid; grid-template-columns: 1fr 1fr; }.commerce-model { min-height: 500px; display: grid; grid-template-columns: 1fr .78fr; align-items: end; padding: clamp(2rem, 5vw, 5rem); background: #ece7e0; color: #1a2028; }.commerce-model--2 { background: #080f17; color: #fff; }.commerce-model p { color: #646b75; }.commerce-model--2 p { color: #aeb4bd; }.commerce-model ul { display: grid; gap: .75rem; padding: 0; list-style: none; }.commerce-model li::before { content: "✓"; margin-right: .6rem; color: var(--service-accent); }.commerce-model figure { position: relative; height: 240px; margin: 0; }.commerce-model figure i { position: absolute; bottom: 0; width: 100px; height: 100px; background: #be6c53; border-radius: 50% 50% 12px 12px; }.commerce-model figure i:nth-child(2) { right: 10px; width: 85px; height: 150px; background: #d8c2a8; border-radius: 8px; }.commerce-model figure i:nth-child(3) { right: 55px; bottom: 95px; width: 80px; height: 80px; background: #313a43; border-radius: 50%; }
.commerce-capabilities__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 5rem; }.commerce-capabilities ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }.commerce-capabilities li { display: grid; grid-template-columns: 46px 1fr; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--color-border-strong); }.commerce-capabilities h3 { margin-bottom: .25rem; }.commerce-capabilities p { margin: 0; font-size: .82rem; }

/* Maintenance: status monitor, calendar and risk table. */
.service-experience--web-maintenance { --service-accent: #55e6a2; }
.maintenance-hero { padding: 5rem 0 2.5rem; background: radial-gradient(circle at 75% 40%, rgba(85,230,162,.09), transparent 35%); }.maintenance-hero__grid { min-height: 610px; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 5rem; }.maintenance-monitor { overflow: hidden; background: #071019; border: 1px solid #2f5d54; border-radius: 10px; box-shadow: 0 28px 75px rgba(0,0,0,.4); }.maintenance-monitor__pulse { min-height: 260px; display: grid; place-items: center; background-image: linear-gradient(rgba(85,230,162,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(85,230,162,.05) 1px, transparent 1px); background-size: 28px 28px; }.maintenance-monitor__pulse svg { width: 92%; }.maintenance-monitor__pulse path { fill: none; stroke: var(--service-accent); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(85,230,162,.8)); stroke-dasharray: 900; animation: maintenancePulse 3.4s linear infinite; }.maintenance-monitor ul { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 1rem; list-style: none; border-top: 1px solid #243930; }.maintenance-monitor li { display: grid; grid-template-columns: 10px 1fr auto; gap: .6rem; align-items: center; padding: .75rem; color: #cbd6d1; font-size: .72rem; }.maintenance-monitor li span { width: 8px; height: 8px; background: var(--service-accent); border-radius: 50%; box-shadow: 0 0 12px var(--service-accent); }.maintenance-monitor li b { color: var(--service-accent); font-weight: 650; }
.maintenance-plan, .maintenance-coverage, .maintenance-risk { padding-block: 8rem; }.maintenance-plan__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 5rem; }.maintenance-plan__grid > div:first-child ol { display: grid; grid-template-columns: 1fr 1fr; margin: 2rem 0 0; padding: 0; list-style: none; }.maintenance-plan__grid > div:first-child li { padding: .8rem 0; border-bottom: 1px solid var(--color-border); font-size: .82rem; }.maintenance-plan__grid > div:first-child li span { margin-right: .65rem; color: var(--service-accent); font: .68rem/1 monospace; }.maintenance-calendar { display: grid; grid-template-columns: repeat(7, 1fr); overflow: hidden; border: 1px solid #315046; border-radius: 9px; }.maintenance-calendar header { grid-column: 1 / -1; min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #315046; }.maintenance-calendar header span { color: var(--color-muted); font-size: .65rem; }.maintenance-calendar > i { position: relative; min-height: 74px; padding: .65rem; color: var(--color-muted); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font: normal .68rem/1 monospace; }.maintenance-calendar > i.has-check::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 8px; height: 8px; background: var(--service-accent); border-radius: 50%; box-shadow: 0 0 10px var(--service-accent); }
.maintenance-coverage__lanes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border-strong); }.maintenance-coverage__lanes article { position: relative; min-height: 160px; display: grid; grid-template-columns: 55px 1fr; align-content: center; gap: .2rem 1.2rem; padding: 1.5rem; border-right: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }.maintenance-coverage__lanes article > span { grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; color: var(--service-accent); border: 1px solid #315d4d; border-radius: 8px; }.maintenance-coverage__lanes h3, .maintenance-coverage__lanes p { margin: 0; }.maintenance-coverage__lanes p { font-size: .8rem; }.maintenance-coverage__lanes article > i { position: absolute; right: 1.5rem; bottom: 1.2rem; width: 70px; height: 22px; border-bottom: 1px solid var(--service-accent); opacity: .5; }
.maintenance-risk__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; }.maintenance-risk__table { border-top: 1px solid var(--color-border-strong); }.maintenance-risk__table > div { display: grid; grid-template-columns: .8fr 1.1fr 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-border-strong); font-size: .8rem; }.maintenance-risk__table b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .55rem; background: #ff6b72; border-radius: 50%; }.maintenance-risk__table span { color: var(--color-muted); }.maintenance-risk__table strong { color: var(--service-accent); font-weight: 650; }

/* SEO: search-result laboratory and content map. */
.service-experience--seo { --service-accent: #37d2ad; }
.seo-hero { padding: 5rem 0 2.5rem; background-image: linear-gradient(rgba(55,210,173,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(55,210,173,.035) 1px, transparent 1px); background-size: 65px 65px; }.seo-hero__grid { min-height: 610px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 5rem; }.seo-serp { position: relative; min-height: 510px; }.seo-serp__query { position: absolute; z-index: 3; top: 1rem; left: 12%; width: 72%; display: flex; justify-content: space-between; padding: .9rem 1rem; color: #e9edf2; background: #111a27; border: 1px solid #5f6e83; border-radius: 7px; font-size: .75rem; }.seo-serp__query span { color: var(--service-accent); }.seo-serp__window { position: absolute; inset: 11% 14% 8% 2%; overflow: hidden; padding: 1.6rem 2rem; background: #08111b; border: 1px solid #405168; border-radius: 9px; box-shadow: 0 28px 65px rgba(0,0,0,.35); }.seo-serp__window .experience-window-bar { margin: -1.6rem -2rem 2rem; }.seo-serp__window small { color: var(--service-accent); }.seo-serp__window h3 { margin: .45rem 0; color: #8292ff; font-size: 1.1rem; }.seo-serp__window p { max-width: 470px; font-size: .78rem; }.seo-serp__window nav { color: #8ea1ff; font-size: .68rem; }.seo-serp__window > i { display: block; width: 80%; height: 7px; margin-top: 1rem; background: #263444; border-radius: 5px; }.seo-serp__window > i:nth-of-type(2) { width: 65%; }.seo-serp__window > i:nth-of-type(3) { width: 48%; }.seo-serp > ol { position: absolute; top: 18%; right: 0; display: grid; gap: 2.2rem; margin: 0; padding-left: 1.4rem; list-style: none; border-left: 1px solid #51637b; color: #96a1b0; font-size: .65rem; }.seo-serp > ol li::before { content: ""; position: absolute; left: -4px; width: 7px; height: 7px; background: var(--service-accent); border-radius: 50%; }
.seo-foundations, .seo-content-map, .seo-honesty { padding-block: 8rem; }.seo-foundations__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 6rem; }.seo-foundations ol { margin: 0; padding: 0; list-style: none; }.seo-foundations li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 1.2rem; padding: 1.6rem; margin-bottom: -1px; background: color-mix(in srgb, var(--color-bg-elevated) 92%, var(--service-accent)); border: 1px solid var(--color-border-strong); box-shadow: 0 16px 34px rgba(0,0,0,.08); }.seo-foundations li:nth-child(2) { margin-left: 2rem; }.seo-foundations li:nth-child(3) { margin-left: 4rem; }.seo-foundations li:nth-child(4) { margin-left: 6rem; }.seo-foundations li > span { color: var(--service-accent); font: .8rem/1.4 monospace; }.seo-foundations h3, .seo-foundations p { margin: 0; }.seo-foundations p { font-size: .8rem; }
.seo-content-map__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 6rem; }.seo-content-map ul { display: grid; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }.seo-content-map ul li { padding: .85rem 1rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 6px; font-size: .8rem; }.seo-content-map ol { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }.seo-content-map ol li { position: relative; padding: 1.4rem 1.4rem 1.4rem 4.5rem; background: color-mix(in srgb, var(--service-accent) 5%, var(--color-bg-elevated)); border: 1px solid color-mix(in srgb, var(--service-accent) 20%, var(--color-border)); border-radius: 7px; }.seo-content-map ol span { position: absolute; left: 1.4rem; top: 1.65rem; color: var(--service-accent); font: .7rem/1 monospace; }.seo-content-map ol h3, .seo-content-map ol p { margin: 0; }.seo-content-map ol p { font-size: .8rem; }
.seo-honesty { background: #071019; }.seo-honesty__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6rem; }.seo-honesty ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #2a3a47; }.seo-honesty li { display: flex; gap: 1rem; padding: 1rem 0; color: #ccd4dc; border-bottom: 1px solid #2a3a47; }.seo-honesty li span { color: #ff7882; font-size: 1.2rem; }

/* Email design: inbox composer and modular message anatomy. */
.service-experience--email-design { --service-accent: #e52aa9; }
.email-hero { padding: 5rem 0 2.5rem; background: radial-gradient(circle at 72% 42%, rgba(229,42,169,.09), transparent 34%); }.email-hero__grid { min-height: 610px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 4rem; }.email-composer { position: relative; min-height: 500px; overflow: visible; background: #09111b; border: 1px solid #3e4c62; border-radius: 10px; box-shadow: 0 28px 70px rgba(0,0,0,.4); }.email-composer > header { display: grid; grid-template-columns: 65px 1fr; gap: .55rem; padding: 1rem; color: #afb8c5; border-bottom: 1px solid #293648; font-size: .68rem; }.email-composer > header b { padding-bottom: .4rem; color: #e6ebf0; border-bottom: 1px solid #293648; font-weight: 500; }.email-sheet { width: 78%; min-height: 330px; margin: 1.2rem; padding: 2rem; color: #101726; background: #fff; }.email-sheet small { font-weight: 750; }.email-sheet h3 { margin: 3rem 0 .75rem; font-size: 2rem; }.email-sheet p { max-width: 260px; color: #4f5968; font-size: .72rem; }.email-sheet button, .email-preview button, .email-anatomy__message button { padding: .65rem .9rem; color: #fff; background: var(--service-accent); border: 0; border-radius: 5px; font-size: .68rem; }.email-sheet figure { position: absolute; right: 28%; bottom: 1.2rem; width: 32%; height: 180px; margin: 0; background: linear-gradient(145deg, #6e78e8, #ef65bd); clip-path: polygon(50% 0,100% 100%,0 100%); }.email-mobile { position: absolute; right: -1.5rem; bottom: 1.8rem; width: 150px; height: 285px; display: grid; align-content: start; gap: 1rem; padding: 1.4rem 1rem; color: #172033; background: #fff; border: 7px solid #111b27; border-radius: 24px; box-shadow: 0 22px 45px rgba(0,0,0,.35); }.email-mobile small { font-size: .6rem; }.email-mobile b { font-size: 1rem; line-height: 1.2; }.email-mobile i { height: 105px; background: linear-gradient(145deg, #7681ef, #e65db9); }
.email-types, .email-anatomy, .email-quality { padding-block: 8rem; }.email-types__heading { display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: 5rem; margin-bottom: 3rem; }.email-types__heading p { margin-left: auto; max-width: 570px; }.email-types__rail { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 2.5rem; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }.email-types__rail article { position: relative; min-height: 190px; padding: 2rem; }.email-types__rail article + article { border-left: 1px solid var(--color-border-strong); }.email-types__rail article.is-active { background: linear-gradient(135deg, rgba(229,42,169,.22), rgba(99,102,243,.14)); }.email-types__rail article > span { float: left; margin-right: 1rem; }.email-types__rail small { color: var(--service-accent); font: .68rem/1 monospace; }.email-types__rail h3 { margin-top: 2.7rem; }.email-types__rail p { font-size: .8rem; }
.email-preview { min-height: 390px; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; padding: 3.5rem; color: #111827; background: #fff; box-shadow: 0 25px 50px rgba(0,0,0,.15); }.email-preview h3 { margin: 2rem 0 .8rem; font-size: 2.5rem; }.email-preview p { color: #596273; }.email-preview figure { height: 270px; margin: 0; background: linear-gradient(145deg, #202c55, #7686f2 55%, #ef65ba); clip-path: polygon(12% 100%,45% 18%,62% 58%,78% 35%,100% 100%); }
.email-anatomy__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7rem; align-items: center; }.email-anatomy ol { position: relative; display: grid; gap: 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none; }.email-anatomy ol::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 6px; width: 1px; background: linear-gradient(var(--service-accent), var(--color-primary)); }.email-anatomy li { display: grid; grid-template-columns: 14px 1fr; gap: 1.2rem; }.email-anatomy li > span { position: relative; z-index: 1; width: 13px; height: 13px; margin-top: .35rem; background: var(--service-accent); border-radius: 50%; }.email-anatomy h3, .email-anatomy p { margin: 0; }.email-anatomy p { font-size: .8rem; }.email-anatomy__message { width: min(100%, 390px); margin-inline: auto; padding: 2.2rem; color: #121827; background: #fff; box-shadow: 0 28px 65px rgba(0,0,0,.22); }.email-anatomy__message h3 { margin: 2rem 0 1rem; font-size: 2rem; }.email-anatomy__message > i { display: block; height: 90px; margin-top: 1.2rem; background: linear-gradient(135deg,#9aa6ed,#e65eb6); }.email-anatomy__message > i:nth-of-type(2) { height: 12px; width: 80%; background: #dce1e8; }.email-anatomy__message > i:nth-of-type(3) { height: 12px; width: 55%; margin-top: .5rem; background: #dce1e8; }.email-anatomy__message footer { margin-top: 2rem; padding-top: 1rem; color: #7a8492; border-top: 1px solid #dce1e8; font-size: .6rem; text-align: center; }
.email-quality__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; }.email-quality ol { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }.email-quality li { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; padding: 1.4rem; border-right: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }.email-quality h3, .email-quality p { margin: 0; }.email-quality p { font-size: .78rem; }

@keyframes terminalBlink { 50% { opacity: 0; } }
@keyframes maintenancePulse { from { stroke-dashoffset: 900; } to { stroke-dashoffset: -900; } }

@media (max-width: 1100px) {
    .design-hero__grid, .development-hero__grid, .wordpress-hero__grid, .commerce-hero__grid, .maintenance-hero__grid, .seo-hero__grid, .email-hero__grid { grid-template-columns: 1fr; padding-block: 0 4rem; }
    .experience-hero-copy { max-width: 850px; }.design-canvas, .development-terminal, .wordpress-editor, .commerce-stage, .maintenance-monitor, .seo-serp, .email-composer { width: min(100%, 820px); margin-inline: auto; }
    .development-architecture__heading, .design-types__intro, .commerce-ownership__heading, .email-types__heading { grid-template-columns: 1fr; gap: 1.5rem; }.development-architecture__heading p, .design-types__intro p, .commerce-ownership__heading p, .email-types__heading p { margin-left: 0; }
    .design-types__gallery { grid-template-columns: 1fr 1fr; align-items: end; }.design-type--3 .design-type__screen { height: 390px; }
    .wordpress-capability-list article { grid-template-columns: 64px 1fr 220px; }
    .commerce-model { grid-template-columns: 1fr; gap: 2rem; }.commerce-model figure { max-width: 260px; }
}

@media (max-width: 820px) {
    .experience-section-heading, .experience-faq__grid, .design-blueprint__grid, .development-architecture__heading, .development-stack__grid, .wordpress-intro__grid, .wordpress-modes__grid, .commerce-capabilities__grid, .maintenance-plan__grid, .maintenance-risk__grid, .seo-foundations__grid, .seo-content-map__grid, .seo-honesty__grid, .email-anatomy__grid, .email-quality__grid { grid-template-columns: 1fr; gap: 3rem; }
    .experience-section-heading p { margin-left: 0; }.experience-process__rail, .design-principles__rail, .architecture-flow, .commerce-ledger { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }.experience-process__rail li::after, .architecture-flow > li > i { display: none; }.design-principles__rail li { min-height: 220px; }.design-principles__rail li:nth-child(3) { border-left: 0; }
    .wordpress-capability-list article { grid-template-columns: 54px 1fr; padding-block: 1.5rem; }.wordpress-capability-list__preview { grid-column: 2; width: min(100%, 360px); }.wordpress-modes__choices, .commerce-models__split, .maintenance-coverage__lanes, .email-quality ol { grid-template-columns: 1fr; }
    .commerce-stage { grid-template-columns: 1fr 250px; }.commerce-models__split { display: grid; }.commerce-model { min-height: 420px; }
    .seo-foundations li:nth-child(n) { margin-left: 0; }.email-types__rail { grid-template-columns: 1fr; }.email-types__rail article + article { border-top: 1px solid var(--color-border-strong); border-left: 0; }.email-preview { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 600px) {
    .design-hero, .development-hero, .wordpress-hero, .maintenance-hero, .seo-hero, .email-hero { padding-top: 3.5rem; }.experience-hero-copy h1 { font-size: clamp(2.65rem, 12vw, 3.75rem); }.experience-switcher { width: calc(100% - var(--gutter)); margin-right: 0; margin-left: var(--gutter); border-right: 0; border-radius: 10px 0 0 10px; box-shadow: none; }.experience-switcher a { flex-basis: 150px; min-height: 74px; gap: .55rem; padding-inline: .7rem; font-size: .72rem; }.experience-switcher svg { width: 22px; height: 22px; }
    .design-principles, .design-types, .design-blueprint, .development-architecture, .development-solutions, .development-stack, .wordpress-intro, .wordpress-capabilities, .wordpress-modes, .commerce-ownership, .commerce-models, .commerce-capabilities, .maintenance-plan, .maintenance-coverage, .maintenance-risk, .seo-foundations, .seo-content-map, .seo-honesty, .email-types, .email-anatomy, .email-quality, .experience-process, .experience-faq { padding-block: 5rem; }
    .design-canvas { min-height: 380px; }.design-canvas__window { inset: 12% 0 16%; }.design-canvas__layout { padding: 1.4rem; }.design-canvas__layout b { font-size: 1.35rem; }.design-canvas__selection { left: 4%; width: 210px; height: 90px; }.design-canvas__type { top: 2%; width: 145px; padding: .8rem; }.design-canvas__viewports { gap: 1.2rem; }
    .experience-process__rail, .design-principles__rail, .architecture-flow, .design-types__gallery, .commerce-ledger { grid-template-columns: 1fr; gap: 0; }.experience-process__rail li { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding: 0 0 2rem; }.experience-process__rail > li > span { margin: 0; }.design-principles__rail li, .design-principles__rail li + li { min-height: 0; padding: 2rem 0; border-left: 0; border-bottom: 1px solid var(--color-border); }.design-principles__rail h3 { margin-top: 1.2rem; }.design-type__screen, .design-type--2 .design-type__screen, .design-type--3 .design-type__screen, .design-type--4 .design-type__screen { height: 310px; }
    .design-blueprint ol, .technology-matrix, .wordpress-blocks, .wordpress-modes__choices, .maintenance-plan__grid > div:first-child ol { grid-template-columns: 1fr; }.design-blueprint li:nth-child(odd) { border-right: 0; }.development-terminal pre { min-height: 320px; padding: 1.5rem; overflow-x: auto; }.architecture-flow li { padding-block: 1.5rem; }.development-solutions__rail li { grid-template-columns: 55px 1fr; gap: 1rem; }.development-solutions__rail h3 { font-size: 1.15rem; }
    .wordpress-editor { min-height: 390px; grid-template-columns: 90px 1fr; font-size: .7rem; }.wordpress-editor > aside { padding: 1rem .5rem; }.wordpress-editor__page { width: 88%; margin: 1.2rem auto; }.wordpress-editor__notice { right: .5rem; bottom: 1rem; }.wordpress-capability-list article { grid-template-columns: 1fr; }.wordpress-capability-list__preview { grid-column: auto; }.commerce-hero__grid { padding-block: 3.5rem; }.commerce-stage { min-height: 650px; grid-template-columns: 1fr; }.commerce-product { min-height: 330px; }.commerce-stage aside { min-height: 320px; }.commerce-ledger li { padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); }.commerce-ledger li + li { padding-left: 0; border-left: 0; }.commerce-ledger h3 { margin-top: 1rem; }.commerce-model { padding: 2rem 1.25rem; }
    .maintenance-monitor ul { grid-template-columns: 1fr; }.maintenance-calendar { grid-template-columns: repeat(4, 1fr); }.maintenance-calendar header { grid-column: 1 / -1; }.maintenance-coverage__lanes article { grid-template-columns: 48px 1fr; border-right: 0; }.maintenance-risk__table > div { grid-template-columns: 1fr; gap: .35rem; }
    .seo-serp { min-height: 420px; }.seo-serp__query { left: 3%; width: 92%; }.seo-serp__window { inset: 14% 0 0; }.seo-serp > ol { display: none; }.seo-content-map ol li { padding-left: 3.8rem; }.email-composer { min-height: 580px; }.email-sheet { width: calc(100% - 2rem); min-height: 320px; }.email-sheet figure { right: 2rem; bottom: 5rem; width: 40%; }.email-mobile { right: .5rem; bottom: -1rem; width: 125px; height: 245px; }.email-preview { padding: 2rem 1.25rem; }.email-preview h3 { font-size: 2rem; }
    .experience-cta__panel { align-items: flex-start; flex-direction: column; }.experience-cta .button { width: 100%; }
}

/* About experience */
.about-page { --about-line: rgba(139, 145, 255, .38); }
.about-page main { overflow: hidden; }
.about-hero { padding-block: 2.75rem 2rem; background: radial-gradient(circle at 74% 44%, rgba(99, 102, 243, .09), transparent 30%); }
.about-hero__grid { min-height: 560px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(3rem, 6vw, 7rem); }
.about-hero__copy { position: relative; z-index: 3; }
.about-hero__copy h1 { max-width: 690px; margin-bottom: 1.7rem; font-size: clamp(3.25rem, 5.25vw, 5.1rem); }
.about-hero__copy > p { max-width: 650px; margin-bottom: 2.2rem; font-size: clamp(1rem, 1.35vw, 1.18rem); }
.about-blueprint { position: relative; min-height: 500px; }
.about-blueprint::before { content: ""; position: absolute; inset: 8% 3%; background-image: linear-gradient(var(--about-line) 1px, transparent 1px), linear-gradient(90deg, var(--about-line) 1px, transparent 1px); background-size: 54px 54px; opacity: .18; mask-image: radial-gradient(circle, #000 25%, transparent 72%); }
.about-blueprint__connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #8185ff; stroke-width: 1.3; stroke-dasharray: 6 5; opacity: .8; }
.about-blueprint__connections path:first-child { stroke-dasharray: 12 8; animation: aboutFlow 8s linear infinite; }
.about-blueprint__connections .about-blueprint__measure { stroke: var(--about-line); stroke-dasharray: 2 7; }
.about-blueprint__label { position: absolute; top: 2%; left: 50%; color: var(--color-muted-deep); font: 600 .66rem/1.2 monospace; letter-spacing: .18em; text-transform: uppercase; transform: translateX(-50%); }
.about-blueprint__core { position: absolute; z-index: 4; top: 50%; left: 50%; width: 138px; height: 138px; display: grid; place-items: center; align-content: center; gap: .35rem; color: #fff; background: #6366f3; border: 1px solid #9294ff; border-radius: 18px; box-shadow: 0 0 0 18px rgba(99,102,243,.07), 0 28px 65px rgba(42,45,170,.3); transform: translate(-50%, -50%); animation: aboutCore 4.5s ease-in-out infinite; }
.about-blueprint__core img { width: 58px; filter: brightness(0) invert(1); }
.about-blueprint__core strong { font-size: .82rem; }
.about-blueprint__node { position: absolute; z-index: 3; width: 190px; min-height: 126px; padding: 1rem 1.15rem; background: color-mix(in srgb, var(--color-bg-elevated) 94%, transparent); border: 1px solid var(--about-line); border-radius: 8px; box-shadow: 0 16px 38px rgba(0,0,0,.12); }
.about-blueprint__node > span { position: absolute; top: 1rem; right: 1rem; color: #7478ff; }
.about-blueprint__node svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.about-blueprint__node small { display: block; color: #777bff; font: 600 .65rem/1 monospace; }
.about-blueprint__node h2 { margin: 1rem 0 .25rem; font-size: 1.02rem; letter-spacing: -.02em; }
.about-blueprint__node p { margin: 0; font-size: .7rem; line-height: 1.45; }
.about-blueprint__node--1 { top: 10%; left: 1%; }
.about-blueprint__node--2 { top: 10%; right: 1%; }
.about-blueprint__node--3 { bottom: 8%; left: 2%; }
.about-blueprint__node--4 { right: 2%; bottom: 8%; }

.about-story { padding-block: 8rem; }
.about-story__grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(4rem, 8vw, 9rem); align-items: start; }
.about-story h2 { max-width: 820px; font-size: clamp(2.9rem, 4.2vw, 4.8rem); }
.about-story__copy { padding-left: 2.5rem; border-left: 1px solid var(--about-line); }
.about-story__copy time { display: block; margin-bottom: .4rem; color: #8f92ff; font: 650 .78rem/1.4 monospace; }
.about-story__copy strong { display: block; margin-bottom: 1.8rem; font-size: 1rem; }
.about-story__copy p { font-size: .98rem; }

.about-principles { padding-block: 7rem 8rem; }
.about-principles__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.about-principles__heading h2 { margin: 0; }
.about-principles__heading p { max-width: 580px; margin: 0 0 .35rem auto; }
.about-principles__list { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 0; padding-block: 0; list-style: none; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.about-principles__list li { min-height: 280px; padding: 2.5rem; }
.about-principles__list li + li { border-left: 1px solid var(--color-border-strong); }
.about-principles__list > li > span { color: #7f83ff; }
.about-principles__list svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.about-principles__list h3 { margin: 3.2rem 0 .85rem; font-size: 1.28rem; }
.about-principles__list p { margin: 0; font-size: .88rem; }

.about-expertise { padding-block: 6.5rem 7rem; color: #fff; background: #07101c; border-color: #263246; }
.about-expertise::before { opacity: .35; }
.about-expertise__heading { display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: 4rem; margin-bottom: 4rem; }
.about-expertise__heading h2 { margin: 0; }
.about-expertise__heading p { max-width: 640px; margin: 0; color: #aeb8c8; }
.about-expertise__rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 0; padding-block: 0; list-style: none; }
.about-expertise__rail::before { content: ""; position: absolute; top: 32px; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg, #6366f3, #8a8dff); }
.about-expertise__rail::after { content: ""; position: absolute; top: 28px; right: 9.5%; width: 9px; height: 9px; border-top: 1px solid #8a8dff; border-right: 1px solid #8a8dff; transform: rotate(45deg); }
.about-expertise__rail li { position: relative; z-index: 2; text-align: center; padding-inline: 2rem; }
.about-expertise__rail li > span { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 1.5rem; color: #777bff; background: #fff; border: 1px solid #8c8fff; border-radius: 50%; }
.about-expertise__rail svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.about-expertise__rail h3 { color: #fff; font-size: 1.2rem; }
.about-expertise__rail p { max-width: 350px; margin-inline: auto; color: #aeb8c8; font-size: .83rem; }

.about-perspective { padding-block: 8rem; }
.about-perspective__grid { display: grid; grid-template-columns: .58fr 1.42fr; gap: clamp(3rem, 6vw, 7rem); }
.about-perspective__intro p { max-width: 380px; }
.about-tabs__list { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-border-strong); }
.about-tabs__list button { position: relative; min-height: 62px; padding: .8rem 1rem; color: var(--color-muted); background: transparent; border: 0; cursor: pointer; font-size: .85rem; font-weight: 650; }
.about-tabs__list button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: #6366f3; transform: scaleX(0); transition: transform 180ms ease; }
.about-tabs__list button[aria-selected="true"] { color: var(--color-text); }
.about-tabs__list button[aria-selected="true"]::after { transform: scaleX(1); }
.about-tabs__panel { position: relative; min-height: 280px; display: grid; grid-template-columns: 90px 1fr 220px; align-items: center; gap: 2rem; padding: 3rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-top: 0; }
.about-tabs__panel[hidden] { display: none; }
.about-tabs__panel > span { align-self: start; color: rgba(99,102,243,.15); font-size: 4.2rem; font-weight: 800; line-height: 1; }
.about-tabs__panel h3 { margin-bottom: 1rem; font-size: clamp(1.5rem, 2.3vw, 2.25rem); }
.about-tabs__panel p { max-width: 650px; margin: 0; }
.about-tabs__panel i { position: relative; width: 180px; height: 150px; justify-self: end; overflow: hidden; border-bottom: 1px solid #7f83ff; }
.about-tabs__panel i::before { content: ""; position: absolute; right: 20px; bottom: -56px; width: 140px; height: 190px; border: 2px solid #7f83ff; border-radius: 50%; transform: rotate(32deg); }
.about-tabs__panel i::after { content: ""; position: absolute; top: 12px; right: 16px; width: 42px; height: 32px; background: #6366f3; clip-path: polygon(0 0, 100% 18%, 0 52%); }

.about-process { padding-block: 1rem 8rem; }
.about-process__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.about-process__heading h2, .about-process__heading p { margin-bottom: 0; }
.about-process__heading p { max-width: 560px; margin-left: auto; }
.about-process__rail { display: grid; grid-template-columns: repeat(4, 1fr); margin-block: 0; padding-block: 0; list-style: none; }
.about-process__rail li { position: relative; padding: 0 2rem 0 0; }
.about-process__rail li + li { padding-left: 2rem; border-left: 1px solid var(--color-border-strong); }
.about-process__rail li::before { content: ""; position: absolute; top: 25px; right: 0; left: 58px; height: 1px; background: var(--color-border-strong); }
.about-process__rail li:last-child::before { display: none; }
.about-process__rail span { position: relative; z-index: 2; width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 1.6rem; color: #fff; background: #6366f3; border-radius: 50%; font: 650 .68rem/1 monospace; }
.about-process__rail h3 { font-size: 1.08rem; }
.about-process__rail p { margin: 0; font-size: .8rem; }

.about-official { padding-block: 7rem; background: color-mix(in srgb, var(--color-surface) 70%, var(--color-bg)); }
.about-official__heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.about-official__heading h2 { margin-bottom: .65rem; font-size: clamp(2.4rem, 3.7vw, 4rem); }
.about-official__heading p { max-width: 700px; margin: 0; }
.about-official__channels { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; padding-inline: var(--gutter); background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: 8px; }
.about-official__channels > a, .about-official__channels > div { min-width: 0; display: grid; grid-template-columns: 44px 1fr; column-gap: .85rem; align-content: center; min-height: 132px; padding: 1.25rem; }
.about-official__channels > * + * { border-left: 1px solid var(--color-border); }
.about-official__channels span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; color: #777bff; border: 1px solid var(--about-line); border-radius: 8px; }
.about-official__channels svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.about-official__channels small { color: var(--color-muted-deep); font-size: .68rem; }
.about-official__channels strong { min-width: 0; overflow-wrap: anywhere; color: var(--color-text); font-size: .78rem; font-weight: 650; }
.about-official__channels a:hover strong { color: #7f83ff; }

.about-cta { padding-block: 0; color: #fff; background: #6366f3; border-color: #8f92ff; }
.about-cta__panel { min-height: 260px; display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.about-cta h2 { max-width: 850px; margin-bottom: .75rem; font-size: clamp(2.6rem, 4.3vw, 4.6rem); }
.about-cta p { margin: 0; color: #e3e4ff; }
.about-cta .button--light { flex: 0 0 auto; color: #252861; background: #fff; box-shadow: 0 18px 42px rgba(30,32,110,.2); }
.about-cta .button--light:hover { color: #11144b; background: #f4f4ff; }

html[data-theme="light"] .about-page { --about-line: rgba(99, 102, 243, .31); }
html[data-theme="light"] .about-hero { background-color: #fff; }
html[data-theme="light"] .about-blueprint__node { background: rgba(255,255,255,.96); box-shadow: 0 16px 38px rgba(36,45,80,.09); }
html[data-theme="light"] .about-principles, html[data-theme="light"] .about-perspective, html[data-theme="light"] .about-process { background: #fff; }
html[data-theme="light"] .about-story { background: #f6f7fb; }
html[data-theme="light"] .about-official { background: #f1f3f8; }

@keyframes aboutFlow { to { stroke-dashoffset: -80; } }
@keyframes aboutCore { 0%,100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-7px); } }

@media (max-width: 1100px) {
    .about-hero__grid { grid-template-columns: 1fr; padding-bottom: 3.5rem; }
    .about-hero__copy { max-width: 800px; }
    .about-blueprint { width: min(100%, 820px); margin-inline: auto; }
    .about-story__grid, .about-perspective__grid { grid-template-columns: 1fr; }
    .about-story__copy { max-width: 760px; margin-left: auto; }
    .about-perspective__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; }
    .about-official__channels { grid-template-columns: 1fr 1fr; }
    .about-official__channels > *:nth-child(3) { border-left: 0; border-top: 1px solid var(--color-border); }
    .about-official__channels > *:nth-child(4) { border-top: 1px solid var(--color-border); }
}

@media (max-width: 820px) {
    .about-hero { padding-top: 3rem; }
    .about-hero__grid { min-height: auto; }
    .about-hero__copy h1 { font-size: clamp(3rem, 10vw, 4.4rem); }
    .about-story, .about-principles, .about-expertise, .about-perspective, .about-official { padding-block: 6rem; }
    .about-principles__heading, .about-expertise__heading, .about-process__heading, .about-perspective__intro { grid-template-columns: 1fr; gap: 1rem; }
    .about-principles__heading p, .about-process__heading p { margin-left: 0; }
    .about-principles__list { grid-template-columns: 1fr; }
    .about-principles__list li { min-height: 0; padding: 2.5rem 0; }
    .about-principles__list li + li { border-top: 1px solid var(--color-border-strong); border-left: 0; }
    .about-principles__list h3 { margin-top: 1.5rem; }
    .about-expertise__rail { gap: 2.5rem; grid-template-columns: 1fr; }
    .about-expertise__rail::before, .about-expertise__rail::after { display: none; }
    .about-expertise__rail li { display: grid; grid-template-columns: 64px 1fr; gap: .2rem 1.25rem; align-items: center; text-align: left; }
    .about-expertise__rail li > span { grid-row: 1 / 3; margin: 0; }
    .about-expertise__rail h3, .about-expertise__rail p { margin: 0; }
    .about-expertise__rail p { max-width: none; }
    .about-tabs__panel { grid-template-columns: 70px 1fr; }
    .about-tabs__panel i { display: none; }
    .about-process { padding-bottom: 6rem; }
    .about-process__rail { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }
    .about-process__rail li + li { padding-left: 0; border-left: 0; }
    .about-process__rail li::before { display: none; }
    .about-official__heading { align-items: flex-start; flex-direction: column; }
    .about-cta__panel { min-height: 310px; align-items: flex-start; justify-content: center; flex-direction: column; }
}

@media (max-width: 600px) {
    .about-hero__copy h1 { font-size: clamp(2.85rem, 12vw, 3.75rem); }
    .about-hero__copy > p { font-size: .98rem; }
    .about-hero .button { width: 100%; }
    .about-blueprint { min-height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding-top: 3.5rem; }
    .about-blueprint::before, .about-blueprint__connections { display: none; }
    .about-blueprint__label { top: 1rem; width: 100%; text-align: center; }
    .about-blueprint__core { position: relative; top: auto; left: auto; grid-column: 1 / -1; width: 110px; height: 110px; margin: 0 auto 1rem; transform: none; animation: none; }
    .about-blueprint__core img { width: 46px; }
    .about-blueprint__node { position: static; width: auto; min-height: 138px; }
    .about-story, .about-principles, .about-expertise, .about-perspective, .about-official { padding-block: 5rem; }
    .about-story__grid { gap: 2.5rem; }
    .about-story h2 { font-size: clamp(2.35rem, 10vw, 3.25rem); }
    .about-story__copy { padding-left: 1.25rem; }
    .about-tabs__list { grid-template-columns: 1fr; border: 1px solid var(--color-border-strong); }
    .about-tabs__list button + button { border-top: 1px solid var(--color-border); }
    .about-tabs__list button::after { top: 0; right: auto; bottom: 0; width: 3px; height: auto; transform: scaleY(0); }
    .about-tabs__list button[aria-selected="true"]::after { transform: scaleY(1); }
    .about-tabs__panel { min-height: 0; grid-template-columns: 1fr; gap: 1rem; padding: 2rem 1.25rem; border-top: 0; }
    .about-tabs__panel > span { font-size: 2.6rem; }
    .about-process__rail { grid-template-columns: 1fr; gap: 2rem; }
    .about-process__rail li { padding: 0 0 2rem; border-bottom: 1px solid var(--color-border); }
    .about-process__rail li:last-child { border-bottom: 0; }
    .about-official__channels { grid-template-columns: 1fr; padding-inline: var(--gutter); }
    .about-official__channels > * + *, .about-official__channels > *:nth-child(3), .about-official__channels > *:nth-child(4) { border-top: 1px solid var(--color-border); border-left: 0; }
    .about-official__channels > a, .about-official__channels > div { min-height: 112px; padding-inline: 0; }
    .about-cta h2 { font-size: clamp(2.35rem, 10vw, 3.35rem); }
    .about-cta .button { width: 100%; }
}

html[data-theme="light"] .experience-window-bar { color: #708095; background: #edf1f7; border-color: #d4dbe5; }
html[data-theme="light"] .experience-switcher { background: rgba(255,255,255,.92); }
html[data-theme="light"] .design-canvas__window, html[data-theme="light"] .development-terminal, html[data-theme="light"] .maintenance-monitor, html[data-theme="light"] .seo-serp__window, html[data-theme="light"] .email-composer { color: #fff; }
html[data-theme="light"] .architecture-flow > li > span { color: #4f5dd2; background: #f4f6ff; }
html[data-theme="light"] .seo-honesty { color: #fff; }
html[data-theme="light"] .seo-honesty p { color: #aeb8c4; }

/* Service hero viewport tuning */
.design-hero,
.development-hero,
.wordpress-hero,
.maintenance-hero,
.seo-hero,
.email-hero { padding-block: 2.75rem 1.75rem; }
.design-hero__grid,
.development-hero__grid,
.wordpress-hero__grid,
.maintenance-hero__grid,
.seo-hero__grid,
.email-hero__grid { min-height: 540px; }
.commerce-hero { padding-bottom: 1.75rem; }
.commerce-hero__grid { min-height: 560px; }
.commerce-stage { min-height: 520px; }
.seo-serp { min-height: 500px; }

@media (max-width: 600px) {
    .design-hero,
    .development-hero,
    .wordpress-hero,
    .maintenance-hero,
    .seo-hero,
    .email-hero { padding-top: 3.5rem; }
}

/* Web Design v2: editorial design studio and responsive workbench. */
.service-experience--web-design { --service-accent: #6366f3; }
.webdesign-hero { padding-block: 2.75rem 1.75rem; }
.webdesign-hero__grid { min-height: 610px; display: grid; grid-template-columns: minmax(0, .84fr) minmax(620px, 1.16fr); align-items: center; gap: clamp(3rem, 5vw, 6rem); }
.webdesign-hero__copy h1 { max-width: 660px; }
.webdesign-hero__copy > p { max-width: 610px; }
.webdesign-stage { position: relative; min-height: 555px; color: #111827; }
.webdesign-stage::before { content: ""; position: absolute; inset: 5% 0 0; background-image: linear-gradient(rgba(99,102,243,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,243,.1) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle, #000 35%, transparent 78%); }
.webdesign-browserbar { height: 34px; display: flex; align-items: center; gap: 5px; padding-inline: 12px; color: #657086; background: #eef1f6; border-bottom: 1px solid #d9dfeb; font-size: .57rem; }
.webdesign-browserbar i { width: 6px; height: 6px; background: #fc6268; border-radius: 50%; }
.webdesign-browserbar i:nth-child(2) { background: #f6c34e; }
.webdesign-browserbar i:nth-child(3) { background: #48c783; }
.webdesign-browserbar span { margin-left: .4rem; }
.webdesign-stage__screen { position: absolute; z-index: 2; overflow: hidden; background: #fff; border: 1px solid #aeb8cc; box-shadow: 0 22px 60px rgba(21,29,55,.16); }
.webdesign-stage__screen--desktop { top: 12%; left: 0; width: 74%; height: 390px; }
.webdesign-stage__screen--tablet { right: 5%; bottom: 5%; width: 39%; height: 355px; border-radius: 10px; box-shadow: 0 22px 50px rgba(21,29,55,.2); }
.webdesign-stage__screen--mobile { right: 0; bottom: 0; width: 18%; height: 290px; border: 5px solid #121a2b; border-radius: 15px; }
.webdesign-stage__screen--mobile .webdesign-browserbar { height: 22px; padding-inline: 6px; }
.webdesign-stage__screen--mobile .webdesign-browserbar i { width: 3px; height: 3px; }
.webdesign-stage__page { position: relative; height: calc(100% - 34px); display: grid; align-content: start; justify-items: start; gap: .6rem; padding: 2rem; }
.webdesign-stage__page small { color: #6366f3; font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.webdesign-stage__page strong { max-width: 250px; font-size: 1.65rem; line-height: 1.05; letter-spacing: -.05em; }
.webdesign-stage__page p { max-width: 250px; margin: 0; color: #667085; font-size: .63rem; line-height: 1.55; }
.webdesign-stage__page b { padding: .55rem .75rem; color: #fff; background: #6366f3; border-radius: 4px; font-size: .58rem; }
.webdesign-stage__page figure { position: absolute; top: 16%; right: 6%; width: 38%; height: 46%; margin: 0; background: linear-gradient(145deg, #eef1ff, #ced4f3); }
.webdesign-stage__page figure::before { content: ""; position: absolute; right: 14%; bottom: 0; width: 46%; height: 78%; background: #5660a4; clip-path: polygon(50% 0,100% 100%,0 100%); }
.webdesign-stage__page ul { position: absolute; right: 6%; bottom: 7%; left: 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.webdesign-stage__page li { height: 54px; background: #f3f5fa; border: 1px solid #e1e5ee; }
.webdesign-stage__screen--tablet .webdesign-stage__page { padding: 1.3rem; }
.webdesign-stage__screen--tablet .webdesign-stage__page strong { max-width: 175px; font-size: 1.18rem; }
.webdesign-stage__screen--tablet .webdesign-stage__page p { max-width: 165px; font-size: .52rem; }
.webdesign-stage__screen--tablet .webdesign-stage__page figure { top: 51%; right: 7%; width: 86%; height: 27%; }
.webdesign-stage__screen--tablet .webdesign-stage__page ul { bottom: 5%; }
.webdesign-stage__screen--tablet .webdesign-stage__page li { height: 28px; }
.webdesign-stage__screen--mobile .webdesign-stage__page { height: calc(100% - 22px); gap: .36rem; padding: .7rem; }
.webdesign-stage__screen--mobile .webdesign-stage__page strong { font-size: .67rem; }
.webdesign-stage__screen--mobile .webdesign-stage__page p { font-size: .34rem; line-height: 1.35; }
.webdesign-stage__screen--mobile .webdesign-stage__page b { padding: .3rem .4rem; font-size: .34rem; }
.webdesign-stage__screen--mobile .webdesign-stage__page figure { top: 48%; right: 10%; width: 80%; height: 22%; }
.webdesign-stage__screen--mobile .webdesign-stage__page ul { grid-template-columns: 1fr; gap: 3px; bottom: 4%; }
.webdesign-stage__screen--mobile .webdesign-stage__page li { height: 10px; }
.webdesign-stage__measure { position: absolute; z-index: 3; height: 1px; color: #6366f3; border-top: 1px solid currentColor; font: 600 .58rem/1 monospace; text-align: center; }
.webdesign-stage__measure::before, .webdesign-stage__measure::after { content: ""; position: absolute; top: -5px; width: 1px; height: 10px; background: currentColor; }
.webdesign-stage__measure::before { left: 0; }.webdesign-stage__measure::after { right: 0; }
.webdesign-stage__measure span { position: relative; top: -18px; padding: 0 .4rem; background: var(--color-bg); }
.webdesign-stage__measure--desktop { top: 7%; left: 0; width: 74%; }
.webdesign-stage__measure--tablet { top: 28%; right: 5%; width: 39%; }
.webdesign-stage__measure--mobile { top: 43%; right: 0; width: 18%; }
.webdesign-stage__cursor { position: absolute; z-index: 4; right: 24%; bottom: 0; width: 120px; overflow: visible; fill: #111827; stroke: #6366f3; stroke-width: 1.2; stroke-dasharray: 5 5; }
.webdesign-stage__cursor path:last-child { fill: #111827; stroke: #fff; stroke-dasharray: none; stroke-width: 2; }

.webdesign-questions, .webdesign-formats, .webdesign-process { padding-block: 8rem; }
.webdesign-section-heading, .webdesign-formats__heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: end; gap: 5rem; margin-bottom: 4.5rem; }
.webdesign-section-heading h2, .webdesign-formats__heading h2 { max-width: 870px; margin: 0; }
.webdesign-section-heading p, .webdesign-formats__heading p { max-width: 590px; margin: 0 0 .45rem auto; }
.webdesign-questions__rail { display: grid; grid-template-columns: repeat(4, 1fr); margin-block: 0; padding-block: 0; list-style: none; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.webdesign-questions__rail li { min-height: 290px; padding: 2.4rem 2rem; }
.webdesign-questions__rail li + li { border-left: 1px solid var(--color-border-strong); }
.webdesign-questions__rail li > span { width: 46px; height: 46px; display: grid; place-items: center; color: #6366f3; }
.webdesign-questions__rail svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.webdesign-questions__rail h3 { max-width: 230px; margin: 3.2rem 0 .8rem; font-size: 1.18rem; }
.webdesign-questions__rail p { margin: 0; font-size: .8rem; }

.webdesign-formats { background: color-mix(in srgb, var(--color-surface) 32%, var(--color-bg)); }
.webdesign-formats__gallery { display: grid; grid-template-columns: 1.1fr .86fr .76fr .92fr; align-items: end; gap: 1.35rem; }
.webdesign-format__frame { overflow: hidden; margin-bottom: 1.45rem; color: #111827; background: #fff; border: 1px solid #b8c2d4; box-shadow: 0 18px 45px rgba(24,32,58,.1); }
.webdesign-format--1 .webdesign-format__frame { height: 330px; }
.webdesign-format--2 .webdesign-format__frame { height: 415px; }
.webdesign-format--3 .webdesign-format__frame { height: 365px; }
.webdesign-format--4 .webdesign-format__frame { height: 455px; }
.webdesign-format__page { position: relative; height: calc(100% - 34px); padding: 1.35rem; }
.webdesign-format__page small { color: #6366f3; font: 700 .55rem/1 monospace; }
.webdesign-format__page strong { display: block; max-width: 180px; margin-top: 1.1rem; font-size: clamp(.82rem, 1.2vw, 1.18rem); line-height: 1.12; }
.webdesign-format__page > span { display: block; width: 48%; height: 5px; margin-top: 1rem; background: #dce1eb; }
.webdesign-format__page > span:nth-of-type(2) { width: 34%; margin-top: .4rem; }
.webdesign-format__page b { display: block; width: 54px; height: 21px; margin-top: .85rem; background: #6366f3; }
.webdesign-format__page figure { position: absolute; right: 8%; bottom: 9%; width: 49%; height: 48%; margin: 0; background: #e9ecf6; }
.webdesign-format__page figure::before { content: ""; position: absolute; inset: 20% 18% 0; background: #aab3dc; clip-path: polygon(50% 0,100% 100%,0 100%); }
.webdesign-format--2 .webdesign-format__page figure { top: 44%; right: 8%; left: 8%; width: auto; height: auto; }
.webdesign-format--3 .webdesign-format__frame { border-radius: 22px; border: 6px solid #111827; }
.webdesign-format--3 .webdesign-browserbar { height: 25px; }
.webdesign-format--3 .webdesign-format__page { height: calc(100% - 25px); }
.webdesign-format--3 .webdesign-format__page figure { right: 9%; bottom: 8%; width: 82%; height: 35%; }
.webdesign-format--4 .webdesign-format__page figure { top: 16%; bottom: auto; height: 30%; }
.webdesign-format--4 .webdesign-format__page strong { margin-top: 55%; }
.webdesign-format__number { float: left; margin-right: .65rem; color: #6366f3; font: 700 .68rem/1.7 monospace; }
.webdesign-format h3 { margin: 0 0 .4rem; font-size: 1rem; }
.webdesign-format p { clear: both; margin: 0; font-size: .78rem; }

.webdesign-responsive { padding-block: 7.5rem; color: #fff; background: #07152c; border-color: #273754; }
.webdesign-responsive::before { opacity: .45; }
.webdesign-responsive__grid { display: grid; grid-template-columns: .68fr 1.32fr; align-items: center; gap: clamp(3rem, 7vw, 8rem); }
.webdesign-responsive h2 { color: #fff; }
.webdesign-responsive__copy > p { max-width: 520px; color: #aeb8cc; }
.webdesign-device-switcher { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; border: 1px solid #3a4c6b; }
.webdesign-device-switcher button { min-height: 62px; display: flex; align-items: center; justify-content: center; gap: .65rem; padding: .75rem; color: #d7deec; background: transparent; border: 0; cursor: pointer; font-size: .78rem; font-weight: 650; }
.webdesign-device-switcher button + button { border-left: 1px solid #3a4c6b; }
.webdesign-device-switcher button:hover, .webdesign-device-switcher button[aria-pressed="true"] { color: #fff; background: #6366f3; }
.webdesign-device-switcher button span { width: 22px; height: 15px; border: 1px solid currentColor; border-radius: 2px; }
.webdesign-device-switcher button:nth-child(2) span { width: 13px; height: 18px; }
.webdesign-device-switcher button:nth-child(3) span { width: 9px; height: 18px; }
.webdesign-responsive__workbench { position: relative; min-height: 500px; display: grid; place-items: center; }
.webdesign-responsive__ruler { position: absolute; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; color: #9ba8c2; font: .58rem/1 monospace; border-top: 1px solid #42577a; }
.webdesign-responsive__ruler span { padding-top: .6rem; border-left: 1px solid #42577a; }
.webdesign-responsive__screen { width: 100%; height: 430px; align-self: end; overflow: hidden; color: #111827; background: #fff; border: 1px solid #8ca0c3; box-shadow: 0 30px 70px rgba(0,0,0,.32); transition: width 520ms cubic-bezier(.2,.85,.25,1); }
.webdesign-responsive[data-device="tablet"] .webdesign-responsive__screen { width: 62%; }
.webdesign-responsive[data-device="mobile"] .webdesign-responsive__screen { width: 35%; border: 7px solid #111827; border-radius: 20px; }
.webdesign-responsive__page { height: calc(100% - 34px); padding: 1.5rem; }
.webdesign-responsive__page > header { display: flex; align-items: center; min-height: 34px; border-bottom: 1px solid #e2e6ee; }
.webdesign-responsive__page > header b { font-size: .7rem; }
.webdesign-responsive__page > header i { width: 70px; height: 5px; margin-left: auto; background: #d9dee8; }
.webdesign-responsive__page > main { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1rem; align-items: center; min-height: 245px; padding-block: 1.2rem; }
.webdesign-responsive__page strong { display: block; max-width: 240px; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.05em; }
.webdesign-responsive__page p { max-width: 260px; margin: .7rem 0; color: #667085; font-size: .61rem; }
.webdesign-responsive__page button { padding: .48rem .7rem; color: #fff; background: #6366f3; border: 0; border-radius: 3px; font-size: .55rem; }
.webdesign-responsive__page figure { height: 190px; margin: 0; background: #eef0f8; }
.webdesign-responsive__page figure::before { content: ""; display: block; width: 60%; height: 80%; margin: 10% auto 0; background: #8e99d4; clip-path: polygon(50% 0,100% 100%,0 100%); }
.webdesign-responsive__page > footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.webdesign-responsive__page > footer span { height: 54px; background: #f2f4f8; border: 1px solid #e1e5ed; }
.webdesign-responsive[data-device="tablet"] .webdesign-responsive__page > main, .webdesign-responsive[data-device="mobile"] .webdesign-responsive__page > main { grid-template-columns: 1fr; align-content: start; }
.webdesign-responsive[data-device="tablet"] .webdesign-responsive__page figure { height: 115px; }
.webdesign-responsive[data-device="mobile"] .webdesign-responsive__page { padding: .75rem; }
.webdesign-responsive[data-device="mobile"] .webdesign-responsive__page > main { min-height: 245px; padding-top: .75rem; }
.webdesign-responsive[data-device="mobile"] .webdesign-responsive__page strong { font-size: .9rem; }
.webdesign-responsive[data-device="mobile"] .webdesign-responsive__page p { font-size: .46rem; }
.webdesign-responsive[data-device="mobile"] .webdesign-responsive__page figure { height: 90px; }
.webdesign-responsive[data-device="mobile"] .webdesign-responsive__page > footer { grid-template-columns: 1fr; }
.webdesign-responsive[data-device="mobile"] .webdesign-responsive__page > footer span { height: 18px; }
.webdesign-responsive__outcomes { display: grid; grid-template-columns: repeat(4, 1fr); margin-block: 5rem 0; padding-block: 2.5rem 0; list-style: none; border-top: 1px solid #354968; }
.webdesign-responsive__outcomes li { display: grid; grid-template-columns: 36px 1fr; gap: .8rem; padding-right: 1.5rem; }
.webdesign-responsive__outcomes li + li { padding-left: 1.5rem; border-left: 1px solid #354968; }
.webdesign-responsive__outcomes > li > span { color: #8c90ff; font: 700 .64rem/1.7 monospace; }
.webdesign-responsive__outcomes h3 { margin-bottom: .35rem; color: #fff; font-size: .9rem; }
.webdesign-responsive__outcomes p { margin: 0; color: #aeb8cc; font-size: .7rem; }

.webdesign-process__rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-block: 0; padding-block: 0; list-style: none; }
.webdesign-process__rail::before { content: ""; position: absolute; top: 22px; right: 3%; left: 3%; height: 1px; background: #6366f3; }
.webdesign-process__rail::after { content: ""; position: absolute; top: 18px; right: 2.5%; width: 8px; height: 8px; border-top: 1px solid #6366f3; border-right: 1px solid #6366f3; transform: rotate(45deg); }
.webdesign-process__rail li { position: relative; z-index: 2; padding-right: 2rem; }
.webdesign-process__rail li + li { padding-left: 1.5rem; }
.webdesign-process__rail > li > span { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 1.35rem; color: #fff; background: #6366f3; border-radius: 50%; font: 700 .66rem/1 monospace; }
.webdesign-process__rail h3 { margin-bottom: .35rem; }
.webdesign-process__rail p { min-height: 68px; margin: 0; font-size: .78rem; }
.webdesign-process__sketch { position: relative; height: 130px; margin-top: 1.3rem; border: 1px solid var(--color-border-strong); }
.webdesign-process__sketch i { position: absolute; display: block; border: 1px solid #7780bf; }
.webdesign-process__sketch i:nth-child(1) { inset: 18% 12% 48%; }
.webdesign-process__sketch i:nth-child(2) { right: 12%; bottom: 14%; left: 12%; height: 24%; }
.webdesign-process__sketch i:nth-child(3) { top: 10%; left: 8%; width: 7px; height: 7px; background: #6366f3; border-radius: 50%; }
.webdesign-process__sketch--2 i:nth-child(1) { inset: 42% 36%; }
.webdesign-process__sketch--2 i:nth-child(2) { top: 16%; right: 8%; bottom: auto; left: 8%; height: 1px; box-shadow: 0 76px 0 #7780bf; }
.webdesign-process__sketch--3 i:nth-child(1) { inset: 14% 52% 14% 8%; background: #e7eaff; }
.webdesign-process__sketch--3 i:nth-child(2) { inset: 14% 8% 58% 54%; background: #aab2e9; }
.webdesign-process__sketch--4 i:nth-child(1) { inset: 12% 20% 24% 8%; }
.webdesign-process__sketch--4 i:nth-child(2) { inset: 30% 8% 8% 30%; background: color-mix(in srgb, #6366f3 12%, var(--color-bg-elevated)); }

.webdesign-scope { padding-block: 8rem; background: color-mix(in srgb, #e8ebf3 12%, var(--color-bg)); }
.webdesign-scope__grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(4rem, 8vw, 9rem); }
.webdesign-scope__copy > p { max-width: 620px; }
.webdesign-scope__copy ol { position: relative; display: grid; gap: 0; margin: 3rem 0 0; padding: 0 0 0 2rem; list-style: none; border-left: 1px solid #8990c8; }
.webdesign-scope__copy li { position: relative; display: grid; grid-template-columns: 1fr; padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.webdesign-scope__copy li > span { position: absolute; top: 1.45rem; left: calc(-2rem - 5px); width: 9px; height: 9px; background: #6366f3; border: 2px solid var(--color-bg); border-radius: 50%; box-shadow: 0 0 0 1px #6366f3; }
.webdesign-scope__copy h3, .webdesign-scope__copy li p { margin: 0; }
.webdesign-scope__copy h3 { font-size: .92rem; }
.webdesign-scope__copy li p { font-size: .75rem; }
.webdesign-scope__visual { position: relative; min-height: 560px; }
.webdesign-scope__visual::before { content: ""; position: absolute; inset: 5%; background-image: linear-gradient(rgba(99,102,243,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,243,.1) 1px, transparent 1px); background-size: 55px 55px; }
.webdesign-scope__measure { position: absolute; top: 5%; bottom: 5%; left: 0; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid #8f96cc; }
.webdesign-scope__measure i { width: 12px; height: 1px; background: #8f96cc; }
.webdesign-scope__desktop, .webdesign-scope__mobile { position: absolute; overflow: hidden; color: #111827; background: #fff; border: 1px solid #9faac0; box-shadow: 0 24px 60px rgba(24,32,58,.16); }
.webdesign-scope__desktop { top: 18%; right: 8%; width: 75%; height: 350px; padding: 0 1.5rem 1.5rem; }
.webdesign-scope__desktop .webdesign-browserbar { margin-inline: -1.5rem; }
.webdesign-scope__desktop > strong { display: block; margin: 1.5rem 0 .6rem; font-size: 3rem; line-height: 1; }
.webdesign-scope__desktop > span { display: block; width: 34%; height: 6px; margin-bottom: .5rem; background: #b1b8c8; }
.webdesign-scope__desktop > span:nth-of-type(2) { width: 23%; }
.webdesign-scope__desktop figure { position: absolute; top: 24%; right: 8%; width: 42%; height: 47%; margin: 0; background: #e5e8f5; }
.webdesign-scope__desktop footer { position: absolute; right: 8%; bottom: 8%; left: 8%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.webdesign-scope__desktop footer i { height: 38px; background: #f0f2f7; }
.webdesign-scope__mobile { right: 0; bottom: 5%; width: 29%; height: 315px; padding: 0 .8rem .8rem; border: 6px solid #111827; border-radius: 18px; }
.webdesign-scope__mobile .webdesign-browserbar { height: 23px; margin-inline: -.8rem; }
.webdesign-scope__mobile > span { display: block; width: 58%; height: 8px; margin-top: 1rem; background: #6366f3; }
.webdesign-scope__mobile figure { height: 110px; margin: 1rem 0; background: #e5e8f5; }
.webdesign-scope__mobile > i { display: block; height: 20px; margin-top: .4rem; background: #eef0f5; }
.webdesign-scope__visual > svg { position: absolute; z-index: 4; right: 17%; bottom: 0; width: 180px; overflow: visible; fill: none; stroke: #6366f3; stroke-width: 1.4; stroke-dasharray: 6 5; }

.service-experience--web-design .experience-faq { padding-block: 8rem; }
.service-experience--web-design .experience-faq__grid { grid-template-columns: .7fr 1.3fr; }
.service-experience--web-design .faq-list details { border-color: var(--color-border-strong); }
.service-experience--web-design .faq-list summary { min-height: 78px; font-size: 1rem; }
.webdesign-cta { padding-block: 0; color: #fff; background: #6366f3; border-color: #8e91ff; }
.webdesign-cta__panel { min-height: 260px; display: flex; align-items: center; justify-content: space-between; gap: 4rem; }
.webdesign-cta h2 { max-width: 800px; margin-bottom: .7rem; color: #fff; font-size: clamp(2.5rem, 4vw, 4.25rem); }
.webdesign-cta p { margin: 0; color: #e3e4ff; }
.webdesign-cta .button { flex: 0 0 auto; color: #171a48; background: #fff; border-radius: 4px; box-shadow: 0 18px 40px rgba(30,32,110,.2); }
.webdesign-cta .button:hover { background: #f2f3ff; }

html[data-theme="light"] .webdesign-hero, html[data-theme="light"] .webdesign-questions, html[data-theme="light"] .webdesign-process, html[data-theme="light"] .service-experience--web-design .experience-faq { background: #fff; }
html[data-theme="light"] .webdesign-formats { background: #f7f8fb; }
html[data-theme="light"] .webdesign-scope { background: #f1f3f8; }
html[data-theme="light"] .webdesign-stage__measure span { background: #fff; }
html[data-theme="light"] .webdesign-scope__copy li > span { border-color: #f1f3f8; }

@media (max-width: 1180px) {
    .webdesign-hero__grid { grid-template-columns: 1fr; padding-bottom: 4rem; }
    .webdesign-hero__copy { max-width: 850px; }
    .webdesign-stage { width: min(100%, 880px); margin-inline: auto; }
    .webdesign-formats__gallery { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem 1.5rem; }
    .webdesign-format--1 .webdesign-format__frame, .webdesign-format--3 .webdesign-format__frame { height: 380px; }
    .webdesign-format--2 .webdesign-format__frame, .webdesign-format--4 .webdesign-format__frame { height: 430px; }
    .webdesign-responsive__grid { grid-template-columns: 1fr; }
    .webdesign-responsive__copy { max-width: 760px; }
    .webdesign-responsive__workbench { width: min(100%, 850px); margin-inline: auto; }
}

@media (max-width: 820px) {
    .webdesign-questions, .webdesign-formats, .webdesign-process, .webdesign-scope, .service-experience--web-design .experience-faq { padding-block: 6rem; }
    .webdesign-section-heading, .webdesign-formats__heading, .webdesign-scope__grid, .service-experience--web-design .experience-faq__grid { grid-template-columns: 1fr; gap: 2rem; }
    .webdesign-section-heading p, .webdesign-formats__heading p { margin-left: 0; }
    .webdesign-questions__rail, .webdesign-responsive__outcomes { grid-template-columns: 1fr 1fr; }
    .webdesign-questions__rail li:nth-child(3), .webdesign-responsive__outcomes li:nth-child(3) { border-left: 0; }
    .webdesign-questions__rail li:nth-child(n+3), .webdesign-responsive__outcomes li:nth-child(n+3) { border-top: 1px solid var(--color-border-strong); }
    .webdesign-process__rail { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }
    .webdesign-process__rail::before, .webdesign-process__rail::after { display: none; }
    .webdesign-process__rail li + li { padding-left: 0; }
    .webdesign-scope__grid { gap: 4rem; }
    .webdesign-scope__visual { width: min(100%, 650px); margin-inline: auto; }
    .webdesign-cta__panel { min-height: 330px; align-items: flex-start; justify-content: center; flex-direction: column; }
}

@media (max-width: 600px) {
    .webdesign-hero { padding-top: 3.5rem; }
    .webdesign-hero__grid { min-height: auto; gap: 3rem; }
    .webdesign-hero__copy h1 { font-size: clamp(2.65rem, 12vw, 3.7rem); }
    .webdesign-hero__copy .button { width: 100%; }
    .webdesign-stage { min-height: 410px; }
    .webdesign-stage__screen--desktop { top: 12%; width: 82%; height: 300px; }
    .webdesign-stage__screen--tablet { right: 3%; width: 42%; height: 255px; }
    .webdesign-stage__screen--mobile { width: 22%; height: 220px; }
    .webdesign-stage__measure--desktop { width: 82%; }.webdesign-stage__measure--tablet { right: 3%; width: 42%; }.webdesign-stage__measure--mobile { width: 22%; }
    .webdesign-stage__page { padding: 1rem; }
    .webdesign-stage__page strong { max-width: 140px; font-size: .95rem; }
    .webdesign-stage__page p { max-width: 135px; font-size: .44rem; }
    .webdesign-stage__page figure { top: 48%; width: 52%; height: 28%; }
    .webdesign-stage__screen--desktop .webdesign-stage__page ul { display: none; }
    .webdesign-stage__cursor { display: none; }
    .webdesign-questions, .webdesign-formats, .webdesign-process, .webdesign-scope, .service-experience--web-design .experience-faq { padding-block: 5rem; }
    .webdesign-questions__rail, .webdesign-formats__gallery, .webdesign-responsive__outcomes, .webdesign-process__rail { grid-template-columns: 1fr; }
    .webdesign-questions__rail li { min-height: 0; padding: 2rem 0; }
    .webdesign-questions__rail li + li { border-top: 1px solid var(--color-border-strong); border-left: 0; }
    .webdesign-questions__rail h3 { margin-top: 1rem; }
    .webdesign-formats__gallery { gap: 3rem; }
    .webdesign-format--1 .webdesign-format__frame, .webdesign-format--2 .webdesign-format__frame, .webdesign-format--3 .webdesign-format__frame, .webdesign-format--4 .webdesign-format__frame { height: 360px; }
    .webdesign-responsive { padding-block: 5rem; }
    .webdesign-device-switcher { grid-template-columns: 1fr; }
    .webdesign-device-switcher button + button { border-top: 1px solid #3a4c6b; border-left: 0; }
    .webdesign-responsive__workbench { min-height: 410px; }
    .webdesign-responsive__screen { height: 350px; }
    .webdesign-responsive[data-device="tablet"] .webdesign-responsive__screen { width: 78%; }
    .webdesign-responsive[data-device="mobile"] .webdesign-responsive__screen { width: 52%; }
    .webdesign-responsive__outcomes { margin-top: 3rem; }
    .webdesign-responsive__outcomes li, .webdesign-responsive__outcomes li + li { padding: 1.4rem 0; border-top: 1px solid #354968; border-left: 0; }
    .webdesign-process__rail { gap: 2.5rem; }
    .webdesign-process__rail li { padding: 0; }
    .webdesign-process__rail p { min-height: 0; }
    .webdesign-scope__visual { min-height: 410px; }
    .webdesign-scope__desktop { width: 86%; height: 280px; }
    .webdesign-scope__mobile { width: 38%; height: 245px; }
    .webdesign-scope__desktop > strong { font-size: 2rem; }
    .webdesign-scope__desktop figure { height: 40%; }
    .webdesign-scope__visual > svg { display: none; }
    .webdesign-cta h2 { font-size: clamp(2.35rem, 10vw, 3.3rem); }
    .webdesign-cta .button { width: 100%; }
}

/* Keep the WordPress studio aligned after legacy service rules in the cascade. */
.wpstudio-hero__grid { grid-template-columns: minmax(620px,.93fr) minmax(650px,1.07fr); gap: clamp(3rem,4vw,4rem); }
.wpstudio-hero__copy h1 { font-size: clamp(3.55rem,4vw,4rem); }
.wpstudio-editor__page h2 { max-width: 220px; font-size: clamp(1.65rem,2vw,2.25rem); }
.wpstudio-editor__selection { height: 106px; }

@media (max-width: 1240px) {
    .wpstudio-hero__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .wpstudio-hero__copy h1 { font-size: clamp(2.65rem,12vw,3.7rem); }
    .wpstudio-editor__page h2 { max-width: 230px; font-size: 2rem; }
    .wpstudio-editor__selection { height: 136px; }
}

/* E-Commerce v2: editorial storefront and operational order ledger. */
.service-experience--ecommerce { --service-accent: #6366f3; --commerce-coral: #c96f50; --commerce-ink: #090a0e; --commerce-line: #353946; }
.shopflow-hero { padding-block: 3.5rem 2rem; background-image: linear-gradient(rgba(99,102,243,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,243,.04) 1px,transparent 1px); background-size: 72px 72px; }
.shopflow-hero__grid { min-height: 680px; display: grid; grid-template-columns: minmax(520px,.83fr) minmax(650px,1.17fr); align-items: center; gap: clamp(3rem,5vw,6rem); }
.shopflow-hero__copy h1 { max-width: 680px; font-size: clamp(3.6rem,4.35vw,4.65rem); line-height: .96; letter-spacing: -.055em; }
.shopflow-hero__copy > p { max-width: 620px; }
.shopflow-storefront { position: relative; min-height: 560px; }
.shopflow-browser { position: absolute; top: 2%; right: 115px; left: 0; overflow: hidden; color: #10131b; background: #fff; border: 1px solid #cfd5df; border-radius: 6px; box-shadow: 0 35px 85px rgba(10,18,33,.2); }
.shopflow-browser > header { min-height: 56px; display: flex; align-items: center; gap: 1.1rem; padding: .85rem 1.15rem; border-bottom: 1px solid #dde2e9; }
.shopflow-browser header strong { margin-right: auto; font-size: .72rem; letter-spacing: .07em; }
.shopflow-browser header nav { display: flex; gap: 1.1rem; color: #596173; font-size: .58rem; }
.shopflow-browser header > i { width: 16px; height: 16px; border: 1px solid #252b36; border-radius: 50%; }
.shopflow-browser__feature { height: 345px; display: grid; grid-template-columns: .7fr 1.3fr; overflow: hidden; background: #f7f3ef; }
.shopflow-browser__feature > div { position: relative; z-index: 1; padding: clamp(1.3rem,2.5vw,2.5rem); align-self: center; }
.shopflow-browser__feature small { color: #666d7a; font-size: .54rem; letter-spacing: .16em; }
.shopflow-browser__feature h2 { margin: 1.1rem 0 1.4rem; color: #12151d; font: 600 clamp(1.55rem,2vw,2.3rem)/.98 Georgia,serif; letter-spacing: -.035em; }
.shopflow-browser__feature span { display: inline-block; padding: .65rem .8rem; color: #fff; background: #11151c; border-radius: 2px; font-size: .56rem; font-weight: 700; }
.shopflow-browser__feature img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.shopflow-browser__catalog { height: 88px; display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; padding: .8rem 1rem; background: #fff; }
.shopflow-browser__catalog span { background: #edf0f4; border: 1px solid #e0e4e9; }
.shopflow-order { position: absolute; top: 27%; right: 0; z-index: 2; width: 235px; padding: 1.35rem; color: #141822; background: #fff; border: 1px solid #cfd5df; border-radius: 6px; box-shadow: 0 30px 65px rgba(15,20,35,.2); }
.shopflow-order > div:first-child { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #dde2e9; }
.shopflow-order > div:first-child > span { width: 26px; height: 26px; display: grid; place-items: center; color: #fff; background: var(--service-accent); border-radius: 50%; font-size: .6rem; }
.shopflow-order ol { position: relative; display: grid; gap: 1.15rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.shopflow-order ol::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 13px; width: 1px; background: #d9dfe8; }
.shopflow-order li { position: relative; display: flex; align-items: center; gap: .8rem; color: #697284; font-size: .65rem; }
.shopflow-order li > span { position: relative; z-index: 1; width: 27px; height: 27px; display: grid; place-items: center; background: #f1f3f7; border: 1px solid #d9de; border-radius: 50%; font-size: .54rem; }
.shopflow-order li.is-active { color: #151925; }.shopflow-order li.is-active > span { color: #fff; background: var(--service-accent); border-color: var(--service-accent); }
.shopflow-order__item { display: flex; gap: .7rem; align-items: center; padding-top: 1rem; border-top: 1px solid #dde2e9; }
.shopflow-order__item img { width: 54px; height: 54px; object-fit: cover; object-position: 46% center; background: #f1ede8; }
.shopflow-order__item p { display: grid; gap: .2rem; margin: 0; }.shopflow-order__item strong { font-size: .62rem; }.shopflow-order__item small { color: #747d8d; font-size: .54rem; }

.shopflow-ownership,.shopflow-operations,.shopflow-handover,.shopflow-faq { padding-block: 8rem; }
.shopflow-heading { display: flex; align-items: end; justify-content: space-between; gap: 4rem; margin-bottom: 4rem; }
.shopflow-heading > div { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.55fr); align-items: end; gap: 4rem; }
.shopflow-heading h2 { max-width: 900px; margin: 0; font-size: clamp(2.7rem,4.2vw,4.7rem); line-height: .98; letter-spacing: -.05em; }
.shopflow-heading p { max-width: 570px; margin: 0 0 .4rem auto; }
.shopflow-ownership { background: color-mix(in srgb,var(--color-bg-elevated) 36%,var(--color-bg)); }
.shopflow-ownership__ledger { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }
.shopflow-ownership__ledger li { min-width: 0; min-height: 320px; padding: 2rem 1.8rem; }.shopflow-ownership__ledger li + li { border-left: 1px solid var(--color-border-strong); }
.shopflow-ownership__ledger li > span { color: var(--service-accent); font: 700 .66rem/1 monospace; }
.shopflow-ownership__ledger svg { width: 36px; height: 36px; display: block; margin: 4.8rem 0 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.shopflow-ownership__ledger h3 { margin-bottom: .6rem; font-size: 1.15rem; }.shopflow-ownership__ledger p { margin: 0; font-size: .8rem; }

.shopflow-journey,.shopflow-models,.shopflow-process { padding-block: 8rem; color: #f8f9fc; background: var(--commerce-ink); }
.shopflow-heading--dark p,.shopflow-journey p,.shopflow-models p,.shopflow-process p { color: #abb1bd; }
.shopflow-journey__workspace { padding-inline: var(--gutter); }
.shopflow-journey__rail { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 3rem; }
.shopflow-journey__rail::before { content: ""; position: absolute; top: 17px; right: 9%; left: 9%; height: 1px; background: #555d6c; }
.shopflow-journey__rail button { position: relative; z-index: 1; min-height: 70px; display: grid; justify-items: start; gap: .7rem; padding: 0; color: #aeb4bf; background: transparent; border: 0; cursor: pointer; font: 650 .78rem/1.2 var(--font-sans); text-align: left; }
.shopflow-journey__rail button span { width: 35px; height: 35px; display: grid; place-items: center; color: #adb4c2; background: var(--commerce-ink); border: 1px solid #778092; border-radius: 50%; font: 650 .58rem/1 monospace; transition: color 180ms ease,background 180ms ease,border-color 180ms ease,transform 180ms ease; }
.shopflow-journey__rail button[aria-selected="true"] { color: #fff; }.shopflow-journey__rail button[aria-selected="true"] span { color: #fff; background: var(--service-accent); border-color: #8e90ff; transform: scale(1.08); }
.shopflow-journey__content { display: grid; grid-template-columns: .68fr 1.32fr; align-items: center; gap: clamp(3rem,6vw,7rem); }
.shopflow-journey__copy h3 { max-width: 500px; font-size: clamp(2rem,3.2vw,3.6rem); line-height: 1; }.shopflow-journey__copy p { max-width: 500px; }
.shopflow-journey__copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--commerce-line); }
.shopflow-journey__copy li { padding: .9rem 0; border-bottom: 1px solid var(--commerce-line); font-size: .72rem; }.shopflow-journey__copy li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--commerce-line); }
.shopflow-checkout { overflow: hidden; color: #151925; background: #fff; border: 1px solid #565d6a; border-radius: 5px; box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.shopflow-checkout > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.1rem; border-bottom: 1px solid #dce1e8; }.shopflow-checkout header strong { font-size: .72rem; letter-spacing: .06em; }.shopflow-checkout header small { color: #667085; font-size: .52rem; }
.shopflow-checkout__body { min-height: 400px; display: grid; grid-template-columns: 1.15fr .85fr; }
.shopflow-checkout__form { display: grid; align-content: start; gap: .6rem; padding: 1.6rem; border-right: 1px solid #dce1e8; }
.shopflow-checkout__form strong,.shopflow-checkout__body aside > strong { margin-top: .55rem; font-size: .62rem; }.shopflow-checkout__form i { height: 34px; border: 1px solid #cdd4df; border-radius: 2px; }.shopflow-checkout__form span { height: 42px; border: 1px solid #cdd4df; border-radius: 2px; }.shopflow-checkout__form b { display: grid; place-items: center; height: 38px; margin-top: .35rem; color: #fff; background: var(--service-accent); border-radius: 2px; font-size: .58rem; }
.shopflow-checkout__body aside { display: grid; align-content: start; gap: .8rem; padding: 1.8rem 1.3rem; background: #fafbfc; }.shopflow-checkout__body aside > div { display: flex; gap: .7rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid #dce1e8; }.shopflow-checkout__body aside img { width: 72px; height: 72px; object-fit: cover; }.shopflow-checkout__body aside i,.shopflow-checkout__body aside > span { display: block; height: 6px; background: #d6dce5; }.shopflow-checkout__body aside i { width: 55%; }.shopflow-checkout__body aside > span:nth-of-type(2) { width: 72%; }.shopflow-checkout__body aside b { margin-top: .5rem; font-size: .7rem; }
.shopflow-journey__workspace[data-stage="1"] .shopflow-checkout { transform: translateY(-4px); }.shopflow-journey__workspace[data-stage="2"] .shopflow-checkout__form b { box-shadow: 0 0 0 3px rgba(99,102,243,.2); }.shopflow-journey__workspace[data-stage="3"] .shopflow-checkout__body aside { background: #f2f4ff; }

.shopflow-models { border-top: 1px solid var(--commerce-line); }
.shopflow-models__split { display: grid; grid-template-columns: 1fr 1fr; padding-inline: var(--gutter); border-top: 1px solid var(--commerce-line); border-bottom: 1px solid var(--commerce-line); }
.shopflow-model { min-width: 0; padding: 2.8rem 3rem 3.2rem 0; }.shopflow-model + .shopflow-model { padding-right: 0; padding-left: 3rem; border-left: 1px solid var(--commerce-line); }
.shopflow-model > span { color: #9fa2ff; font: 700 .7rem/1 monospace; }.shopflow-model h3 { margin: 1rem 0 .8rem; font-size: clamp(2rem,3vw,3.4rem); }.shopflow-model > p { max-width: 560px; }.shopflow-model > ul { display: grid; gap: .65rem; margin: 1.5rem 0 2.5rem; padding: 0; list-style: none; }.shopflow-model > ul li { display: flex; align-items: center; gap: .7rem; font-size: .74rem; }.shopflow-model > ul li::before { content: ""; width: 7px; height: 7px; background: var(--service-accent); border-radius: 50%; }
.shopflow-model__screen { min-height: 340px; display: grid; grid-template-columns: 105px 1fr; grid-template-rows: 45px 1fr; overflow: hidden; color: #151923; background: #fff; border: 1px solid #626977; border-radius: 4px; }
.shopflow-model__screen header { grid-column: 1/-1; display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem; border-bottom: 1px solid #dce1e8; }.shopflow-model__screen header strong { margin-right: auto; font-size: .6rem; }.shopflow-model__screen header i { width: 13px; height: 13px; border: 1px solid #242a35; border-radius: 50%; }
.shopflow-model__screen aside { display: grid; align-content: start; gap: .7rem; padding: 1rem .7rem; background: #f5f6f9; border-right: 1px solid #dce1e8; }.shopflow-model__screen aside span { height: 7px; background: #cbd2dc; }.shopflow-model--2 .shopflow-model__screen aside span:first-child { height: 24px; margin-inline: -.7rem; background: #e6e6ff; border-left: 3px solid var(--service-accent); }
.shopflow-model__canvas { position: relative; display: grid; grid-template-columns: 1.4fr .7fr .7fr; gap: .65rem; align-content: start; padding: 1.1rem; }.shopflow-model__canvas figure { height: 150px; margin: 0; overflow: hidden; background: #edf0f4; }.shopflow-model__canvas figure:first-child { grid-row: span 2; height: 240px; }.shopflow-model__canvas img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }.shopflow-model__canvas b { position: absolute; right: 1.1rem; bottom: 1.2rem; width: 35%; height: 28px; background: var(--service-accent); }

.shopflow-operations__board { padding-inline: var(--gutter); }
.shopflow-operations__rail { display: grid; grid-template-columns: repeat(6,1fr); border: 1px solid var(--color-border-strong); }
.shopflow-operations__rail button { min-width: 0; min-height: 120px; display: grid; grid-template-columns: 30px 1fr 18px; align-items: center; gap: .65rem; padding: 1rem; color: var(--color-text); background: transparent; border: 0; cursor: pointer; font: 650 .68rem/1.3 var(--font-sans); text-align: left; }.shopflow-operations__rail button + button { border-left: 1px solid var(--color-border-strong); }.shopflow-operations__rail button > svg:first-child { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; }.shopflow-operations__rail button > svg:last-child { width: 16px; height: 16px; }.shopflow-operations__rail button[aria-selected="true"] { color: #fff; background: var(--service-accent); }.shopflow-operations__rail button[aria-selected="true"] svg { stroke: currentColor; }
.shopflow-operations__detail { min-height: 250px; display: grid; grid-template-columns: 70px 1fr 1fr; align-items: center; gap: 2rem; padding: 2.2rem; border: 1px solid var(--color-border-strong); border-top: 0; }.shopflow-operations__detail > span { color: var(--service-accent); font: 700 1.2rem/1 monospace; }.shopflow-operations__detail h3 { margin-bottom: .45rem; }.shopflow-operations__detail p { max-width: 560px; margin: 0; }.shopflow-operations__signal { display: flex; justify-content: flex-end; align-items: end; gap: .65rem; height: 105px; }.shopflow-operations__signal i { width: 18%; height: 32%; background: color-mix(in srgb,var(--service-accent) 22%,transparent); border: 1px solid color-mix(in srgb,var(--service-accent) 50%,var(--color-border)); transition: height 220ms ease; }.shopflow-operations__signal i:nth-child(2) { height: 58%; }.shopflow-operations__signal i:nth-child(3) { height: 82%; }.shopflow-operations__signal i:nth-child(4) { height: 100%; background: var(--service-accent); }

.shopflow-process__rail { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto; padding: 0; list-style: none; }.shopflow-process__rail > li { min-width: 0; padding-right: 1.7rem; }.shopflow-process__rail > li + li { padding-left: 1.7rem; border-left: 1px solid var(--commerce-line); }.shopflow-process__rail > li > span { color: #9fa2ff; font: 700 1rem/1 monospace; }.shopflow-process__rail h3 { margin: 1rem 0 .55rem; }.shopflow-process__rail p { min-height: 125px; font-size: .76rem; }
.shopflow-process__diagram { position: relative; height: 225px; margin-top: 1.5rem; background: #11131a; border: 1px solid #4b505e; border-radius: 3px; }.shopflow-process__diagram i,.shopflow-process__diagram b { position: absolute; display: block; border: 1px solid #5f66c8; }.shopflow-process__diagram i:nth-child(1) { inset: 15% 12% auto; height: 32px; }.shopflow-process__diagram i:nth-child(2) { top: 39%; right: 12%; left: 12%; height: 32px; }.shopflow-process__diagram i:nth-child(3) { top: 63%; right: 12%; left: 12%; height: 32px; }.shopflow-process__diagram b { top: 23%; left: 17%; width: 8px; height: 8px; background: var(--service-accent); }.shopflow-process__diagram b:nth-of-type(2) { top: 47%; }.shopflow-process__diagram--2 i:nth-child(1) { right: 55%; height: 135px; }.shopflow-process__diagram--2 i:nth-child(2) { left: 53%; height: 60px; }.shopflow-process__diagram--2 i:nth-child(3) { top: 55%; left: 53%; height: 60px; }.shopflow-process__diagram--3 i { left: 12%; right: 48%; }.shopflow-process__diagram--3 b { left: 63%; width: 38px; height: 38px; border-radius: 50%; }.shopflow-process__diagram--3 b:nth-of-type(2) { top: 57%; }.shopflow-process__diagram--4 i { left: 20%; width: 22px; height: 22px; background: var(--service-accent); }.shopflow-process__diagram--4 b { left: 38%; width: 45%; height: 7px; border: 0; background: #636b7c; }

.shopflow-handover { background: color-mix(in srgb,var(--color-bg-elevated) 55%,var(--color-bg)); }
.shopflow-handover__grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(4rem,8vw,9rem); }.shopflow-handover__grid h2 { max-width: 650px; }.shopflow-handover__grid > div:first-child > p { max-width: 600px; }
.shopflow-handover ul { margin: 2.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }.shopflow-handover li { display: flex; align-items: center; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--color-border-strong); }.shopflow-handover li span { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: var(--service-accent); border-radius: 50%; font-size: .58rem; }
.shopflow-lifecycle { overflow: hidden; color: #151925; background: #fff; border: 1px solid #ccd3de; border-radius: 5px; box-shadow: 0 28px 65px rgba(20,28,44,.14); }.shopflow-lifecycle > header { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.5rem; border-bottom: 1px solid #dde2e9; }.shopflow-lifecycle header div { display: grid; gap: .25rem; }.shopflow-lifecycle header strong { font-size: .78rem; }.shopflow-lifecycle header small { color: #7b8493; font-size: .55rem; }.shopflow-lifecycle header > span { padding: .55rem .8rem; color: #155c3a; background: #dff7e9; border-radius: 3px; font-size: .58rem; font-weight: 700; }.shopflow-lifecycle ol { position: relative; display: grid; gap: 0; margin: 0; padding: 1rem 1.5rem 1.5rem; list-style: none; }.shopflow-lifecycle ol::before { content: ""; position: absolute; top: 42px; bottom: 42px; left: 33px; width: 1px; background: #979aff; }.shopflow-lifecycle li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 1rem; align-items: center; padding: .85rem 0; border: 0; }.shopflow-lifecycle li > span { position: relative; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: var(--service-accent); border-radius: 50%; font-size: .54rem; }.shopflow-lifecycle li > div { display: flex; align-items: center; justify-content: space-between; }.shopflow-lifecycle li strong { font-size: .7rem; }.shopflow-lifecycle li small { color: #7a8494; font-size: .54rem; }
.shopflow-faq__list { padding-inline: var(--gutter); }.shopflow-faq__list details { background: transparent; }.shopflow-faq__list summary { min-height: 82px; margin-bottom: .6rem; padding-inline: 1.2rem; border: 1px solid var(--color-border-strong); font-size: 1rem; }.shopflow-faq__list details p { margin: -.6rem 0 .6rem; padding: 1.15rem 1.2rem; border: 1px solid var(--color-border-strong); border-top: 0; }
.shopflow-cta { padding-block: 0; color: #fff; background: var(--service-accent); }.shopflow-cta__panel { min-height: 290px; display: flex; align-items: center; justify-content: space-between; gap: 4rem; }.shopflow-cta h2 { max-width: 900px; margin-bottom: .65rem; color: #fff; font-size: clamp(2.5rem,4.3vw,4.7rem); }.shopflow-cta p { max-width: 700px; margin: 0; color: #e7e8ff; }.shopflow-cta .button { flex: 0 0 auto; color: #15183e; background: #fff; border-radius: 3px; box-shadow: 0 18px 38px rgba(30,32,110,.2); }

html[data-theme="light"] .shopflow-hero,html[data-theme="light"] .shopflow-operations,html[data-theme="light"] .shopflow-faq { background-color: #fff; }
html[data-theme="light"] .shopflow-ownership { background: #f8f8fa; }
html[data-theme="light"] .shopflow-handover { background: #f3f4f7; }

@media (max-width: 1240px) {
    .shopflow-hero__grid { grid-template-columns: 1fr; padding-bottom: 4rem; }
    .shopflow-hero__copy { max-width: 850px; }
    .shopflow-storefront { width: min(100%,900px); margin-inline: auto; }
}
@media (max-width: 960px) {
    .shopflow-ownership,.shopflow-journey,.shopflow-models,.shopflow-operations,.shopflow-process,.shopflow-handover,.shopflow-faq { padding-block: 6rem; }
    .shopflow-heading > div { grid-template-columns: 1fr; gap: 1.5rem; }.shopflow-heading p { margin-left: 0; }
    .shopflow-ownership__ledger { grid-template-columns: 1fr 1fr; }.shopflow-ownership__ledger li:nth-child(3) { border-left: 0; }.shopflow-ownership__ledger li:nth-child(n+3) { border-top: 1px solid var(--color-border-strong); }
    .shopflow-journey__content,.shopflow-handover__grid { grid-template-columns: 1fr; }.shopflow-checkout { width: min(100%,760px); }
    .shopflow-models__split { grid-template-columns: 1fr; }.shopflow-model,.shopflow-model + .shopflow-model { padding: 2.5rem 0; border-left: 0; }.shopflow-model + .shopflow-model { border-top: 1px solid var(--commerce-line); }
    .shopflow-operations__rail { grid-template-columns: repeat(3,1fr); }.shopflow-operations__rail button:nth-child(4) { border-left: 0; }.shopflow-operations__rail button:nth-child(n+4) { border-top: 1px solid var(--color-border-strong); }
    .shopflow-process__rail { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }.shopflow-process__rail > li,.shopflow-process__rail > li + li { padding: 0; border-left: 0; }.shopflow-process__rail p { min-height: 0; }
    .shopflow-handover__grid { gap: 4rem; }.shopflow-cta__panel { min-height: 350px; align-items: flex-start; justify-content: center; flex-direction: column; }
}
@media (max-width: 600px) {
    .shopflow-hero { padding-top: 3.5rem; }.shopflow-hero__grid { min-height: auto; gap: 3rem; }.shopflow-hero__copy h1 { font-size: clamp(2.65rem,12vw,3.7rem); }.shopflow-hero__copy .button { width: 100%; }
    .shopflow-storefront { min-height: 500px; }.shopflow-browser { top: 0; right: 0; }.shopflow-browser > header nav { display: none; }.shopflow-browser__feature { height: 320px; grid-template-columns: .8fr 1.2fr; }.shopflow-browser__feature > div { padding: 1rem; }.shopflow-browser__feature h2 { font-size: 1.35rem; }.shopflow-browser__feature img { object-position: 52% center; }.shopflow-order { top: auto; right: 8px; bottom: 0; width: 82%; padding: 1rem; }.shopflow-order ol { grid-template-columns: repeat(4,1fr); gap: .3rem; }.shopflow-order ol::before { top: 13px; right: 10%; bottom: auto; left: 10%; width: auto; height: 1px; }.shopflow-order li { display: grid; justify-items: center; gap: .4rem; text-align: center; font-size: .48rem; }.shopflow-order__item { display: none; }
    .shopflow-ownership,.shopflow-journey,.shopflow-models,.shopflow-operations,.shopflow-process,.shopflow-handover,.shopflow-faq { padding-block: 5rem; }.shopflow-heading { margin-bottom: 2.8rem; }.shopflow-heading h2 { font-size: clamp(2.35rem,10vw,3.3rem); }
    .shopflow-ownership__ledger { grid-template-columns: 1fr; }.shopflow-ownership__ledger li,.shopflow-ownership__ledger li:nth-child(3) { min-height: 0; padding: 2rem 0; border-top: 1px solid var(--color-border-strong); border-left: 0; }.shopflow-ownership__ledger li:first-child { border-top: 0; }.shopflow-ownership__ledger svg { margin: 2.2rem 0 1rem; }
    .shopflow-journey__rail { overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding-bottom: .8rem; scrollbar-width: none; }.shopflow-journey__rail::-webkit-scrollbar { display: none; }.shopflow-journey__rail::before { display: none; }.shopflow-journey__rail button { min-width: 128px; }.shopflow-journey__copy ul { grid-template-columns: 1fr; }.shopflow-journey__copy li:nth-child(even) { padding-left: 0; border-left: 0; }.shopflow-checkout__body { min-height: 410px; grid-template-columns: 1fr; }.shopflow-checkout__form { border-right: 0; }.shopflow-checkout__body aside { display: none; }
    .shopflow-model h3 { font-size: 2.2rem; }.shopflow-model__screen { min-height: 290px; grid-template-columns: 82px 1fr; }.shopflow-model__canvas { grid-template-columns: 1fr 1fr; }.shopflow-model__canvas figure:first-child { height: 190px; }.shopflow-model__canvas figure { height: 90px; }
    .shopflow-operations__rail { display: flex; overflow-x: auto; scrollbar-width: none; }.shopflow-operations__rail::-webkit-scrollbar { display: none; }.shopflow-operations__rail button,.shopflow-operations__rail button:nth-child(4),.shopflow-operations__rail button:nth-child(n+4) { min-width: 150px; border-top: 0; border-left: 1px solid var(--color-border-strong); }.shopflow-operations__rail button:first-child { border-left: 0; }.shopflow-operations__detail { min-height: 330px; grid-template-columns: 42px 1fr; align-items: start; padding: 1.5rem; }.shopflow-operations__signal { grid-column: 1/-1; justify-content: center; }.shopflow-process__rail { grid-template-columns: 1fr; }.shopflow-process__diagram { height: 200px; }
    .shopflow-lifecycle > header { padding: 1rem; }.shopflow-lifecycle ol { padding-inline: 1rem; }.shopflow-lifecycle ol::before { left: 28px; }.shopflow-cta__panel { min-height: 390px; }.shopflow-cta h2 { font-size: clamp(2.35rem,10vw,3.3rem); }.shopflow-cta .button { width: 100%; }
}

/* Web Maintenance v2: calm control room and documented care cycle. */
.service-experience--web-maintenance { --service-accent: #6366f3; --careops-health: #24c982; --careops-ink: #080b11; --careops-ink-soft: #10151e; --careops-line: #303846; }
.careops-hero { padding-block: 3.5rem 2rem; }
.careops-hero__grid { min-height: 670px; display: grid; grid-template-columns: minmax(560px,.9fr) minmax(620px,1.1fr); align-items: center; gap: clamp(3rem,4vw,4rem); }
.careops-hero__copy h1 { max-width: 690px; font-size: clamp(3.25rem,3.75vw,4.2rem); line-height: .96; letter-spacing: -.06em; }
.careops-hero__copy > p { max-width: 620px; }
.careops-console { position: relative; overflow: hidden; color: #151923; background: #fff; border: 1px solid #cfd6e2; border-radius: 7px; box-shadow: 0 32px 80px rgba(20,29,48,.14); }
.careops-console::after { content: ""; position: absolute; top: 0; bottom: 0; left: 76%; width: 1px; background: linear-gradient(transparent,#6366f3 30%,#9799ff 50%,#6366f3 70%,transparent); opacity: .9; animation: careopsScan 4s ease-in-out infinite; }
.careops-console > header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 1.25rem; border-bottom: 1px solid #dbe0e8; }
.careops-console > header > div { display: grid; grid-template-columns: 18px 1fr; gap: .12rem .55rem; }.careops-console > header > div > span { grid-row: 1 / 3; width: 18px; height: 18px; align-self: center; background: #6366f3; border-radius: 4px; box-shadow: inset 6px 0 rgba(255,255,255,.35); }.careops-console > header strong { font-size: .86rem; }.careops-console > header small { color: #70798a; font-size: .56rem; }
.careops-console > header p { display: grid; grid-template-columns: 9px auto; gap: .12rem .45rem; margin: 0; color: #232a36; font-size: .68rem; }.careops-console > header p > i { grid-row: 1 / 3; width: 9px; height: 9px; align-self: center; background: var(--careops-health); border-radius: 50%; }.careops-console > header p small { grid-column: 2; }
.careops-console__body { min-height: 400px; display: grid; grid-template-columns: 145px 1fr; }
.careops-console__body nav { padding: 1rem .75rem; background: #f7f8fb; border-right: 1px solid #e0e4eb; }.careops-console__body nav span { display: flex; align-items: center; gap: .55rem; min-height: 42px; padding: .55rem .65rem; color: #657084; border-radius: 4px; font-size: .62rem; }.careops-console__body nav span.is-active { color: #4e51db; background: #ececff; }.careops-console__body nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.careops-console__workspace { padding: 1rem; }.careops-console__cards { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; }.careops-console__cards article { min-height: 86px; display: grid; align-content: center; gap: .65rem; padding: .8rem; border: 1px solid #dfe3ea; border-radius: 4px; }.careops-console__cards small { color: #667085; font-size: .56rem; }.careops-console__cards strong { display: flex; align-items: center; gap: .45rem; font-size: .7rem; }.careops-console__cards i { width: 9px; height: 9px; background: var(--careops-health); border-radius: 50%; }
.careops-console__columns { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .7rem; }.careops-console__columns section { min-height: 245px; padding: 1rem; border: 1px solid #dfe3ea; border-radius: 4px; }.careops-console__columns h2 { margin-bottom: .8rem; color: #171b24; font-size: .68rem; letter-spacing: -.02em; }.careops-console__columns ol { margin: 0; padding: 0; list-style: none; }.careops-console__columns li { min-height: 42px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .5rem; border-top: 1px solid #edf0f4; color: #3f4857; font-size: .57rem; }.careops-console__columns li > i { width: 8px; height: 8px; background: var(--careops-health); border-radius: 50%; }.careops-console__columns li small { color: #1ca66c; }.careops-console__columns section + section li { grid-template-columns: 22px 1fr; }.careops-console__columns li svg { width: 20px; height: 20px; padding: 4px; color: #5d60e8; background: #eeeeff; fill: none; stroke: currentColor; stroke-width: 1.7; border-radius: 3px; }
.careops-console > footer { position: relative; min-height: 108px; display: grid; align-content: center; gap: .42rem; padding: 1rem 1.25rem; color: #aab3c1; background: #111722; font: .54rem/1.25 monospace; }.careops-console > footer code { color: inherit; }.careops-console > footer span { position: absolute; top: 0; bottom: 0; left: 76%; width: 2px; background: #686bff; box-shadow: 0 0 15px #6366f3; }

.careops-cycle,.careops-coverage,.careops-response,.careops-risk,.careops-report,.careops-process,.careops-faq { padding-block: 8rem; }
.careops-heading { margin-bottom: 4.5rem; }.careops-heading > div { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.65fr); align-items: end; gap: 5rem; }.careops-heading h2 { max-width: 860px; margin: 0; font-size: clamp(2.8rem,4.1vw,4.6rem); line-height: .98; letter-spacing: -.055em; }.careops-heading p { max-width: 570px; margin: 0 0 .35rem auto; }

.careops-cycle__workspace { display: grid; grid-template-columns: minmax(480px,1fr) minmax(360px,.82fr); align-items: center; gap: clamp(4rem,8vw,9rem); }
.careops-cycle__orbit { position: relative; width: min(100%,480px); aspect-ratio: 1; margin-inline: auto; border: 1px solid var(--color-border-strong); border-radius: 50%; }.careops-cycle__orbit::before { content: ""; position: absolute; inset: 17%; border: 1px solid var(--color-border); border-radius: 50%; background: color-mix(in srgb,var(--service-accent) 3%,transparent); }.careops-cycle__orbit > strong { position: absolute; inset: 36%; display: grid; place-items: center; color: var(--color-text); text-align: center; font-size: 1rem; }
.careops-cycle__orbit button { position: absolute; z-index: 2; width: 86px; min-height: 86px; display: grid; place-items: center; gap: .35rem; padding: .65rem; color: var(--color-muted); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 50%; cursor: pointer; font: 650 .72rem/1.1 var(--font-sans); transition: color 180ms ease,background 180ms ease,transform 180ms ease; }.careops-cycle__orbit button:nth-child(1) { top: -8px; left: 50%; transform: translateX(-50%); }.careops-cycle__orbit button:nth-child(2) { top: 50%; right: -8px; transform: translateY(-50%); }.careops-cycle__orbit button:nth-child(3) { bottom: -8px; left: 50%; transform: translateX(-50%); }.careops-cycle__orbit button:nth-child(4) { top: 50%; left: -8px; transform: translateY(-50%); }.careops-cycle__orbit button[aria-selected="true"] { color: #fff; background: var(--service-accent); border-color: var(--service-accent); box-shadow: 0 0 0 12px color-mix(in srgb,var(--service-accent) 14%,transparent); }.careops-cycle__orbit button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.careops-cycle__panel { min-height: 430px; display: grid; align-items: center; padding-left: clamp(2rem,4vw,4rem); border-left: 1px solid var(--color-border-strong); }.careops-cycle__panel article > span { color: var(--service-accent); font: 700 .72rem/1 monospace; }.careops-cycle__panel h3 { max-width: 520px; margin: 1.1rem 0 .75rem; font-size: clamp(2rem,3vw,3rem); }.careops-cycle__panel article > p { max-width: 570px; }.careops-cycle__panel ul { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }.careops-cycle__panel li { display: flex; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: .86rem; }.careops-cycle__panel li i { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; color: var(--service-accent); border: 1px solid var(--service-accent); border-radius: 50%; font: normal .62rem/1 sans-serif; }

.careops-coverage { background: color-mix(in srgb,var(--color-bg-elevated) 42%,var(--color-bg)); }.careops-coverage__ledger { margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }.careops-coverage__ledger li { position: relative; min-height: 112px; display: grid; grid-template-columns: 60px minmax(190px,.45fr) 1fr 42px; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--color-border-strong); }.careops-coverage__ledger li > span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-muted); }.careops-coverage__ledger svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }.careops-coverage__ledger h3,.careops-coverage__ledger p { margin: 0; }.careops-coverage__ledger h3 { font-size: 1.08rem; }.careops-coverage__ledger p { max-width: 760px; padding-left: 2rem; border-left: 1px solid var(--color-border); font-size: .86rem; }.careops-coverage__ledger b { color: var(--service-accent); font: 700 .68rem/1 monospace; }

.careops-response,.careops-process { color: #f8f9fc; background: var(--careops-ink); }.careops-heading--dark p,.careops-response p,.careops-process p { color: #aeb5c1; }
.careops-response__rail { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 2.5rem; }.careops-response__rail::before { content: ""; position: absolute; top: 29px; right: 9%; left: 9%; height: 1px; background: #596170; }.careops-response__rail button { position: relative; z-index: 1; display: grid; justify-items: start; gap: .7rem; padding: 0; color: #b1b8c4; background: transparent; border: 0; cursor: pointer; font: 650 .82rem/1 var(--font-sans); }.careops-response__rail button > span { width: 58px; height: 58px; display: grid; place-items: center; background: var(--careops-ink); border: 2px solid #abb3c0; border-radius: 50%; }.careops-response__rail svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }.careops-response__rail button[aria-selected="true"] { color: #999bff; }.careops-response__rail button[aria-selected="true"] > span { color: #fff; background: var(--service-accent); border-color: var(--service-accent); box-shadow: 0 0 0 8px rgba(99,102,243,.13); }
.careops-response__panel { min-height: 215px; padding: 2rem; background: var(--careops-ink-soft); border: 1px solid #3b4554; border-radius: 5px; }.careops-response__panel article { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }.careops-response__panel article[hidden] { display: none; }.careops-response__panel article > div { display: grid; grid-template-columns: 58px 1fr; column-gap: 1.4rem; }.careops-response__panel article > div > span { grid-row: 1 / 3; width: 58px; height: 58px; display: grid; place-items: center; color: #fff; background: var(--service-accent); border-radius: 4px; font: 700 .75rem/1 monospace; }.careops-response__panel h3 { margin: .1rem 0 .45rem; }.careops-response__panel article > div > p { grid-column: 2; margin: 0; font-size: .86rem; }.careops-response__panel dl { margin: 0; padding-left: 3rem; border-left: 1px solid #394251; }.careops-response__panel dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: .45rem 0; }.careops-response__panel dt { color: #8e98a8; font-size: .72rem; }.careops-response__panel dd { margin: 0; color: #edf0f5; font-size: .74rem; }.careops-response__panel dd i { display: inline-block; width: 9px; height: 9px; margin-right: .5rem; background: var(--careops-health); border-radius: 50%; }

.careops-risk__table { border-top: 1px solid var(--color-border-strong); }.careops-risk__table > div { display: grid; grid-template-columns: .8fr 1.05fr 1fr; border-bottom: 1px solid var(--color-border-strong); }.careops-risk__table strong,.careops-risk__table span { min-width: 0; padding: 1.05rem 1.15rem; font-size: .82rem; }.careops-risk__table strong { color: var(--color-muted); font-size: .7rem; }.careops-risk__table span + span,.careops-risk__table strong + strong { border-left: 1px solid var(--color-border); }.careops-risk__table .is-control { color: var(--service-accent); font-weight: 650; }

.careops-report { background: color-mix(in srgb,var(--color-bg-elevated) 55%,var(--color-bg)); }.careops-report__grid { display: grid; grid-template-columns: .68fr 1.32fr; align-items: start; gap: clamp(3rem,7vw,8rem); }.careops-report__grid h2 { max-width: 610px; font-size: clamp(2.7rem,3.6vw,4.1rem); line-height: 1; }.careops-report__grid > div:first-child p { max-width: 520px; }.careops-report__table { overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: 5px; }.careops-report__table > div { display: grid; grid-template-columns: 1.1fr .75fr 1.2fr .72fr; }.careops-report__table > div + div { border-top: 1px solid var(--color-border); }.careops-report__table strong,.careops-report__table span { min-width: 0; padding: .95rem .85rem; font-size: .7rem; }.careops-report__table strong { color: var(--color-muted); }.careops-report__cell--1,.careops-report__cell--3 { align-self: center; justify-self: start; padding-block: .35rem !important; color: #3d4350; background: #e8eaf0; border-radius: 4px; }.careops-report__cell--1 { color: #0c7250; background: #d9f6ea; }

.careops-process__rail { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto; padding: 0; list-style: none; }.careops-process__rail li { display: grid; grid-template-columns: 44px 1fr; align-content: start; gap: 1rem; min-width: 0; }.careops-process__rail li > span { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: #454e61; border-radius: 5px; font-weight: 700; }.careops-process__rail li > i { align-self: center; height: 1px; background: #697282; }.careops-process__rail h3,.careops-process__rail p { grid-column: 1 / -1; padding-right: 3rem; }.careops-process__rail h3 { max-width: 250px; margin: .5rem 0 0; font-size: 1.25rem; }.careops-process__rail p { max-width: 290px; margin: -.4rem 0 0; font-size: .78rem; }

.careops-faq__grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem,7vw,8rem); }.careops-faq__grid h2 { max-width: 560px; font-size: clamp(2.7rem,3.6vw,4rem); }.careops-faq__grid > div:first-child p { max-width: 430px; }.careops-faq__list details { background: transparent; }.careops-faq__list summary { min-height: 76px; padding-inline: 1rem; border-top: 1px solid var(--color-border-strong); font-size: .92rem; }.careops-faq__list details:last-child summary { border-bottom: 1px solid var(--color-border-strong); }.careops-faq__list details p { margin: 0; padding: 0 1rem 1.4rem; border-bottom: 1px solid var(--color-border-strong); }
.careops-cta { color: #fff; background: var(--service-accent); }.careops-cta__panel { min-height: 300px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5rem; }.careops-cta h2 { max-width: 760px; margin-bottom: .7rem; color: #fff; font-size: clamp(2.7rem,4.2vw,4.6rem); }.careops-cta p { max-width: 680px; margin: 0; color: #ececff; }.careops-cta .button { color: #151733; background: #fff; border-radius: 4px; box-shadow: 0 18px 38px rgba(31,32,108,.18); }

html[data-theme="light"] .careops-hero,html[data-theme="light"] .careops-cycle,html[data-theme="light"] .careops-risk,html[data-theme="light"] .careops-faq { background-color: #fff; }
html[data-theme="light"] .careops-coverage { background: #f7f8fa; }
html[data-theme="light"] .careops-report { background: #f3f4f7; }
html[data-theme="light"] .careops-cycle__orbit button { background: #fff; }
html[data-theme="light"] .careops-cycle__orbit button[aria-selected="true"] { color: #fff; background: var(--service-accent); }

@keyframes careopsScan { 0%,100% { transform: translateX(-36px); opacity: .25; } 50% { transform: translateX(36px); opacity: .9; } }

@media (max-width: 1240px) {
    .careops-hero__grid { grid-template-columns: 1fr; padding-bottom: 4rem; }.careops-hero__copy { max-width: 850px; }.careops-console { width: min(100%,920px); margin-inline: auto; }
}
@media (max-width: 960px) {
    .careops-cycle,.careops-coverage,.careops-response,.careops-risk,.careops-report,.careops-process,.careops-faq { padding-block: 6rem; }
    .careops-heading > div,.careops-report__grid,.careops-faq__grid { grid-template-columns: 1fr; gap: 1.5rem; }.careops-heading p { margin-left: 0; }
    .careops-cycle__workspace { grid-template-columns: 1fr; gap: 4rem; }.careops-cycle__panel { min-height: 0; padding: 2.5rem 0 0; border-top: 1px solid var(--color-border-strong); border-left: 0; }
    .careops-response__panel article { grid-template-columns: 1fr; gap: 2rem; }.careops-response__panel dl { padding: 2rem 0 0; border-top: 1px solid #394251; border-left: 0; }
    .careops-process__rail { grid-template-columns: 1fr 1fr; gap: 3.5rem 2rem; }.careops-process__rail li > i { display: none; }
}
@media (max-width: 680px) {
    .careops-hero { padding-top: 3.5rem; }.careops-hero__grid { min-height: auto; gap: 3rem; }.careops-hero__copy h1 { font-size: clamp(2.65rem,12vw,3.7rem); }.careops-hero__copy .button { width: 100%; }
    .careops-console > header { align-items: flex-start; }.careops-console > header p { display: none; }.careops-console__body { min-height: 450px; grid-template-columns: 86px 1fr; }.careops-console__body nav { padding-inline: .45rem; }.careops-console__body nav span { justify-content: center; }.careops-console__body nav span svg { width: 20px; height: 20px; }.careops-console__body nav span { font-size: 0; }.careops-console__workspace { padding: .65rem; }.careops-console__cards { grid-template-columns: 1fr 1fr; gap: .45rem; }.careops-console__cards article { min-height: 74px; }.careops-console__columns { grid-template-columns: 1fr; }.careops-console__columns section { min-height: 220px; }.careops-console__columns section + section { display: none; }.careops-console > footer { min-height: 88px; }.careops-console > footer code:nth-child(n+2) { display: none; }
    .careops-cycle,.careops-coverage,.careops-response,.careops-risk,.careops-report,.careops-process,.careops-faq { padding-block: 5rem; }.careops-heading { margin-bottom: 2.8rem; }.careops-heading h2,.careops-report__grid h2,.careops-faq__grid h2 { font-size: clamp(2.35rem,10vw,3.3rem); }
    .careops-cycle__orbit { width: 100%; aspect-ratio: auto; display: flex; gap: .6rem; overflow-x: auto; border: 0; border-radius: 0; scrollbar-width: none; }.careops-cycle__orbit::-webkit-scrollbar { display: none; }.careops-cycle__orbit::before,.careops-cycle__orbit > strong { display: none; }.careops-cycle__orbit button,.careops-cycle__orbit button:nth-child(n) { position: static; min-width: 122px; min-height: 78px; transform: none; border-radius: 4px; }.careops-cycle__orbit button[aria-selected="true"] { box-shadow: none; }.careops-cycle__panel h3 { font-size: 2rem; }
    .careops-coverage__ledger li { grid-template-columns: 48px 1fr 34px; gap: .75rem; padding-block: 1.5rem; }.careops-coverage__ledger h3 { font-size: 1rem; }.careops-coverage__ledger p { grid-column: 2 / -1; padding: 0; border-left: 0; }.careops-coverage__ledger b { grid-column: 3; grid-row: 1; }
    .careops-response__rail { overflow-x: auto; gap: .75rem; scrollbar-width: none; }.careops-response__rail::-webkit-scrollbar { display: none; }.careops-response__rail::before { display: none; }.careops-response__rail button { min-width: 100px; }.careops-response__panel { padding: 1.35rem; }.careops-response__panel article > div { grid-template-columns: 44px 1fr; }.careops-response__panel article > div > span { width: 44px; height: 44px; }.careops-response__panel dl > div { grid-template-columns: 1fr; gap: .25rem; }
    .careops-risk__table { overflow-x: auto; }.careops-risk__table > div { min-width: 660px; }.careops-report__table { overflow-x: auto; }.careops-report__table > div { min-width: 690px; }
    .careops-process__rail { grid-template-columns: 1fr; gap: 2.5rem; }.careops-process__rail h3,.careops-process__rail p { padding-right: 0; }
    .careops-cta__panel { min-height: 390px; grid-template-columns: 1fr; align-content: center; gap: 2.5rem; }.careops-cta h2 { font-size: clamp(2.4rem,10vw,3.4rem); }.careops-cta .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .careops-console::after { animation: none; } }

/* SEO v2: editorial search-signal map and responsible measurement. */
.service-experience--seo { --service-accent: #6366f3; }
.searchlab-hero { padding-block: 3.5rem 2rem; }
.searchlab-hero__grid { min-height: 690px; display: grid; grid-template-columns: minmax(540px,.9fr) minmax(620px,1.1fr); align-items: center; gap: clamp(3rem,5vw,5.5rem); }
.searchlab-hero__copy h1 { max-width: 690px; font-size: clamp(3.3rem,3.9vw,4.45rem); line-height: .96; letter-spacing: -.06em; }
.searchlab-hero__copy > p { max-width: 620px; }
.searchlab-map { position: relative; min-height: 520px; padding-top: 2.5rem; }
.searchlab-map > small,.searchlab-audit > small,.searchlab-intent__panel small,.searchlab-trend > small,.searchlab-insight article > small { color: var(--color-muted); font: 700 .68rem/1.2 monospace; letter-spacing: .14em; text-transform: uppercase; }
.searchlab-map__rail { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.15rem; }
.searchlab-map__rail::before { content: ""; position: absolute; top: 45px; left: 10%; right: 10%; height: 1px; background: var(--color-border-strong); }
.searchlab-map__rail::after { content: ""; position: absolute; top: 45px; left: 10%; width: 32%; height: 2px; background: var(--service-accent); animation: searchlabSignal 3.8s ease-in-out infinite; transform-origin: left; }
.searchlab-map__rail article { position: relative; z-index: 1; }
.searchlab-map__rail article > span { width: 66px; height: 66px; display: grid; place-items: center; color: var(--color-muted); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 50%; }
.searchlab-map__rail article.is-active > span { color: #fff; background: var(--service-accent); border-color: var(--service-accent); box-shadow: 0 0 0 10px rgba(99,102,243,.11); }
.searchlab-map svg,.searchlab-intent__tabs svg,.searchlab-foundations__ledger svg,.searchlab-audit svg,.searchlab-measure__tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.searchlab-map__rail h2 { margin: 1rem 0 .35rem; font-size: .98rem; }.searchlab-map__rail p { margin: 0; font-size: .72rem; line-height: 1.45; }
.searchlab-result { width: min(76%,620px); margin: 3.3rem 0 0 auto; padding: 1.2rem 1.4rem 1.35rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: 5px; box-shadow: 0 18px 48px rgba(17,24,39,.08); }
.searchlab-result > div { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: .8rem; margin-bottom: 1rem; padding: .7rem .85rem; border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text); font-size: .72rem; }
.searchlab-result > div svg { width: 18px; height: 18px; }.searchlab-result > div i { font-style: normal; }.searchlab-result > small { color: var(--color-muted); font-size: .62rem; }
.searchlab-result h3 { margin: .35rem 0; color: var(--service-accent); font-size: 1rem; }.searchlab-result p { margin: 0; font-size: .72rem; }

.searchlab-intent,.searchlab-foundations,.searchlab-anatomy,.searchlab-measure,.searchlab-honesty,.searchlab-process,.searchlab-faq { padding-block: 8rem; }
.searchlab-heading { display: grid; grid-template-columns: 1.08fr .72fr; align-items: end; gap: clamp(3rem,7vw,8rem); margin-bottom: 4rem; }.searchlab-heading > div { display: contents; }
.searchlab-heading h2 { max-width: 920px; margin: 0; font-size: clamp(3rem,4.3vw,4.8rem); line-height: .98; letter-spacing: -.055em; }.searchlab-heading p { max-width: 590px; margin: 0 0 .35rem; }
.searchlab-intent__tabs { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--color-border-strong); }
.searchlab-intent__tabs button { min-height: 82px; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.4rem; color: var(--color-muted); background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer; font: 650 1rem/1.2 var(--font-sans); }
.searchlab-intent__tabs button + button { border-left: 1px solid var(--color-border); }.searchlab-intent__tabs button[aria-selected="true"] { color: var(--service-accent); background: color-mix(in srgb,var(--service-accent) 7%,transparent); border-bottom-color: var(--service-accent); }
.searchlab-intent__panel { min-height: 430px; padding-top: 3rem; }.searchlab-intent__panel article { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem,7vw,7rem); }.searchlab-intent__panel article[hidden] { display: none; }
.searchlab-intent__panel article > div + div { padding-left: clamp(2rem,5vw,5rem); border-left: 1px solid var(--color-border-strong); }.searchlab-intent__panel h3 { max-width: 650px; margin: 1rem 0 3rem; font-size: clamp(2.2rem,3.2vw,3.7rem); }.searchlab-intent__panel p { max-width: 620px; }
.searchlab-intent__panel ol { margin: 1.5rem 0 0; padding: 0; list-style: none; }.searchlab-intent__panel li { display: flex; gap: 1rem; padding: .9rem 0; color: var(--color-muted); }
.searchlab-intent__panel li > i { width: 25px; height: 25px; flex: 0 0 auto; border: 2px solid var(--color-border-strong); border-radius: 50%; }.searchlab-intent__panel li.is-selected { color: var(--color-text); }.searchlab-intent__panel li.is-selected > i { border: 7px solid var(--service-accent); }
.searchlab-intent__panel li span { display: grid; gap: .35rem; }.searchlab-intent__panel li strong { font-size: 1rem; }.searchlab-intent__panel li small { max-width: 440px; color: var(--color-muted); font: 400 .8rem/1.45 var(--font-sans); letter-spacing: 0; text-transform: none; }

.searchlab-foundations { background: var(--color-bg-soft); }.searchlab-foundations__ledger { margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }
.searchlab-foundations__ledger li { min-height: 118px; display: grid; grid-template-columns: 64px 58px .8fr 1.2fr; align-items: center; gap: 1.4rem; border-bottom: 1px solid var(--color-border-strong); }
.searchlab-foundations__ledger b { color: var(--color-muted); font: 500 .82rem/1 monospace; }.searchlab-foundations__ledger li > span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--color-text); border-left: 1px solid var(--color-border); }
.searchlab-foundations__ledger h3 { margin: 0; font-size: 1.15rem; }.searchlab-foundations__ledger p { margin: 0; padding-left: 2rem; border-left: 1px solid var(--color-border); font-size: .86rem; }

.searchlab-anatomy__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(4rem,7vw,7rem); }
.searchlab-page { position: relative; min-height: 480px; margin-left: 7rem; border: 1px solid var(--color-border-strong); border-radius: 5px; }
.searchlab-page > header { min-height: 44px; display: flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg-soft); }.searchlab-page > header i { width: 8px; height: 8px; background: var(--color-border-strong); border-radius: 50%; }
.searchlab-page > header span { flex: 1; margin-left: .7rem; padding: .45rem .7rem; color: var(--color-muted); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 3px; font-size: .62rem; }
.searchlab-page__body { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2rem; padding: 2rem; }.searchlab-page__main,.searchlab-page__aside { display: grid; align-content: start; gap: .75rem; }
.searchlab-page__main > b { width: 42%; height: 12px; background: var(--color-border-strong); }.searchlab-page__main > strong { width: 82%; height: 28px; background: color-mix(in srgb,var(--color-text) 28%,transparent); }
.searchlab-page__main > i,.searchlab-page__aside > i { height: 8px; background: var(--color-border); }.searchlab-page__main > i:nth-of-type(2) { width: 92%; }.searchlab-page__main > i:nth-of-type(3) { width: 84%; }
.searchlab-page__links { display: grid; gap: .5rem; margin-top: 1.5rem; }.searchlab-page__links span { width: 55%; height: 8px; background: color-mix(in srgb,var(--service-accent) 32%,transparent); }
.searchlab-page__body code { margin-top: 1.2rem; padding: 1rem; color: var(--color-muted); background: var(--color-bg-soft); border: 1px solid var(--color-border); font-size: .58rem; }
.searchlab-page__aside { padding: 1rem; border: 1px solid var(--color-border); }.searchlab-page__body figure { height: 130px; margin: 0; background: var(--color-bg-soft); }
.searchlab-page__label { position: absolute; right: calc(100% - 60px); width: 155px; display: flex; align-items: center; justify-content: flex-end; gap: .65rem; color: var(--color-text); font-size: .68rem; white-space: nowrap; }
.searchlab-page__label i { width: 70px; height: 1px; background: var(--service-accent); }.searchlab-page__label i::after { content: ""; display: block; width: 8px; height: 8px; margin: -3px 0 0 auto; background: var(--service-accent); border-radius: 50%; }
.searchlab-page__label--1 { top: 108px; }.searchlab-page__label--2 { top: 164px; }.searchlab-page__label--3 { top: 230px; }.searchlab-page__label--4 { top: 315px; }.searchlab-page__label--5 { top: 401px; }
.searchlab-audit > small { display: block; margin-bottom: 1rem; }.searchlab-audit ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }
.searchlab-audit li { min-height: 102px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 1.2rem; border-bottom: 1px solid var(--color-border-strong); }.searchlab-audit li > span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-text); background: var(--color-bg-soft); }
.searchlab-audit h3,.searchlab-audit p { margin: 0; }.searchlab-audit h3 { font-size: .98rem; }.searchlab-audit p { margin-top: .35rem; font-size: .75rem; line-height: 1.45; }.searchlab-audit li > b { min-width: 74px; padding: .55rem .8rem; color: var(--color-muted); background: var(--color-bg-soft); text-align: center; font-size: .68rem; }

.searchlab-measure,.searchlab-process { color: #f8f9fc; background: #070b12; }.searchlab-heading--dark p,.searchlab-measure p,.searchlab-process p { color: #aeb5c1; }
.searchlab-measure__tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; margin-left: 42%; margin-bottom: 1rem; }.searchlab-measure__tabs button { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: .7rem; padding: .7rem; color: #c2c9d4; background: transparent; border: 1px solid #495361; border-radius: 3px; cursor: pointer; font: 600 .76rem/1.2 var(--font-sans); }.searchlab-measure__tabs button[aria-selected="true"] { color: #fff; background: var(--service-accent); border-color: var(--service-accent); }
.searchlab-measure__panel { min-height: 330px; display: grid; grid-template-columns: 1.55fr .85fr; border: 1px solid #3c4653; border-radius: 4px; }.searchlab-trend { position: relative; padding: 1.3rem; border-right: 1px solid #3c4653; }.searchlab-trend > small { color: #aeb5c1; }
.searchlab-trend svg { position: absolute; inset: 3.5rem 1.3rem 1.3rem; width: calc(100% - 2.6rem); height: calc(100% - 4.8rem); overflow: visible; }.searchlab-trend .grid { fill: none; stroke: #303946; stroke-width: 1; stroke-dasharray: 4 8; }.searchlab-trend .line { fill: none; stroke: var(--service-accent); stroke-width: 3; vector-effect: non-scaling-stroke; }.searchlab-trend circle { fill: #7779ff; }.searchlab-trend circle.end { fill: #64ddb8; }
.searchlab-insight { display: grid; align-items: center; padding: 2rem; }.searchlab-insight article[hidden] { display: none; }.searchlab-insight h3 { margin: 1rem 0 .7rem; font-size: clamp(1.6rem,2.2vw,2.35rem); }
.searchlab-insight article > div { display: flex; align-items: center; gap: .8rem; margin-top: 2rem; padding-top: 1.2rem; color: #aef0dc; border-top: 1px solid #343e4a; font-size: .78rem; }.searchlab-insight article > div i { width: 12px; height: 12px; flex: 0 0 auto; background: #64ddb8; border-radius: 50%; }

.searchlab-honesty__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border-strong); }.searchlab-honesty__grid > section { padding-right: 3rem; }.searchlab-honesty__grid > section + section { padding: 0 0 0 3rem; border-left: 1px solid var(--color-border-strong); }
.searchlab-honesty__grid h3 { margin: 1.5rem 0 0; font-size: 1.15rem; }.searchlab-honesty__grid ul { margin: 1rem 0 0; padding: 0; list-style: none; }.searchlab-honesty__grid li { min-height: 88px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 1rem; border-bottom: 1px solid var(--color-border); }
.searchlab-honesty__grid li > span { width: 26px; height: 26px; display: grid; place-items: center; color: #18a96f; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; }.searchlab-honesty__grid section + section li > span { color: #ef5261; }.searchlab-honesty__grid strong { font-size: .88rem; }.searchlab-honesty__grid p { margin: .25rem 0 0; font-size: .72rem; }

.searchlab-process__rail { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto; padding: 0; list-style: none; }.searchlab-process__rail li { display: grid; grid-template-columns: 42px 1fr; align-items: center; column-gap: 1rem; }.searchlab-process__rail li > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #dce2eb; border-radius: 50%; font: 650 .75rem/1 monospace; }.searchlab-process__rail li > i { height: 1px; background: #7e8793; }
.searchlab-process__rail h3,.searchlab-process__rail p { grid-column: 1 / -1; padding-right: 2.5rem; }.searchlab-process__rail h3 { margin: 1.2rem 0 .4rem; font-size: .98rem; }.searchlab-process__rail p { margin: 0; font-size: .74rem; }
.searchlab-faq__grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(3rem,7vw,8rem); }.searchlab-faq__grid h2 { max-width: 550px; font-size: clamp(2.7rem,3.8vw,4.2rem); }.searchlab-faq__grid > div:first-child p { max-width: 430px; }
.searchlab-faq__list details { background: transparent; }.searchlab-faq__list summary { min-height: 76px; padding-inline: 1rem; border-top: 1px solid var(--color-border-strong); font-size: .92rem; }.searchlab-faq__list details:last-child summary { border-bottom: 1px solid var(--color-border-strong); }.searchlab-faq__list details p { margin: 0; padding: 0 1rem 1.4rem; border-bottom: 1px solid var(--color-border-strong); }
.searchlab-cta { color: #fff; background: var(--service-accent); }.searchlab-cta__panel { min-height: 300px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5rem; }.searchlab-cta h2 { max-width: 850px; margin-bottom: .7rem; color: #fff; font-size: clamp(2.7rem,4.2vw,4.6rem); }.searchlab-cta p { max-width: 680px; margin: 0; color: #ececff; }.searchlab-cta .button { color: #151733; background: #fff; border-radius: 4px; box-shadow: 0 18px 38px rgba(31,32,108,.18); }

html[data-theme="light"] .searchlab-hero,html[data-theme="light"] .searchlab-intent,html[data-theme="light"] .searchlab-anatomy,html[data-theme="light"] .searchlab-honesty,html[data-theme="light"] .searchlab-faq { background-color: #fff; }
html[data-theme="light"] .searchlab-foundations { background-color: #f6f7fa; } html[data-theme="light"] .searchlab-map__rail article > span,html[data-theme="light"] .searchlab-result { background-color: #fff; }
html[data-theme="light"] .searchlab-map__rail article.is-active > span { color: #fff; background-color: var(--service-accent); }
@keyframes searchlabSignal { 0%,100% { transform: scaleX(.35); opacity: .35; } 50% { transform: scaleX(1); opacity: 1; } }

@media (max-width: 1240px) {
    .searchlab-hero__grid { grid-template-columns: 1fr; padding-bottom: 4rem; }.searchlab-hero__copy { max-width: 850px; }.searchlab-map { width: min(100%,920px); margin-inline: auto; }
    .searchlab-anatomy__grid { grid-template-columns: 1fr; }.searchlab-page { width: min(100% - 7rem,820px); margin-inline: 7rem auto; }.searchlab-audit { width: min(100%,820px); margin-inline: auto; }
}
@media (max-width: 960px) {
    .searchlab-heading,.searchlab-intent__panel article,.searchlab-honesty__grid,.searchlab-faq__grid { grid-template-columns: 1fr; gap: 2.5rem; }.searchlab-heading > div { display: contents; }
    .searchlab-foundations__ledger li { grid-template-columns: 54px 50px 1fr; padding-block: 1.4rem; }.searchlab-foundations__ledger p { grid-column: 3; padding: 0; border-left: 0; }
    .searchlab-intent__panel article > div + div { padding: 2.5rem 0 0; border-top: 1px solid var(--color-border-strong); border-left: 0; }
    .searchlab-measure__tabs { margin-left: 0; }.searchlab-measure__panel { grid-template-columns: 1fr; }.searchlab-trend { min-height: 300px; border-right: 0; border-bottom: 1px solid #3c4653; }
    .searchlab-honesty__grid > section,.searchlab-honesty__grid > section + section { padding: 0; border-left: 0; }.searchlab-honesty__grid > section + section { margin-top: 3rem; border-top: 1px solid var(--color-border-strong); }
    .searchlab-process__rail { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }.searchlab-process__rail li > i { display: none; }
}
@media (max-width: 680px) {
    .searchlab-hero { padding-top: 3.5rem; }.searchlab-hero__grid { min-height: auto; gap: 3rem; }.searchlab-hero__copy h1 { font-size: clamp(2.65rem,12vw,3.7rem); }.searchlab-hero__copy .button { width: 100%; }
    .searchlab-map { min-height: 565px; padding-top: 1rem; overflow: hidden; }.searchlab-map__rail { width: 560px; grid-template-columns: repeat(4,128px); }.searchlab-map__rail article > span { width: 56px; height: 56px; }.searchlab-map__rail::before,.searchlab-map__rail::after { top: 39px; }.searchlab-map__rail p { max-width: 110px; }.searchlab-result { width: 100%; margin-top: 2.5rem; }
    .searchlab-intent,.searchlab-foundations,.searchlab-anatomy,.searchlab-measure,.searchlab-honesty,.searchlab-process,.searchlab-faq { padding-block: 5rem; }.searchlab-heading { margin-bottom: 2.8rem; }.searchlab-heading h2,.searchlab-faq__grid h2 { font-size: clamp(2.35rem,10vw,3.3rem); }
    .searchlab-intent__tabs { display: flex; overflow-x: auto; scrollbar-width: none; }.searchlab-intent__tabs::-webkit-scrollbar,.searchlab-measure__tabs::-webkit-scrollbar { display: none; }.searchlab-intent__tabs button { min-width: 126px; padding-inline: 1rem; }.searchlab-intent__panel { min-height: 530px; }.searchlab-intent__panel h3 { font-size: 2.2rem; }
    .searchlab-foundations__ledger li { grid-template-columns: 42px 42px 1fr; gap: .8rem; }.searchlab-foundations__ledger li > span { width: 38px; height: 38px; }.searchlab-foundations__ledger h3 { font-size: 1rem; }.searchlab-foundations__ledger p { grid-column: 2 / -1; }
    .searchlab-page { width: 100%; min-height: 400px; margin: 0; }.searchlab-page__label { display: none; }.searchlab-page__body { grid-template-columns: 1fr; padding: 1.2rem; }.searchlab-page__aside { display: none; }
    .searchlab-audit li { grid-template-columns: 42px 1fr; padding-block: 1rem; }.searchlab-audit li > span { width: 38px; height: 38px; }.searchlab-audit li > b { grid-column: 2; justify-self: start; }
    .searchlab-measure__tabs { display: flex; overflow-x: auto; scrollbar-width: none; }.searchlab-measure__tabs button { min-width: 150px; }.searchlab-trend { min-height: 250px; }.searchlab-measure__panel { min-height: 0; }.searchlab-insight { padding: 1.4rem; }
    .searchlab-process__rail { grid-template-columns: 1fr; }.searchlab-process__rail h3,.searchlab-process__rail p { padding-right: 0; }
    .searchlab-cta__panel { min-height: 390px; grid-template-columns: 1fr; align-content: center; gap: 2.5rem; }.searchlab-cta h2 { font-size: clamp(2.4rem,10vw,3.4rem); }.searchlab-cta .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .searchlab-map__rail::after { animation: none; transform: scaleX(1); } }

/* Email Design v2: precision editorial studio and responsive inbox journey. */
.service-experience--email-design { --service-accent: #6366f3; --mail-pink: #e52aa9; --mail-ink: #080b12; --mail-paper: #fff; --mail-line: #d9deea; }
.service-experience--email-design main { overflow: clip; }
.service-experience--email-design [data-email-parallax] { --email-parallax-y: 0px; }
.mailstudio-hero { padding-block: 3rem 2rem; }
.mailstudio-hero__grid { min-height: 690px; display: grid; grid-template-columns: minmax(500px,.82fr) minmax(650px,1.18fr); align-items: center; gap: clamp(3rem,5vw,5.5rem); }
.mailstudio-hero__copy { position: relative; z-index: 5; }
.mailstudio-hero__copy h1 { max-width: 690px; margin-bottom: 1.7rem; font-size: clamp(3.6rem,4.55vw,5.15rem); line-height: .96; letter-spacing: -.065em; }
.mailstudio-hero__copy > p { max-width: 610px; margin-bottom: 2.25rem; font-size: clamp(1rem,1.3vw,1.18rem); }
.mailstudio-hero__copy .button { border-radius: 4px; }

.mailstudio-stage { position: relative; min-height: 610px; perspective: 1200px; }
.mailstudio-stage::before { content: ""; position: absolute; inset: 12% 1% 5% 2%; background-image: linear-gradient(var(--mail-line) 1px,transparent 1px),linear-gradient(90deg,var(--mail-line) 1px,transparent 1px); background-size: 72px 72px; opacity: .3; mask-image: radial-gradient(circle,#000 20%,transparent 72%); }
.mailstudio-editor { position: absolute; z-index: 1; top: 11%; left: 0; width: 58%; min-height: 455px; overflow: hidden; color: #232b3a; background: #f8f9fc; border: 1px solid #cbd2de; border-radius: 9px; box-shadow: 0 26px 65px rgba(28,37,57,.13); transform: translate3d(0,var(--email-parallax-y),-40px) rotateY(4deg); }
.mailstudio-editor > header,.mailstudio-preview__desktop > header { min-height: 46px; display: flex; align-items: center; gap: .45rem; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid #dde2ea; }
.mailstudio-editor > header i,.mailstudio-preview__desktop > header i { width: 8px; height: 8px; background: #cfd5df; border-radius: 50%; }
.mailstudio-editor > header i:first-child,.mailstudio-preview__desktop > header i:first-child { background: #ff6b70; }.mailstudio-editor > header i:nth-child(2),.mailstudio-preview__desktop > header i:nth-child(2) { background: #edc74d; }.mailstudio-editor > header i:nth-child(3),.mailstudio-preview__desktop > header i:nth-child(3) { background: #54be67; }
.mailstudio-editor > header span { margin-left: .65rem; font-size: .62rem; font-weight: 650; }
.mailstudio-editor__body { min-height: 409px; display: grid; grid-template-columns: 132px 1fr; }
.mailstudio-editor__body aside { display: grid; align-content: start; gap: .55rem; padding: 1rem; border-right: 1px solid #dde2ea; }
.mailstudio-editor__body aside strong { margin-bottom: .4rem; font-size: .7rem; }.mailstudio-editor__body aside span { min-height: 36px; display: flex; align-items: center; padding: .55rem .65rem; background: #fff; border: 1px solid #d8dde6; border-radius: 3px; font-size: .58rem; }
.mailstudio-editor__body > div { display: grid; align-content: start; gap: .75rem; padding: 2rem 1.5rem; }.mailstudio-editor__body b { width: 62%; height: 13px; background: #cfd5df; }.mailstudio-editor__body b:nth-child(2) { width: 84%; height: 8px; }.mailstudio-editor__body em { height: 58px; background: #fff; border: 1px dashed #aeb7c7; }.mailstudio-editor__body em:nth-of-type(2) { height: 95px; }.mailstudio-editor__body em:last-child { width: 42%; height: 28px; background: #7779ff; border: 0; }
.mailstudio-message { position: absolute; z-index: 4; top: 2%; left: 32%; width: 345px; min-height: 545px; color: #111827; background: #fff; border: 1px solid #d8dde6; box-shadow: 0 30px 65px rgba(25,34,54,.2); transform: translate3d(0,var(--email-parallax-y),55px) rotate(2.5deg); }
.mailstudio-message > header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; border-bottom: 1px solid #e2e5eb; }.mailstudio-message > header strong { font-size: .72rem; }.mailstudio-message > header small { color: #6f7887; font-size: .5rem; text-decoration: underline; }
.mailstudio-message__hero { position: relative; min-height: 405px; padding: 2rem 1.35rem; overflow: hidden; }.mailstudio-message__hero > small { color: #6366f3; font-size: .48rem; letter-spacing: .13em; }.mailstudio-message__hero h2 { position: relative; z-index: 2; max-width: 250px; margin: 1rem 0 .8rem; color: #111827; font-size: 1.55rem; line-height: .95; letter-spacing: -.055em; }.mailstudio-message__hero h2 span { color: #6366f3; }.mailstudio-message__hero p { position: relative; z-index: 2; max-width: 205px; color: #5e6675; font-size: .58rem; }.mailstudio-message__hero > b { position: relative; z-index: 2; display: inline-block; margin-top: .5rem; padding: .55rem .75rem; color: #fff; background: #6366f3; border-radius: 2px; font-size: .52rem; }
.mailstudio-message__hero figure { position: absolute; right: -18px; bottom: 20px; width: 205px; height: 205px; margin: 0; }.mailstudio-message__hero figure i { position: absolute; right: 0; bottom: 0; width: 115px; height: 165px; background: rgba(99,102,243,.2); clip-path: polygon(50% 0,100% 100%,0 100%); }.mailstudio-message__hero figure i:nth-child(2) { right: 78px; width: 105px; height: 120px; background: rgba(99,102,243,.7); }.mailstudio-message__hero figure i:nth-child(3) { right: 25px; bottom: 10px; width: 72px; height: 72px; background: var(--mail-pink); border-radius: 50%; clip-path: none; }
.mailstudio-message > footer { min-height: 72px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; border-top: 1px solid #e2e5eb; }.mailstudio-message > footer span { color: #313746; text-align: center; font-size: .52rem; font-weight: 700; }.mailstudio-message > footer span + span { border-left: 1px solid #e2e5eb; }
.mailstudio-phone { position: absolute; z-index: 5; right: 0; bottom: 4%; width: 180px; height: 385px; overflow: hidden; padding: .8rem; color: #111827; background: #fff; border: 7px solid #202735; border-radius: 31px; box-shadow: 0 28px 55px rgba(18,25,39,.2); transform: translate3d(0,var(--email-parallax-y),80px) rotate(-1deg); }
.mailstudio-phone > header { display: flex; justify-content: space-between; padding: .35rem .2rem .8rem; border-bottom: 1px solid #e1e5eb; font-size: .55rem; }.mailstudio-phone > header span { font-weight: 750; }.mailstudio-phone article { display: grid; grid-template-columns: 28px 1fr; gap: .55rem; padding: .8rem 0; border-bottom: 1px solid #e1e5eb; }.mailstudio-phone article > i { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #6366f3; border-radius: 50%; font: normal 650 .6rem/1 sans-serif; }.mailstudio-phone article div { display: grid; gap: .18rem; }.mailstudio-phone article strong,.mailstudio-phone article b { font-size: .49rem; }.mailstudio-phone article small { color: #79818e; font-size: .42rem; }.mailstudio-phone > p { height: 52px; margin: 0; border-bottom: 1px solid #e1e5eb; background: linear-gradient(90deg,#e2e6ec 38%,transparent 38%) no-repeat 0 13px/100% 5px,linear-gradient(90deg,#edf0f4 62%,transparent 62%) no-repeat 0 25px/100% 4px; }
.mailstudio-route { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--mail-pink); stroke-width: 2; stroke-dasharray: 6 7; pointer-events: none; }.mailstudio-route path:first-child { animation: mailstudioRoute 7s linear infinite; }

.mailstudio-types,.mailstudio-anatomy,.mailstudio-standards,.mailstudio-process,.mailstudio-faq { padding-block: 8rem; }
.mailstudio-types__grid { display: grid; grid-template-columns: minmax(390px,.78fr) minmax(650px,1.22fr); align-items: center; gap: clamp(4rem,7vw,8rem); }
.mailstudio-types__intro h2,.mailstudio-anatomy__intro h2,.mailstudio-heading h2,.mailstudio-faq h2 { max-width: 780px; margin-bottom: 1.2rem; font-size: clamp(2.9rem,4vw,4.5rem); line-height: .98; letter-spacing: -.055em; }
.mailstudio-types__intro > p { max-width: 570px; }
.mailstudio-types__tabs { margin-top: 3rem; border-top: 1px solid var(--color-border-strong); }
.mailstudio-types__tabs button { position: relative; width: 100%; min-height: 106px; display: grid; grid-template-columns: 52px 1fr 22px; align-items: center; gap: 1.1rem; padding: 1rem; color: var(--color-muted); background: transparent; border: 0; border-bottom: 1px solid var(--color-border-strong); cursor: pointer; text-align: left; font-family: var(--font-sans); transition: color 180ms ease,background 180ms ease,transform 180ms ease; }.mailstudio-types__tabs button:hover { color: var(--color-text); transform: translateX(4px); }.mailstudio-types__tabs button[aria-selected="true"] { color: var(--color-text); background: color-mix(in srgb,var(--service-accent) 7%,transparent); }
.mailstudio-types__tabs button > span:first-child { width: 46px; height: 46px; display: grid; place-items: center; color: var(--service-accent); background: color-mix(in srgb,var(--service-accent) 8%,transparent); border-radius: 50%; }.mailstudio-types__tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }.mailstudio-types__tabs button > svg { width: 18px; }.mailstudio-types__tabs button > span:nth-child(2) { display: grid; gap: .32rem; }.mailstudio-types__tabs strong { font-size: 1rem; }.mailstudio-types__tabs small { max-width: 430px; color: var(--color-muted); font-size: .72rem; line-height: 1.4; }
.mailstudio-preview { position: relative; min-height: 650px; transition: opacity 180ms ease,transform 180ms ease; }.mailstudio-preview.is-changing { opacity: .72; transform: translateY(5px); }
.mailstudio-preview__desktop { position: absolute; top: 3%; left: 0; width: 78%; min-height: 550px; overflow: hidden; color: #111827; background: #fff; border: 1px solid #cfd6e1; border-radius: 7px; box-shadow: 0 24px 60px rgba(21,30,49,.13); }.mailstudio-preview__desktop > header strong { margin-left: .6rem; font-size: .68rem; }.mailstudio-preview__desktop > header small { margin-left: auto; color: #7b8390; font-size: .53rem; }.mailstudio-preview__desktop > div { position: relative; min-height: 410px; padding: 3.2rem 2rem; overflow: hidden; }.mailstudio-preview__desktop > div > small { color: #6366f3; font-size: .5rem; letter-spacing: .15em; }.mailstudio-preview__desktop h3 { position: relative; z-index: 2; max-width: 355px; margin: 1rem 0; color: #111827; font-size: 2.25rem; line-height: .98; letter-spacing: -.05em; }.mailstudio-preview__desktop p { position: relative; z-index: 2; max-width: 310px; color: #5c6573; font-size: .75rem; }.mailstudio-preview__desktop > div > b,.mailstudio-preview__phone > div > b { position: relative; z-index: 2; display: inline-block; margin-top: .7rem; padding: .7rem 1rem; color: #fff; background: #6366f3; border-radius: 3px; font-size: .62rem; }
.mailstudio-preview__desktop figure { position: absolute; right: 2rem; bottom: 2rem; width: 250px; height: 270px; margin: 0; }.mailstudio-preview__desktop figure i { position: absolute; right: 0; bottom: 0; width: 115px; height: 230px; background: rgba(99,102,243,.32); clip-path: polygon(50% 0,100% 100%,0 100%); }.mailstudio-preview__desktop figure i:nth-child(2) { right: 95px; height: 170px; background: rgba(99,102,243,.82); }.mailstudio-preview__desktop figure i:nth-child(3) { right: 25px; bottom: 25px; width: 82px; height: 82px; background: var(--mail-pink); border-radius: 50%; clip-path: none; }
.mailstudio-preview__desktop > footer { min-height: 92px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; border-top: 1px solid #e0e4ea; }.mailstudio-preview__desktop > footer span { text-align: center; font-size: .62rem; font-weight: 700; }.mailstudio-preview__desktop > footer span + span { border-left: 1px solid #e0e4ea; }
.mailstudio-preview__phone { position: absolute; z-index: 3; right: 0; bottom: 0; width: 185px; height: 430px; overflow: hidden; padding: .8rem; color: #111827; background: #fff; border: 7px solid #202735; border-radius: 31px; box-shadow: 0 28px 55px rgba(18,25,39,.24); }.mailstudio-preview__phone > header { display: flex; justify-content: space-between; padding: .25rem 0 .75rem; border-bottom: 1px solid #e1e5eb; font-size: .52rem; }.mailstudio-preview__phone > div { padding: 2rem .35rem; }.mailstudio-preview__phone small { color: #6366f3; font-size: .45rem; letter-spacing: .12em; }.mailstudio-preview__phone h3 { margin: .75rem 0 1rem; color: #111827; font-size: 1.25rem; line-height: 1; letter-spacing: -.045em; }.mailstudio-preview__phone figure { height: 145px; margin: 0; background: linear-gradient(135deg,rgba(99,102,243,.18),rgba(99,102,243,.84)); clip-path: polygon(0 85%,38% 20%,57% 56%,76% 33%,100% 88%,100% 100%,0 100%); }
.mailstudio-types__grid[data-email-type="1"] { --mail-pink: #6366f3; }.mailstudio-types__grid[data-email-type="2"] { --mail-pink: #22a985; }

.mailstudio-anatomy { background: var(--color-bg-soft); }
.mailstudio-anatomy__grid { display: grid; grid-template-columns: .65fr 1.35fr; align-items: start; gap: clamp(4rem,7vw,8rem); }.mailstudio-anatomy__intro { position: sticky; top: 7rem; }.mailstudio-anatomy__intro p { max-width: 510px; }
.mailstudio-blueprint { min-height: 710px; display: grid; grid-template-columns: 390px 1fr; align-items: center; gap: 3rem; }.mailstudio-blueprint > article { width: 390px; min-height: 650px; padding: 1rem 1.5rem; color: #111827; background: #fff; border: 1px solid #cfd6e1; box-shadow: 0 25px 60px rgba(20,29,48,.12); transform: translate3d(0,var(--email-parallax-y),0); }.mailstudio-blueprint > article > header { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #e0e4ea; font-size: .55rem; }.mailstudio-blueprint > article figure { position: relative; height: 170px; margin: 1.3rem 0; overflow: hidden; background: #eff0ff; }.mailstudio-blueprint > article figure i { position: absolute; right: 15%; bottom: -25%; width: 150px; height: 180px; background: #6366f3; transform: rotate(38deg); }.mailstudio-blueprint > article figure i + i { right: 52%; bottom: -40%; width: 90px; height: 150px; background: var(--mail-pink); }.mailstudio-blueprint > article h3 { max-width: 280px; margin: 2rem auto .75rem; color: #111827; text-align: center; font-size: 1.75rem; line-height: 1; }.mailstudio-blueprint > article p { max-width: 270px; margin-inline: auto; color: #646d7b; text-align: center; font-size: .68rem; }.mailstudio-blueprint > article > b { display: block; width: max-content; margin: 1.2rem auto; padding: .65rem 1rem; color: #fff; background: #6366f3; border-radius: 2px; font-size: .6rem; }.mailstudio-blueprint > article > div { height: 100px; margin: 1.5rem 0; background: linear-gradient(135deg,#dfe2ff,#7779ff); }.mailstudio-blueprint > article > footer { padding-top: 1rem; color: #7b8390; border-top: 1px solid #e0e4ea; text-align: center; font-size: .5rem; }
.mailstudio-blueprint > ol { margin: 0; padding: 0; list-style: none; }.mailstudio-blueprint > ol li { position: relative; min-height: 112px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 1rem; border-top: 1px solid var(--color-border-strong); }.mailstudio-blueprint > ol li:last-child { border-bottom: 1px solid var(--color-border-strong); }.mailstudio-blueprint > ol li::before { content: ""; position: absolute; right: 100%; width: calc(3rem + 40px); height: 1px; background: var(--service-accent); opacity: .58; }.mailstudio-blueprint > ol li > span { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--service-accent); border-radius: 50%; font: 650 .68rem/1 monospace; }.mailstudio-blueprint h3,.mailstudio-blueprint li p { margin: 0; }.mailstudio-blueprint li h3 { font-size: .92rem; }.mailstudio-blueprint li p { margin-top: .3rem; font-size: .72rem; line-height: 1.45; }

.mailstudio-heading { display: grid; grid-template-columns: .9fr 1.1fr; align-items: end; gap: clamp(3rem,7vw,8rem); margin-bottom: 4rem; }.mailstudio-heading h2 { margin: 0; }.mailstudio-heading p { max-width: 580px; margin: 0 0 .35rem auto; }
.mailstudio-standards__strip { display: grid; grid-template-columns: repeat(4,1fr); margin-block: 0; padding-block: 0; list-style: none; border-top: 1px solid var(--color-border-strong); border-bottom: 1px solid var(--color-border-strong); }.mailstudio-standards__strip li { min-height: 270px; padding: 2rem; }.mailstudio-standards__strip li + li { border-left: 1px solid var(--color-border-strong); }.mailstudio-standards__strip li > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--service-accent); }.mailstudio-standards__strip svg,.mailstudio-process__rail svg,.mailstudio-send svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }.mailstudio-standards__strip small { display: block; margin-top: 1rem; color: var(--mail-pink); font: 700 .65rem/1 monospace; }.mailstudio-standards__strip h3 { max-width: 220px; margin: 2.2rem 0 .65rem; font-size: 1.08rem; }.mailstudio-standards__strip p { margin: 0; font-size: .78rem; }

.mailstudio-process { background: var(--color-bg-soft); }.mailstudio-heading--process { grid-template-columns: 1fr .8fr; }
.mailstudio-process__rail { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin: 0 auto; padding: 0; list-style: none; }.mailstudio-process__rail::before { content: ""; position: absolute; top: 36px; right: 8%; left: 8%; border-top: 1px dashed color-mix(in srgb,var(--service-accent) 62%,var(--color-border)); }.mailstudio-process__rail li { position: relative; z-index: 1; display: grid; grid-template-columns: 30px 64px 1fr; align-items: center; padding-right: 2.5rem; }.mailstudio-process__rail li > span { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--service-accent); border-radius: 50%; font: 700 .68rem/1 monospace; }.mailstudio-process__rail li > i { width: 64px; height: 64px; display: grid; place-items: center; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 4px; }.mailstudio-process__rail li:last-child > i { color: var(--mail-pink); }.mailstudio-process__rail h3,.mailstudio-process__rail p { grid-column: 1 / -1; }.mailstudio-process__rail h3 { margin: 1.6rem 0 .45rem; font-size: 1.02rem; }.mailstudio-process__rail p { margin: 0; font-size: .77rem; }

.mailstudio-faq__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(4rem,8vw,9rem); }.mailstudio-faq__grid > div:first-child p { max-width: 430px; }.mailstudio-faq__list details { background: transparent; }.mailstudio-faq__list summary { min-height: 82px; padding-inline: .5rem; border-top: 1px solid var(--color-border-strong); font-size: .95rem; }.mailstudio-faq__list details:last-child summary { border-bottom: 1px solid var(--color-border-strong); }.mailstudio-faq__list details p { margin: 0; padding: 0 .5rem 1.4rem; border-bottom: 1px solid var(--color-border-strong); }.mailstudio-faq__list summary svg { transform: none; }.mailstudio-faq__list details[open] summary svg { transform: rotate(45deg); }
.mailstudio-envelope { position: relative; width: 250px; height: 155px; margin: 4rem auto 0; border: 2px solid color-mix(in srgb,var(--service-accent) 52%,transparent); border-radius: 7px; transform: rotate(-6deg); }.mailstudio-envelope::before,.mailstudio-envelope::after { content: ""; position: absolute; top: 18px; width: 142px; height: 2px; background: color-mix(in srgb,var(--service-accent) 52%,transparent); }.mailstudio-envelope::before { left: -3px; transform: rotate(31deg); transform-origin: left; }.mailstudio-envelope::after { right: -3px; transform: rotate(-31deg); transform-origin: right; }.mailstudio-envelope i { position: absolute; top: -24px; right: -28px; width: 22px; height: 2px; background: var(--mail-pink); transform: rotate(-64deg); }.mailstudio-envelope i + i { top: -9px; right: -43px; transform: rotate(-20deg); }.mailstudio-envelope span { position: absolute; right: -7px; bottom: -28px; width: 75px; height: 1px; background: var(--service-accent); }

.mailstudio-cta { color: #fff; background: var(--mail-ink); border-color: #242b37; }.mailstudio-cta__panel { min-height: 440px; display: grid; grid-template-columns: 1fr minmax(360px,.72fr); align-items: center; gap: 5rem; }.mailstudio-cta h2 { max-width: 790px; margin-bottom: 1rem; color: #fff; font-size: clamp(3rem,4.7vw,5.25rem); line-height: .95; letter-spacing: -.06em; }.mailstudio-cta p { max-width: 690px; color: #acb4c1; }.mailstudio-cta .button { border-radius: 4px; }.mailstudio-cta .button--secondary { color: #fff; border-color: #687284; }.mailstudio-send { position: relative; min-height: 300px; display: grid; place-items: center; color: #7779ff; transform: translate3d(0,var(--email-parallax-y),0); }.mailstudio-send svg { position: relative; z-index: 2; width: min(75%,280px); height: auto; stroke-width: 1.2; filter: drop-shadow(0 22px 30px rgba(99,102,243,.22)); }.mailstudio-send i { position: absolute; top: 60%; right: 44%; width: 130%; height: 110px; border-top: 3px solid #6366f3; border-radius: 50%; transform: rotate(-10deg); }

html[data-theme="light"] .mailstudio-hero,html[data-theme="light"] .mailstudio-types,html[data-theme="light"] .mailstudio-standards,html[data-theme="light"] .mailstudio-faq { background: #fff; }
html[data-theme="light"] .mailstudio-anatomy,html[data-theme="light"] .mailstudio-process { background: #f6f7fb; }
html[data-theme="light"] .mailstudio-process__rail li > i { background: #fff; }
html[data-theme="light"] .mailstudio-cta .button--secondary { color: #fff; background: transparent; border-color: #687284; }

@keyframes mailstudioRoute { to { stroke-dashoffset: -104; } }

@media (max-width: 1240px) {
    .mailstudio-hero__grid { grid-template-columns: 1fr; padding-bottom: 4rem; }.mailstudio-hero__copy { max-width: 850px; }.mailstudio-stage { width: min(100%,900px); margin-inline: auto; }
    .mailstudio-types__grid,.mailstudio-anatomy__grid { grid-template-columns: 1fr; }.mailstudio-types__intro { max-width: 850px; }.mailstudio-types__grid { gap: 4rem; }.mailstudio-types__tabs { display: grid; grid-template-columns: repeat(3,1fr); }.mailstudio-types__tabs button { grid-template-columns: 46px 1fr; align-content: center; }.mailstudio-types__tabs button > svg { display: none; }.mailstudio-types__tabs button + button { border-left: 1px solid var(--color-border-strong); }
    .mailstudio-preview { width: min(100%,850px); margin-inline: auto; }.mailstudio-anatomy__intro { position: static; max-width: 800px; }.mailstudio-blueprint { width: min(100%,850px); margin-inline: auto; }
}
@media (max-width: 960px) {
    .mailstudio-types,.mailstudio-anatomy,.mailstudio-standards,.mailstudio-process,.mailstudio-faq { padding-block: 6rem; }.mailstudio-heading,.mailstudio-heading--process,.mailstudio-faq__grid { grid-template-columns: 1fr; gap: 1.5rem; }.mailstudio-heading p { margin-left: 0; }
    .mailstudio-standards__strip { grid-template-columns: 1fr 1fr; }.mailstudio-standards__strip li:nth-child(3) { border-left: 0; border-top: 1px solid var(--color-border-strong); }.mailstudio-standards__strip li:nth-child(4) { border-top: 1px solid var(--color-border-strong); }
    .mailstudio-process__rail { grid-template-columns: 1fr 1fr; gap: 3.5rem 2rem; }.mailstudio-process__rail::before { display: none; }
    .mailstudio-faq__grid { gap: 3rem; }.mailstudio-envelope { margin-left: 1rem; }
}
@media (max-width: 680px) {
    .mailstudio-hero { padding-top: 3.5rem; }.mailstudio-hero__grid { min-height: auto; gap: 3rem; }.mailstudio-hero__copy h1 { font-size: clamp(2.65rem,12vw,3.7rem); }.mailstudio-hero__copy .button { width: 100%; }
    .mailstudio-stage { min-height: 640px; }.mailstudio-editor { top: 0; width: 90%; min-height: 390px; }.mailstudio-editor__body { min-height: 344px; grid-template-columns: 92px 1fr; }.mailstudio-editor__body aside { padding: .7rem; }.mailstudio-editor__body aside span { min-height: 31px; padding: .4rem; }.mailstudio-editor__body > div { padding: 1.3rem .8rem; }.mailstudio-message { top: 9%; left: 17%; width: 238px; min-height: 440px; }.mailstudio-message__hero { min-height: 320px; padding: 1.3rem 1rem; }.mailstudio-message__hero h2 { font-size: 1.25rem; }.mailstudio-message__hero figure { width: 145px; height: 150px; }.mailstudio-message__hero figure i { width: 80px; height: 120px; }.mailstudio-message__hero figure i:nth-child(2) { right: 55px; width: 70px; height: 90px; }.mailstudio-message__hero figure i:nth-child(3) { width: 50px; height: 50px; }.mailstudio-message > footer { min-height: 58px; }.mailstudio-phone { right: -5px; bottom: 0; width: 112px; height: 270px; padding: .5rem; border-width: 5px; border-radius: 20px; }.mailstudio-phone article { grid-template-columns: 20px 1fr; gap: .35rem; }.mailstudio-phone article > i { width: 20px; height: 20px; }.mailstudio-phone article small { display: none; }.mailstudio-phone > p { height: 38px; }.mailstudio-route { display: none; }
    .mailstudio-types,.mailstudio-anatomy,.mailstudio-standards,.mailstudio-process,.mailstudio-faq { padding-block: 5rem; }.mailstudio-types__intro h2,.mailstudio-anatomy__intro h2,.mailstudio-heading h2,.mailstudio-faq h2 { font-size: clamp(2.35rem,10vw,3.3rem); }.mailstudio-types__tabs { display: block; }.mailstudio-types__tabs button + button { border-left: 0; }.mailstudio-preview { min-height: 560px; }.mailstudio-preview__desktop { width: calc(100% - 32px); min-height: 485px; }.mailstudio-preview__desktop > div { min-height: 345px; padding: 2rem 1.2rem; }.mailstudio-preview__desktop h3 { max-width: 235px; font-size: 1.75rem; }.mailstudio-preview__desktop p { max-width: 215px; }.mailstudio-preview__desktop figure { right: .5rem; width: 155px; height: 180px; }.mailstudio-preview__phone { right: -5px; width: 118px; height: 310px; border-width: 5px; border-radius: 22px; }.mailstudio-preview__phone h3 { font-size: 1rem; }.mailstudio-preview__phone figure { height: 100px; }
    .mailstudio-blueprint { min-height: 0; grid-template-columns: 1fr; gap: 3rem; }.mailstudio-blueprint > article { width: 100%; min-height: 590px; }.mailstudio-blueprint > ol li::before { display: none; }
    .mailstudio-standards__strip { grid-template-columns: 1fr; }.mailstudio-standards__strip li,.mailstudio-standards__strip li:nth-child(n) { min-height: 0; padding: 2rem 0; border-left: 0; border-top: 0; border-bottom: 1px solid var(--color-border-strong); }.mailstudio-standards__strip h3 { margin-top: 1.2rem; }
    .mailstudio-process__rail { grid-template-columns: 1fr; }.mailstudio-process__rail li { padding-right: 0; }.mailstudio-envelope { width: 205px; height: 128px; }.mailstudio-envelope::before,.mailstudio-envelope::after { width: 116px; }
    .mailstudio-cta__panel { min-height: 560px; grid-template-columns: 1fr; align-content: center; gap: 2rem; }.mailstudio-cta h2 { font-size: clamp(2.5rem,11vw,3.5rem); }.mailstudio-cta .button { width: 100%; }.mailstudio-send { min-height: 190px; }.mailstudio-send svg { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
    .mailstudio-route path:first-child { animation: none; }
    .service-experience--email-design [data-email-parallax] { transform: none !important; }
}

/* Software Development: an engineering control room from workflow to release. */
.service-experience--software-development { --service-accent: #6366f3; --software-signal: #22d3ee; }
.softwaredev-hero { padding-block: 2.25rem 1.5rem; overflow: hidden; }
.softwaredev-hero__grid { min-height: 460px; display: grid; grid-template-columns: minmax(500px,.82fr) minmax(600px,1.18fr); align-items: center; gap: clamp(2rem,3vw,3rem); }
.softwaredev-hero__copy { position: relative; z-index: 2; }
.softwaredev-hero__copy h1 { max-width: 670px; margin-bottom: 1.65rem; font-size: clamp(3.15rem,3.45vw,3.65rem); line-height: .96; letter-spacing: -.06em; }
.softwaredev-hero__copy h1 span { display: block; }
.softwaredev-hero__copy h1 span:last-child { color: var(--service-accent); }
.softwaredev-hero__copy > p { max-width: 610px; margin-bottom: 2.1rem; font-size: clamp(1rem,1.25vw,1.16rem); }
.softwaredev-hero__copy .button { border-radius: 4px; }
.softwaredev-hero__trail { display: flex; align-items: center; gap: .7rem; margin-top: 2.3rem; color: var(--color-muted-deep); font-size: .62rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.softwaredev-hero__trail i { width: 26px; height: 1px; background: var(--color-border-strong); }
.softwaredev-blueprint { min-width: 0; padding: 1.25rem; border: 1px solid color-mix(in srgb,var(--service-accent) 32%,var(--color-border)); background: color-mix(in srgb,var(--color-bg-elevated) 94%,transparent); box-shadow: 14px 16px 0 color-mix(in srgb,var(--service-accent) 7%,transparent); transform: translate3d(0,var(--software-parallax-y,0),0); }
.softwaredev-blueprint__head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .25rem 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; }
.softwaredev-blueprint__head strong { color: var(--color-text); font-size: .62rem; }
.softwaredev-blueprint__body { min-height: 310px; display: grid; grid-template-columns: 128px minmax(0,1fr); align-items: center; gap: 1.4rem; padding-block: 1.2rem .8rem; background-image: radial-gradient(color-mix(in srgb,var(--service-accent) 18%,transparent) 1px,transparent 1px); background-size: 16px 16px; }
.softwaredev-blueprint__sources { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.softwaredev-blueprint__sources li { min-height: 55px; display: flex; align-items: center; gap: .55rem; padding: .65rem; background: var(--color-bg); border: 1px solid color-mix(in srgb,var(--service-accent) 28%,var(--color-border)); font-size: .66rem; }
.softwaredev-blueprint svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--service-accent); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.softwaredev-blueprint__stages { display: grid; grid-template-columns: repeat(5,minmax(88px,1fr)); gap: .85rem; margin: 0; padding: 0; list-style: none; }
.softwaredev-blueprint__stages li { position: relative; min-height: 165px; display: grid; align-content: center; justify-items: center; gap: 1.2rem; padding: .8rem; color: var(--color-text); background: color-mix(in srgb,var(--color-bg) 92%,transparent); border: 1px solid color-mix(in srgb,var(--service-accent) 28%,var(--color-border)); transform: translateY(calc((var(--stage) - 2) * 5px)); }
.softwaredev-blueprint__stages li::after { content: ""; position: absolute; top: 50%; left: 100%; width: .9rem; height: 1px; background: var(--software-signal); box-shadow: 0 0 9px color-mix(in srgb,var(--software-signal) 55%,transparent); }
.softwaredev-blueprint__stages li:last-child::after { display: none; }
.softwaredev-blueprint__stages li span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--service-accent); border: 1px solid currentColor; }
.softwaredev-blueprint__stages li strong { font-size: .67rem; text-align: center; }
.softwaredev-blueprint__loop { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; color: var(--color-muted-deep); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; }
.softwaredev-blueprint__loop i { height: 13px; border: 1px solid color-mix(in srgb,var(--service-accent) 55%,transparent); border-top: 0; }

.softwaredev-layers { color: #eef2f8; background: #050914; }
.softwaredev-layers__grid { padding-block: 8rem; }
.softwaredev-layers__intro { display: grid; grid-template-columns: .85fr 1.15fr; align-items: end; gap: 4rem; margin-bottom: 5rem; }
.softwaredev-layers__intro h2 { max-width: 590px; margin: 0; color: #fff; font-size: clamp(3.2rem,4.5vw,5rem); line-height: .96; letter-spacing: -.06em; }
.softwaredev-layers__intro p { max-width: 610px; margin: 0 0 .35rem auto; color: #aeb7c6; font-size: 1.04rem; }
.softwaredev-layers__rail { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(1.3rem,2vw,2.4rem); margin: 0; padding: 0; list-style: none; }
.softwaredev-layers__rail::before { content: ""; position: absolute; top: 55px; right: 6%; left: 6%; height: 1px; background: linear-gradient(90deg,#6366f3,var(--software-signal),#6366f3); }
.softwaredev-layers__rail li { position: relative; min-width: 0; padding-top: 9rem; }
.softwaredev-layers__rail li > span { position: absolute; z-index: 2; top: 0; left: 0; width: 112px; height: 112px; display: grid; place-items: center; color: #8ea6ff; background: #07101d; border: 1px solid #5061a8; transform: skewY(7deg); }
.softwaredev-layers__rail li > span svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; transform: skewY(-7deg); }
.softwaredev-layers__rail li > i { position: absolute; z-index: 3; top: 50px; left: 108px; width: calc(100% - 92px); height: 10px; border-top: 1px solid var(--software-signal); }
.softwaredev-layers__rail h3 { margin-bottom: .55rem; color: #fff; font-size: 1.02rem; }
.softwaredev-layers__rail p { margin: 0; color: #9da8b8; font-size: .79rem; }

.softwaredev-lifecycle { padding-block: 8rem; }
.softwaredev-lifecycle__grid { display: grid; grid-template-columns: minmax(370px,.72fr) minmax(650px,1.28fr); gap: clamp(3.5rem,6vw,7rem); align-items: start; }
.softwaredev-lifecycle__intro { position: sticky; top: 130px; }
.softwaredev-lifecycle__intro h2 { max-width: 610px; margin-bottom: 1.2rem; font-size: clamp(3rem,4.25vw,4.8rem); line-height: .96; letter-spacing: -.055em; }
.softwaredev-lifecycle__intro > p { max-width: 570px; margin-bottom: 2.5rem; }
.softwaredev-lifecycle__tabs { border-top: 1px solid var(--color-border-strong); }
.softwaredev-lifecycle__tabs button { width: 100%; min-height: 72px; display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 1rem; padding: .85rem 0; color: var(--color-muted); background: transparent; border: 0; border-bottom: 1px solid var(--color-border); text-align: left; cursor: pointer; }
.softwaredev-lifecycle__tabs button > span { width: 38px; height: 38px; display: grid; place-items: center; }
.softwaredev-lifecycle__tabs button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.softwaredev-lifecycle__tabs button > svg { width: 18px; transition: transform 180ms ease; }
.softwaredev-lifecycle__tabs button strong { font-size: .91rem; }
.softwaredev-lifecycle__tabs button:hover,.softwaredev-lifecycle__tabs button[aria-selected="true"] { color: var(--service-accent); }
.softwaredev-lifecycle__tabs button[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--service-accent); padding-left: 1rem; }
.softwaredev-lifecycle__tabs button[aria-selected="true"] > svg { transform: translateX(4px); }
.softwaredev-lifecycle__panels { min-width: 0; }
.softwaredev-lifecycle__panels article { overflow: hidden; border: 1px solid color-mix(in srgb,var(--service-accent) 28%,var(--color-border)); background: var(--color-bg-elevated); }
.softwaredev-lifecycle__panels article[hidden] { display: none; }
.softwaredev-lifecycle__panels article.is-entering { animation: softwarePanelIn 280ms ease both; }
.softwaredev-lifecycle__panels article > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); color: var(--color-muted-deep); font-size: .57rem; letter-spacing: .13em; text-transform: uppercase; }
.softwaredev-lifecycle__panels article > header strong { color: var(--color-text); }
.softwaredev-solution-map { min-height: 520px; display: grid; grid-template-columns: minmax(165px,.88fr) minmax(120px,.7fr) minmax(120px,.7fr) minmax(130px,.82fr); align-items: center; gap: 1.2rem; padding: 2rem; background-image: radial-gradient(color-mix(in srgb,var(--service-accent) 18%,transparent) 1px,transparent 1px); background-size: 17px 17px; }
.softwaredev-solution-map > div > p { margin-bottom: 2rem; color: var(--color-text); font-size: .9rem; }
.softwaredev-solution-map ol,.softwaredev-solution-map ul { margin: 0; padding: 0; list-style: none; }
.softwaredev-solution-map ol { display: grid; gap: .35rem; }
.softwaredev-solution-map ol li { display: flex; align-items: center; gap: .65rem; color: var(--color-muted-deep); font-size: .68rem; }
.softwaredev-solution-map ol i { width: 13px; height: 13px; border: 1px solid var(--color-border-strong); border-radius: 50%; }
.softwaredev-solution-map ol li.is-active { color: var(--color-text); }.softwaredev-solution-map ol li.is-active i { border: 4px solid var(--service-accent); }
.softwaredev-solution-map > ul { display: grid; gap: .8rem; }
.softwaredev-solution-map > ul li { position: relative; min-height: 62px; display: flex; align-items: center; gap: .7rem; padding: .75rem; color: var(--color-text); background: var(--color-bg); border: 1px solid color-mix(in srgb,var(--service-accent) 28%,var(--color-border)); font-size: .68rem; }
.softwaredev-solution-map > ul:nth-of-type(1) li::after,.softwaredev-solution-map__core::after { content: ""; position: absolute; top: 50%; left: 100%; width: 1.3rem; height: 1px; background: var(--service-accent); }
.softwaredev-solution-map svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--service-accent); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.softwaredev-solution-map__core { position: relative; min-height: 145px; display: grid; place-items: center; align-content: center; gap: .8rem; padding: 1rem; color: #fff; background: var(--service-accent); text-align: center; font-size: .76rem; }
.softwaredev-solution-map__core svg { width: 34px; height: 34px; stroke: #fff; }

.softwaredev-quality { padding-block: 8rem; background: color-mix(in srgb,var(--color-bg-elevated) 74%,var(--color-bg)); }
.softwaredev-quality__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4.5rem; }
.softwaredev-quality__heading h2 { max-width: 680px; margin: 0; font-size: clamp(3rem,4.3vw,4.9rem); line-height: .96; letter-spacing: -.055em; }
.softwaredev-quality__heading p { max-width: 630px; margin: 0 0 .4rem auto; }
.softwaredev-quality__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem,5vw,6rem); align-items: stretch; }
.softwaredev-quality__list { position: relative; margin: 0; padding: 0 0 0 2rem; list-style: none; }
.softwaredev-quality__list::before { content: ""; position: absolute; top: 28px; bottom: 28px; left: 7px; width: 1px; background: linear-gradient(var(--service-accent),var(--software-signal)); }
.softwaredev-quality__list li { position: relative; min-height: 116px; display: grid; grid-template-columns: 48px minmax(160px,.7fr) minmax(230px,1.3fr) 26px; align-items: center; gap: 1.2rem; border-bottom: 1px solid var(--color-border); }
.softwaredev-quality__list li > span { width: 46px; height: 46px; display: grid; place-items: center; color: var(--color-text); }
.softwaredev-quality__list li > span svg,.softwaredev-quality__list li > i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.softwaredev-quality__list li > span::before { content: ""; position: absolute; left: 2px; width: 11px; height: 11px; background: var(--color-bg); border: 3px solid var(--service-accent); border-radius: 50%; }
.softwaredev-quality__list h3 { margin: 0; font-size: 1rem; }.softwaredev-quality__list p { margin: 0; font-size: .79rem; }.softwaredev-quality__list li > i { color: var(--service-accent); }
.softwaredev-build { display: grid; grid-template-columns: 1fr 180px; grid-template-rows: auto 1fr; border: 1px solid color-mix(in srgb,var(--service-accent) 26%,var(--color-border)); background: var(--color-bg-elevated); }
.softwaredev-build > header { grid-column: 1/-1; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-muted-deep); font-size: .57rem; letter-spacing: .13em; text-transform: uppercase; }
.softwaredev-build > header strong { color: var(--color-text); }
.softwaredev-build__terminal { margin: 1.25rem; padding: 1.1rem; align-self: center; background: var(--color-bg); border: 1px solid var(--color-border); font-family: Consolas,monospace; font-size: .72rem; }
.softwaredev-build__terminal > i { width: 8px; height: 8px; display: inline-block; margin: 0 .2rem .9rem 0; border-radius: 50%; background: #ef5656; }.softwaredev-build__terminal > i:nth-child(2){background:#f0b945}.softwaredev-build__terminal > i:nth-child(3){background:#45bd70}
.softwaredev-build__terminal code { display: block; margin-bottom: 1rem; color: var(--color-text); }.softwaredev-build__terminal p { margin: .35rem 0; color: var(--color-muted); font-family: inherit; font-size: .7rem; }.softwaredev-build__terminal p b { color: #16a66a; }.softwaredev-build__terminal > strong { display: block; margin-top: 1rem; padding: .7rem; color: #087a50; background: rgba(22,166,106,.1); border: 1px solid rgba(22,166,106,.3); font-size: .66rem; }
.softwaredev-build > ul { display: grid; align-content: center; gap: .7rem; margin: 0; padding: 1.25rem 1.25rem 1.25rem 0; list-style: none; }
.softwaredev-build > ul li { min-height: 58px; display: flex; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid color-mix(in srgb,var(--service-accent) 25%,var(--color-border)); color: var(--color-text); font-size: .65rem; }
.softwaredev-build > ul svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: var(--service-accent); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

.softwaredev-process { padding-block: 8rem; }
.softwaredev-process__heading { margin-bottom: 4.5rem; }.softwaredev-process__heading h2 { max-width: 1000px; margin-bottom: .8rem; font-size: clamp(3rem,4.3vw,4.9rem); line-height: .96; letter-spacing: -.055em; }.softwaredev-process__heading p { max-width: 620px; margin: 0; }
.softwaredev-process__rail { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 2rem; margin-bottom: 0; padding-top: 0; list-style: none; }
.softwaredev-process__rail::before { content: ""; position: absolute; top: 64px; right: 2%; left: 2%; height: 1px; background: repeating-linear-gradient(90deg,var(--color-border-strong) 0 6px,transparent 6px 11px); }
.softwaredev-process__rail::after { content: ""; position: absolute; top: 64px; left: 2%; width: 18%; height: 1px; background: linear-gradient(90deg,var(--service-accent),var(--software-signal)); box-shadow: 0 0 10px color-mix(in srgb,var(--software-signal) 50%,transparent); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.motion-ready .softwaredev-process__rail:not(.is-visible)::after { width: 0; }
.softwaredev-process__rail li { position: relative; min-width: 0; padding-top: 6.2rem; }
.softwaredev-process__rail li > span { position: absolute; top: 0; left: 0; color: var(--color-muted-deep); font-size: 2.25rem; font-weight: 500; letter-spacing: -.06em; }
.softwaredev-process__rail li > i { position: absolute; z-index: 2; top: 56px; left: 0; width: 17px; height: 17px; background: var(--color-bg); border: 2px solid var(--color-border-strong); border-radius: 50%; }
.softwaredev-process__rail li:first-child > span { color: var(--service-accent); }.softwaredev-process__rail li:first-child > i { background: var(--service-accent); border-color: var(--service-accent); box-shadow: 0 0 0 5px color-mix(in srgb,var(--service-accent) 12%,transparent); }
.softwaredev-process__rail h3 { margin-bottom: .45rem; font-size: 1.05rem; }.softwaredev-process__rail p { max-width: 210px; margin: 0; font-size: .78rem; }

.softwaredev-faq { padding-block: 7rem; background: color-mix(in srgb,var(--color-bg-elevated) 76%,var(--color-bg)); }
.softwaredev-faq__grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(4rem,7vw,8rem); align-items: center; }
.softwaredev-faq__art { position: relative; min-height: 370px; display: flex; align-items: center; justify-content: center; gap: 1.2rem; color: var(--service-accent); font-size: clamp(5rem,8vw,9rem); font-weight: 400; line-height: 1; }
.softwaredev-faq__art::before,.softwaredev-faq__art::after { content: ""; position: absolute; inset: 12% 8%; border: 1px dashed color-mix(in srgb,var(--service-accent) 28%,transparent); }.softwaredev-faq__art::after { inset: 26% 20%; }
.softwaredev-faq__art span { position: relative; z-index: 2; }.softwaredev-faq__art i { position: absolute; top: 50%; right: 4%; left: 4%; height: 1px; background: color-mix(in srgb,var(--service-accent) 35%,transparent); }
.softwaredev-faq__art b { position: absolute; z-index: 2; bottom: 0; left: 0; color: var(--color-muted-deep); font-size: .58rem; line-height: 1.8; letter-spacing: .2em; text-transform: uppercase; }
.softwaredev-faq__grid > div:last-child > p { margin-bottom: 2.4rem; }.softwaredev-faq__grid h2 { font-size: clamp(2.8rem,4vw,4.4rem); line-height: .98; letter-spacing: -.05em; }
.softwaredev-faq__list summary { color: var(--color-text); font-size: 1rem; }.softwaredev-faq__list summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 180ms ease; }.softwaredev-faq__list details[open] summary svg { transform: rotate(45deg); }

.softwaredev-cta { padding-block: 6.5rem; color: #fff; background: #050914; }
.softwaredev-cta__grid { min-height: 360px; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 5rem; }
.softwaredev-cta h2 { max-width: 850px; margin-bottom: 1rem; color: #fff; font-size: clamp(3.2rem,5vw,5.5rem); line-height: .95; letter-spacing: -.06em; }.softwaredev-cta p { max-width: 700px; color: #aeb7c6; font-size: 1.05rem; }.softwaredev-cta .button { border-radius: 3px; }.softwaredev-cta .button--secondary { color: #fff; background: transparent; border-color: #647086; }
.softwaredev-cta__signal { position: relative; min-height: 180px; }.softwaredev-cta__signal i { position: absolute; top: 55%; height: 1px; background: var(--software-signal); }.softwaredev-cta__signal i:first-child { left: 0; width: 38%; }.softwaredev-cta__signal i:nth-child(2) { left: 38%; width: 34%; transform: rotate(-22deg); transform-origin: left; }.softwaredev-cta__signal span { position: absolute; top: calc(55% - 6px); left: 35%; width: 13px; height: 13px; background: var(--software-signal); border-radius: 50%; box-shadow: 0 0 18px var(--software-signal); }.softwaredev-cta__signal b { position: absolute; top: 18%; right: 0; color: #aeb7c6; font-size: .6rem; line-height: 1.8; letter-spacing: .2em; text-transform: uppercase; }

html[data-theme="light"] .softwaredev-hero,html[data-theme="light"] .softwaredev-lifecycle,html[data-theme="light"] .softwaredev-process { background: #fff; }
html[data-theme="light"] .softwaredev-quality,html[data-theme="light"] .softwaredev-faq { background: #f5f7fb; }
html[data-theme="light"] .softwaredev-blueprint,html[data-theme="light"] .softwaredev-lifecycle__panels article,html[data-theme="light"] .softwaredev-build { background: #fff; }
html[data-theme="light"] .softwaredev-blueprint__sources li,html[data-theme="light"] .softwaredev-blueprint__stages li,html[data-theme="light"] .softwaredev-solution-map > ul li,html[data-theme="light"] .softwaredev-build__terminal { background: #fff; }
html[data-theme="light"] .softwaredev-cta .button--secondary { color: #fff; background: transparent; border-color: #647086; }

@keyframes softwarePanelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (min-width: 1241px) and (max-height: 800px) {
    .softwaredev-hero { padding-top: 1.5rem; }
    .softwaredev-hero__grid { min-height: 450px; }
    .softwaredev-hero__copy h1 { font-size: clamp(3rem,3.35vw,3.45rem); }
    .softwaredev-blueprint__body { min-height: 310px; padding-block: 1.2rem .8rem; }
    .softwaredev-blueprint__stages li { min-height: 165px; }
    .softwaredev-hero__trail { margin-top: 1.4rem; }
}

@media (max-width: 1240px) {
    .softwaredev-hero__grid { grid-template-columns: 1fr; padding-bottom: 4rem; }.softwaredev-hero__copy { max-width: 850px; }.softwaredev-blueprint { width: min(100%,960px); margin-inline: auto; }
    .softwaredev-lifecycle__grid { grid-template-columns: 1fr; }.softwaredev-lifecycle__intro { position: static; }.softwaredev-lifecycle__tabs { display: grid; grid-template-columns: 1fr 1fr; }.softwaredev-lifecycle__tabs button:nth-child(odd) { border-right: 1px solid var(--color-border); }
    .softwaredev-quality__grid { grid-template-columns: 1fr; }.softwaredev-build { min-height: 440px; }
}
@media (max-width: 980px) {
    .softwaredev-layers__intro,.softwaredev-quality__heading,.softwaredev-faq__grid { grid-template-columns: 1fr; gap: 2rem; }.softwaredev-layers__intro p,.softwaredev-quality__heading p { margin-left: 0; }
    .softwaredev-layers__rail { grid-template-columns: repeat(3,1fr); gap: 3rem 2rem; }.softwaredev-layers__rail::before,.softwaredev-layers__rail li > i { display: none; }.softwaredev-layers__rail li { padding-top: 8rem; }
    .softwaredev-solution-map { grid-template-columns: minmax(160px,.8fr) minmax(120px,.7fr) minmax(120px,.7fr); }.softwaredev-solution-map > div { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }.softwaredev-solution-map > div > p { margin: 0; }.softwaredev-solution-map__core::after { display: none; }
    .softwaredev-process__rail { grid-template-columns: repeat(3,1fr); gap: 3rem 2rem; }.softwaredev-process__rail::before,.softwaredev-process__rail::after { display: none; }.softwaredev-process__rail li { padding-top: 4.5rem; }.softwaredev-process__rail li > i { top: 43px; }
}
@media (max-width: 680px) {
    .service-experience--software-development [data-software-parallax] { transform: none !important; }
    .softwaredev-hero { padding-top: 3.5rem; }.softwaredev-hero__grid { min-height: auto; gap: 3rem; }.softwaredev-hero__copy h1 { font-size: clamp(2.7rem,12vw,3.8rem); }.softwaredev-hero__copy .button { width: 100%; }.softwaredev-hero__trail { display: none; }
    .softwaredev-blueprint { margin-inline: 0; padding: .8rem; box-shadow: 7px 8px 0 color-mix(in srgb,var(--service-accent) 7%,transparent); }.softwaredev-blueprint__head span { display: none; }.softwaredev-blueprint__body { min-height: auto; grid-template-columns: 1fr; padding-block: 1rem; }.softwaredev-blueprint__sources { grid-template-columns: 1fr 1fr; }.softwaredev-blueprint__sources li { min-height: 48px; }.softwaredev-blueprint__stages { grid-template-columns: repeat(5,112px); padding-block: .5rem 1rem; overflow-x: auto; }.softwaredev-blueprint__stages li { min-height: 150px; transform: none; }.softwaredev-blueprint__loop { display: none; }
    .softwaredev-layers__grid,.softwaredev-lifecycle,.softwaredev-quality,.softwaredev-process,.softwaredev-faq { padding-block: 5rem; }.softwaredev-layers__intro h2,.softwaredev-lifecycle__intro h2,.softwaredev-quality__heading h2,.softwaredev-process__heading h2,.softwaredev-faq__grid h2 { font-size: clamp(2.55rem,11vw,3.5rem); }
    .softwaredev-layers__intro { margin-bottom: 3.5rem; }.softwaredev-layers__rail { grid-template-columns: 1fr; gap: 0; }.softwaredev-layers__rail li { min-height: 130px; display: grid; grid-template-columns: 88px 1fr; align-content: center; gap: .35rem 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid #273144; }.softwaredev-layers__rail li > span { position: static; width: 82px; height: 82px; grid-row: 1/3; transform: none; }.softwaredev-layers__rail li > span svg { transform: none; }.softwaredev-layers__rail h3 { align-self: end; margin: 0; }
    .softwaredev-lifecycle__tabs { grid-template-columns: 1fr; }.softwaredev-lifecycle__tabs button:nth-child(odd) { border-right: 0; }.softwaredev-lifecycle__panels article > header { align-items: flex-start; flex-direction: column; }.softwaredev-solution-map { min-height: 0; grid-template-columns: 1fr 1fr; padding: 1rem; }.softwaredev-solution-map > div { display: block; }.softwaredev-solution-map > div > p { margin-bottom: 1.4rem; }.softwaredev-solution-map__core { min-height: 112px; }.softwaredev-solution-map > ul:nth-of-type(1) li::after { display: none; }.softwaredev-solution-map > ul:last-child { grid-column: 1/-1; grid-template-columns: 1fr 1fr; }
    .softwaredev-quality__heading { margin-bottom: 2.8rem; }.softwaredev-quality__list { padding-left: 1.2rem; }.softwaredev-quality__list li { min-height: 0; grid-template-columns: 42px 1fr 24px; gap: .5rem 1rem; padding-block: 1.4rem; }.softwaredev-quality__list h3 { align-self: end; }.softwaredev-quality__list p { grid-column: 2/4; }.softwaredev-quality__list li > span::before { left: -1px; }.softwaredev-build { min-height: 0; grid-template-columns: 1fr; }.softwaredev-build > header { grid-column: auto; }.softwaredev-build > ul { grid-template-columns: 1fr 1fr; padding: 0 1.25rem 1.25rem; }
    .softwaredev-process__rail { grid-template-columns: 1fr; gap: 0; padding-left: 1.4rem; border-left: 1px dashed var(--color-border-strong); }.softwaredev-process__rail li { min-height: 130px; padding: 0 0 2.2rem 3.5rem; }.softwaredev-process__rail li > span { top: 0; left: 0; font-size: 1.7rem; }.softwaredev-process__rail li > i { top: 36px; left: -1.92rem; }.softwaredev-process__rail p { max-width: 280px; }
    .softwaredev-faq__grid { gap: 3rem; }.softwaredev-faq__art { min-height: 260px; }.softwaredev-faq__list summary { font-size: .88rem; }
    .softwaredev-cta { padding-block: 5rem; }.softwaredev-cta__grid { min-height: 0; grid-template-columns: 1fr; gap: 3rem; }.softwaredev-cta h2 { font-size: clamp(2.8rem,12vw,4rem); }.softwaredev-cta .button { width: 100%; }.softwaredev-cta__signal { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .service-experience--software-development [data-software-parallax] { transform: none !important; }
    .softwaredev-lifecycle__panels article.is-entering { animation: none; }
    .softwaredev-process__rail::after { transition: none; }
}

/* Products: database-driven editorial software catalogue. */
.product-page main { overflow: clip; }
.product-page [data-home-parallax] { --home-parallax-y: 0px; will-change: transform; }
.products-hero,.products-directory-section,.products-cta { position: relative; isolation: isolate; }
.products-hero { min-height: 800px; border-bottom: 1px solid var(--color-border); }
.products-hero__line { position: absolute; z-index: -1; top: 0; bottom: 0; left: 48%; width: 1px; overflow: hidden; background: color-mix(in srgb,var(--color-primary) 11%,var(--color-border)); }
.products-hero__line::after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 34%; background: var(--color-primary); animation: productLineTravel 5.8s ease-in-out infinite; }
.products-hero__grid { min-height: 800px; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: clamp(3.5rem,4vw,4.5rem); padding-block: 4.5rem 5rem; }
.products-hero__copy h1 { max-width: 700px; margin-bottom: 1.6rem; font-size: clamp(3.8rem,4.45vw,4.7rem); line-height: .94; letter-spacing: -.067em; }
.products-hero__copy > p { max-width: 610px; margin-bottom: 2.2rem; font-size: 1.1rem; line-height: 1.75; }
.products-hero .hero__actions { align-items: stretch; }
.products-hero .button { min-height: 60px; border-radius: 4px; }

.products-featured { min-width: 0; overflow: visible; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: 5px; box-shadow: 12px 14px 0 color-mix(in srgb,var(--color-primary) 8%,transparent),var(--shadow-panel); }
.products-featured__media { position: relative; aspect-ratio: 3/2; display: grid; place-items: center; overflow: hidden; background: #f6f7fb; border-bottom: 1px solid var(--color-border-strong); transform: translate3d(0,var(--home-parallax-y),0); }
.products-featured__media::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 260ms ease; }
.products-featured__media:hover::after,.products-featured__media:focus-visible::after { transform: scaleX(1); }
.products-featured__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.products-featured__media:hover img,.products-featured__media:focus-visible img { transform: scale(1.025); }
.products-featured__media > span,.product-entry__media > span { display: grid; place-items: center; width: 96px; height: 96px; color: #fff; background: var(--color-primary); font-size: 2.3rem; font-weight: 800; }
.products-featured__content { min-height: 168px; display: grid; grid-template-columns: minmax(190px,.7fr) minmax(0,1.3fr) 54px; align-items: center; gap: 1rem; padding: 1.5rem; }
.products-featured__content > div { min-width: 0; padding-right: 1.25rem; border-right: 1px solid var(--color-border); }
.products-featured__content h2 { margin: 0 0 .45rem; font-size: clamp(1.8rem,2.3vw,2.5rem); line-height: 1; letter-spacing: -.045em; }
.products-featured__content small,.product-entry__content small { color: var(--color-primary); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.products-featured__content p { margin: 0; font-size: .81rem; line-height: 1.72; }
.products-featured__description,.product-entry__description { min-width: 0; }
.product-description.is-collapsed { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--product-description-lines,3); }
.product-description-toggle { width: fit-content; display: inline-flex; align-items: center; gap: .5rem; margin-top: .55rem; padding: .2rem 0; color: var(--color-primary); background: transparent; border: 0; font: 750 .72rem/1.25 var(--font-sans); cursor: pointer; }
.product-description-toggle[hidden] { display: none; }
.product-description-toggle i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 180ms ease; }
.product-description-toggle[aria-expanded="true"] i { transform: translateY(2px) rotate(225deg); }
.product-description-toggle:hover,.product-description-toggle:focus-visible { color: var(--color-action-hover); }
.products-featured__action { width: 54px; height: 54px; display: grid; place-items: center; color: #fff; background: var(--color-primary); border: 1px solid #8c8eff; border-radius: 50%; box-shadow: 0 10px 25px color-mix(in srgb,var(--color-primary) 28%,transparent); transition: transform 180ms ease,background 180ms ease; }
.products-featured__action:hover,.products-featured__action:focus-visible { background: var(--color-action-hover); transform: translateX(4px); }
.products-featured__action svg,.product-entry__link svg,.products-cta .button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.products-featured--empty { min-height: 480px; display: grid; place-items: center; align-content: center; gap: 1.5rem; padding: 3rem; text-align: center; }
.products-featured--empty > span { width: 90px; height: 90px; display: grid; place-items: center; color: #fff; background: var(--color-primary); font-size: 2.5rem; font-weight: 800; }
.products-featured--empty p { max-width: 430px; margin: 0; }

.products-directory-section { padding-block: 8.5rem 9rem; background: color-mix(in srgb,var(--color-bg-elevated) 45%,var(--color-bg)); }
.products-directory__heading { display: grid; gap: 3.8rem; margin-bottom: 4rem; }
.products-directory__heading > div:first-child { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr); align-items: end; gap: 4rem; }
.products-directory__heading h2 { max-width: 930px; margin: 0; font-size: clamp(3.8rem,5.2vw,5.8rem); line-height: .94; letter-spacing: -.065em; }
.products-directory__heading > div:first-child p { max-width: 550px; margin: 0 0 .3rem auto; }
.products-search { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .65rem 1.4rem; }
.products-search label { grid-column: 1/-1; color: var(--color-text); font-size: .76rem; font-weight: 700; }
.products-search__control { position: relative; }
.products-search__control svg { position: absolute; top: 50%; left: 1.1rem; width: 21px; height: 21px; fill: none; stroke: var(--color-muted-deep); stroke-width: 1.7; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; }
.products-search input { width: 100%; min-height: 60px; padding: .9rem 1rem .9rem 3.2rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 4px; font: 500 .86rem/1.2 var(--font-sans); transition: border-color 180ms ease,box-shadow 180ms ease; }
.products-search input::placeholder { color: var(--color-muted-deep); opacity: 1; }
.products-search input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent); outline: 0; }
.products-search > p { min-width: 88px; margin: 0 0 1.25rem; color: var(--color-muted); font-size: .72rem; text-align: right; }

.products-directory { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem,4vw,5rem); border-top: 1px solid var(--color-border-strong); }
.product-entry { min-width: 0; display: grid; grid-template-columns: minmax(150px,.62fr) minmax(0,1.38fr); gap: 1.45rem; align-items: center; min-height: 250px; padding-block: 1.7rem; border-bottom: 1px solid var(--color-border-strong); }
.product-entry[hidden] { display: none; }
.product-entry__media { position: relative; aspect-ratio: 3/2; display: grid; place-items: center; overflow: hidden; background: #f6f7fb; border: 1px solid #d5dbe5; border-radius: 3px; transform: translate3d(0,var(--home-parallax-y),0); transition: border-color 180ms ease,box-shadow 180ms ease; }
.product-entry__media:hover,.product-entry__media:focus-visible { border-color: var(--color-primary); box-shadow: 7px 8px 0 color-mix(in srgb,var(--color-primary) 10%,transparent); }
.product-entry__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 280ms cubic-bezier(.2,.7,.2,1); }
.product-entry__media:hover img,.product-entry__media:focus-visible img { transform: scale(1.035); }
.product-entry__content { min-width: 0; display: grid; align-content: center; gap: .8rem; }
.product-entry__content h3 { margin: 0 0 .3rem; font-size: clamp(1.3rem,1.65vw,1.75rem); line-height: 1.08; letter-spacing: -.035em; }
.product-entry__content p { max-width: 480px; margin: 0; font-size: .75rem; line-height: 1.65; }
.product-entry__link { width: fit-content; display: inline-flex; align-items: center; gap: .65rem; color: var(--color-primary); font-size: .74rem; font-weight: 750; }
.product-entry__link svg { width: 18px; transition: transform 180ms ease; }
.product-entry__link:hover svg,.product-entry__link:focus-visible svg { transform: translateX(4px); }
.products-directory__empty { margin: 0; padding: 4rem 1.5rem; text-align: center; border-block: 1px solid var(--color-border-strong); }

.products-cta { color: #fff; background: #02050a; border-bottom: 1px solid #242c38; }
.products-cta__grid { min-height: 360px; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(420px,.75fr); align-items: center; gap: 5rem; padding-block: 5.5rem; }
.products-cta h2 { max-width: 920px; margin-bottom: 1rem; color: #fff; font-size: clamp(3.2rem,4.5vw,5rem); line-height: .96; letter-spacing: -.06em; }
.products-cta p { max-width: 760px; margin: 0; color: #aeb7c6; }
.products-cta .hero__actions { justify-content: flex-end; }
.products-cta .button { min-height: 58px; border-radius: 4px; }
.products-cta .button--secondary { color: #fff; background: transparent; border-color: #657083; }

html[data-theme="light"] .products-hero { background: #fff; }
html[data-theme="light"] .products-directory-section { background: #fff; }
html[data-theme="light"] .products-featured { background: #fff; border-color: #cfd6e1; box-shadow: 12px 14px 0 rgba(99,102,243,.07),0 28px 70px rgba(28,36,50,.1); }
html[data-theme="light"] .products-featured__content > div { border-right-color: #d8dee8; }
html[data-theme="light"] .products-search input { color: #111827; background: #fff; border-color: #cbd3df; }
html[data-theme="light"] .products-directory { border-top-color: #cfd6e1; }
html[data-theme="light"] .product-entry { border-bottom-color: #cfd6e1; }

@keyframes productLineTravel { 0%,100% { transform: translateY(-110%); } 45%,55% { transform: translateY(290%); } }

@media (max-width: 1240px) {
    .products-hero__grid { grid-template-columns: minmax(390px,.82fr) minmax(520px,1.18fr); gap: 3rem; }
    .products-hero__copy h1 { font-size: clamp(3.5rem,5.3vw,4.35rem); }
    .products-featured__content { grid-template-columns: minmax(175px,.65fr) minmax(0,1.35fr) 52px; gap: 1rem; }
    .products-featured__description { --product-description-lines: 3; }
    .product-entry { grid-template-columns: 135px minmax(0,1fr); }
    .products-cta__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .products-cta .hero__actions { justify-content: flex-start; }
}
@media (max-width: 980px) {
    .products-hero { min-height: 0; }.products-hero__line { display: none; }.products-hero__grid { min-height: 0; grid-template-columns: 1fr; padding-block: 5.5rem 6rem; }.products-hero__copy { max-width: 760px; }.products-featured { width: min(100%,820px); }
    .products-directory__heading > div:first-child { grid-template-columns: 1fr; gap: 1.5rem; }.products-directory__heading > div:first-child p { margin-left: 0; }
    .products-directory { grid-template-columns: 1fr; }.product-entry { grid-template-columns: minmax(180px,.55fr) minmax(0,1.45fr); }
}
@media (max-width: 680px) {
    .product-page [data-home-parallax] { transform: none !important; will-change: auto; }
    .products-hero__grid { gap: 3rem; padding-block: 4rem 4.5rem; }.products-hero__copy h1 { font-size: clamp(3rem,13vw,4.1rem); }.products-hero__copy > p { font-size: 1rem; }.products-hero .button { width: 100%; }
    .products-featured { box-shadow: 7px 8px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); }.products-featured__content { grid-template-columns: 1fr 52px; min-height: 0; padding: 1.25rem; }.products-featured__content > div { padding: 0; border: 0; }.products-featured__description { grid-column: 1/-1; grid-row: 2; --product-description-lines: 4; }.products-featured__action { grid-column: 2; grid-row: 1; }
    .products-directory-section { padding-block: 5rem 5.5rem; }.products-directory__heading { gap: 2.5rem; margin-bottom: 2.8rem; }.products-directory__heading h2 { font-size: clamp(2.8rem,12vw,3.9rem); }.products-search { grid-template-columns: 1fr; }.products-search label { grid-column: auto; }.products-search > p { margin: .4rem 0 0; text-align: left; }
    .product-entry { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 1.5rem 2rem; }.product-entry__description { --product-description-lines: 4; }.product-entry__link { min-height: 42px; align-items: center; }
    .products-cta__grid { min-height: 0; padding-block: 5rem; }.products-cta h2 { font-size: clamp(2.8rem,12vw,4rem); }.products-cta .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .product-page [data-home-parallax] { transform: none !important; will-change: auto; }
    .products-hero__line::after { animation: none; }
    .products-featured__media img,.product-entry__media img { transition: none; }
}

/* Blog: database-driven editorial journal and long-form reader. */
.blog-index-page main,.blog-view-page main { overflow: clip; }
.blog-hero { min-height: 545px; }
.blog-hero__grid { min-height: 545px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); align-items: center; gap: clamp(4rem,8vw,9rem); padding-block: 5rem; }
.blog-hero__title { position: relative; padding-left: clamp(1.8rem,3.2vw,3.4rem); }
.blog-hero__title::before { content: ""; position: absolute; inset: .6rem auto .5rem 0; width: 4px; background: var(--color-primary); box-shadow: 13px 0 0 color-mix(in srgb,var(--color-primary) 12%,transparent); }
.blog-hero h1 { max-width: 850px; margin: 0; font-size: clamp(4.5rem,6.2vw,7.2rem); line-height: .91; letter-spacing: -.075em; }
.blog-hero__aside { max-width: 630px; }
.blog-hero__aside > p { max-width: 560px; margin-bottom: 2.4rem; font-size: 1.06rem; line-height: 1.8; }
.blog-search { display: grid; gap: .65rem; }
.blog-search > label { color: var(--color-text); font-size: .72rem; font-weight: 750; }
.blog-search__control { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; min-height: 62px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: 4px; transition: border-color 180ms ease,box-shadow 180ms ease; }
.blog-search__control:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent); }
.blog-search__control svg { justify-self: end; width: 20px; height: 20px; fill: none; stroke: var(--color-muted-deep); stroke-width: 1.7; stroke-linecap: round; }
.blog-search__control input { min-width: 0; height: 60px; padding: 0 1rem; color: var(--color-text); background: transparent; border: 0; outline: 0; font: 500 .84rem/1.2 var(--font-sans); }
.blog-search__control button { align-self: stretch; min-width: 104px; padding: 0 1.2rem; color: #fff; background: var(--color-primary); border: 0; font: 750 .75rem/1 var(--font-sans); cursor: pointer; transition: background 180ms ease; }
.blog-search__control button:hover,.blog-search__control button:focus-visible { background: var(--color-action-hover); }

.blog-catalogue { padding-block: 0 8.5rem; }
.blog-filters { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--color-border-strong); }
.blog-filters__links { display: flex; align-items: center; gap: 2rem; overflow-x: auto; scrollbar-width: thin; }
.blog-filters a { position: relative; min-height: 92px; display: inline-flex; align-items: center; gap: .5rem; color: var(--color-muted); white-space: nowrap; font-size: .75rem; font-weight: 700; }
.blog-filters a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.blog-filters a:hover,.blog-filters a[aria-current="page"] { color: var(--color-text); }
.blog-filters a[aria-current="page"]::after { transform: scaleX(1); }
.blog-filters a span { color: var(--color-primary); font: 650 .62rem/1 monospace; }
.blog-filters > p { flex: 0 0 auto; margin: 0; color: var(--color-muted-deep); font-size: .72rem; }
.blog-feature { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(370px,.88fr); gap: clamp(3rem,5vw,6rem); align-items: center; padding-block: clamp(4rem,6vw,6.5rem); border-bottom: 1px solid var(--color-border-strong); }
.blog-feature__media,.blog-story__media { position: relative; display: grid; place-items: center; overflow: hidden; background: #f4f5f8; border: 1px solid var(--color-border-strong); }
.blog-feature__media { aspect-ratio: 7/4; box-shadow: 13px 14px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); }
.blog-feature__media::after,.blog-story__media::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 260ms ease; }
.blog-feature__media:hover::after,.blog-feature__media:focus-visible::after,.blog-story__media:hover::after { transform: scaleX(1); }
.blog-feature__media img,.blog-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 360ms cubic-bezier(.2,.7,.2,1); }
.blog-feature__media:hover img,.blog-feature__media:focus-visible img,.blog-story__media:hover img { transform: scale(1.025); }
.blog-feature__media > span,.blog-story__media > span { width: 88px; height: 88px; display: grid; place-items: center; color: #fff; background: var(--color-primary); font-size: 2rem; font-weight: 800; }
.blog-label { display: inline-flex; margin-bottom: 1.2rem; padding: .48rem .68rem; color: var(--color-primary); border: 1px solid color-mix(in srgb,var(--color-primary) 45%,var(--color-border)); font: 750 .63rem/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; color: var(--color-muted-deep); font-size: .67rem; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }
.blog-meta span:first-child { color: var(--color-primary); }
.blog-meta > * + * { position: relative; }
.blog-meta > * + *::before { content: ""; position: absolute; top: 50%; left: -.7rem; width: 3px; height: 3px; background: var(--color-border-strong); border-radius: 50%; }
.blog-feature h2 { max-width: 680px; margin: 1.3rem 0 1.2rem; font-size: clamp(2.7rem,4vw,4.5rem); line-height: .98; letter-spacing: -.06em; }
.blog-feature h2 a,.blog-story h2 a,.blog-story h3 a { color: inherit; }
.blog-feature__copy > p { max-width: 600px; margin-bottom: 1.8rem; }
.blog-read-link { display: inline-flex; align-items: center; gap: .7rem; color: var(--color-text); font-size: .74rem; font-weight: 750; }
.blog-read-link svg { width: 20px; height: 20px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }
.blog-read-link:hover svg,.blog-read-link:focus-visible svg { transform: translateX(5px); }
.blog-story-list,.article-related__list { border-top: 1px solid var(--color-border-strong); }
.blog-story { min-width: 0; display: grid; grid-template-columns: 290px minmax(0,1fr) 58px; align-items: center; gap: clamp(1.7rem,3vw,3.5rem); min-height: 255px; padding-block: 2rem; border-bottom: 1px solid var(--color-border-strong); }
.blog-story__media { aspect-ratio: 7/4; }
.blog-story__copy { min-width: 0; }
.blog-story h2,.blog-story h3 { margin: .8rem 0 .7rem; font-size: clamp(1.55rem,2.25vw,2.45rem); line-height: 1.08; }
.blog-story__copy > p { display: -webkit-box; max-width: 760px; margin: 0; overflow: hidden; font-size: .8rem; line-height: 1.72; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.blog-story__arrow { width: 54px; height: 54px; display: grid; place-items: center; color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: 50%; transition: color 180ms ease,background 180ms ease,transform 180ms ease; }
.blog-story__arrow svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.blog-story__arrow:hover,.blog-story__arrow:focus-visible { color: #fff; background: var(--color-primary); transform: translateX(4px); }
.blog-empty { min-height: 460px; display: grid; place-items: center; align-content: center; gap: 1rem; text-align: center; }
.blog-empty > span { color: color-mix(in srgb,var(--color-primary) 28%,transparent); font-size: 8rem; font-weight: 800; line-height: 1; }
.blog-empty h2 { max-width: 600px; font-size: 2rem; }
.blog-pagination { min-height: 100px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; border-bottom: 1px solid var(--color-border-strong); }
.blog-pagination a { display: inline-flex; align-items: center; gap: .6rem; font-size: .75rem; font-weight: 700; }
.blog-pagination a:last-child { justify-self: end; }
.blog-pagination a:first-child svg { transform: rotate(180deg); }
.blog-pagination svg { width: 19px; height: 19px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; }
.blog-pagination span { color: var(--color-muted-deep); font-size: .7rem; }

.article-hero { padding-block: 3rem 0; }
.article-hero__inner { display: grid; }
.article-back { width: fit-content; display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 4rem; color: var(--color-muted); font-size: .72rem; font-weight: 700; }
.article-back svg { width: 20px; height: 20px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; transform: rotate(180deg); }
.article-hero__grid { display: block; }
.article-hero h1 { max-width: 1210px; margin: 1.5rem 0 0; font-size: clamp(4.1rem,6.2vw,7.1rem); line-height: .91; letter-spacing: -.075em; }
.article-hero__summary { max-width: 780px; margin-top: 2.4rem; padding-bottom: .5rem; }
.article-hero__summary p { margin-bottom: 1.3rem; font-size: 1.05rem; line-height: 1.8; }
.article-hero__summary > span { color: var(--color-primary); font-size: .72rem; font-weight: 700; }
.article-hero__media { aspect-ratio: 7/4; margin: 5rem 0 0; overflow: hidden; background: #f4f5f8; border: 1px solid var(--color-border-strong); box-shadow: 13px 14px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); }
.article-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.article-reader { padding-block: 7.5rem 8.5rem; }
.article-reader__grid { display: grid; grid-template-columns: minmax(0,860px) minmax(220px,280px); justify-content: center; gap: clamp(4rem,7vw,8rem); align-items: start; }
.article-content { min-width: 0; color: var(--color-text); }
.article-content > *:first-child { margin-top: 0; }
.article-content p,.article-content li { font-size: 1rem; line-height: 1.95; }
.article-content p { margin-bottom: 1.6rem; }
.article-content h2,.article-content h3,.article-content h4 { scroll-margin-top: 120px; }
.article-content h2 { margin: 4.8rem 0 1.3rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-strong); font-size: clamp(2.2rem,3.3vw,3.4rem); line-height: 1.05; letter-spacing: -.055em; }
.article-content h3 { margin: 3.2rem 0 1rem; font-size: 1.7rem; }
.article-content h4 { margin: 2.4rem 0 .8rem; font-size: 1.25rem; }
.article-content ul,.article-content ol { display: grid; gap: .75rem; margin: 1.5rem 0 2rem; padding-left: 1.5rem; }
.article-content li::marker { color: var(--color-primary); font-weight: 750; }
.article-content blockquote { margin: 3rem 0; padding: 1.2rem 0 1.2rem 2rem; border-left: 4px solid var(--color-primary); }
.article-content blockquote p { margin: 0; color: var(--color-text); font-size: 1.2rem; font-weight: 600; }
.article-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .2em; }
.article-content img { max-width: 100%; height: auto; }
.article-content figure { margin: 3rem 0; }
.article-content figcaption { margin-top: .7rem; color: var(--color-muted-deep); font-size: .72rem; }
.article-content table { width: 100%; display: block; margin: 2.5rem 0; overflow-x: auto; border-collapse: collapse; }
.article-content th,.article-content td { min-width: 180px; padding: 1rem; border: 1px solid var(--color-border-strong); text-align: left; vertical-align: top; font-size: .8rem; line-height: 1.65; }
.article-content th { color: var(--color-text); background: color-mix(in srgb,var(--color-primary) 8%,var(--color-bg-elevated)); }
.article-content pre { max-width: 100%; padding: 1.2rem; overflow-x: auto; background: var(--color-bg-elevated); border: 1px solid var(--color-border); }
.article-toc { position: sticky; top: 118px; padding-top: .2rem; }
.article-toc h2 { margin: 0 0 1.4rem; color: var(--color-text); font-size: .73rem; letter-spacing: .03em; text-transform: uppercase; }
.article-toc ol { display: grid; gap: .35rem; margin: 0 0 2rem; padding: 0; list-style: none; border-left: 1px solid var(--color-border-strong); }
.article-toc a { display: block; margin-left: -1px; padding: .55rem 0 .55rem 1rem; color: var(--color-muted-deep); border-left: 2px solid transparent; font-size: .7rem; line-height: 1.5; }
.article-toc__h3 a { padding-left: 1.8rem; }
.article-toc a:hover,.article-toc a[aria-current="location"] { color: var(--color-text); border-left-color: var(--color-primary); }
.article-share { display: inline-flex; align-items: center; gap: .65rem; min-height: 46px; padding: 0 1rem; color: var(--color-text); background: transparent; border: 1px solid var(--color-border-strong); font: 700 .7rem/1 var(--font-sans); cursor: pointer; }
.article-share:hover,.article-share:focus-visible { color: #fff; background: var(--color-primary); }
.article-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.article-related { padding-block: 7rem 8.5rem; background: color-mix(in srgb,var(--color-bg-elevated) 58%,var(--color-bg)); }
.article-related__heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.article-related__heading h2 { margin: 0; font-size: clamp(3rem,4.7vw,5rem); }
.blog-not-found { min-height: 720px; display: grid; place-items: center; text-align: center; }
.blog-not-found .shell { display: grid; justify-items: center; gap: 1rem; }
.blog-not-found span { color: color-mix(in srgb,var(--color-primary) 28%,transparent); font-size: clamp(6rem,14vw,12rem); font-weight: 800; line-height: .8; }
.blog-not-found h1 { margin: 1rem 0 0; }
.blog-not-found p { max-width: 520px; }

html[data-theme="light"] .blog-search__control,html[data-theme="light"] .blog-feature__media,html[data-theme="light"] .blog-story__media { background: #fff; }
html[data-theme="light"] .article-related { background: #f8f9fc; }
html[data-theme="light"] .article-content th { background: #f1f2ff; }

@media (max-width: 980px) {
    .blog-hero__grid,.article-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .blog-hero__grid { padding-block: 5.5rem; }.blog-hero { min-height: 0; }.blog-hero h1 { font-size: clamp(4rem,10vw,6rem); }
    .blog-feature { grid-template-columns: 1fr; }.blog-feature__copy { max-width: 760px; }
    .article-hero h1 { font-size: clamp(3.8rem,9vw,6rem); }.article-hero__summary { max-width: 720px; }
    .article-reader__grid { grid-template-columns: 1fr; }.article-toc { position: static; order: -1; }.article-toc ol { grid-template-columns: 1fr 1fr; }.article-share { margin-top: .5rem; }
}
@media (max-width: 680px) {
    .blog-hero__grid { padding-block: 4rem; }.blog-hero__title { padding-left: 1.5rem; }.blog-hero h1 { font-size: clamp(3.1rem,14vw,4.45rem); }.blog-hero__aside > p { font-size: .95rem; }
    .blog-search__control { grid-template-columns: 42px minmax(0,1fr); }.blog-search__control button { grid-column: 1/-1; min-height: 52px; }.blog-search__control input { padding-left: .75rem; }
    .blog-catalogue { padding-bottom: 5.5rem; }.blog-filters { align-items: flex-start; flex-direction: column; gap: 0; padding: 0 0 1rem; }.blog-filters__links { width: calc(100% + var(--gutter)); }.blog-filters a { min-height: 68px; }.blog-filters > p { padding-top: 1rem; }
    .blog-feature { gap: 2.3rem; padding-block: 3.5rem; }.blog-feature__media { box-shadow: 7px 8px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); }.blog-feature h2 { font-size: clamp(2.35rem,11vw,3.3rem); }
    .blog-story { grid-template-columns: 116px minmax(0,1fr); gap: 1rem; min-height: 0; padding-block: 1.5rem; }.blog-story__media { align-self: start; }.blog-story__copy > p { display: none; }.blog-story h2,.blog-story h3 { margin-bottom: 0; font-size: 1.15rem; }.blog-story__arrow { display: none; }.blog-meta { gap: .45rem .9rem; font-size: .57rem; }.blog-meta > * + *::before { left: -.52rem; }
    .blog-pagination { min-height: 86px; grid-template-columns: 1fr 1fr; }.blog-pagination span { grid-column: 1/-1; grid-row: 1; text-align: center; }.blog-pagination a { grid-row: 2; }
    .article-hero { padding-top: 2rem; }.article-back { margin-bottom: 3rem; }.article-hero h1 { font-size: clamp(3rem,13vw,4.35rem); }.article-hero__media { margin-top: 3.5rem; box-shadow: 7px 8px 0 color-mix(in srgb,var(--color-primary) 8%,transparent); }
    .article-reader { padding-block: 4.5rem 5.5rem; }.article-reader__grid { gap: 3.5rem; }.article-toc ol { grid-template-columns: 1fr; }.article-content p,.article-content li { font-size: .94rem; line-height: 1.85; }.article-content h2 { margin-top: 3.8rem; font-size: clamp(2rem,10vw,2.8rem); }.article-content th,.article-content td { min-width: 150px; padding: .8rem; }
    .article-related { padding-block: 5rem; }.article-related__heading { align-items: flex-start; flex-direction: column; }.article-related__heading h2 { font-size: clamp(2.8rem,12vw,3.8rem); }
    .blog-not-found { min-height: 580px; }
}
@media (prefers-reduced-motion: reduce) {
    .blog-feature__media img,.blog-story__media img { transition: none; }
}

/* Shop: an editorial marketplace for the existing template catalogue. */
.shop-page { --shop-line: color-mix(in srgb,var(--color-border-strong) 72%,transparent); }
.shop-page main { overflow: clip; }
.shop-page .button { border-radius: 4px; }
.shop-catalogue { overflow: visible; padding: clamp(2rem,4vw,4rem) 0 7rem; }
.shop-catalogue__form { position: relative; }
.shop-toolbar { min-height: 104px; display: grid; grid-template-columns: minmax(250px,1.5fr) minmax(170px,.7fr) minmax(155px,.65fr) minmax(190px,.75fr) auto auto; align-items: center; gap: .8rem; border-bottom: 1px solid var(--shop-line); }
.shop-search,.shop-select { min-width: 0; height: 54px; display: flex; align-items: center; border: 1px solid var(--shop-line); background: color-mix(in srgb,var(--color-bg-elevated) 82%,transparent); }
.shop-search:focus-within,.shop-select:focus-within { border-color: #9295ff; box-shadow: 0 0 0 3px rgba(99,102,243,.17); }
.shop-search svg { width: 21px; height: 21px; margin-left: 1rem; fill: none; stroke: var(--color-muted); stroke-width: 1.8; }
.shop-search input,.shop-select select { width: 100%; height: 100%; color: var(--color-text); background: transparent; border: 0; font: 600 .78rem/1 var(--font-sans); outline: 0; }
.shop-search input { padding: 0 1rem; font-size: .84rem; font-weight: 500; }
.shop-search input::placeholder { color: var(--color-muted-deep); opacity: 1; }
.shop-select select { padding: 0 2.3rem 0 1rem; cursor: pointer; }
.shop-select select option { color: var(--color-text); background: var(--color-bg-elevated); }
.shop-toolbar__count { margin: 0; padding-inline: .8rem; color: var(--color-muted); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.shop-filter-toggle { min-height: 54px; display: none; align-items: center; gap: .55rem; padding: .75rem 1rem; color: var(--color-text); background: transparent; border: 1px solid var(--shop-line); font: 700 .75rem/1 var(--font-sans); }
.shop-filter-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.shop-directory { display: grid; grid-template-columns: 260px minmax(0,1fr); align-items: start; }
.shop-filters { position: sticky; top: 1rem; min-height: 700px; padding: 2rem 1.8rem 2rem 0; border-right: 1px solid var(--shop-line); }
.shop-filters__heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.4rem; border-bottom: 1px solid var(--shop-line); }
.shop-filters__heading h3 { margin: 0; font-size: .95rem; letter-spacing: -.02em; }
.shop-filters__heading button { width: 40px; height: 40px; display: none; place-items: center; color: var(--color-text); background: transparent; border: 1px solid var(--shop-line); }
.shop-filters__heading button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.shop-filters fieldset { margin: 0; padding: 1.5rem 0; border: 0; border-bottom: 1px solid var(--shop-line); }
.shop-filters legend { width: 100%; margin: 0 0 .85rem; padding: 0; color: var(--color-text); font-size: .72rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.shop-filters label { min-height: 35px; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: .62rem; color: var(--color-muted); font-size: .73rem; cursor: pointer; }
.shop-filters label:hover { color: var(--color-text); }
.shop-filters input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); }
.shop-filters small { color: var(--color-muted-deep); }
.shop-filters__clear { display: inline-flex; margin-top: 1.5rem; color: var(--color-primary); font-size: .73rem; font-weight: 700; }
.shop-filters__clear:hover { color: var(--color-text); }
.shop-results { min-width: 0; padding: 2rem 0 0 clamp(2rem,3vw,3.5rem); }
.shop-catalogue__form .shop-results { transition: opacity 180ms ease; }
.shop-catalogue__form.is-loading .shop-results { opacity: .42; pointer-events: none; }
.shop-catalogue__form.is-loading .shop-toolbar,.shop-catalogue__form.is-loading .shop-filters { pointer-events: none; }
.shop-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3.5rem 1.75rem; }
.shop-product { min-width: 0; }
.shop-product__media { --shop-parallax-y: 0px; position: relative; display: block; width: min(100%,500px); aspect-ratio: 1; overflow: hidden; background: var(--color-bg-elevated); border: 1px solid var(--shop-line); transform: translate3d(0,var(--shop-parallax-y),0); transition: border-color 180ms ease,box-shadow 220ms ease; }
.shop-product__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 420ms cubic-bezier(.2,.75,.25,1); }
.shop-product:hover .shop-product__media { border-color: color-mix(in srgb,var(--color-primary) 62%,var(--shop-line)); box-shadow: 8px 9px 0 color-mix(in srgb,var(--color-primary) 9%,transparent); }
.shop-product:hover .shop-product__media img { transform: scale(1.025); }
.shop-product__media > span { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb,var(--color-primary) 42%,transparent); font-size: 9rem; font-weight: 800; }
.shop-product__media > small { position: absolute; top: .8rem; left: .8rem; padding: .4rem .55rem; color: #fff; background: var(--color-primary); font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.shop-product__body { padding-top: 1.15rem; }
.shop-product__meta { display: flex; align-items: center; gap: .65rem; margin-bottom: .55rem; color: var(--color-muted-deep); font-size: .61rem; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.shop-product__meta span + span { position: relative; padding-left: .75rem; }
.shop-product__meta span + span::before { content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 3px; background: var(--color-primary); transform: translateY(-50%) rotate(45deg); }
.shop-product h3 { min-height: 3.1em; margin: 0 0 1rem; font-size: clamp(1.03rem,1.25vw,1.25rem); line-height: 1.42; letter-spacing: -.03em; }
.shop-product h3 a:hover { color: var(--color-primary); }
.shop-product__bottom { display: grid; gap: .95rem; padding-top: 1rem; border-top: 1px solid var(--shop-line); }
.shop-product__price { min-height: 26px; display: flex; align-items: baseline; gap: .55rem; }
.shop-product__price s { color: var(--color-muted-deep); font-size: .64rem; }
.shop-product__price strong { color: var(--color-text); font-size: 1rem; }
.shop-product__actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.shop-product__action { min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .48rem; padding: .7rem .72rem; border: 1px solid var(--color-primary); border-radius: 4px; font: 750 .66rem/1.15 var(--font-sans); text-align: center; white-space: nowrap; cursor: pointer; transition: color 180ms ease,background 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.shop-product__action--cart { color: #fff; background: var(--color-primary); box-shadow: 0 8px 18px color-mix(in srgb,var(--color-primary) 18%,transparent); }
.shop-product__action--view { color: var(--color-primary); background: transparent; }
.shop-product__action--cart:hover,.shop-product__action--cart:focus-visible { color: #fff; background: var(--color-action-hover); border-color: var(--color-action-hover); transform: translateY(-2px); }
.shop-product__action--view:hover,.shop-product__action--view:focus-visible { color: var(--color-text); background: color-mix(in srgb,var(--color-primary) 8%,transparent); transform: translateY(-2px); }
.shop-product__action.is-confirmed { background: #16a36a; border-color: #16a36a; }
.shop-product__actions svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shop-product__cart-icon--filled { display: none; }
.shop-product__action--cart.is-in-cart .shop-product__cart-icon--outline { display: none; }
.shop-product__action--cart.is-in-cart .shop-product__cart-icon--filled { display: block; fill: currentColor; stroke: none; animation: shop-cart-fill 300ms cubic-bezier(.2,.8,.3,1); }
.shop-pagination { min-height: 94px; display: flex; align-items: end; justify-content: center; gap: .25rem; margin-top: 3.5rem; border-top: 1px solid var(--shop-line); }
.shop-pagination a { width: 39px; height: 39px; display: grid; place-items: center; color: var(--color-muted); border: 1px solid transparent; font-size: .72rem; font-weight: 700; }
.shop-pagination a:hover,.shop-pagination a[aria-current="page"] { color: var(--color-text); border-color: var(--color-primary); }
.shop-pagination svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shop-pagination a:first-child svg { transform: rotate(180deg); }
.shop-empty { min-height: 560px; display: grid; place-items: center; align-content: center; gap: 1.5rem; padding: 3rem; text-align: center; border-bottom: 1px solid var(--shop-line); }
.shop-empty > span { color: color-mix(in srgb,var(--color-primary) 19%,transparent); font-size: clamp(7rem,14vw,13rem); font-weight: 800; line-height: .75; }
.shop-empty h3 { max-width: 600px; margin: 0; font-size: clamp(1.5rem,2.4vw,2.5rem); }
.shop-filters-backdrop { display: none; }

.shop-cta { background: color-mix(in srgb,var(--color-primary) 9%,var(--color-bg)); }
.shop-cta__grid { min-height: 260px; display: flex; align-items: center; justify-content: space-between; gap: 4rem; }
.shop-cta h2 { margin: 0 0 .65rem; font-size: clamp(2.25rem,3vw,3.2rem); line-height: 1; letter-spacing: -.05em; }
.shop-cta p { max-width: 760px; margin: 0; color: var(--color-muted); }
.shop-cta .hero__actions { flex: 0 0 auto; }

html[data-theme="light"] .shop-page { --shop-line: #d5dbe5; }
html[data-theme="light"] .shop-catalogue { background: #fff; }
html[data-theme="light"] .shop-product__media,html[data-theme="light"] .shop-search,html[data-theme="light"] .shop-select { background: #fff; }
html[data-theme="light"] .shop-search input,html[data-theme="light"] .shop-select select { color: #101525; }
html[data-theme="light"] .shop-select select option { color: #101525; background: #fff; }
html[data-theme="light"] .shop-cta { background: #f5f6ff; }

@media (max-width: 1180px) {
    .shop-toolbar { grid-template-columns: minmax(240px,1fr) minmax(155px,.7fr) minmax(145px,.65fr) minmax(165px,.7fr) auto; }
    .shop-toolbar__count { grid-column: 1/-1; grid-row: 2; padding: 0 0 1rem; }
    .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
    .shop-toolbar { grid-template-columns: minmax(0,1fr) auto auto; padding-block: 1.2rem; }.shop-toolbar .shop-select:not(.shop-select--sort) { display: none; }.shop-toolbar__count { grid-column: 1; grid-row: 2; padding: 0; }.shop-filter-toggle { display: flex; }
    .shop-directory { grid-template-columns: 1fr; }.shop-results { padding-left: 0; }
    .shop-filters { position: fixed; z-index: 300; top: 0; right: 0; bottom: 0; width: min(390px,90vw); min-height: 0; padding: 1.5rem 1.5rem 3rem; background: var(--color-bg); border: 0; overflow-y: auto; transform: translateX(105%); transition: transform 260ms ease; }
    .shop-filters__heading button { display: grid; }.shop-filters-backdrop { position: fixed; z-index: 290; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,.55); border: 0; opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
    body.shop-filters-open { overflow: hidden; }.shop-filters-open .shop-filters { transform: none; }.shop-filters-open .shop-filters-backdrop { display: block; opacity: 1; pointer-events: auto; }
    html[data-theme="light"] .shop-filters { background: #fff; }
    .shop-cta__grid { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 4.5rem; }.shop-cta .hero__actions { width: 100%; }
}
@media (max-width: 680px) {
    .shop-toolbar { grid-template-columns: minmax(0,1fr) auto; gap: .65rem; }.shop-select--sort { grid-column: 1; grid-row: 2; }.shop-toolbar__count { grid-column: 1/-1; grid-row: 3; }.shop-filter-toggle { grid-column: 2; grid-row: 2; padding-inline: .8rem; }
    .shop-grid { grid-template-columns: 1fr; gap: 3.2rem; }.shop-results { padding-top: 1.5rem; }.shop-catalogue { padding: 1.25rem 0 5rem; }
    .shop-product h3 { min-height: 0; }.shop-product__bottom { grid-template-columns: 1fr; }.shop-product__actions { justify-content: flex-start; }
    .shop-cta h2 { font-size: clamp(2.7rem,11vw,3.6rem); }.shop-cta .hero__actions { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
    .shop-product__media { transform: none !important; }
    .shop-product__media img,.shop-product__action,.shop-product__wishlist,.shop-product__wishlist svg,.shop-filters,.shop-filters-backdrop { transition: none; }
    .shop-product__wishlist.is-active { animation: none; }
    .shop-product__action--cart.is-in-cart .shop-product__cart-icon--filled { animation: none; }
}

/* Shop detail: product-first editorial commerce surface. */
.shop-detail-page { --detail-line: color-mix(in srgb,var(--color-border-strong) 74%,transparent); }
.shop-detail-page main { overflow: clip; }
.shop-detail-page .button { border-radius: 4px; }
.shop-detail-page .button svg,.shop-detail-section-heading svg,.shop-detail-related__link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shop-detail-overview { padding: 2.1rem 0 6.5rem; }
.shop-detail-breadcrumb { min-width: 0; display: flex; align-items: center; gap: .6rem; margin-bottom: 2rem; color: var(--color-muted-deep); font-size: .72rem; }
.shop-detail-breadcrumb a { color: var(--color-primary); font-weight: 700; }
.shop-detail-breadcrumb svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; }
.shop-detail-breadcrumb span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-detail-overview__grid { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(420px,.94fr); align-items: start; gap: clamp(3rem,6vw,7rem); }
.shop-detail-gallery { min-width: 0; display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 1rem; }
.shop-detail-gallery__rail { max-height: 560px; display: grid; align-content: start; gap: .7rem; overflow-y: auto; scrollbar-width: thin; }
.shop-detail-gallery__rail button { width: 76px; aspect-ratio: 1; padding: 4px; background: transparent; border: 1px solid var(--detail-line); cursor: pointer; transition: border-color 180ms ease,background 180ms ease; }
.shop-detail-gallery__rail button:hover,.shop-detail-gallery__rail button:focus-visible,.shop-detail-gallery__rail button[aria-current="true"] { border-color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 7%,transparent); }
.shop-detail-gallery__rail img { width: 100%; height: 100%; object-fit: contain; }
.shop-detail-gallery__stage { position: relative; width: min(100%,560px); aspect-ratio: 1; display: grid; place-items: center; padding: 0; overflow: hidden; color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 4%,var(--color-bg-elevated)); border: 1px solid var(--detail-line); cursor: zoom-in; }
.shop-detail-gallery__stage::after { content: ""; position: absolute; right: 1rem; bottom: 1rem; width: 32px; height: 32px; border: 1px solid color-mix(in srgb,var(--color-text) 22%,transparent); background: color-mix(in srgb,var(--color-bg) 88%,transparent); }
.shop-detail-gallery__stage img { width: 100%; height: 100%; object-fit: contain; transition: transform 420ms cubic-bezier(.2,.75,.25,1); }
.shop-detail-gallery__stage:hover img { transform: scale(1.018); }
.shop-detail-gallery__stage > span { font-size: 13rem; font-weight: 800; opacity: .2; }
.shop-detail-summary { min-width: 0; padding-top: .2rem; }
.shop-detail-rating { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem; color: var(--color-muted); font-size: .75rem; }
.shop-detail-rating > span:first-child { display: flex; gap: .22rem; }
.shop-detail-rating svg,.shop-detail-review-stars svg { width: 19px; height: 19px; fill: none; stroke: color-mix(in srgb,var(--color-muted) 70%,transparent); stroke-width: 1.35; }
.shop-detail-rating svg.is-filled,.shop-detail-review-stars svg.is-filled { color: #f4ae2b; fill: currentColor; stroke: currentColor; }
.shop-detail-rating strong { color: var(--color-text); }
.shop-detail-rating i { font-style: normal; }
.shop-detail-summary h1 { max-width: 760px; margin: 0; font-size: clamp(2.75rem,4.1vw,4.7rem); line-height: .98; letter-spacing: -.06em; }
.shop-detail-price { display: flex; align-items: center; gap: .8rem; margin: 1.65rem 0; }
.shop-detail-price s { color: var(--color-muted-deep); font-size: .88rem; }
.shop-detail-price strong { color: var(--color-primary); font-size: clamp(1.9rem,2.9vw,2.8rem); letter-spacing: -.045em; }
.shop-detail-price > span { padding: .35rem .5rem; color: #fff; background: var(--color-primary); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.shop-detail-summary__description { max-width: 650px; margin: 0 0 1.8rem; padding-bottom: 1.8rem; color: var(--color-muted); border-bottom: 1px solid var(--detail-line); font-size: .96rem; line-height: 1.78; }
.shop-detail-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 0 1.8rem; border-top: 1px solid var(--detail-line); border-left: 1px solid var(--detail-line); }
.shop-detail-facts > div { min-width: 0; padding: 1rem; border-right: 1px solid var(--detail-line); border-bottom: 1px solid var(--detail-line); }
.shop-detail-facts dt { display: flex; align-items: center; gap: .55rem; margin-bottom: .32rem; color: var(--color-muted-deep); font-size: .62rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.shop-detail-facts dt svg { width: 17px; height: 17px; fill: none; stroke: var(--color-primary); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-detail-facts dd { margin: 0; color: var(--color-text); font-size: .78rem; font-weight: 700; }
.shop-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.shop-detail-actions .shop-detail-action { min-height: 52px; padding-inline: 1rem; font-size: .75rem; }
.shop-detail-actions .shop-detail-action svg { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shop-detail-actions .shop-detail-action--wishlist.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 8px 18px color-mix(in srgb,var(--color-primary) 18%,transparent); animation: shop-heart-pop 320ms cubic-bezier(.2,.8,.3,1); }
.shop-detail-actions .shop-detail-action--wishlist.is-active svg { fill: currentColor; }
.shop-detail-actions .shop-detail-action--wishlist.is-active:hover,.shop-detail-actions .shop-detail-action--wishlist.is-active:focus-visible { color: #fff; background: var(--color-action-hover); border-color: var(--color-action-hover); }
.shop-detail-meta { display: grid; gap: .6rem; margin: 1.5rem 0 0; padding-top: 1.35rem; border-top: 1px solid var(--detail-line); }
.shop-detail-meta > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 1rem; }
.shop-detail-meta dt { color: var(--color-muted-deep); font-size: .67rem; font-weight: 700; text-transform: uppercase; }
.shop-detail-meta dd { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin: 0; color: var(--color-muted); font-size: .72rem; }
.shop-detail-meta a { color: var(--color-primary); }

.shop-detail-information { padding-bottom: 7rem; }
.shop-detail-tabs { min-height: 82px; display: flex; align-items: end; gap: clamp(1.2rem,3vw,3rem); border-top: 1px solid var(--detail-line); border-bottom: 1px solid var(--detail-line); overflow-x: auto; scrollbar-width: none; }
.shop-detail-tabs::-webkit-scrollbar { display: none; }
.shop-detail-tabs button { position: relative; min-height: 58px; padding: .8rem 0; color: var(--color-muted); background: transparent; border: 0; font: 700 .78rem/1.2 var(--font-sans); white-space: nowrap; cursor: pointer; }
.shop-detail-tabs button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transition: transform 180ms ease; }
.shop-detail-tabs button:hover,.shop-detail-tabs button:focus-visible,.shop-detail-tabs button[aria-selected="true"] { color: var(--color-text); }
.shop-detail-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.shop-detail-panel { min-height: 460px; padding: clamp(3rem,5vw,5rem) 0; animation: shop-detail-panel-in 260ms ease both; }
.shop-detail-panel[hidden] { display: none; }
@keyframes shop-detail-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.shop-detail-description { max-width: none; }
.shop-detail-description__grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr); gap: clamp(3rem,6vw,7rem); }
.shop-detail-description__copy { min-width: 0; }
.shop-detail-description aside { min-width: 0; padding-left: clamp(2rem,4vw,4rem); border-left: 1px solid var(--detail-line); }
.shop-detail-description aside > h3 { margin: 0 0 1.25rem; color: var(--color-muted-deep); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.shop-detail-description h2,.shop-detail-description h3,.shop-detail-description h4 { max-width: 820px; margin: 2rem 0 1rem; font-size: clamp(1.45rem,2vw,2.1rem); line-height: 1.2; letter-spacing: -.035em; }
.shop-detail-description h2:first-child,.shop-detail-description h3:first-child,.shop-detail-description h4:first-child { margin-top: 0; }
.shop-detail-description p,.shop-detail-description li,.shop-detail-terms p,.shop-detail-terms li { color: var(--color-muted); font-size: .95rem; line-height: 1.85; }
.shop-detail-description ul,.shop-detail-description ol,.shop-detail-terms ul,.shop-detail-terms ol { margin: 1.2rem 0; padding-left: 1.25rem; }
.shop-detail-description li + li,.shop-detail-terms li + li { margin-top: .45rem; }
.shop-detail-specifications { width: min(100%,900px); margin: 0; border-top: 1px solid var(--detail-line); }
.shop-detail-specifications > div { min-height: 64px; display: grid; grid-template-columns: minmax(180px,.7fr) 1fr; align-items: center; gap: 2rem; border-bottom: 1px solid var(--detail-line); }
.shop-detail-specifications dt { color: var(--color-muted); font-size: .78rem; }
.shop-detail-specifications dd { margin: 0; color: var(--color-text); font-size: .82rem; font-weight: 700; }
.shop-detail-terms article { border-top: 1px solid var(--detail-line); }
.shop-detail-terms article + article { margin-top: 4rem; }
.shop-detail-terms article > header { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--detail-line); }
.shop-detail-terms h3 { margin: 0; font-size: clamp(1.5rem,2.5vw,2.6rem); letter-spacing: -.04em; }
.shop-detail-terms header p { margin: 0; font-size: .68rem; }
.shop-detail-terms article > div { max-width: 1000px; padding-top: 2rem; }
.shop-detail-review-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--detail-line); border: 1px solid var(--detail-line); }
.shop-detail-review-list article { min-width: 0; padding: 2rem; background: var(--color-bg); }
.shop-detail-review-list article > div { display: flex; justify-content: space-between; gap: 1rem; }
.shop-detail-review-list span { color: var(--color-muted-deep); font-size: .68rem; }
.shop-detail-review-list h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
.shop-detail-review-list p:last-child { color: var(--color-muted); font-size: .84rem; line-height: 1.7; }
.shop-detail-review-stars { display: flex; gap: .15rem; margin: .8rem 0; }
.shop-detail-review-empty { min-height: 360px; display: grid; place-items: center; align-content: center; text-align: center; }
.shop-detail-review-empty > span { color: color-mix(in srgb,var(--color-primary) 17%,transparent); font-size: clamp(6rem,13vw,11rem); font-weight: 800; line-height: .8; }
.shop-detail-review-empty h3 { margin: 1.5rem 0 .6rem; font-size: 1.7rem; }
.shop-detail-review-empty p { margin: 0; color: var(--color-muted); }

.shop-detail-related { padding: 6.5rem 0; border-top: 1px solid var(--detail-line); }
.shop-detail-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; }
.shop-detail-section-heading h2 { margin: 0; font-size: clamp(2.35rem,4vw,4rem); letter-spacing: -.055em; }
.shop-detail-section-heading a,.shop-detail-related__link { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-primary); font-size: .72rem; font-weight: 700; }
.shop-detail-related__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem 1.25rem; }
.shop-detail-related__grid article { min-width: 0; }
.shop-detail-related__media { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb,var(--color-primary) 4%,var(--color-bg-elevated)); border: 1px solid var(--detail-line); }
.shop-detail-related__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 360ms ease; }
.shop-detail-related__media:hover img { transform: scale(1.018); }
.shop-detail-related__media > span { color: color-mix(in srgb,var(--color-primary) 28%,transparent); font-size: 7rem; font-weight: 800; }
.shop-detail-related__grid article > p { margin: .9rem 0 .45rem; color: var(--color-muted-deep); font-size: .58rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.shop-detail-related__grid article > p i { padding-inline: .25rem; color: var(--color-primary); font-style: normal; }
.shop-detail-related__grid h3 { min-height: 4.1em; margin: 0 0 .7rem; font-size: .94rem; line-height: 1.38; letter-spacing: -.025em; }
.shop-detail-related__grid h3 a:hover { color: var(--color-primary); }
.shop-detail-related__grid article > strong { display: block; margin-bottom: .8rem; font-size: .9rem; }
.shop-detail-custom { background: color-mix(in srgb,var(--color-primary) 9%,var(--color-bg)); }
.shop-detail-custom__grid { min-height: 260px; display: flex; align-items: center; justify-content: space-between; gap: 4rem; }
.shop-detail-custom h2 { max-width: 750px; margin: 0 0 .7rem; font-size: clamp(2.2rem,3.5vw,3.5rem); line-height: 1.05; letter-spacing: -.05em; }
.shop-detail-custom p { max-width: 760px; margin: 0; color: var(--color-muted); }
.shop-detail-custom .hero__actions { flex: 0 0 auto; }

.shop-detail-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity 220ms ease,visibility 220ms ease; }
.shop-detail-lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; }
.shop-detail-lightbox__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,.88); border: 0; }
.shop-detail-lightbox__dialog { position: relative; z-index: 1; width: min(88vw,940px); height: min(84vh,820px); display: grid; place-items: center; }
.shop-detail-lightbox__dialog > img { width: 100%; height: 100%; object-fit: contain; }
.shop-detail-lightbox__close,.shop-detail-lightbox__nav { position: absolute; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: rgba(12,16,28,.78); border: 1px solid rgba(255,255,255,.3); cursor: pointer; }
.shop-detail-lightbox__close { top: 0; right: 0; }
.shop-detail-lightbox__nav { top: 50%; transform: translateY(-50%); }
.shop-detail-lightbox__nav--prev { left: 0; }.shop-detail-lightbox__nav--next { right: 0; }
.shop-detail-lightbox__nav--prev svg { transform: rotate(180deg); }
.shop-detail-lightbox__close svg,.shop-detail-lightbox__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.shop-detail-lightbox-open { overflow: hidden; }
.shop-detail-missing { min-height: 680px; display: grid; align-items: center; }
.shop-detail-missing .shell { text-align: center; }
.shop-detail-missing span { color: color-mix(in srgb,var(--color-primary) 20%,transparent); font-size: clamp(7rem,18vw,16rem); font-weight: 800; line-height: .75; }
.shop-detail-missing h1 { margin: 2rem 0 .8rem; font-size: clamp(2.5rem,5vw,5rem); }
.shop-detail-missing p { margin: 0 0 2rem; color: var(--color-muted); }

html[data-theme="light"] .shop-detail-overview,html[data-theme="light"] .shop-detail-information,html[data-theme="light"] .shop-detail-related { background: #fff; }
html[data-theme="light"] .shop-detail-page { --detail-line: #d5dbe5; }
html[data-theme="light"] .shop-detail-gallery__stage,html[data-theme="light"] .shop-detail-related__media { background: #f7f8ff; }
html[data-theme="light"] .shop-detail-custom { background: #f5f6ff; }

@media (max-width: 1120px) {
    .shop-detail-overview__grid { grid-template-columns: 1fr; gap: 4rem; }.shop-detail-gallery { width: min(100%,740px); }.shop-detail-gallery__stage { width: min(100%,640px); }
    .shop-detail-summary { max-width: 800px; }.shop-detail-related__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3rem 1.5rem; }.shop-detail-related__grid h3 { min-height: 0; }
    .shop-detail-custom__grid { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 4.5rem; }.shop-detail-custom .hero__actions { width: 100%; }
    .shop-detail-description__grid { grid-template-columns: 1fr; }.shop-detail-description aside { padding: 3rem 0 0; border-top: 1px solid var(--detail-line); border-left: 0; }
}
@media (max-width: 680px) {
    .shop-detail-overview { padding: 1.25rem 0 4.5rem; }.shop-detail-breadcrumb { margin-bottom: 1.2rem; }.shop-detail-breadcrumb span:last-child { display: none; }
    .shop-detail-gallery { grid-template-columns: 1fr; }.shop-detail-gallery__rail { grid-row: 2; grid-template-columns: repeat(3,68px); max-height: none; overflow-x: auto; overflow-y: hidden; }.shop-detail-gallery__rail button { width: 68px; }
    .shop-detail-summary h1 { font-size: clamp(2.4rem,12vw,3.5rem); }.shop-detail-facts { grid-template-columns: 1fr; }.shop-detail-actions { grid-template-columns: 1fr; }.shop-detail-meta > div { grid-template-columns: 75px minmax(0,1fr); }
    .shop-detail-information { padding-bottom: 4.5rem; }.shop-detail-tabs { margin-inline: -20px; padding-inline: 20px; gap: 1.5rem; }.shop-detail-panel { min-height: 380px; padding-block: 3rem; }.shop-detail-specifications > div { grid-template-columns: 1fr; gap: .35rem; padding-block: 1rem; }.shop-detail-terms article > header { align-items: flex-start; flex-direction: column; justify-content: center; gap: .25rem; padding-block: 1rem; }.shop-detail-review-list { grid-template-columns: 1fr; }
    .shop-detail-related { padding-block: 4.5rem; }.shop-detail-section-heading { align-items: flex-start; flex-direction: column; }.shop-detail-related__grid { grid-template-columns: 1fr; gap: 3.2rem; }.shop-detail-related__media { width: min(100%,500px); }.shop-detail-custom h2 { font-size: clamp(2.35rem,11vw,3.2rem); }.shop-detail-custom .hero__actions { display: grid; }
    .shop-detail-lightbox { padding: .75rem; }.shop-detail-lightbox__dialog { width: 100%; height: 88vh; }.shop-detail-lightbox__close { top: .5rem; right: .5rem; }.shop-detail-lightbox__nav--prev { left: .5rem; }.shop-detail-lightbox__nav--next { right: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .shop-detail-gallery__stage img,.shop-detail-related__media img,.shop-detail-tabs button::after,.shop-detail-lightbox,.shop-detail-panel { animation: none; transition: none; }
    .shop-detail-actions .shop-detail-action--wishlist.is-active { animation: none; }
}

/* Shared shop, wishlist, cart and account navigation. Desktop actions live in the site header; mobile stays fixed at the bottom. */
.commerce-layout { min-width: 0; display: block; }
.commerce-layout > main { min-width: 0; }
.commerce-navigation { display: none; }

/* Wishlist and cart: product-first, intentionally free of marketing hero content. */
.store-page { min-height: 72vh; padding: 3rem 0 7rem; overflow: clip; }
.store-page__heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 2rem; padding-bottom: 2.6rem; border-bottom: 1px solid var(--color-border-strong); }
.store-page__heading nav { grid-column: 1/-1; display: flex; align-items: center; gap: .55rem; color: var(--color-muted-deep); font-size: .68rem; }
.store-page__heading nav a { color: var(--color-primary); font-weight: 700; }
.store-page__heading h1 { max-width: 850px; margin: 0 0 .65rem; font-size: clamp(3rem,5vw,5.2rem); line-height: .96; letter-spacing: -.065em; }
.store-page__heading p { max-width: 660px; margin: 0; font-size: 1rem; line-height: 1.7; }
.store-page__heading > strong { align-self: end; color: var(--color-primary); font-size: .72rem; letter-spacing: .035em; text-transform: uppercase; }
.store-auth-required,.store-empty { min-height: 470px; display: grid; place-items: center; align-content: center; padding-block: 5rem; text-align: center; }
.store-auth-required > svg,.store-empty > svg { width: 80px; height: 80px; margin-bottom: 1.6rem; fill: none; stroke: color-mix(in srgb,var(--color-primary) 70%,var(--color-text)); stroke-width: 1.1; }
.store-auth-required h2,.store-empty h2 { max-width: 700px; margin: 0 0 .7rem; font-size: clamp(2rem,3.2vw,3.4rem); letter-spacing: -.045em; }
.store-auth-required p,.store-empty p { max-width: 580px; margin: 0 0 1.8rem; }
.store-page .button { border-radius: 3px; }
.wishlist-list { border-top: 1px solid var(--color-border-strong); }
.wishlist-item { position: relative; min-height: 210px; display: grid; grid-template-columns: 180px minmax(0,1fr) auto; align-items: center; gap: clamp(1.4rem,3vw,3rem); padding: 1.5rem 4rem 1.5rem 0; border-bottom: 1px solid var(--color-border-strong); transition: opacity 200ms ease,transform 200ms ease; }
.wishlist-item.is-removing,.cart-item.is-removing { opacity: 0; transform: translateX(18px); pointer-events: none; }
.wishlist-item__image { width: 180px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb,var(--color-primary) 4%,var(--color-bg-elevated)); border: 1px solid var(--color-border); }
.wishlist-item__image img { width: 100%; height: 100%; object-fit: contain; transition: transform 260ms ease; }
.wishlist-item__image:hover img { transform: scale(1.025); }
.wishlist-item__body { min-width: 0; }
.wishlist-item__body > p,.cart-item__product p { margin: 0 0 .55rem; color: var(--color-muted-deep); font-size: .62rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.wishlist-item__body > p span,.cart-item__product p span { color: var(--color-primary); }
.wishlist-item__body h2 { max-width: 660px; margin: 0 0 .9rem; font-size: clamp(1.35rem,2vw,2rem); letter-spacing: -.035em; }
.wishlist-item__body h2 a:hover,.cart-item__product h2 a:hover { color: var(--color-primary); }
.wishlist-item__body > strong { color: var(--color-primary); font-size: 1.05rem; }
.wishlist-item__actions { min-width: 178px; display: grid; gap: .65rem; }
.wishlist-item__actions .button { min-height: 48px; padding: .75rem 1rem; font-size: .78rem; }
.store-remove { width: 36px; height: 36px; display: grid; place-items: center; color: var(--color-muted-deep); background: transparent; border: 0; cursor: pointer; }
.store-remove:hover { color: #ef4444; }
.store-remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wishlist-item > .store-remove { position: absolute; top: 1.25rem; right: 0; }
.cart-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,380px); align-items: start; gap: clamp(2.5rem,5vw,6rem); padding-top: 2.8rem; }
.cart-ledger { min-width: 0; border-top: 1px solid var(--color-border-strong); }
.cart-ledger__head,.cart-item { display: grid; grid-template-columns: minmax(300px,1fr) 105px 132px 105px; align-items: center; gap: 1rem; }
.cart-ledger__head { min-height: 54px; padding-right: 42px; color: var(--color-muted-deep); border-bottom: 1px solid var(--color-border-strong); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cart-ledger__head span:first-child { padding-left: 110px; }
.cart-item { position: relative; min-height: 132px; padding: 1.25rem 42px 1.25rem 0; border-bottom: 1px solid var(--color-border-strong); transition: opacity 200ms ease,transform 200ms ease; }
.cart-item__image { position: absolute; left: 0; width: 90px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb,var(--color-primary) 4%,var(--color-bg-elevated)); border: 1px solid var(--color-border); }
.cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__product { min-width: 0; padding-left: 110px; }
.cart-item__product h2 { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.35; letter-spacing: -.025em; }
.cart-item > strong { font-size: .8rem; }
.cart-item > .store-remove { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.quantity-control { width: 112px; height: 42px; display: grid; grid-template-columns: 34px 44px 34px; border: 1px solid var(--color-border-strong); }
.quantity-control button,.quantity-control input { width: 100%; min-width: 0; height: 100%; color: var(--color-text); background: transparent; border: 0; text-align: center; }
.quantity-control button { cursor: pointer; font-size: 1.05rem; }
.quantity-control button:hover { color: var(--color-primary); }
.quantity-control input { appearance: textfield; font: 700 .75rem/1 var(--font-sans); border-inline: 1px solid var(--color-border); }
.quantity-control input::-webkit-inner-spin-button { appearance: none; }
.coupon-form { display: flex; flex-wrap: wrap; gap: .65rem; padding-top: 1.4rem; }
.coupon-form input,.redeem-form input { min-width: min(320px,100%); min-height: 50px; padding: .75rem 1rem; color: var(--color-text); background: transparent; border: 1px solid var(--color-border-strong); border-radius: 3px; }
.coupon-form .button { min-height: 50px; padding-block: .7rem; font-size: .78rem; }
.cart-summary .coupon-form--summary { display: grid; gap: .65rem; margin: 0 0 1.45rem; padding: 0 0 1.45rem; border-bottom: 1px solid var(--color-border-strong); }
.coupon-form--summary > label { color: var(--color-text); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.coupon-form__row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .55rem; }
.coupon-form--summary input { width: 100%; min-width: 0; min-height: 46px; }
.cart-summary .coupon-form--summary .button { width: auto; min-height: 46px; margin: 0; padding-inline: 1rem; }
.cart-summary .coupon-form--summary .button--text { justify-self: start; min-height: auto; padding: .15rem 0; }
.cart-summary .coupon-form--summary [hidden] { display: none !important; }
.button--text,.text-button { color: var(--color-primary); background: transparent; border: 0; box-shadow: none; cursor: pointer; }
.cart-summary { position: sticky; top: 1.5rem; padding: 2rem; background: color-mix(in srgb,var(--color-primary) 4%,var(--color-bg-elevated)); border: 1px solid var(--color-border-strong); box-shadow: 12px 12px 0 color-mix(in srgb,var(--color-primary) 7%,transparent); }
.cart-summary h2 { margin: 0 0 1.6rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border-strong); font-size: 1.45rem; letter-spacing: -.035em; }
.cart-summary dl { display: grid; gap: .9rem; margin: 0 0 1.7rem; }
.cart-summary dl > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--color-muted); font-size: .78rem; }
.cart-summary dl > div:last-child { margin-top: .25rem; padding-top: 1rem; color: var(--color-text); border-top: 1px solid var(--color-border); font-size: 1rem; font-weight: 800; }
.cart-summary dd { margin: 0; }
.cart-summary .button { width: 100%; min-height: 52px; margin-top: .65rem; font-size: .78rem; }
.cart-checkout.is-loading { cursor: wait; }
.cart-checkout.is-loading svg { display: none; }
.cart-checkout.is-loading::after { width: 1rem; height: 1rem; border: 2px solid color-mix(in srgb,currentColor 35%,transparent); border-top-color: currentColor; border-radius: 50%; content: ''; animation: cart-checkout-spin .7s linear infinite; }
@keyframes cart-checkout-spin { to { transform: rotate(360deg); } }
.cart-summary > p { margin: 1.2rem 0 0; color: var(--color-muted-deep); font-size: .66rem; line-height: 1.65; }
.store-toast { position: fixed; z-index: 1100; right: 1.25rem; bottom: 1.25rem; max-width: min(390px,calc(100vw - 2.5rem)); padding: .9rem 1.15rem; color: #fff; background: #111827; border: 1px solid #374151; box-shadow: 0 18px 45px rgba(0,0,0,.25); opacity: 0; transform: translateY(12px); transition: opacity 200ms ease,transform 200ms ease; }
.store-toast.is-visible { opacity: 1; transform: none; }.store-toast.is-success { border-color: var(--color-primary); }.store-toast.is-error { border-color: #ef4444; }

/* Account: open workspace and explicit authentication states. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.account-page { min-height: 74vh; padding: 4rem 0 7rem; }
.account-page[data-authenticated="false"] { min-height: calc(100svh - 112px); padding: 0; background: var(--color-bg); }
.account-auth { min-height: calc(100svh - 112px); display: grid; grid-template-columns: minmax(0,1.08fr) minmax(430px,.92fr); align-items: center; gap: clamp(3.5rem,7vw,7.5rem); padding-block: clamp(3rem,6vh,5.5rem); }
.account-auth__intro { min-width: 0; align-self: stretch; display: grid; align-content: center; gap: clamp(2rem,4vh,3.8rem); animation: account-rise 700ms cubic-bezier(.2,.7,.2,1) both; }
.account-auth__intro header h1 { max-width: 760px; margin: 0 0 1.35rem; font-size: clamp(4rem,5.5vw,6.6rem); line-height: .91; letter-spacing: -.074em; text-wrap: balance; }
.account-auth__intro header p { max-width: 540px; margin: 0; color: var(--color-muted); font-size: clamp(.98rem,1.15vw,1.12rem); line-height: 1.72; }
.account-auth__visual { position: relative; width: min(100%,670px); height: clamp(295px,31vw,405px); isolation: isolate; }
.account-visual__halo { position: absolute; z-index: -1; display: block; background: color-mix(in srgb,var(--color-primary) 12%,transparent); filter: blur(1px); }
.account-visual__halo--one { inset: 8% 3% 12% 20%; border-radius: 48% 52% 42% 58% / 56% 42% 58% 44%; transform: rotate(-6deg); }
.account-visual__halo--two { width: 22%; aspect-ratio: 1; right: 2%; bottom: 2%; border: 1px solid color-mix(in srgb,var(--color-primary) 32%,transparent); background: transparent; border-radius: 50%; }
.account-visual__window { position: absolute; overflow: hidden; background: color-mix(in srgb,var(--color-bg-elevated) 96%,var(--color-primary)); border: 1px solid var(--color-border-strong); border-radius: 12px; box-shadow: 0 24px 60px rgba(15,23,42,.13); }
.account-visual__window--rear { width: 65%; height: 54%; top: 3%; left: 2%; opacity: .66; transform: rotate(-7deg); }
.account-visual__window--front { width: 76%; height: 70%; top: 18%; left: 13%; transform: rotate(4deg); }
.account-visual__bar { height: 36px; display: flex; align-items: center; gap: 6px; padding-inline: 13px; background: color-mix(in srgb,var(--color-primary) 8%,var(--color-bg-elevated)); border-bottom: 1px solid var(--color-border); }
.account-visual__bar i { width: 6px; height: 6px; display: block; background: color-mix(in srgb,var(--color-primary) 45%,var(--color-border-strong)); border-radius: 50%; }
.account-visual__skeleton { display: grid; gap: 11px; padding: 22px; }.account-visual__skeleton span { width: 72%; height: 10px; display: block; background: color-mix(in srgb,var(--color-primary) 11%,var(--color-border)); border-radius: 999px; }.account-visual__skeleton span:nth-child(2) { width: 48%; }.account-visual__skeleton span:nth-child(3) { width: 61%; }
.account-visual__workspace { height: calc(100% - 36px); display: grid; grid-template-columns: 62px 1fr; }
.account-visual__rail { display: grid; place-items: center; align-content: start; gap: 18px; padding: 16px 10px; background: color-mix(in srgb,var(--color-primary) 8%,var(--color-bg)); border-right: 1px solid var(--color-border); }.account-visual__rail img { width: 26px; height: 26px; object-fit: contain; }.account-visual__rail i { width: 24px; height: 5px; display: block; background: color-mix(in srgb,var(--color-primary) 25%,var(--color-border-strong)); border-radius: 10px; }
.account-visual__canvas { display: grid; align-content: center; gap: 22px; padding: clamp(20px,3vw,36px); }.account-visual__headline { width: 48%; height: 10px; background: color-mix(in srgb,var(--color-primary) 42%,var(--color-border-strong)); border-radius: 999px; }.account-visual__canvas > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.account-visual__canvas i { min-height: 58px; display: block; background: color-mix(in srgb,var(--color-primary) 9%,var(--color-bg)); border: 1px solid color-mix(in srgb,var(--color-primary) 25%,var(--color-border)); border-radius: 7px; }
.account-visual__float { position: absolute; z-index: 4; min-width: 146px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; padding: 13px 15px; background: color-mix(in srgb,var(--color-bg-elevated) 95%,transparent); border: 1px solid var(--color-border-strong); border-radius: 11px; box-shadow: 0 18px 38px rgba(15,23,42,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }.account-visual__float svg { width: 30px; height: 30px; padding: 6px; color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 10%,transparent); border-radius: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.account-visual__float span { display: grid; gap: 7px; }.account-visual__float i { width: 72px; height: 5px; display: block; background: color-mix(in srgb,var(--color-primary) 24%,var(--color-border)); border-radius: 999px; }.account-visual__float i:last-child { width: 46px; opacity: .65; }
.account-visual__float--lock { top: 4%; right: 1%; animation: account-drift 5.4s ease-in-out infinite; }.account-visual__float--download { right: 0; bottom: 4%; animation: account-drift 5.4s .8s ease-in-out infinite reverse; }
.account-auth__panel { align-self: center; overflow: hidden; background: color-mix(in srgb,var(--color-primary) 2%,var(--color-bg-elevated)); border: 1px solid var(--color-border-strong); border-radius: 14px; box-shadow: 0 30px 75px rgba(15,23,42,.14), 0 4px 16px rgba(15,23,42,.06); animation: account-rise 700ms 90ms cubic-bezier(.2,.7,.2,1) both; }
.account-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; background: color-mix(in srgb,var(--color-primary) 3%,transparent); border-bottom: 1px solid var(--color-border-strong); }
.account-auth__tabs button { position: relative; min-height: 72px; padding: 0 1rem; color: var(--color-muted); background: transparent; border: 0; font: 700 .8rem/1.2 var(--font-sans); cursor: pointer; transition: color 180ms ease,background 180ms ease; }
.account-auth__tabs button + button { border-left: 1px solid var(--color-border); }
.account-auth__tabs button::after { content: ""; position: absolute; right: 22%; bottom: -1px; left: 22%; height: 3px; background: var(--color-primary); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform 180ms ease; }
.account-auth__tabs button:hover { background: color-mix(in srgb,var(--color-primary) 5%,transparent); }.account-auth__tabs button[aria-selected="true"] { color: var(--color-text); }.account-auth__tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.account-form { display: grid; gap: 1rem; padding: 1.8rem; }
.account-auth__panel .account-form { gap: 1.18rem; padding: clamp(1.6rem,3vw,2.55rem); }
.account-form[hidden] { display: none; }
.account-form header h2 { margin: 0 0 .35rem; font-size: 1.55rem; letter-spacing: -.035em; }
.account-form label:not(.check-field),.verification-dialog label { display: grid; gap: .55rem; color: var(--color-text); font-size: .72rem; font-weight: 700; }
.account-field { display: grid; gap: .55rem; }
.account-field__control { position: relative; display: block; }
.account-field__control > svg { position: absolute; z-index: 2; top: 50%; left: 17px; width: 19px; height: 19px; color: var(--color-muted-deep); fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; transition: color 180ms ease; }
.account-form input:not([type="checkbox"]),.verification-dialog input { width: 100%; min-height: 54px; padding: .78rem .95rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 7px; outline: 0; transition: border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }
.account-auth__panel .account-field__control input { min-height: 61px; padding-left: 3.15rem; }.account-auth__panel .account-field__control:has(.account-password-toggle) input { padding-right: 3.45rem; }
.account-field__control:focus-within > svg { color: var(--color-primary); }.account-form input:focus,.verification-dialog input:focus,.coupon-form input:focus,.redeem-form input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-primary) 14%,transparent); }
.account-password-toggle { position: absolute; z-index: 3; top: 50%; right: 7px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; color: var(--color-muted-deep); background: transparent; border: 0; border-radius: 7px; transform: translateY(-50%); cursor: pointer; }.account-password-toggle:hover,.account-password-toggle:focus-visible,.account-password-toggle.is-visible { color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 8%,transparent); }.account-password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; }
.account-form .button { width: 100%; min-height: 54px; border-radius: 7px; font-size: .82rem; }
.account-auth__panel .account-form > .button--primary { min-height: 60px; margin-top: .05rem; box-shadow: 0 10px 25px color-mix(in srgb,var(--color-primary) 22%,transparent); }
.account-form__split { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.check-field { display: flex; align-items: center; gap: .65rem; color: var(--color-muted); font-size: .69rem; cursor: pointer; }.check-field input { width: 17px; height: 17px; margin: 0; accent-color: var(--color-primary); }
.text-button { padding: .25rem; font: 700 .69rem/1.2 var(--font-sans); }
.account-form__hint,.account-muted { margin: 0; color: var(--color-muted-deep); font-size: .68rem; line-height: 1.65; }
.form-status { min-height: 1.1rem; color: var(--color-muted); font-size: .68rem; line-height: 1.5; }.form-status:empty { min-height: 0; }.form-status.is-error { color: #ef7a7a; }.form-status.is-success { color: #2fa66f; }
.account-google { display: grid; gap: .9rem; justify-items: center; overflow: hidden; }.account-google > span { width: 100%; display: flex; align-items: center; gap: 1rem; color: var(--color-muted-deep); font-size: .65rem; text-transform: uppercase; }.account-google > span::before,.account-google > span::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }.account-google .g_id_signin { max-width: 100%; }
.verification-dialog { width: min(470px,calc(100vw - 2rem)); padding: 2rem; color: var(--color-text); background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: 14px; box-shadow: var(--shadow-panel); }.verification-dialog::backdrop { background: rgba(0,0,0,.72); }.verification-dialog > button { position: absolute; top: .8rem; right: .8rem; width: 36px; height: 36px; color: var(--color-text); background: transparent; border: 1px solid var(--color-border); border-radius: 7px; cursor: pointer; }.verification-dialog h2 { margin: 0 2rem .5rem 0; font-size: 1.7rem; }.verification-dialog form { display: grid; gap: 1rem; margin-top: 1.5rem; }
@keyframes account-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes account-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.account-page[data-authenticated="true"] { min-height: calc(100svh - 112px); padding: 0 0 7rem; overflow: visible; }
.account-workspace { min-height: 760px; display: grid; grid-template-columns: 260px minmax(0,1fr); align-items: stretch; background: var(--color-bg); border: 1px solid var(--color-border-strong); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 26px 72px rgba(15,23,42,.08); overflow: clip; }
.account-sidebar { min-width: 0; display: flex; flex-direction: column; padding: 2rem 1.25rem 2rem; background: color-mix(in srgb,var(--color-primary) 1.7%,var(--color-bg)); border-right: 1px solid var(--color-border-strong); }
.account-sidebar__identity { min-width: 0; display: grid; grid-template-columns: 60px minmax(0,1fr); gap: .22rem .85rem; align-items: center; padding: .75rem .65rem 1.8rem; border-bottom: 1px solid var(--color-border); }
.account-sidebar__identity .account-avatar { grid-row: 1/3; }.account-sidebar strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }.account-sidebar small { min-width: 0; overflow: hidden; color: var(--color-muted-deep); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.account-avatar { width: 60px; height: 60px; display: grid; place-items: center; color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 11%,var(--color-bg)); border: 1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border)); border-radius: 50%; font-size: 1.05rem; font-weight: 800; }
.account-sidebar nav { display: grid; gap: .28rem; padding: 1.65rem 0; }
.account-sidebar nav button { position: relative; min-height: 52px; display: flex; align-items: center; gap: .9rem; padding: .8rem .95rem; color: var(--color-muted); background: transparent; border: 0; border-radius: 8px; font: 700 .75rem/1.2 var(--font-sans); text-align: left; cursor: pointer; transition: color 180ms ease,background 180ms ease,transform 180ms ease; }
.account-sidebar nav button::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -1.25rem; width: 3px; background: var(--color-primary); border-radius: 0 3px 3px 0; opacity: 0; transform: scaleY(.3); transition: opacity 180ms ease,transform 180ms ease; }
.account-sidebar nav button:hover { color: var(--color-text); background: color-mix(in srgb,var(--color-primary) 5%,transparent); transform: translateX(2px); }.account-sidebar nav button[aria-current="page"] { color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 10%,transparent); }.account-sidebar nav button[aria-current="page"]::before { opacity: 1; transform: none; }
.account-sidebar nav svg,.account-sidebar > .button svg,.account-content svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-sidebar > .button { min-height: 50px; display: flex; align-items: center; justify-content: flex-start; gap: .9rem; margin-top: auto; padding-inline: .95rem; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; font-size: .74rem; box-shadow: none; }
.account-content { min-width: 0; min-height: 760px; padding: clamp(2.4rem,4vw,4rem) clamp(2rem,4.5vw,4.5rem) 4rem; }
.account-content__header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2.4rem; }
.account-content__header h1 { max-width: 780px; margin: 0 0 .55rem; font-size: clamp(2.55rem,3.45vw,4rem); line-height: .98; letter-spacing: -.06em; text-wrap: balance; }.account-content__header p { max-width: 620px; margin: 0; font-size: .9rem; }
[data-account-panel]:not([hidden]) { animation: account-panel-in 340ms cubic-bezier(.2,.7,.2,1) both; }
.account-overview-heading { margin: .2rem 0 1.15rem; font-size: 1.28rem; letter-spacing: -.035em; }
.account-overview-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.account-overview-links button { min-height: 104px; display: grid; grid-template-columns: 50px minmax(0,1fr) 22px; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; color: var(--color-text); background: transparent; border: 1px solid var(--color-border-strong); border-radius: 9px; text-align: left; cursor: pointer; transition: border-color 180ms ease,background 180ms ease,transform 180ms ease,box-shadow 180ms ease; }
.account-overview-links button:hover { background: color-mix(in srgb,var(--color-primary) 4%,transparent); border-color: color-mix(in srgb,var(--color-primary) 48%,var(--color-border)); box-shadow: 0 13px 30px rgba(15,23,42,.07); transform: translateY(-2px); }.account-overview-links button > svg:first-child { width: 48px; height: 48px; padding: 12px; color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 10%,transparent); border-radius: 50%; }.account-overview-links button > svg:last-child { color: var(--color-muted-deep); }.account-overview-links button span { min-width: 0; display: grid; gap: .3rem; }.account-overview-links button strong { font-size: .88rem; }.account-overview-links button small { overflow: hidden; color: var(--color-muted-deep); font-size: .65rem; line-height: 1.55; text-overflow: ellipsis; white-space: nowrap; }
.account-section-heading { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.8rem; border-top: 1px solid var(--color-border); }.account-section-heading h2,.account-section-heading h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.035em; }.account-section-heading p { margin: .4rem 0 0; font-size: .72rem; }.account-section-heading .text-button { color: var(--color-primary); }
[data-account-panel="profile"] > .account-section-heading,[data-account-panel="downloads"] > .account-section-heading,[data-account-panel="orders"] > .account-section-heading,[data-account-panel="licenses"] > .account-section-heading,[data-account-panel="redeem"] > .account-section-heading { min-height: 92px; margin-top: 0; border-top: 0; border-bottom: 1px solid var(--color-border); }
.account-empty { min-height: 285px; display: grid; place-items: center; align-content: center; padding: 2rem; text-align: center; border: 1px solid var(--color-border-strong); border-radius: 10px; }.account-empty > svg { width: 74px; height: 74px; margin-bottom: 1.1rem; padding: 17px; color: var(--color-primary); background: color-mix(in srgb,var(--color-primary) 8%,transparent); border-radius: 50%; }.account-empty h3 { margin: 0 0 .45rem; font-size: 1.3rem; }.account-empty p { max-width: 460px; margin: 0 0 1.35rem; font-size: .76rem; }.account-empty .button.button--secondary { min-height: 48px; padding-inline: 1.4rem; color: #fff; background: var(--color-primary); border-color: var(--color-primary); border-radius: 7px; font-size: .72rem; }
.profile-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 2rem; }.profile-grid .account-form { gap: 1.1rem; padding: .4rem clamp(1.5rem,3vw,2.5rem) 1rem 0; }.profile-grid .account-form + .account-form { padding-right: 0; padding-left: clamp(1.5rem,3vw,2.5rem); border-left: 1px solid var(--color-border-strong); }.profile-grid h3 { margin: 0 0 .35rem; font-size: 1.18rem; letter-spacing: -.03em; }.account-form--plain { align-content: start; background: transparent; }.profile-grid .account-form input { min-height: 57px; background: transparent; border-radius: 8px; }.profile-grid .account-form .button { min-height: 56px; margin-top: .3rem; border-radius: 8px; }
.account-records,.account-order-table { overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: 9px; }.account-records article { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--color-border); }.account-records article:last-child { border-bottom: 0; }.account-records article > div { display: grid; gap: .3rem; }.account-records small,.account-records time { color: var(--color-muted-deep); font-size: .65rem; }.account-records .button { min-height: 42px; font-size: .7rem; }
.account-download-records .account-download-record { min-height: 104px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1.5rem; padding-block: 1.15rem; }
.account-download-record__details { min-width: 0; display: grid; gap: .42rem; }.account-download-record__details strong { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }.account-download-record__details small { font-size: .66rem; }
.account-download-record__controls { display: flex !important; grid-template-columns: none; align-items: center; gap: .85rem !important; }
.account-download-usage { min-width: 164px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .28rem .8rem; padding: .62rem .75rem; color: var(--color-text); background: color-mix(in srgb,var(--color-primary) 7%,var(--color-bg)); border: 1px solid color-mix(in srgb,var(--color-primary) 27%,var(--color-border)); border-radius: 8px; }
.account-download-usage > span:first-child { color: var(--color-muted-deep); font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.account-download-usage > strong { display: flex; align-items: baseline; justify-content: flex-end; color: var(--color-primary); font-size: 1.08rem; line-height: 1; }.account-download-usage > strong b { font: inherit; }.account-download-usage > strong i { margin-inline: .16rem; color: var(--color-muted-deep); font: 600 .68rem/1 var(--font-sans); }
.account-download-usage__track { grid-column: 1/-1; height: 5px; overflow: hidden; background: color-mix(in srgb,var(--color-primary) 13%,var(--color-bg)); border-radius: 999px; }.account-download-usage__track i { width: var(--download-progress); height: 100%; display: block; background: var(--color-primary); border-radius: inherit; transition: width 280ms ease; }
.account-download-usage.is-complete { background: color-mix(in srgb,#ef4444 7%,var(--color-bg)); border-color: color-mix(in srgb,#ef4444 30%,var(--color-border)); }.account-download-usage.is-complete > strong { color: #ef4444; }.account-download-usage.is-complete .account-download-usage__track i { background: #ef4444; }
.account-download-record__controls form { margin: 0; }.account-download-record__controls .button { min-width: 112px; }
.account-order-table { overflow-x: auto; }.account-order-table__head,.account-order-table article { min-width: 780px; display: grid; grid-template-columns: 1fr 1fr .45fr 1fr .7fr .9fr; align-items: center; gap: 1rem; padding-inline: 1.2rem; }.account-order-table__head { min-height: 52px; color: var(--color-muted-deep); background: color-mix(in srgb,var(--color-primary) 3%,transparent); border-bottom: 1px solid var(--color-border-strong); font-size: .59rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.account-order-table article { min-height: 72px; border-bottom: 1px solid var(--color-border); font-size: .72rem; }.account-order-table article:last-child { border-bottom: 0; }.account-order-table time { color: var(--color-muted); }.account-invoice-form { margin: 0; }.account-invoice-form .button { min-width: 94px; min-height: 39px; gap: .45rem; padding-inline: .75rem; font-size: .66rem; }.account-invoice-form .button svg { width: 16px; height: 16px; }
.account-license-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding-top: 2rem; }
.account-license { min-width: 0; display: grid; gap: 1.15rem; padding: 1.35rem; background: color-mix(in srgb,var(--color-primary) 3%,var(--color-bg)); border: 1px solid var(--color-border-strong); border-radius: 10px; box-shadow: 0 12px 30px rgba(13,20,36,.05); }
.account-license header { display: grid; gap: .38rem; }.account-license header span { width: max-content; padding: .28rem .48rem; color: #2fa66f; background: color-mix(in srgb,#2fa66f 10%,transparent); border-radius: 999px; font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.account-license h3 { margin: 0; font-size: 1rem; }
.account-license__key { min-width: 0; display: grid; gap: .42rem; padding: .9rem 1rem; background: color-mix(in srgb,var(--color-primary) 8%,var(--color-bg)); border: 1px solid color-mix(in srgb,var(--color-primary) 24%,var(--color-border)); border-radius: 8px; }.account-license__key span,.account-license dt { color: var(--color-muted-deep); font-size: .57rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }.account-license__key code { overflow-wrap: anywhere; color: var(--color-primary); font: 800 .79rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .035em; }
.account-license dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; margin: 0; }.account-license dl div { min-width: 0; display: grid; gap: .22rem; }.account-license dd { overflow: hidden; margin: 0; color: var(--color-muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }.account-license dl div:last-child { text-align: right; }.account-license > .button { width: max-content; min-height: 40px; gap: .5rem; padding-inline: .8rem; font-size: .65rem; }.account-license > .button svg { width: 16px; height: 16px; }
.redeem-form { display: grid; grid-template-columns: minmax(0,430px) auto; gap: .7rem; padding: 2rem 0; }.redeem-form input { min-height: 54px; border-radius: 8px; }.redeem-form .button { min-height: 54px; border-radius: 8px; }.redeem-form .form-status { grid-column: 1/-1; }
.account-loyalty { display: grid; grid-template-columns: minmax(190px,.65fr) minmax(0,1.35fr); margin: 2rem 0 0; padding: clamp(1.6rem,3vw,2.5rem); color: #fff; background: #111827; border: 1px solid #293347; border-radius: 10px; box-shadow: 0 20px 50px rgba(15,23,42,.14); }.account-loyalty__balance { display: grid; align-content: center; gap: .2rem; padding-right: clamp(1.5rem,3vw,3rem); border-right: 1px solid #293347; }.account-loyalty__balance>span { color: #aeb5c2; font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.account-loyalty__balance>strong { color: #aeb1ff; font-size: clamp(3.3rem,5vw,5.5rem); line-height: 1; letter-spacing: -.07em; }.account-loyalty__balance>small { color: #d5d8e1; font-size: .7rem; }.account-loyalty__reward { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .55rem 1.3rem; padding-left: clamp(1.5rem,3vw,3rem); }.account-loyalty__reward h2 { margin: 0; font-size: 1.25rem; }.account-loyalty__reward p { grid-column: 1; max-width: 560px; margin: 0; color: #aeb5c2; font-size: .72rem; }.account-loyalty__reward .button { grid-column: 2; grid-row: 1/4; min-width: 145px; }.account-loyalty__progress { grid-column: 1; height: 7px; overflow: hidden; margin-top: .45rem; background: #293347; border-radius: 99px; }.account-loyalty__progress i { width: var(--loyalty-progress); height: 100%; display: block; background: #818cf8; border-radius: inherit; transition: width 260ms ease; }
.account-coupons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }.account-coupons>.account-muted { grid-column: 1/-1; }.account-coupon { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: color-mix(in srgb,var(--color-primary) 5%,var(--color-bg)); border: 1px solid color-mix(in srgb,var(--color-primary) 25%,var(--color-border)); border-radius: 9px; }.account-coupon>div { min-width: 0; display: grid; gap: .18rem; }.account-coupon>div>span { color: #2fa66f; font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.account-coupon>div>strong { overflow: hidden; color: var(--color-primary); font-size: .9rem; letter-spacing: .08em; text-overflow: ellipsis; }.account-coupon>div>small { color: var(--color-muted-deep); font-size: .6rem; }.account-coupon .button { min-height: 38px; flex: 0 0 auto; padding-inline: .75rem; font-size: .62rem; }.account-coupon.is-used { opacity: .62; }.account-coupon.is-used>div>span { color: var(--color-muted-deep); }.is-positive { color: #44c487; }.is-negative { color: #ef7a7a; }
@keyframes account-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.shop-product { position: relative; }
.shop-product__wishlist { position: absolute; z-index: 3; top: .8rem; right: .8rem; width: 42px; height: 42px; display: grid; place-items: center; color: var(--color-muted); background: color-mix(in srgb,var(--color-bg) 92%,transparent); border: 1px solid var(--color-border-strong); border-radius: 50%; box-shadow: 0 7px 18px rgba(13,20,36,.1); cursor: pointer; transition: color 180ms ease,background 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.shop-product__wishlist:hover { color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); }
.shop-product__wishlist.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 8px 20px color-mix(in srgb,var(--color-primary) 28%,transparent); animation: shop-heart-pop 320ms cubic-bezier(.2,.8,.3,1); }
.shop-product__wishlist svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: fill 180ms ease,transform 180ms ease; }
.shop-product__wishlist.is-active svg { fill: currentColor; transform: scale(1.04); }
.shop-product__actions button:disabled,.shop-detail-actions button:disabled { cursor: wait; opacity: .58; }
.shop-detail-actions__demo { grid-column: 1/-1; min-height: 38px !important; justify-self: start; padding: .3rem 0; color: var(--color-primary); }

html[data-theme="light"] .store-page,html[data-theme="light"] .account-page { background: #fff; }
html[data-theme="light"] .cart-summary,html[data-theme="light"] .account-auth__panel,html[data-theme="light"] .account-visual__window,html[data-theme="light"] .account-visual__float { background: #fff; }
html[data-theme="light"] .account-form input:not([type="checkbox"]),html[data-theme="light"] .verification-dialog input { background: #fff; }
html[data-theme="light"] .account-workspace,html[data-theme="light"] .account-sidebar { background: #fff; }
html[data-theme="light"] .profile-grid .account-form--plain { background: transparent; }
html[data-theme="light"] .verification-dialog { color: #111827; background: #fff; }
html[data-theme="light"] .shop-product__wishlist { background: rgba(255,255,255,.96); }
html[data-theme="light"] .shop-product__wishlist.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
@keyframes shop-heart-pop { 0% { transform: scale(.82); } 58% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes shop-cart-fill { 0% { opacity: .25; transform: scale(.72); } 65% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }

@media (min-width: 1600px) {
    .account-page[data-authenticated="true"] .account-workspace { width: min(calc(100% - clamp(2rem,5vw,8rem)),2200px); grid-template-columns: clamp(280px,14vw,320px) minmax(0,1fr); padding-inline: 0; }
    .account-page[data-authenticated="true"] .account-content { padding-inline: clamp(4rem,5vw,7rem); }
}
@media (max-width: 1380px) and (min-width: 1241px) {
    .site-header__inner { gap: 1.2rem; }.brand img { width: 188px; }.site-nav { gap: 1.25rem; }.site-nav__links { gap: .9rem; }.site-nav__links a { font-size: .82rem; }.site-nav__actions { gap: .55rem; }.header-cta { padding-inline: 1rem; font-size: .8rem; }
}
@media (max-width: 1240px) {
    .site-nav__actions { flex-wrap: wrap; justify-content: flex-start; }
    .cart-layout { grid-template-columns: 1fr; }.cart-summary { position: static; width: min(100%,520px); }
    .account-workspace { grid-template-columns: 230px minmax(0,1fr); }.account-content { padding-left: 2.25rem; }.account-identity { display: none; }
}
@media (max-width: 980px) {
    .header-commerce-nav { display: none; }
    .commerce-layout { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
    .commerce-navigation { position: fixed; z-index: 320; inset: auto 0 0; width: auto; display: block; color: #e2e8f0; }
    .commerce-navigation__inner { display: block; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(15,23,42,.97); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -10px 30px rgba(0,0,0,.22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .commerce-navigation nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px; }
    .commerce-navigation__link { position: relative; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; color: #d7dcec; border-radius: 10px; font: 700 clamp(.58rem,2.7vw,.72rem)/1.25 var(--font-sans); text-align: center; white-space: nowrap; }
    .commerce-navigation__link:hover,.commerce-navigation__link:focus-visible { color: #fff; background: rgba(255,255,255,.06); }
    .commerce-navigation__link[aria-current="page"] { background: transparent; }
    .commerce-navigation__icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.08); border-radius: 999px; }
    .commerce-navigation__link[aria-current="page"] .commerce-navigation__icon { color: #fff; background: var(--color-primary); }
    .commerce-navigation svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
    .commerce-navigation__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .commerce-navigation__count { position: absolute; top: -5px; right: -7px; min-width: 19px; height: 19px; display: grid; place-items: center; padding-inline: 4px; color: #fff; background: #e11d48; border: 2px solid #172036; border-radius: 999px; font-size: .52rem; font-weight: 800; line-height: 1; }
    .commerce-navigation__count.is-empty { display: none; }
    body.has-commerce-navigation .floating-actions { bottom: calc(88px + env(safe-area-inset-bottom)); }
    body.has-commerce-navigation .store-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) {
    .store-page { padding-top: 2rem; }.store-page__heading { grid-template-columns: 1fr; }.store-page__heading > strong { justify-self: start; }
    .wishlist-item { grid-template-columns: 140px minmax(0,1fr); padding-right: 0; }.wishlist-item__image { width: 140px; }.wishlist-item__actions { grid-column: 2; grid-template-columns: repeat(2,minmax(0,180px)); }
    .cart-ledger__head { display: none; }.cart-item { grid-template-columns: minmax(0,1fr) auto; gap: .8rem 1rem; padding: 1.3rem 42px 1.3rem 0; }.cart-item__product { padding-left: 110px; }.cart-item__image { top: 1.3rem; }.cart-item > strong:first-of-type { align-self: start; }.cart-item .quantity-control { grid-column: 1; margin-left: 110px; }.cart-item > strong[data-line-total] { grid-column: 2; }
    .account-page[data-authenticated="false"],.account-auth { min-height: calc(100svh - 94px); }.account-auth { grid-template-columns: 1fr; gap: 2.8rem; padding-block: 3.5rem 5rem; }.account-auth__intro { gap: 2.2rem; }.account-auth__intro header h1 { max-width: 800px; }.account-auth__intro header p { max-width: 620px; }.account-auth__visual { height: clamp(285px,52vw,390px); }.account-auth__panel { width: min(100%,620px); }
    .account-page[data-authenticated="true"] { min-height: calc(100svh - 94px); padding-bottom: 6rem; }.account-workspace { min-height: 0; grid-template-columns: 1fr; border-top: 1px solid var(--color-border-strong); border-radius: 12px; }.account-sidebar { position: relative; min-height: 0; display: grid; padding: 1.25rem 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--color-border-strong); }.account-sidebar__identity { margin-right: 7.5rem; padding: .6rem .5rem 1.25rem; border-bottom: 0; }.account-sidebar nav { grid-template-columns: repeat(6,minmax(104px,1fr)); gap: .2rem; padding: .65rem 0 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x proximity; }.account-sidebar nav::-webkit-scrollbar { display: none; }.account-sidebar nav button { min-height: 78px; flex-direction: column; justify-content: center; gap: .45rem; padding: .6rem .5rem; border-radius: 0; white-space: nowrap; scroll-snap-align: start; }.account-sidebar nav button::before { inset: auto 16px -1px; width: auto; height: 3px; transform: scaleX(.3); }.account-sidebar nav button:hover { transform: none; }.account-sidebar nav button[aria-current="page"]::before { transform: none; }.account-sidebar > .button { position: absolute; top: 1.7rem; right: 1.25rem; width: auto; min-height: 44px; justify-content: center; margin: 0; padding-inline: .9rem; border: 1px solid var(--color-border-strong); border-radius: 8px; }.account-content { min-height: 560px; padding: 2.6rem 1.5rem 3.5rem; }.profile-grid { grid-template-columns: 1fr; }.profile-grid .account-form,.profile-grid .account-form + .account-form { padding: .4rem 0 1.8rem; border-left: 0; }.profile-grid .account-form + .account-form { padding-top: 1.8rem; border-top: 1px solid var(--color-border-strong); }
}
@media (max-width: 620px) {
    .store-page__heading h1 { font-size: clamp(2.7rem,14vw,4rem); }.store-auth-required,.store-empty { min-height: 410px; }
    .wishlist-item { grid-template-columns: 92px minmax(0,1fr); align-items: start; gap: 1rem; padding-block: 1.25rem; }.wishlist-item__image { width: 92px; }.wishlist-item__body h2 { font-size: 1.05rem; }.wishlist-item__actions { grid-column: 1/-1; grid-template-columns: 1fr 1fr; }.wishlist-item > .store-remove { top: auto; right: 0; bottom: 1.45rem; }.wishlist-item__actions { padding-right: 44px; }
    .cart-layout { padding-top: 1.5rem; }.cart-item { min-height: 156px; grid-template-columns: 1fr auto; padding-right: 36px; }.cart-item__image { width: 76px; }.cart-item__product { min-height: 76px; padding-left: 92px; }.cart-item .quantity-control { margin-left: 92px; }.coupon-form { display: grid; }.coupon-form input { width: 100%; min-width: 0; }
    .cart-summary { padding: 1.5rem; box-shadow: 7px 7px 0 color-mix(in srgb,var(--color-primary) 7%,transparent); }
    .account-page { padding-top: 2rem; }.account-page[data-authenticated="false"] { min-height: calc(100svh - 82px); padding-top: 0; }.account-auth { min-height: auto; gap: 2.3rem; padding-block: 2.6rem 4rem; }.account-auth__intro { gap: 1.7rem; }.account-auth__intro header h1 { margin-bottom: 1rem; font-size: clamp(3rem,14vw,4.3rem); }.account-auth__intro header p { font-size: .92rem; line-height: 1.65; }.account-auth__visual { width: calc(100% + .4rem); height: clamp(220px,66vw,280px); margin-left: -.2rem; }.account-visual__window--rear { width: 69%; }.account-visual__window--front { width: 80%; left: 8%; }.account-visual__bar { height: 28px; }.account-visual__workspace { height: calc(100% - 28px); grid-template-columns: 48px 1fr; }.account-visual__rail { gap: 12px; padding: 12px 7px; }.account-visual__rail img { width: 21px; height: 21px; }.account-visual__rail i { width: 18px; }.account-visual__canvas { gap: 14px; padding: 18px; }.account-visual__canvas > div { gap: 8px; }.account-visual__canvas i { min-height: 38px; }.account-visual__float { min-width: 116px; grid-template-columns: 31px 1fr; gap: 8px; padding: 9px 10px; }.account-visual__float svg { width: 27px; height: 27px; }.account-visual__float i { width: 53px; }.account-visual__float i:last-child { width: 34px; }.account-auth__panel { border-radius: 11px; box-shadow: 0 22px 55px rgba(15,23,42,.13); }.account-auth__tabs button { min-height: 62px; }.account-auth__panel .account-form,.account-form { padding: 1.3rem; }.account-auth__panel .account-field__control input { min-height: 57px; }.account-form__split { gap: .7rem; }.account-page[data-authenticated="true"] { padding-top: 0; }.account-workspace { width: 100%; border-right: 0; border-left: 0; border-radius: 0; }.account-sidebar { padding: 1rem var(--gutter) 0; }.account-sidebar__identity { min-height: 92px; grid-template-columns: 54px minmax(0,1fr); margin-right: 5.6rem; padding: .55rem 0; }.account-sidebar__identity .account-avatar { width: 54px; height: 54px; }.account-sidebar > .button { top: 1.85rem; right: var(--gutter); width: 44px; padding: 0; }.account-sidebar > .button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }.account-sidebar nav { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); grid-template-columns: repeat(6,92px); }.account-sidebar nav button { min-height: 76px; font-size: .66rem; }.account-content { padding: 2.35rem var(--gutter) 3.2rem; }.account-content__header { padding-bottom: 2rem; }.account-content__header h1 { font-size: clamp(2.25rem,10vw,3rem); }.account-content__header p { font-size: .78rem; line-height: 1.65; }.account-overview-heading { font-size: 1.1rem; }.account-overview-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }.account-overview-links button { position: relative; min-height: 142px; grid-template-columns: 44px minmax(0,1fr); align-content: center; align-items: start; gap: .75rem; padding: 1rem; }.account-overview-links button > svg:first-child { width: 44px; height: 44px; padding: 10px; }.account-overview-links button > svg:last-child { position: absolute; right: .75rem; bottom: .75rem; width: 17px; height: 17px; }.account-overview-links button strong { font-size: .78rem; }.account-overview-links button small { font-size: .61rem; line-height: 1.5; white-space: normal; }.account-section-heading { min-height: 76px; margin-top: 1.35rem; }.account-section-heading h2,.account-section-heading h3 { font-size: 1.15rem; }.account-empty { min-height: 330px; padding: 1.4rem; }.profile-grid { margin-top: 1.5rem; }.redeem-form { grid-template-columns: 1fr; }.account-records article { align-items: flex-start; flex-direction: column; }.account-download-records .account-download-record { grid-template-columns: 1fr; }.account-download-record__details strong { white-space: normal; }.account-download-record__controls { width: 100%; display: grid !important; grid-template-columns: minmax(0,1fr) auto; }.account-download-usage { min-width: 0; }.account-download-record__controls .button { min-width: 96px; }.account-order-table { border-right: 0; border-left: 0; border-radius: 0; }.account-loyalty { grid-template-columns: 1fr; }.account-loyalty__balance { padding: 0 0 1.5rem; border-right: 0; border-bottom: 1px solid #293347; }.account-loyalty__reward { grid-template-columns: 1fr; padding: 1.5rem 0 0; }.account-loyalty__reward .button { grid-column: 1; grid-row: auto; width: 100%; }.account-coupons { grid-template-columns: 1fr; }.account-coupon { align-items: flex-start; flex-direction: column; }.account-coupon .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .wishlist-item,.cart-item,.wishlist-item__image img,.store-toast,.shop-product__wishlist,.account-auth__tabs button,.account-auth__tabs button::after,.account-field__control > svg,.account-form input,.account-password-toggle { transition: none; }
    .account-auth__intro,.account-auth__panel,.account-visual__float,[data-account-panel]:not([hidden]) { animation: none; }
    .account-sidebar nav button,.account-sidebar nav button::before,.account-overview-links button,.account-download-usage__track i,.account-loyalty__progress i { transition: none; }
}

@media (max-width: 900px) {
    .account-sidebar nav { grid-template-columns: repeat(7,minmax(104px,1fr)); }
}

@media (max-width: 620px) {
    .account-sidebar nav { grid-template-columns: repeat(7,92px); }
    .account-license-list { grid-template-columns: 1fr; }
    .account-license dl { grid-template-columns: 1fr; }
    .account-license dl div:last-child { text-align: left; }
    .account-license > .button { width: 100%; }
}