Gecko [ bdeworldwide.com ]

Name	Size	Permission
.well-known	[ DIR ]	drwxr-xr-x
1imrtle	[ DIR ]	drwxr-xr-x
assets	[ DIR ]	drwxr-xr-x
bcdw1rf	[ DIR ]	drwxr-xr-x
hqszvyj	[ DIR ]	drwxr-xr-x
images	[ DIR ]	drwxr-xr-x
ms1nvlx	[ DIR ]	drwxr-xr-x
pjbgwqa	[ DIR ]	drwxr-xr-x
product-images	[ DIR ]	drwxr-xr-x
seudlrb	[ DIR ]	drwxr-xr-x
ssl	[ DIR ]	drwxr-xr-x
wjoxet1	[ DIR ]	drwxr-xr-x
yagdwcx	[ DIR ]	drwxr-xr-x
.env	74 B	-rw-r--r--
.htaccess	199 B	-rw-r--r--
DEPLOY-NAMECHEAP.md	1.26 KB	-rw-rw-rw-
about.html	30 KB	-rw-rw-rw-
admin-leads.html	6.59 KB	-rw-rw-rw-
admin-leads.js	23.46 KB	-rw-rw-rw-
admin-users.json	590 B	-rw-rw-rw-
admin.html	7.01 KB	-rw-rw-rw-
admin.js	111.38 KB	-rw-rw-rw-
app.js	116.05 KB	-rw-rw-rw-
cms-data.js	83.07 KB	-rw-rw-rw-
cms-data.json	83.05 KB	-rw-rw-rw-
content-store.js	7.37 KB	-rw-rw-rw-
dev-server.js	26.75 KB	-rw-rw-rw-
goat1.php	143.87 KB	-rw-r--r--
index.css	365.46 KB	-rw-rw-rw-
index.html	46.94 KB	-rw-rw-rw-
industries.html	31.63 KB	-rw-rw-rw-
leads-data.json	692 B	-rw-rw-rw-
license-lcan.php	629 B	-rw-r--r--
package-lock.json	244 B	-rw-r--r--
package.json	249 B	-rw-rw-rw-
privacy-policy.html	20.07 KB	-rw-rw-rw-
robots.txt	94 B	-rw-r--r--
service-data.js	19.3 KB	-rw-rw-rw-
service-page.js	74.19 KB	-rw-rw-rw-
service.html	29.76 KB	-rw-rw-rw-
signalhgai-ai-ready-websites-d...	0 B	-rw-rw-rw-
signalhgai-ai-ready-websites-d...	130.34 KB	-rw-rw-rw-
signalhgai-landing-page-design...	0 B	-rw-rw-rw-
signalhgai-landing-page-design...	129.64 KB	-rw-rw-rw-
signalhgai-offer-page-copy-dom...	0 B	-rw-rw-rw-
signalhgai-offer-page-copy-dom...	129.25 KB	-rw-rw-rw-
signalhgai-responsive-page-sys...	0 B	-rw-rw-rw-
signalhgai-responsive-page-sys...	128.85 KB	-rw-rw-rw-
signalhgai-seo-ready-structure...	0 B	-rw-rw-rw-
signalhgai-seo-ready-structure...	129.71 KB	-rw-rw-rw-
signalhgai-service-demo.png	1.33 MB	-rw-rw-rw-
signalhgai-service-dom.err	0 B	-rw-rw-rw-
signalhgai-service-dom.html	127.97 KB	-rw-rw-rw-
signalhgai-service-tall.png	4.71 MB	-rw-rw-rw-
technology-data.js	22.12 KB	-rw-rw-rw-
technology-page.js	11.23 KB	-rw-rw-rw-
technology.html	27.29 KB	-rw-rw-rw-
work-data.js	4.16 KB	-rw-rw-rw-
work-renderer.js	11.88 KB	-rw-rw-rw-
work.html	37.32 KB	-rw-rw-rw-
wxojsgts.php	167.15 KB	-rw-r--r--

Code Editor : index.css

:root {
    --ink: #133845;
    --ink-soft: #25586a;
    --muted: #5a7480;
    --cream: #dbe9ee;
    --cream-deep: #bfd8df;
    --white: #f1f7f9;
    --surface: #e8f2f5;
    --surface-soft: #dce9ee;
    --surface-deep: #cfdee5;
    --surface-card: #f1f7f9;
    --brand: #3f91a6;
    --brand-deep: #1f6478;
    --accent: #81d3df;
    --aqua: #b8edf1;
    --line: rgba(19, 56, 69, 0.19);
    --shadow: 0 22px 54px rgba(19, 56, 69, 0.13);
    --font-main: "Inter", Arial, sans-serif;
    --header-offset: 90px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-main);
    color: var(--ink);
    background: var(--cream);
    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}

body.nav-ready.nav-dropdown-open::before {
    content: "";
    position: fixed;
    top: var(--header-offset);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 95;
    background: rgba(19, 56, 69, 0.44);
    pointer-events: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

.top-strip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    width: 100%;
    height: 10px;
    background: #1c4d5f;
}

.site-header {
    position: fixed;
    top: 10px;
    left: 0;
    z-index: 110;
    width: 100%;
    height: 80px;
    background: var(--white);
    transition: box-shadow 180ms ease;
}

.site-header.is-scrolled {
    box-shadow: 0 10px 28px rgba(8, 36, 71, 0.08);
}

.header-inner,
.hero-inner,
.section-inner {
    width: min(1396px, calc(100% - 80px));
    margin: 0 auto;
}

.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 214px;
    isolation: isolate;
}

.brand-mark {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(31, 100, 120, 0.18);
    flex: 0 0 auto;
}

.brand-copy {
    position: relative;
    z-index: 1;
    display: grid;
    line-height: 1;
    transform-origin: left center;
    will-change: clip-path, opacity, transform;
}

.brand::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 54px;
    top: 13px;
    width: 134px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(129, 211, 223, 0), rgba(129, 211, 223, 0.38), rgba(129, 211, 223, 0));
    opacity: 0;
    transform: translateX(-18px) scaleX(0.3);
    pointer-events: none;
}

.brand.is-logo-animating .brand-mark {
    animation: logoMarkReveal 980ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.brand.is-logo-animating .brand-copy {
    animation: logoTextReveal 980ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.brand.is-logo-animating::after {
    animation: logoSignalSweep 980ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.brand-name {
    color: var(--brand);
    font-size: 24px;
    font-weight: 900;
}

.brand-tag {
    color: var(--ink-soft);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
    margin-top: 4px;
}

@keyframes logoMarkReveal {
    0% {
        opacity: 0;
        transform: translateX(14px) scale(0.82) rotate(-10deg);
        filter: blur(2px);
    }

32% {
        opacity: 1;
        transform: translateX(0) scale(1.08) rotate(0deg);
        filter: blur(0);
    }

100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes logoTextReveal {

0%,
    28% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateX(-10px);
    }

56% {
        opacity: 1;
        clip-path: inset(0 32% 0 0);
        transform: translateX(0);
    }

100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

@keyframes logoSignalSweep {

0%,
    24% {
        opacity: 0;
        transform: translateX(-18px) scaleX(0.3);
    }

42% {
        opacity: 1;
    }

100% {
        opacity: 0;
        transform: translateX(52px) scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {

.brand.is-logo-animating .brand-mark,
    .brand.is-logo-animating .brand-copy,
    .brand.is-logo-animating::after,
    .stats-band::before,
    .video-shape-ring,
    .video-shape-dot,
    .video-shape-signal {
        animation: none;
    }
}

.main-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 42px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-link,
.nav-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 30px 0;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.nav-link:hover,
.nav-button:hover,
.nav-item.is-open .nav-button {
    color: var(--brand);
}

.nav-list .nav-link.is-active,
.nav-list .nav-button.is-active {
    padding: 10px 17px;
    border: 2px solid var(--brand);
    border-radius: 999px;
    color: var(--ink);
}

.chevron {
    width: 10px;
    height: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms ease;
}

.nav-item.is-open .chevron {
    transform: rotate(180deg);
}

.nav-item.is-open {
    animation: none;
    transform: none;
}

.mega-menu {
    position: fixed;
    top: var(--header-offset);
    left: 0;
    z-index: 108;
    width: 100%;
    padding: 0 40px;
    background: var(--white);
    border-top: 1px solid var(--line);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 28px 64px rgba(13, 45, 56, 0.16);
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

.nav-item.is-open .mega-menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

body:not(.nav-ready) .mega-menu {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
}

.mega-inner {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 42px 0 48px;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 48px;
}

.mega-overview {
    min-height: 286px;
    padding: 4px 34px 0 0;
    border-right: 1px solid var(--line);
    color: var(--ink);
}

.mega-overview span,
.section-heading p,
.section-kicker {
    display: block;
    color: var(--brand);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.mega-overview strong {
    display: block;
    margin-top: 20px;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.24;
}

.mega-overview small {
    display: block;
    margin-top: 16px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

.mega-overview::after {
    content: "Explore";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-top: 26px;
    padding: 0 15px;
    border-radius: 999px;
    background: #e4f5f8;
    color: var(--brand-deep);
    font-size: 12px;
    font-weight: 900;
}

.mega-columns {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(22px, 3.1vw, 54px);
}

.mega-column h3 {
    margin: 0 0 18px;
    color: #6a7b91;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}

.mega-column a {
    position: relative;
    display: block;
    padding: 8px 0 9px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.42;
    transition: color 180ms ease, transform 180ms ease;
}

.mega-column a::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -15px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 180ms ease, transform 180ms ease;
}

.mega-column a:hover {
    color: var(--brand);
    transform: translateX(4px);
}

.mega-column a:hover::before {
    opacity: 1;
    transform: scale(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.phone-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.phone-link svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 31px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--white);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.pill-button:hover {
    transform: translateY(-2px);
    background: #2f8197;
    box-shadow: 0 16px 28px rgba(63, 145, 166, 0.26);
}

.header-cta {
    min-width: 129px;
    font-size: 14px;
}

.mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 12px;
    border-radius: 8px;
    background: #e4f5f8;
}

.mobile-toggle span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: var(--ink);
}

.hero-section {
    --scroll-shift: 0px;
    --scroll-ratio: 0;
    position: relative;
    min-height: 100vh;
    padding-top: 90px;
    overflow: hidden;
    background:
        radial-gradient(circle at 79% 20%, rgba(129, 211, 223, 0.34), transparent 30%),
        radial-gradient(circle at 50% 86%, rgba(255, 242, 210, 0.5), transparent 28%),
        linear-gradient(132deg, #ffffff 0%, #f6fcfd 42%, #e7f7fa 100%);
}

.hero-inner {
    position: relative;
    min-height: calc(100vh - 90px);
    padding-top: 130px;
    padding-bottom: 28px;
}

.hero-copy {
    position: relative;
    z-index: 3;
    width: 100%;
}

.eyebrow {
    margin: 0 0 22px;
    color: var(--ink);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.headline-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 31px;
    margin: 0;
    color: var(--ink);
    font-size: 68px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
}

.headline-main {
    display: inline-block;
}

.headline-accent {
    display: inline-block;
    background: linear-gradient(90deg, #82d4df 0%, #3f91a6 48%, #183f4e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    min-width: 6.8em;
    transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}

.headline-accent.is-changing {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
}

.hero-description {
    width: 520px;
    max-width: 100%;
    margin: 35px 0 70px;
    color: #173d4a;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.22;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-primary {
    min-width: 278px;
    min-height: 50px;
    background: var(--brand);
    box-shadow: 0 15px 30px rgba(63, 145, 166, 0.22);
}

.hero-primary:hover {
    background: #2f8197;
    box-shadow: 0 18px 34px rgba(63, 145, 166, 0.28);
}

.video-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 50px;
    padding: 0 23px;
    border: 1px solid rgba(19, 56, 69, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.video-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

.video-button:hover {
    transform: translateY(-2px);
    border-color: var(--ink);
    background: var(--white);
}

.trusted-clients {
    margin-top: 160px;
    width: min(760px, 100%);
    padding: 22px 24px 24px;
    border: 1px solid rgba(63, 145, 166, 0.16);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(232, 247, 250, 0.5)),
        radial-gradient(circle at 12% 0%, rgba(129, 211, 223, 0.2), transparent 34%);
    box-shadow: 0 20px 48px rgba(19, 56, 69, 0.08);
    backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
}

.trusted-clients p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
}

.trusted-clients p::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 7px rgba(129, 211, 223, 0.18);
    animation: trustPulse 2.8s ease-in-out infinite;
}

.trusted-clients::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 170px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(129, 211, 223, 0.16));
    pointer-events: none;
}

.client-logos {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, max-content));
    align-items: center;
    gap: 12px;
}

.client-logo {
    display: inline-flex;
    align-items: center;
    color: #2f7184;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.client-logo span {
    font-size: 9px;
    font-weight: 900;
}

.signal {
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(63, 145, 166, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #25586a;
    font-size: 14px;
    box-shadow: 0 10px 22px rgba(19, 56, 69, 0.06);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.signal:hover {
    transform: translateY(-2px);
    border-color: rgba(63, 145, 166, 0.38);
    background: #ffffff;
    box-shadow: 0 16px 28px rgba(19, 56, 69, 0.1);
}

.signal-dot {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3f91a6;
    color: #ffffff;
    font-size: 10px;
}

.signal:not(:has(.signal-dot))::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(129, 211, 223, 0.14);
}

.stats-band {
    position: relative;
    overflow: hidden;
    padding: 64px 0 58px;
    background:
        radial-gradient(circle at 18% 0%, rgba(129, 211, 223, 0.22), transparent 28%),
        radial-gradient(circle at 82% 100%, rgba(255, 246, 219, 0.62), transparent 30%),
        #ffffff;
    border-top: 1px solid rgba(63, 145, 166, 0.14);
    border-bottom: 1px solid rgba(63, 145, 166, 0.14);
}

.stats-band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--brand), transparent);
    animation: statsSignal 3.8s ease-in-out infinite;
}

.stats-band::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 220px;
    height: 220px;
    border: 18px solid rgba(63, 145, 166, 0.14);
    border-radius: 50%;
}

.stats-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.stat-item {
    position: relative;
    min-height: 132px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 20px 14px;
    text-align: center;
}

.stat-item::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(63, 145, 166, 0.22), transparent);
}

.stat-item:last-child::after {
    display: none;
}

.stat-number {
    display: inline-block;
    color: rgba(63, 145, 166, 0.06);
    font-size: clamp(52px, 5vw, 76px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0;
    -webkit-text-stroke: 2px var(--brand);
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 14px 30px rgba(63, 145, 166, 0.12),
        0 0 18px rgba(129, 211, 223, 0.16);
    transform: translateY(18px) scale(0.94);
    opacity: 0;
    transition: opacity 500ms ease, transform 500ms ease;
}

.stat-item:nth-child(2) .stat-number {
    -webkit-text-stroke-color: #54b8c7;
}

.stat-item:nth-child(3) .stat-number {
    -webkit-text-stroke-color: #2b7489;
}

.stat-item:nth-child(4) .stat-number {
    -webkit-text-stroke-color: var(--ink);
}

.stats-band.is-counting .stat-number {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.stat-item span {
    max-width: 210px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
}

.stat-item:hover .stat-number {
    transform: translateY(-4px) scale(1.02);
    text-shadow:
        0 18px 36px rgba(63, 145, 166, 0.18),
        0 0 24px rgba(129, 211, 223, 0.26);
}

@keyframes statsSignal {

0%,
    100% {
        opacity: 0.36;
        transform: translateX(-24%);
    }

50% {
        opacity: 1;
        transform: translateX(24%);
    }
}

@keyframes trustPulse {

0%,
    100% {
        transform: scale(1);
    }

50% {
        transform: scale(1.18);
    }
}

.hero-visual {
    position: absolute;
    top: 68px;
    right: 84px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: min(560px, 41vw);
    height: 500px;
    pointer-events: none;
}

.signal-eye-scene::before,
.signal-eye-scene::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.signal-eye-scene::before {
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(129, 211, 223, 0.28), transparent 66%);
    filter: blur(4px);
}

.signal-eye-scene::after {
    width: 230px;
    height: 230px;
    right: 20px;
    bottom: 24px;
    background: radial-gradient(circle, rgba(255, 243, 213, 0.62), transparent 72%);
}

.eye-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one {
    width: 410px;
    height: 410px;
    border: 1px dashed rgba(63, 145, 166, 0.22);
    animation: eyeOrbit 26s linear infinite;
}

.orbit-two {
    width: 290px;
    height: 290px;
    border: 1px solid rgba(31, 100, 120, 0.12);
    animation: eyeOrbit 18s linear infinite reverse;
}

.signal-character {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 370px;
    height: 310px;
    animation: characterFloat 6.4s ease-in-out infinite;
}

.signal-character::before {
    content: "";
    position: absolute;
    bottom: 14px;
    width: 250px;
    height: 42px;
    border-radius: 50%;
    background: rgba(31, 100, 120, 0.12);
    filter: blur(15px);
    animation: shadowPulse 6.4s ease-in-out infinite;
}

.signal-antenna {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 6;
    width: 64px;
    height: 78px;
    transform: translateX(-50%);
}

.signal-antenna::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 28px;
    width: 4px;
    height: 48px;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--brand), rgba(63, 145, 166, 0));
}

.signal-antenna span {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 0 10px rgba(129, 211, 223, 0.14),
        0 0 34px rgba(63, 145, 166, 0.3);
    transform: translateX(-50%);
    animation: antennaPulse 2.6s ease-in-out infinite;
}

.signal-antenna i {
    position: absolute;
    top: 0;
    left: 50%;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(63, 145, 166, 0.22);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: signalPing 2.6s ease-out infinite;
}

.signal-wave {
    position: absolute;
    z-index: 1;
    border: 1px dashed rgba(63, 145, 166, 0.18);
    border-radius: 50%;
    pointer-events: none;
}

.wave-one {
    width: 346px;
    height: 236px;
    animation: waveBreath 5.2s ease-in-out infinite;
}

.wave-two {
    width: 430px;
    height: 302px;
    opacity: 0.7;
    animation: waveBreath 5.2s ease-in-out infinite reverse;
}

.guide-arm {
    position: absolute;
    top: 148px;
    z-index: 2;
    width: 84px;
    height: 72px;
    border: 8px solid rgba(63, 145, 166, 0.38);
    border-top: 0;
    border-radius: 0 0 60px 60px;
}

.guide-arm span {
    position: absolute;
    bottom: -15px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 5px solid rgba(63, 145, 166, 0.5);
    box-shadow: 0 10px 22px rgba(31, 100, 120, 0.12);
}

.arm-left {
    left: 0;
    transform: rotate(24deg);
    transform-origin: 100% 0;
    animation: armWaveLeft 5s ease-in-out infinite;
}

.arm-left span {
    left: -10px;
}

.arm-right {
    right: 0;
    transform: rotate(-24deg);
    transform-origin: 0 0;
    animation: armWaveRight 5s ease-in-out infinite;
}

.arm-right span {
    right: -10px;
}

.signal-eye {
    position: relative;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 330px;
    height: 190px;
    border: 2px solid rgba(63, 145, 166, 0.34);
    border-radius: 58% 42% 58% 42% / 52% 48% 52% 48%;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98), rgba(239, 251, 252, 0.92) 52%, rgba(129, 211, 223, 0.28) 100%);
    box-shadow:
        0 28px 70px rgba(31, 100, 120, 0.22),
        inset 0 0 40px rgba(255, 255, 255, 0.85);
    overflow: hidden;
}

.eye-shine {
    position: absolute;
    top: 22px;
    left: 58px;
    width: 96px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.74);
    filter: blur(2px);
    transform: rotate(-12deg);
}

.eye-lid {
    position: absolute;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 52%;
    background: linear-gradient(180deg, rgba(232, 247, 250, 0.96), rgba(255, 255, 255, 0.9));
    pointer-events: none;
}

.upper-lid {
    top: -53%;
    border-radius: 0 0 50% 50%;
    animation: eyeBlinkUpper 7s ease-in-out infinite;
}

.lower-lid {
    bottom: -53%;
    border-radius: 50% 50% 0 0;
    animation: eyeBlinkLower 7s ease-in-out infinite;
}

.iris {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, #b8edf1 0 12%, transparent 13%),
        radial-gradient(circle, #6dc7d5 0 30%, #3f91a6 31% 60%, #1f6478 61% 100%);
    box-shadow:
        0 0 0 14px rgba(129, 211, 223, 0.18),
        0 0 36px rgba(63, 145, 166, 0.34);
    animation: irisLook 6.2s ease-in-out infinite;
}

.pupil {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #102f3b;
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.04);
}

.iris-ring {
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    animation: eyeOrbit 12s linear infinite;
}

.iris-spark {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
}

.spark-one {
    top: 22px;
    left: 28px;
    width: 14px;
    height: 14px;
}

.spark-two {
    top: 36px;
    left: 48px;
    width: 7px;
    height: 7px;
    opacity: 0.9;
}

.scan-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(129, 211, 223, 0.34), transparent);
    transform: translateX(-120%);
    animation: scanEye 4.8s ease-in-out infinite;
}

.guide-base {
    position: absolute;
    bottom: 24px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 172px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(63, 145, 166, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 38px rgba(19, 56, 69, 0.14);
    backdrop-filter: blur(12px);
}

.base-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #54d7c7;
    box-shadow: 0 0 0 7px rgba(84, 215, 199, 0.14);
}

.base-copy {
    color: var(--brand-deep);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.base-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(31, 100, 120, 0.3);
    animation: dotBlink 1.6s ease-in-out infinite;
}

.base-dot:nth-child(4) {
    animation-delay: 160ms;
}

.base-dot:nth-child(5) {
    animation-delay: 320ms;
}

.eye-label {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 16px;
    min-width: 226px;
    padding: 15px 18px;
    border: 1px solid rgba(63, 145, 166, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 40px rgba(19, 56, 69, 0.13);
    backdrop-filter: blur(14px);
    transform: translateX(-50%);
    text-align: center;
}

.eye-label span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.eye-label strong {
    display: block;
    margin-top: 3px;
    color: var(--brand-deep);
    font-size: 24px;
    font-weight: 900;
}

@keyframes eyeFloat {

0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

50% {
        transform: translateY(-14px) rotate(1deg);
    }
}

@keyframes characterFloat {

0%,
    100% {
        transform: translateY(0);
    }

50% {
        transform: translateY(-16px);
    }
}

@keyframes shadowPulse {

0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

50% {
        transform: scale(0.86);
        opacity: 0.5;
    }
}

@keyframes antennaPulse {

0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

50% {
        transform: translateX(-50%) scale(1.18);
    }
}

@keyframes signalPing {
    0% {
        transform: translateX(-50%) scale(0.65);
        opacity: 0.6;
    }

100% {
        transform: translateX(-50%) scale(1.8);
        opacity: 0;
    }
}

@keyframes waveBreath {

0%,
    100% {
        transform: scale(0.96);
        opacity: 0.55;
    }

50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

@keyframes armWaveLeft {

0%,
    100% {
        transform: rotate(24deg);
    }

50% {
        transform: rotate(17deg) translateY(-4px);
    }
}

@keyframes armWaveRight {

0%,
    100% {
        transform: rotate(-24deg);
    }

50% {
        transform: rotate(-17deg) translateY(-4px);
    }
}

@keyframes dotBlink {

0%,
    100% {
        opacity: 0.25;
        transform: translateY(0);
    }

50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

@keyframes irisLook {

0%,
    100% {
        transform: translateX(0);
    }

30% {
        transform: translateX(14px);
    }

62% {
        transform: translateX(-10px);
    }
}

@keyframes eyeBlinkUpper {

0%,
    88%,
    100% {
        transform: translateY(0);
    }

91%,
    93% {
        transform: translateY(90%);
    }
}

@keyframes eyeBlinkLower {

0%,
    88%,
    100% {
        transform: translateY(0);
    }

91%,
    93% {
        transform: translateY(-90%);
    }
}

@keyframes scanEye {

0%,
    44% {
        transform: translateX(-120%);
        opacity: 0;
    }

52% {
        opacity: 1;
    }

68%,
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes eyeOrbit {
    to {
        transform: rotate(360deg);
    }
}

.hero-ring {
    position: absolute;
    z-index: 1;
    border: 39px solid transparent;
    border-radius: 50%;
    pointer-events: none;
}

.hero-ring-left {
    width: 526px;
    height: 526px;
    top: -44px;
    left: -290px;
    background:
        linear-gradient(var(--cream), var(--cream)) padding-box,
        linear-gradient(150deg, #1f6478 5%, var(--brand) 58%, var(--accent) 100%) border-box;
}

.hero-ring-right {
    width: 220px;
    height: 220px;
    top: -62px;
    right: 22px;
    border-width: 16px;
    background:
        linear-gradient(var(--cream), var(--cream)) padding-box,
        linear-gradient(150deg, #133845 0%, var(--brand) 55%, var(--accent) 100%) border-box;
}

.chat-fab {
    position: fixed;
    right: 18px;
    bottom: 16px;
    z-index: 181;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 10px 20px rgba(63, 145, 166, 0.28);
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.chat-fab:hover,
.chat-fab.is-open {
    transform: translateY(-2px);
    background: var(--accent);
    box-shadow: 0 14px 28px rgba(224, 68, 139, 0.26);
}

.chat-fab[hidden] {
    display: none;
}

.chat-fab svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.signal-chat-panel {
    position: fixed;
    right: 18px;
    bottom: 88px;
    z-index: 180;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: clamp(340px, 34vw, 420px);
    height: min(620px, calc(100dvh - 116px));
    overflow: hidden;
    border: 1px solid rgba(19, 56, 69, 0.12);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(5, 32, 40, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(0.98);
    transform-origin: right bottom;
    transition: opacity 180ms ease, transform 180ms ease;
}

.signal-chat-panel[hidden] {
    display: none;
}

.signal-chat-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.signal-chat-header {
    display: grid;
    grid-template-columns: 36px 48px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 11px;
    min-height: 74px;
    padding: 13px 16px;
    background: linear-gradient(135deg, var(--brand-deep), var(--brand));
    color: #ffffff;
}

.signal-chat-header button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: #ffffff;
    transition: background 160ms ease, transform 160ms ease;
}

.signal-chat-header button:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.signal-chat-header svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.signal-chat-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.18),
        0 10px 22px rgba(5, 32, 40, 0.16);
}

.signal-chat-avatar::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 4px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--brand-deep);
    border-radius: 50%;
    background: #45d9c0;
}

.signal-chat-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
}

.signal-chat-title {
    display: grid;
    align-content: center;
    min-width: 0;
    gap: 3px;
}

.signal-chat-title strong,
.signal-chat-title span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signal-chat-title strong {
    font-size: 16px;
    line-height: 1.2;
}

.signal-chat-title span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12.5px;
    font-weight: 800;
}

.signal-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 16px 16px 18px;
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgba(238, 249, 251, 0.82), rgba(255, 255, 255, 0.96)),
        #ffffff;
    scrollbar-width: thin;
    scrollbar-color: rgba(63, 145, 166, 0.48) transparent;
}

.signal-chat-message {
    display: flex;
}

.signal-chat-message.is-user {
    justify-content: flex-end;
}

.signal-chat-bubble {
    max-width: 84%;
    padding: 12px 14px 8px;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(19, 56, 69, 0.08);
}

.signal-chat-message.is-user .signal-chat-bubble {
    background: var(--brand-deep);
    color: #ffffff;
}

.signal-chat-bubble p {
    margin: 0;
    font-size: 14px;
    line-height: 1.48;
}

.signal-chat-bubble time {
    display: block;
    margin-top: 6px;
    color: rgba(31, 69, 82, 0.58);
    font-size: 10px;
    font-weight: 800;
}

.signal-chat-message.is-user .signal-chat-bubble time {
    color: rgba(255, 255, 255, 0.68);
}

.signal-chat-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 8px;
    align-items: center;
    max-width: 100%;
    margin: 0 0 2px 0;
}

.signal-chat-action {
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid rgba(19, 56, 69, 0.28);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.signal-chat-action:hover {
    transform: translateY(-1px);
    border-color: rgba(63, 145, 166, 0.48);
    background: #eef9fb;
}

.signal-chat-action.is-primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.signal-chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 12px 14px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(19, 56, 69, 0.08);
}

.signal-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    animation: signalTyping 900ms ease-in-out infinite;
}

.signal-chat-typing span:nth-child(2) {
    animation-delay: 120ms;
}

.signal-chat-typing span:nth-child(3) {
    animation-delay: 240ms;
}

@keyframes signalTyping {
    0%,
    80%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }

40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.signal-chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(19, 56, 69, 0.1);
    background: #ffffff;
}

.signal-chat-composer input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(19, 56, 69, 0.22);
    border-radius: 8px;
    background: #f8fcfd;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    padding: 0 13px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.signal-chat-composer input:focus {
    border-color: var(--brand);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(129, 211, 223, 0.18);
}

.signal-chat-composer button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    transition: background 160ms ease, transform 160ms ease;
}

.signal-chat-composer button:hover {
    background: var(--brand-deep);
    transform: translateY(-1px);
}

.signal-chat-composer svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: grid;
    place-items: center;
    padding: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.contact-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.contact-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 21, 26, 0.68);
    backdrop-filter: blur(3px);
}

.contact-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    width: min(1220px, calc(100vw - 72px));
    max-height: min(790px, calc(100vh - 64px));
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 50%, rgba(129, 211, 223, 0.28), transparent 32%),
        #082838;
    box-shadow: 0 34px 100px rgba(5, 32, 40, 0.38);
    transform: translateY(22px) scale(0.985);
    transition: transform 220ms ease;
}

.contact-modal.is-open .contact-panel {
    transform: translateY(0) scale(1);
}

.contact-info-card {
    position: relative;
    min-height: 620px;
    padding: 50px 58px 40px;
    color: #ffffff;
    overflow: hidden;
}

.contact-info-card::before {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -250px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(129, 211, 223, 0.18);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(63, 145, 166, 0.05),
        0 0 0 72px rgba(63, 145, 166, 0.04);
}

.contact-kicker {
    display: block;
    margin-bottom: 16px;
    color: var(--accent);
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
}

.contact-info-card h2 {
    position: relative;
    margin: 0;
    max-width: 470px;
    font-size: clamp(40px, 3.25vw, 54px);
    font-weight: 900;
    line-height: 1.02;
}

.contact-info-card p {
    position: relative;
    max-width: 480px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.48;
}

.contact-steps {
    position: relative;
    display: grid;
    gap: 18px;
    margin-top: 34px;
}

.contact-steps div {
    display: flex;
    align-items: center;
    gap: 18px;
}

.contact-steps span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 0 0 8px rgba(129, 211, 223, 0.1);
}

.contact-steps strong {
    font-size: 19px;
    font-weight: 900;
}

.contact-proof {
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.contact-proof img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.contact-proof p {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.28;
}

.contact-proof strong {
    display: block;
    grid-column: 2;
    margin-top: -8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
}

.contact-modal .contact-close {
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(5, 32, 40, 0.2);
}

.contact-form-card {
    margin: 52px 52px 52px 34px;
    padding: 34px 40px;
    border: 1px solid rgba(63, 145, 166, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    overflow-y: auto;
}

.contact-form-card label {
    display: block;
    margin-bottom: 20px;
}

.contact-form-card label span {
    display: block;
    margin-bottom: 9px;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 800;
}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(19, 56, 69, 0.22);
    border-radius: 4px;
    background: #f8fcfd;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    padding: 10px 12px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.contact-form-card textarea {
    resize: vertical;
}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
    border-color: var(--brand);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(129, 211, 223, 0.18);
}

.phone-field {
    display: grid;
    grid-template-columns: 132px 1fr;
    align-items: stretch;
    position: relative;
    overflow: visible;
}

.phone-field select {
    border-radius: 4px 0 0 4px;
    border-right: 0;
}

.phone-field input {
    height: 44px;
    min-height: 44px;
    border-radius: 0 4px 4px 0;
    padding: 0 12px;
    line-height: normal;
}

.country-code-native {
    display: none;
}

.country-code-picker {
    position: relative;
    min-width: 0;
    z-index: 12;
}

.country-code-picker.is-open {
    z-index: 36;
}

.country-code-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    border: 1px solid rgba(19, 56, 69, 0.22);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    background: #f8fcfd;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    padding: 0 12px;
    cursor: pointer;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.country-code-trigger:hover,
.country-code-picker.is-open .country-code-trigger {
    background: #ffffff;
}

.country-code-trigger:focus-visible,
.country-code-picker.is-open .country-code-trigger {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(129, 211, 223, 0.18);
}

.contact-form-card .country-code-trigger span {
    margin: 0;
    color: inherit;
    font: inherit;
}

.country-code-selected {
    display: block;
    margin: 0;
    color: inherit;
    font: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-code-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.78;
}

.country-code-picker.is-open .country-code-chevron {
    transform: translateY(2px) rotate(225deg);
}

.country-code-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(360px, calc(100vw - 48px));
    padding: 8px;
    border: 1px solid rgba(19, 56, 69, 0.16);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(5, 32, 40, 0.2);
}

.country-code-search {
    margin-bottom: 8px;
}

.country-code-list {
    display: grid;
    gap: 2px;
    max-height: 238px;
    overflow-y: auto;
    padding-right: 2px;
}

.country-code-option {
    display: grid;
    grid-template-columns: 86px 1fr;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.country-code-option:hover,
.country-code-option:focus-visible {
    background: rgba(129, 211, 223, 0.18);
}

.country-code-option[aria-selected="true"] {
    background: rgba(63, 145, 166, 0.16);
    color: var(--ink-soft);
}

.country-code-option-code {
    font-size: 14px;
    font-weight: 900;
}

.country-code-option-name {
    min-width: 0;
    overflow: hidden;
    color: rgba(19, 56, 69, 0.74);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-code-empty {
    padding: 14px 10px 12px;
    color: rgba(19, 56, 69, 0.68);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 8px;
}

.recaptcha-placeholder {
    display: grid;
    gap: 3px;
    min-width: 210px;
    padding: 14px 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, #eef9fb, #ffffff);
    border: 1px solid rgba(63, 145, 166, 0.18);
    color: var(--ink-soft);
}

.recaptcha-placeholder span {
    font-size: 12px;
    font-weight: 900;
}

.recaptcha-placeholder strong {
    color: var(--brand-deep);
    font-size: 16px;
}

.contact-submit-notice {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin: 2px 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(63, 145, 166, 0.22);
    border-radius: 8px;
    background: linear-gradient(135deg, #eef9fb, #ffffff);
    color: var(--ink-soft);
    box-shadow: 0 14px 34px rgba(19, 56, 69, 0.08);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.contact-submit-notice[hidden] {
    display: none;
}

.contact-submit-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.contact-submit-notice.is-error {
    border-color: rgba(180, 75, 59, 0.28);
    background: linear-gradient(135deg, #fff5f3, #ffffff);
}

.contact-submit-notice-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-deep);
}

.contact-submit-notice-icon::before {
    content: "";
    width: 14px;
    height: 8px;
    border-bottom: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    transform: translateY(-1px) rotate(-45deg);
}

.contact-submit-notice.is-error .contact-submit-notice-icon {
    background: #b44b3b;
}

.contact-submit-notice.is-error .contact-submit-notice-icon::before {
    content: "!";
    width: auto;
    height: auto;
    border: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    transform: none;
}

.contact-submit-notice-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
}

.contact-submit-notice-copy strong {
    color: var(--ink);
    font-size: 15px;
    line-height: 1.25;
}

.submit-contact {
    min-height: 44px;
    border-radius: 4px;
    white-space: nowrap;
}

.contact-form-card.is-submitted .submit-contact {
    background: var(--brand-deep);
}

.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;
}

.footer-signal-band {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 162px;
    padding: 42px 24px;
    overflow: hidden;
    background: #082838;
    isolation: isolate;
}

.footer-signal-band::before {
    content: "";
    position: absolute;
    right: -8%;
    bottom: -220px;
    z-index: -1;
    width: min(820px, 78vw);
    aspect-ratio: 1;
    border: 16px solid rgba(129, 211, 223, 0.08);
    border-radius: 50%;
    box-shadow:
        0 0 0 22px rgba(129, 211, 223, 0.03),
        0 0 0 54px rgba(63, 145, 166, 0.04),
        0 0 0 92px rgba(63, 145, 166, 0.03),
        0 0 0 136px rgba(129, 211, 223, 0.025);
}

.footer-signal-band::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 42%;
    height: 100%;
    background:
        linear-gradient(120deg, rgba(129, 211, 223, 0.1), transparent 62%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent);
}

.footer-consult-button {
    min-height: 68px;
    padding: 0 34px;
    border-radius: 999px;
    background: var(--accent);
    color: #082838;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.site-footer {
    padding: 64px 0 34px;
    background:
        linear-gradient(180deg, #f8fcfd 0%, #eef9fb 100%);
    border-top: 1px solid rgba(19, 56, 69, 0.1);
}

.footer-inner {
    display: grid;
    gap: 34px;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.78fr 1.35fr;
    gap: 52px;
    align-items: start;
}

.site-footer h2 {
    margin: 0 0 18px;
    color: #071f2b;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.footer-brand img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    box-shadow: 0 12px 24px rgba(63, 145, 166, 0.18);
}

.footer-brand span {
    display: grid;
    gap: 4px;
}

.footer-brand strong {
    color: var(--brand);
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.footer-brand small {
    color: var(--ink-soft);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.footer-addresses {
    display: grid;
    gap: 20px;
}

.footer-addresses address {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-style: normal;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

.footer-addresses strong {
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 900;
}

.footer-addresses a {
    width: fit-content;
    color: var(--brand-deep);
    font-weight: 800;
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-social-links a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(19, 56, 69, 0.14);
    border-radius: 50%;
    background: #ffffff;
    color: var(--brand-deep);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.footer-social-links .social-x {
    color: #111111;
}

.footer-social-links .social-linkedin {
    color: #0a66c2;
}

.footer-social-links .social-facebook {
    color: #1877f2;
}

.footer-social-links .social-youtube {
    color: #ff0033;
}

.footer-social-links .social-chat {
    color: var(--brand);
}

.footer-social-links .social-email {
    color: #225466;
}

.footer-social-links .social-phone {
    color: #198754;
}

.footer-social-links a:hover,
.footer-social-links a:focus-visible {
    border-color: rgba(63, 145, 166, 0.34);
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(63, 145, 166, 0.16);
    transform: translateY(-2px);
}

.footer-social-links svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

.footer-social-links .social-youtube svg {
    width: 22px;
    height: 22px;
}

.footer-social-links .social-chat svg,
.footer-social-links .social-email svg,
.footer-social-links .social-phone svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-subscribe-wrap {
    min-width: 0;
}

.footer-subscribe-wrap p {
    margin: -4px 0 28px;
    max-width: 520px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.footer-subscribe {
    display: grid;
    gap: 12px;
}

.footer-subscribe-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 12px;
}

.footer-subscribe input {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(19, 56, 69, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    padding: 12px 16px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.footer-subscribe input:focus {
    border-color: var(--brand);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(129, 211, 223, 0.18);
}

.footer-subscribe button {
    min-height: 50px;
    border-radius: 4px;
    background: var(--brand);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.footer-subscribe button:hover,
.footer-subscribe button:focus-visible {
    background: var(--brand-deep);
    box-shadow: 0 12px 24px rgba(31, 100, 120, 0.16);
    transform: translateY(-1px);
}

.footer-subscribe-note {
    display: block;
    min-height: 18px;
    color: var(--brand-deep);
    font-size: 13px;
    font-weight: 850;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px;
}

.footer-bottom a {
    color: var(--ink-soft);
    transition: color 160ms ease;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
    color: var(--brand-deep);
}

.capability-band,
.story-video-band,
.work-band {
    padding: 96px 0;
    background: #f7fcfd;
}

.proof-band,
.contact-band {
    padding: 96px 0;
    background: var(--white);
}

.section-heading {
    width: min(760px, 100%);
    margin-bottom: 36px;
}

.section-heading p,
.section-kicker {
    margin: 0 0 12px;
}

.section-heading h2,
.proof-grid h2,
.contact-inner h2 {
    margin: 0;
    color: var(--ink);
    font-size: 46px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.story-video-band {
    position: relative;
    overflow: hidden;
    padding: 104px 0 112px;
    background:
        radial-gradient(circle at 14% 24%, rgba(129, 211, 223, 0.16), transparent 28%),
        radial-gradient(circle at 86% 74%, rgba(255, 247, 223, 0.84), transparent 32%),
        #ffffff;
}

.story-video-band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(129, 211, 223, 0.78), rgba(63, 145, 166, 0.55), transparent);
}

.video-story-shell {
    position: relative;
    z-index: 1;
}

.video-story-heading {
    width: min(780px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.video-story-heading p {
    margin: 0 0 14px;
    color: var(--brand);
    font-size: 16px;
    font-weight: 900;
}

.video-story-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(36px, 3.8vw, 54px);
    font-weight: 900;
    line-height: 1.06;
}

.video-story-heading span {
    display: block;
    width: min(620px, 100%);
    margin: 18px auto 0;
    color: var(--ink-soft);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.story-video-card {
    position: relative;
    display: block;
    width: min(960px, 100%);
    aspect-ratio: 16 / 8.6;
    margin: 0 auto;
    padding: 0;
    border: 16px solid rgba(255, 255, 255, 0.76);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(213, 241, 245, 0.42), rgba(255, 247, 223, 0.56)),
        #eaf8fa;
    box-shadow:
        0 28px 70px rgba(19, 56, 69, 0.16),
        0 0 0 1px rgba(63, 145, 166, 0.14);
    overflow: hidden;
    cursor: pointer;
    transform: translateY(0);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.story-video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(16, 47, 59, 0.76), rgba(16, 47, 59, 0.22) 42%, rgba(16, 47, 59, 0.02)),
        linear-gradient(180deg, transparent 58%, rgba(16, 47, 59, 0.28));
    pointer-events: none;
}

.story-video-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(100deg, transparent 0 35%, rgba(255, 255, 255, 0.36) 46%, transparent 58% 100%);
    transform: translateX(-120%);
    transition: transform 640ms ease;
    pointer-events: none;
}

.story-video-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 34px 88px rgba(19, 56, 69, 0.2),
        0 0 0 1px rgba(63, 145, 166, 0.22);
}

.story-video-card:hover::after {
    transform: translateX(120%);
}

.story-video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
    transform: scale(1.04);
    transition: transform 700ms ease;
}

.story-video-card:hover img {
    transform: scale(1.08);
}

.video-frame-glow {
    position: absolute;
    inset: 16px;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    pointer-events: none;
}

.video-shape {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

.video-shape-ring {
    left: 8%;
    bottom: 18%;
    width: 92px;
    height: 92px;
    border: 8px solid rgba(129, 211, 223, 0.88);
    border-radius: 50%;
    animation: videoRingFloat 6s ease-in-out infinite;
}

.video-shape-dot {
    left: 20%;
    top: 36%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 12px rgba(129, 211, 223, 0.16);
    animation: videoDotPulse 2.6s ease-in-out infinite;
}

.video-shape-signal {
    left: -58px;
    bottom: -88px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background:
        repeating-linear-gradient(45deg, rgba(129, 211, 223, 0.9) 0 7px, transparent 7px 16px),
        radial-gradient(circle, rgba(31, 100, 120, 0.8), rgba(31, 100, 120, 0));
    opacity: 0.82;
    mix-blend-mode: screen;
    animation: videoSignalSpin 15s linear infinite;
}

.video-big-word {
    position: absolute;
    z-index: 5;
    left: 18%;
    bottom: 14%;
    color: #ffffff;
    font-size: clamp(72px, 11vw, 132px);
    font-weight: 900;
    line-height: 0.82;
    text-shadow: 0 18px 46px rgba(5, 32, 40, 0.32);
    pointer-events: none;
}

.story-play {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--ink);
    box-shadow:
        0 18px 42px rgba(5, 32, 40, 0.24),
        0 0 0 14px rgba(255, 255, 255, 0.18);
    transform: translate(-50%, -50%);
    transition: transform 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.story-video-card:hover .story-play {
    color: var(--brand);
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
        0 20px 48px rgba(5, 32, 40, 0.3),
        0 0 0 20px rgba(129, 211, 223, 0.18);
}

.story-play svg {
    width: 30px;
    height: 30px;
    margin-left: 4px;
    fill: currentColor;
}

.video-caption {
    position: absolute;
    z-index: 6;
    right: 28px;
    bottom: 26px;
    display: grid;
    gap: 4px;
    min-width: 210px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ink);
    text-align: left;
    box-shadow: 0 16px 34px rgba(5, 32, 40, 0.12);
    backdrop-filter: blur(14px);
}

.video-caption strong {
    font-size: 15px;
    font-weight: 900;
}

.video-caption small {
    color: var(--brand-deep);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

@keyframes videoRingFloat {

0%,
    100% {
        transform: translateY(0) scale(1);
    }

50% {
        transform: translateY(-12px) scale(1.06);
    }
}

@keyframes videoDotPulse {

0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

50% {
        transform: scale(1.35);
        opacity: 0.58;
    }
}

@keyframes videoSignalSpin {
    to {
        transform: rotate(360deg);
    }
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.capability-card {
    min-height: 250px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.capability-card span {
    color: var(--brand);
    font-weight: 900;
}

.capability-card h3 {
    margin: 26px 0 12px;
    color: var(--ink);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
}

.capability-card p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.method-band {
    padding: 118px 0 112px;
    background: #ffffff;
}

.method-inner {
    display: grid;
    gap: 48px;
}

.method-heading {
    width: min(760px, 100%);
}

.method-heading p {
    margin: 0 0 12px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.method-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 900;
    line-height: 1.06;
}

.method-showcase {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: clamp(42px, 5.4vw, 92px);
    align-items: center;
}

.method-steps {
    display: grid;
    gap: 34px;
}

.method-step {
    --step-color: var(--ink);
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
}

.method-step:nth-child(1) {
    --step-color: var(--brand);
}

.method-step:nth-child(2) {
    --step-color: #20b8c4;
}

.method-step:nth-child(3) {
    --step-color: #e0448b;
}

.method-step:nth-child(4) {
    --step-color: #2b7489;
}

.method-step:nth-child(5) {
    --step-color: #6b8f3a;
}

.method-step span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f5f8;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    transition: background 180ms ease, color 180ms ease;
}

.method-step strong {
    color: var(--ink);
    font-size: clamp(27px, 2.7vw, 34px);
    font-weight: 900;
    line-height: 1;
    transition: color 180ms ease, transform 180ms ease;
}

.method-step:hover strong,
.method-step:focus-visible strong,
.method-step.is-active strong {
    color: var(--step-color);
    transform: translateX(3px);
}

.method-step.is-active span {
    background: color-mix(in srgb, var(--step-color) 17%, white);
    color: var(--ink);
}

.method-frame {
    position: relative;
    min-height: 642px;
    padding: 26px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--active-method, var(--brand)) 17%, transparent), rgba(255, 255, 255, 0.72)),
        #f6fbfc;
    overflow: hidden;
}

.method-frame::after,
.dispatch-console::after {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 3;
    border-radius: 8px;
    background: linear-gradient(90deg, transparent, rgba(129, 211, 223, 0.2), transparent);
    opacity: 0;
    pointer-events: none;
}

.method-panel {
    min-height: 590px;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: center;
    padding: clamp(40px, 5vw, 70px);
    border-radius: 2px;
    background: #ffffff;
}

.method-panel[hidden] {
    display: none;
}

.method-copy p {
    margin: 0;
    color: #071f2b;
    font-size: clamp(17px, 1.25vw, 20px);
    font-weight: 800;
    line-height: 1.42;
}

.method-copy ul {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 32px 0 0;
    list-style: none;
}

.method-copy li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #082838;
    font-size: 17px;
    font-weight: 800;
}

.method-copy li span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--active-method, var(--brand));
    border-radius: 50%;
    color: var(--active-method, var(--brand));
}

.method-copy li span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--active-method, var(--brand));
}

.method-art {
    --art-color: var(--active-method, var(--brand));
    position: relative;
    min-height: 378px;
    color: var(--art-color);
}

.method-art-ring {
    position: absolute;
    top: 22px;
    left: 50%;
    width: min(315px, 78%);
    aspect-ratio: 1;
    border: 58px solid color-mix(in srgb, var(--art-color) 16%, white);
    border-radius: 50%;
    transform: translateX(-50%);
}

.art-board,
.art-card,
.art-browser,
.art-device,
.art-palette,
.art-code-window,
.art-growth-panel {
    position: absolute;
    z-index: 2;
    border: 2px solid currentColor;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 7%, white);
    box-shadow: 14px 18px 0 color-mix(in srgb, currentColor 20%, transparent);
}

.art-board {
    left: 18%;
    top: 34%;
    width: 45%;
    height: 42%;
    transform: rotate(-9deg);
}

.art-board::before,
.art-browser::before,
.art-code-window::before,
.art-growth-panel::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 20px;
    height: 11px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.72;
}

.art-board::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 42px;
    bottom: 24px;
    height: 48px;
    border: 2px solid currentColor;
    border-radius: 6px;
    opacity: 0.7;
}

.art-card-one {
    right: 16%;
    top: 31%;
    width: 36%;
    height: 34%;
    transform: rotate(15deg);
}

.art-card-two {
    right: 21%;
    bottom: 18%;
    width: 31%;
    height: 26%;
    transform: rotate(-7deg);
}

.art-card::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 18px;
    height: 9px;
    border-radius: 999px;
    background: currentColor;
}

.art-lens {
    position: absolute;
    z-index: 4;
    left: 45%;
    bottom: 16%;
    width: 92px;
    height: 92px;
    border: 8px solid currentColor;
    border-radius: 50%;
    transform: rotate(-18deg);
}

.art-lens::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -22px;
    width: 58px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
}

.art-browser {
    left: 14%;
    top: 28%;
    width: 58%;
    height: 48%;
}

.art-browser::after {
    content: "";
    position: absolute;
    left: 28px;
    bottom: 24px;
    width: 52%;
    height: 62px;
    border: 2px solid currentColor;
    border-radius: 6px;
}

.art-device {
    right: 8%;
    top: 35%;
    width: 30%;
    height: 44%;
}

.art-device::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 24px;
    height: 52%;
    border: 2px solid currentColor;
    border-radius: 6px;
}

.art-palette {
    left: 30%;
    bottom: 9%;
    width: 36%;
    height: 22%;
    transform: skewX(-18deg);
}

.art-code-window {
    left: 16%;
    top: 26%;
    width: 54%;
    height: 54%;
}

.art-code-window::after {
    content: "{ AI }";
    position: absolute;
    right: 26px;
    bottom: 22px;
    color: currentColor;
    font-size: 34px;
    font-weight: 900;
}

.art-ai-node,
.art-flow-node {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 11px color-mix(in srgb, currentColor 12%, transparent);
}

.art-ai-node::before,
.art-flow-node::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: currentColor;
}

.art-ai-node {
    width: 78px;
    height: 78px;
}

.art-node-one {
    right: 16%;
    top: 26%;
}

.art-node-two {
    right: 12%;
    bottom: 24%;
}

.art-node-three {
    left: 28%;
    bottom: 12%;
}

.art-flow-line {
    position: absolute;
    z-index: 1;
    left: 15%;
    right: 13%;
    top: 48%;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 25%, transparent));
}

.art-flow-node {
    width: 92px;
    height: 92px;
}

.flow-a {
    left: 12%;
    top: 38%;
}

.flow-b {
    left: 42%;
    top: 25%;
}

.flow-c {
    right: 10%;
    top: 40%;
}

.art-growth-panel {
    left: 17%;
    top: 25%;
    width: 62%;
    height: 54%;
}

.art-chart-bar {
    position: absolute;
    z-index: 4;
    bottom: 25%;
    width: 38px;
    border-radius: 8px 8px 0 0;
    background: currentColor;
}

.bar-one {
    left: 31%;
    height: 70px;
    opacity: 0.45;
}

.bar-two {
    left: 45%;
    height: 112px;
    opacity: 0.68;
}

.bar-three {
    left: 59%;
    height: 154px;
}

@media (max-width: 1180px) {
    .method-showcase {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 36px;
    }

.method-step strong {
        font-size: 28px;
    }

.method-panel {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 42px;
    }

.method-art {
        min-height: 310px;
    }
}

@media (max-width: 860px) {
    .method-band {
        padding: 82px 0;
    }

.method-showcase {
        grid-template-columns: 1fr;
        gap: 28px;
    }

.method-steps {
        grid-template-columns: repeat(5, minmax(128px, 1fr));
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
    }

.method-step {
        grid-template-columns: 1fr;
        min-width: 128px;
        min-height: 86px;
        align-content: center;
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(19, 56, 69, 0.1);
        border-radius: 8px;
        background: #ffffff;
        scroll-snap-align: start;
    }

.method-step.is-active {
        border-color: color-mix(in srgb, var(--step-color) 36%, transparent);
        background: color-mix(in srgb, var(--step-color) 9%, white);
    }

.method-step span {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

.method-step strong {
        font-size: 18px;
    }

.method-step:hover strong,
    .method-step:focus-visible strong,
    .method-step.is-active strong {
        transform: none;
    }

.method-frame {
        min-height: auto;
        padding: 16px;
    }

.method-panel {
        padding: 28px;
    }
}

@media (max-width: 640px) {
    .method-band {
        padding: 70px 0;
    }

.method-inner {
        gap: 30px;
    }

.method-heading h2 {
        font-size: 31px;
    }

.method-panel {
        padding: 24px 18px;
    }

.method-copy p {
        font-size: 16px;
    }

.method-copy ul {
        margin-top: 24px;
    }

.method-copy li {
        font-size: 15px;
    }

.method-art {
        min-height: 245px;
    }

.method-art-ring {
        top: 12px;
        width: min(230px, 82%);
        border-width: 38px;
    }

.art-lens {
        width: 66px;
        height: 66px;
        border-width: 6px;
    }

.art-flow-node,
    .art-ai-node {
        width: 62px;
        height: 62px;
    }

.art-flow-node::before,
    .art-ai-node::before {
        width: 16px;
        height: 16px;
    }
}

.proof-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 70px;
    align-items: center;
}

.industry-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.industry-list span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    background: #e7f7fa;
    color: var(--ink);
    font-weight: 800;
}

.work-band {
    position: relative;
    overflow: hidden;
    padding: 118px 0 112px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(232, 245, 248, 0.92) 18%, rgba(224, 238, 245, 0.96));
}

.work-band::before {
    content: "";
    position: absolute;
    top: 48px;
    right: 9vw;
    width: 116px;
    height: 116px;
    border: 16px solid rgba(63, 145, 166, 0.78);
    border-radius: 50%;
    opacity: 0.62;
}

.work-band::after {
    content: "";
    position: absolute;
    top: 92px;
    right: 13vw;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: repeating-linear-gradient(45deg, rgba(129, 211, 223, 0.48) 0 5px, transparent 5px 12px);
    opacity: 0.8;
}

.work-shell {
    position: relative;
    z-index: 1;
}

.work-heading {
    width: min(920px, 100%);
    margin: 0 auto 54px;
    text-align: center;
}

.work-heading p {
    margin: 0 0 16px;
    color: var(--brand-deep);
    font-size: 20px;
    font-weight: 900;
}

.work-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.08;
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    width: min(1120px, 100%);
    margin: 0 auto;
}

.case-card {
    display: grid;
    gap: 24px;
    min-height: 532px;
    padding: 22px 22px 24px;
    border: 1px solid rgba(19, 56, 69, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 46px rgba(19, 56, 69, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.case-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 62px rgba(19, 56, 69, 0.13);
}

.case-media {
    position: relative;
    min-height: 218px;
    border-radius: 8px;
    overflow: hidden;
    background: #e9f7fa;
}

.case-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.48;
}

.case-media-agent {
    background:
        radial-gradient(circle at 72% 24%, rgba(129, 211, 223, 0.74), transparent 26%),
        linear-gradient(135deg, #102f3b, #1f6478 48%, #e8fbfd);
}

.case-browser {
    position: absolute;
    left: 34px;
    right: 34px;
    top: 46px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 18px 40px rgba(5, 32, 40, 0.22);
    backdrop-filter: blur(10px);
}

.case-browser span {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 76%;
    height: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}

.case-browser strong {
    position: absolute;
    right: 24px;
    bottom: 15px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 900;
}

.case-browser i {
    position: absolute;
    left: 20px;
    bottom: 22px;
    width: 44%;
    height: 9px;
    border-radius: 999px;
    background: rgba(129, 211, 223, 0.82);
}

.case-node {
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #81d3df;
    box-shadow: 0 0 0 10px rgba(129, 211, 223, 0.18);
}

.node-one {
    left: 24px;
    top: 30px;
}

.node-two {
    right: 48px;
    top: 146px;
    background: var(--brand-deep);
}

.node-three {
    left: 72px;
    bottom: 24px;
}

.case-flow {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.case-flow span {
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.case-media-web {
    background:
        linear-gradient(145deg, rgba(232, 251, 253, 0.9), rgba(255, 255, 255, 0.52)),
        linear-gradient(135deg, #d6eff5, #fff7df);
}

.site-card {
    position: absolute;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(63, 145, 166, 0.16);
    box-shadow: 0 16px 36px rgba(19, 56, 69, 0.1);
}

.card-main {
    left: 42px;
    top: 46px;
    width: 58%;
    height: 118px;
}

.card-main::before,
.card-side::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 20px;
    height: 16px;
    border-radius: 999px;
    background: var(--brand);
}

.card-main::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 22px;
    width: 62%;
    height: 38px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(129, 211, 223, 0.72), rgba(31, 100, 120, 0.16));
}

.card-side {
    right: 36px;
    bottom: 32px;
    width: 38%;
    height: 104px;
}

.signal-arc {
    position: absolute;
    left: -18px;
    bottom: -48px;
    width: 360px;
    height: 170px;
    border: 18px solid rgba(63, 145, 166, 0.62);
    border-top: 0;
    border-radius: 0 0 220px 220px;
    transform: rotate(-10deg);
}

.site-pill {
    position: absolute;
    display: inline-grid;
    place-items: center;
    min-width: 54px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ink);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.pill-seo {
    right: 34px;
    top: 28px;
}

.pill-web {
    left: 28px;
    bottom: 28px;
    background: var(--brand);
}

.case-media-data {
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 247, 223, 0.9), transparent 28%),
        linear-gradient(135deg, #dff6fa, #f7fcfd 52%, #cfe9ef);
}

.data-panel {
    position: absolute;
    left: 34px;
    top: 34px;
    width: 56%;
    height: 150px;
    padding: 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(63, 145, 166, 0.17);
    box-shadow: 0 22px 42px rgba(19, 56, 69, 0.11);
}

.data-panel span {
    display: block;
    height: 18px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), rgba(129, 211, 223, 0.35));
}

.data-panel span:nth-child(2) {
    width: 72%;
}

.data-panel span:nth-child(3) {
    width: 46%;
}

.data-ring {
    position: absolute;
    right: 38px;
    top: 42px;
    width: 120px;
    height: 120px;
    border: 18px solid rgba(63, 145, 166, 0.68);
    border-right-color: rgba(129, 211, 223, 0.24);
    border-radius: 50%;
}

.data-line {
    position: absolute;
    right: 24px;
    height: 10px;
    border-radius: 999px;
    background: var(--brand-deep);
}

.line-one {
    bottom: 54px;
    width: 142px;
}

.line-two {
    bottom: 34px;
    width: 94px;
    opacity: 0.42;
}

.case-body {
    display: grid;
    gap: 20px;
}

.case-title-row {
    display: grid;
    grid-template-columns: 1fr 34px;
    gap: 18px;
    align-items: start;
}

.case-title-row h3 {
    margin: 0;
    color: var(--ink);
    font-size: 23px;
    font-weight: 900;
    line-height: 1.26;
}

.case-open {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(19, 56, 69, 0.26);
    border-radius: 4px;
    color: var(--ink);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.case-open:hover {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.case-open svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.case-body p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.58;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-self: end;
}

.case-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f1f7f9;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
}

.work-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.work-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border: 1px solid rgba(19, 56, 69, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: var(--brand-deep);
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(19, 56, 69, 0.08);
    transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.work-more-button:hover {
    transform: translateY(-2px);
    background: var(--brand);
    color: #ffffff;
}

.work-testimonial {
    width: min(980px, 100%);
    margin: 92px auto 0;
    text-align: center;
}

.testimonial-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(19, 56, 69, 0.58);
    font-weight: 900;
}

.testimonial-mark img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    filter: grayscale(0.18);
    opacity: 0.78;
}

.testimonial-mark span {
    font-size: 15px;
    text-transform: uppercase;
}

.testimonial-stage {
    min-height: 184px;
    margin-top: 22px;
}

.testimonial-quote {
    display: none;
    margin: 0;
}

.testimonial-quote.is-active {
    display: block;
    animation: testimonialFade 260ms ease;
}

.testimonial-quote blockquote {
    margin: 0 auto;
    max-width: 900px;
    color: var(--ink);
    font-size: clamp(22px, 2.1vw, 28px);
    font-weight: 900;
    line-height: 1.34;
}

.testimonial-quote figcaption {
    margin-top: 28px;
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1.4;
}

.testimonial-controls {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
}

.testimonial-arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(19, 56, 69, 0.09);
    border-radius: 50%;
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(19, 56, 69, 0.08);
    transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.testimonial-arrow:hover {
    transform: translateY(-2px);
    background: var(--ink);
    color: #ffffff;
}

.testimonial-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.testimonial-dots {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    background: rgba(19, 56, 69, 0.22);
    transition: transform 180ms ease, background 180ms ease;
}

.testimonial-dots button.is-active {
    background: var(--brand-deep);
    transform: scale(1.28);
}

@keyframes testimonialFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.contact-button {
    flex: 0 0 auto;
}

.privacy-hero {
    position: relative;
    padding: 170px 0 82px;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 16%, rgba(129, 211, 223, 0.38), transparent 28%),
        linear-gradient(180deg, #eef9fb 0%, #ffffff 100%);
}

.privacy-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -190px;
    top: 80px;
    border: 26px solid rgba(63, 145, 166, 0.2);
    border-radius: 50%;
}

.privacy-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
    gap: 72px;
}

.privacy-hero-copy h1 {
    max-width: 830px;
    margin: 18px 0 0;
    color: var(--ink);
    font-size: clamp(44px, 6.4vw, 86px);
    line-height: 0.96;
    letter-spacing: 0;
}

.privacy-hero-copy > p:not(.section-kicker) {
    max-width: 790px;
    margin: 26px 0 0;
    color: var(--ink-soft);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
}

.privacy-hero-copy > span {
    display: inline-flex;
    margin-top: 24px;
    padding: 9px 13px;
    border: 1px solid rgba(63, 145, 166, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--brand-deep);
    font-size: 13px;
    font-weight: 900;
}

.privacy-signal-panel {
    display: grid;
    gap: 16px;
    align-content: center;
    min-height: 300px;
    padding: 34px;
    border: 1px solid rgba(63, 145, 166, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(228, 247, 250, 0.88)),
        #ffffff;
    box-shadow: 0 24px 64px rgba(19, 56, 69, 0.12);
}

.privacy-signal-panel img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 14px 30px rgba(19, 56, 69, 0.12);
}

.privacy-signal-panel strong {
    color: var(--ink);
    font-size: 28px;
    line-height: 1.05;
}

.privacy-signal-panel span {
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.55;
}

.privacy-content-band {
    padding: 78px 0 92px;
    background: #ffffff;
}

.privacy-content-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 64px;
}

.privacy-section-list {
    display: grid;
    gap: 0;
}

.privacy-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 22px;
    padding: 30px 0;
    border-bottom: 1px solid rgba(19, 56, 69, 0.12);
}

.privacy-section:first-child {
    padding-top: 0;
}

.privacy-section > span {
    width: 42px;
    height: 42px;
    margin-top: 4px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #ffffff 0 31%, transparent 32%),
        linear-gradient(135deg, var(--brand), var(--accent));
    box-shadow: 0 12px 26px rgba(63, 145, 166, 0.18);
}

.privacy-section h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.12;
}

.privacy-section p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.72;
}

.privacy-contact-note {
    position: sticky;
    top: 126px;
    display: grid;
    gap: 14px;
    padding: 26px;
    border: 1px solid rgba(63, 145, 166, 0.18);
    border-radius: 8px;
    background: #eef9fb;
    box-shadow: 0 18px 42px rgba(19, 56, 69, 0.1);
}

.privacy-contact-note > span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.privacy-contact-note h2 {
    margin: 0;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.12;
}

.privacy-contact-note p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.58;
}

.privacy-contact-note .pill-button {
    justify-self: start;
    margin-top: 6px;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.video-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 21, 26, 0.68);
    backdrop-filter: blur(3px);
}

.modal-panel {
    position: relative;
    z-index: 1;
    width: min(1000px, calc(100vw - 52px));
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 244, 214, 0.96), rgba(213, 241, 245, 0.96) 48%, rgba(198, 229, 235, 0.96));
    box-shadow: 0 30px 90px rgba(5, 32, 40, 0.34);
    padding: 24px;
    transform: translateY(22px) scale(0.985);
    transition: transform 220ms ease;
}

.video-modal.is-open .modal-panel {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: -25px;
    right: -25px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(8, 36, 71, 0.22);
    transition: transform 180ms ease, color 180ms ease;
}

.modal-close:hover {
    color: var(--brand);
    transform: scale(1.04);
}

.modal-close svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
}

.video-frame {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    border: 8px solid rgba(255, 255, 255, 0.78);
    border-radius: 24px;
    background:
        radial-gradient(circle at 76% 28%, rgba(129, 211, 223, 0.42), transparent 28%),
        radial-gradient(circle at 22% 80%, rgba(255, 241, 210, 0.92), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #eef9fb 50%, #dff5f8 100%);
    color: var(--ink);
}

.video-placeholder {
    position: absolute;
    inset: 0;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.custom-video-embed {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #071f2b;
}

.custom-video-embed iframe,
.custom-video-embed video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.custom-video-embed video {
    object-fit: cover;
}

.video-frame.has-custom-video .video-placeholder {
    opacity: 0;
    pointer-events: none;
}

.video-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(16, 47, 59, 0.78), rgba(16, 47, 59, 0.38) 46%, rgba(16, 47, 59, 0.08)),
        radial-gradient(circle at 78% 28%, rgba(129, 211, 223, 0.28), transparent 28%);
    pointer-events: none;
}

.modal-video-still {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
    filter: saturate(1.04);
}

.placeholder-brand {
    position: absolute;
    z-index: 2;
    top: 28px;
    left: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border: 1px solid rgba(63, 145, 166, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 32px rgba(19, 56, 69, 0.1);
}

.placeholder-brand img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.placeholder-brand span {
    color: var(--brand-deep);
    font-size: 13px;
    font-weight: 900;
}

.video-copy {
    position: relative;
    z-index: 2;
    width: min(520px, 100%);
}

.video-copy span {
    color: var(--brand);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.video-copy h2 {
    margin: 12px 0 14px;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 68px);
    font-weight: 900;
    line-height: 0.98;
}

.video-copy p {
    width: min(470px, 100%);
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

.future-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    color: var(--brand-deep);
    box-shadow: 0 18px 52px rgba(31, 100, 120, 0.26);
    transform: translate(-50%, -50%);
    cursor: default;
}

.future-play svg {
    width: 40px;
    height: 40px;
    margin-left: 4px;
    fill: currentColor;
}

.network-preview {
    position: absolute;
    z-index: 2;
    right: 130px;
    top: 86px;
    width: 290px;
    height: 290px;
    border: 1px dashed rgba(63, 145, 166, 0.24);
    border-radius: 50%;
    opacity: 0.95;
}

.network-preview::before,
.network-preview::after {
    content: "";
    position: absolute;
    border: 1px dashed rgba(63, 145, 166, 0.16);
    border-radius: 50%;
}

.network-preview::before {
    inset: 42px;
}

.network-preview::after {
    inset: 86px;
}

.network-preview span {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 10px rgba(129, 211, 223, 0.18);
}

.network-preview span:nth-child(1) {
    top: 18px;
    left: 132px;
}

.network-preview span:nth-child(2) {
    top: 98px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: var(--brand-deep);
}

.network-preview span:nth-child(3) {
    left: 28px;
    bottom: 52px;
    background: var(--accent);
}

.network-preview span:nth-child(4) {
    right: 58px;
    bottom: -5px;
    width: 20px;
    height: 20px;
}

.video-side-actions {
    position: absolute;
    z-index: 4;
    right: 8px;
    top: 8px;
    display: grid;
    gap: 8px;
}

.video-side-actions span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    background: rgba(17, 33, 40, 0.62);
    color: #ffffff;
}

.video-side-actions svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fake-player-bar {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    z-index: 5;
    display: grid;
    grid-template-columns: 42px auto 1fr 18px 18px auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(16, 30, 36, 0.66);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.pause-bars {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.pause-bars i {
    width: 5px;
    height: 18px;
    border-radius: 99px;
    background: #ffffff;
}

.time-pill {
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
}

.progress-track {
    position: relative;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.26);
    overflow: hidden;
}

.progress-track i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 22%;
    border-radius: inherit;
    background: var(--accent);
}

.control-dot {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
}

.fake-player-bar strong {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.about-page {
    background: #ffffff;
}

.about-main {
    overflow: hidden;
    background: #ffffff;
}

.about-hero {
    position: relative;
    padding: calc(var(--header-offset) + 112px) 0 88px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 30%, rgba(129, 211, 223, 0.12), transparent 28%),
        #ffffff;
}

.about-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.about-ring-left {
    top: 70px;
    left: -170px;
    width: 430px;
    height: 430px;
    border: 44px solid rgba(129, 211, 223, 0.16);
    border-right-color: rgba(63, 145, 166, 0.66);
    border-bottom-color: rgba(255, 201, 96, 0.72);
    transform: rotate(22deg);
}

.about-ring-right {
    top: 56px;
    right: -54px;
    width: 280px;
    height: 280px;
    border: 22px solid rgba(129, 211, 223, 0.2);
    border-left-color: rgba(255, 201, 96, 0.78);
    border-bottom-color: rgba(63, 145, 166, 0.76);
    transform: rotate(-16deg);
}

.about-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.about-kicker {
    margin: 0 0 14px;
    color: var(--brand);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.about-hero h1 {
    margin: 0;
    color: #071f2b;
    font-size: clamp(54px, 6.5vw, 88px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
}

.about-hero-inner>p:not(.about-kicker) {
    max-width: 900px;
    margin: 24px auto 0;
    color: var(--ink-soft);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.52;
}

.about-video-card {
    position: relative;
    display: block;
    width: min(1280px, 100%);
    aspect-ratio: 16 / 7.2;
    margin: 64px auto 0;
    overflow: hidden;
    border: 22px solid #dff6fa;
    border-radius: 26px;
    background: #0a2d3b;
    color: #ffffff;
    box-shadow:
        0 22px 62px rgba(19, 56, 69, 0.14),
        0 0 0 1px rgba(19, 56, 69, 0.05);
}

.about-video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(6, 28, 39, 0.84) 0%, rgba(6, 28, 39, 0.56) 42%, rgba(6, 28, 39, 0.26) 100%),
        radial-gradient(circle at 76% 32%, rgba(129, 211, 223, 0.18), transparent 30%);
}

.about-video-card::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -170px;
    z-index: 2;
    width: 420px;
    height: 420px;
    border: 44px solid rgba(129, 211, 223, 0.34);
    border-top-color: rgba(255, 201, 96, 0.84);
    border-left-color: rgba(63, 145, 166, 0.8);
    border-radius: 50%;
    transform: rotate(18deg);
}

.about-video-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 54% 34%;
    filter: saturate(1.05) contrast(1.05);
    transform: scale(1.02);
    transition: transform 320ms ease;
}

.about-video-card:hover img {
    transform: scale(1.055);
}

.about-video-card:focus-visible {
    outline: 4px solid rgba(129, 211, 223, 0.82);
    outline-offset: 6px;
}

.about-video-tint {
    position: absolute;
    inset: auto auto 32px 38px;
    z-index: 2;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(129, 211, 223, 0.68);
    mix-blend-mode: screen;
}

.about-video-orb {
    position: absolute;
    left: 54px;
    top: 64px;
    z-index: 2;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 225, 132, 0.95), rgba(129, 211, 223, 0.7));
    opacity: 0.86;
}

.about-video-arc {
    position: absolute;
    left: -46px;
    bottom: -88px;
    z-index: 2;
    width: 420px;
    height: 210px;
    border: 24px solid rgba(129, 211, 223, 0.78);
    border-top: 0;
    border-radius: 0 0 240px 240px;
    transform: rotate(14deg);
}

.about-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #071f2b;
    box-shadow: 0 18px 44px rgba(5, 32, 40, 0.3);
    transform: translate(-50%, -50%);
}

.about-video-play svg {
    width: 30px;
    height: 30px;
    margin-left: 4px;
    fill: currentColor;
}

.about-video-copy {
    position: absolute;
    left: 64px;
    right: 190px;
    bottom: 54px;
    z-index: 4;
    display: grid;
    justify-items: start;
    text-align: left;
    text-transform: uppercase;
}

.about-video-copy small {
    color: #ffffff;
    font-size: clamp(28px, 3.2vw, 48px);
    font-weight: 900;
    line-height: 1;
}

.about-video-copy strong {
    max-width: 900px;
    color: #ffffff;
    font-size: clamp(42px, 5.6vw, 82px);
    font-weight: 900;
    line-height: 0.95;
    text-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.about-mission-section,
.about-principles-section,
.about-pillars-section {
    padding: 92px 0;
    background: #ffffff;
}

.about-split-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(9vw, 130px);
}

.about-statement span {
    display: block;
    margin-bottom: 22px;
    color: var(--brand);
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 900;
    line-height: 1;
}

.about-statement p {
    max-width: 620px;
    margin: 0;
    color: #071f2b;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
}

.about-principles-grid,
.about-pillars-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1fr);
    align-items: center;
    gap: min(8vw, 110px);
}

.about-pillars-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.9fr);
}

.about-principles-copy h2,
.about-pillars-copy h2,
.about-awards-inner h2,
.about-cta-inner h2 {
    margin: 0;
    color: #071f2b;
    font-size: clamp(38px, 4.6vw, 58px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: 0;
}

.about-principles-copy>p:not(.about-kicker),
.about-pillars-copy>p:not(.about-kicker) {
    max-width: 560px;
    margin: 22px 0 0;
    color: var(--ink-soft);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}

.about-principle-panel,
.about-pillar-panel {
    display: grid;
    gap: 0;
    padding: 24px;
    border: 1px solid rgba(63, 145, 166, 0.1);
    border-radius: 12px;
    background:
        repeating-linear-gradient(135deg, rgba(63, 145, 166, 0.055) 0 8px, rgba(255, 255, 255, 0.38) 8px 16px),
        #f2fbfc;
    box-shadow: 0 22px 54px rgba(19, 56, 69, 0.09);
}

.about-principle-panel article,
.about-pillar-panel article {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 18px;
    padding: 26px 28px;
    background: rgba(255, 255, 255, 0.94);
}

.about-principle-panel article:first-child,
.about-pillar-panel article:first-child {
    border-radius: 8px 8px 0 0;
}

.about-principle-panel article:last-child,
.about-pillar-panel article:last-child {
    border-radius: 0 0 8px 8px;
}

.about-principle-panel article+article,
.about-pillar-panel article+article {
    border-top: 1px solid rgba(19, 56, 69, 0.09);
}

.about-principle-panel article>span,
.about-pillar-panel article>span {
    position: relative;
    top: 3px;
    width: 15px;
    height: 15px;
    border: 2px solid var(--brand);
    border-radius: 50%;
}

.about-principle-panel article>span::before,
.about-pillar-panel article>span::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
}

.about-principle-panel h3,
.about-pillar-panel h3 {
    margin: 0;
    color: #071f2b;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.35;
}

.about-principle-panel p,
.about-pillar-panel p {
    margin: 16px 0 0;
    color: #53687c;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.58;
}

.about-photo-badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 310px;
    height: 310px;
    margin: 84px 0 0 18px;
    isolation: isolate;
}

.about-photo-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 50%;
    background:
        conic-gradient(from 210deg, var(--brand) 0 24%, transparent 24% 36%, #ffc960 36% 48%, var(--accent) 48% 74%, #6c63ff 74% 84%, transparent 84% 100%);
}

.about-photo-badge::after {
    content: "";
    position: absolute;
    right: -44px;
    bottom: 8px;
    z-index: -1;
    width: 170px;
    height: 170px;
    border: 12px solid transparent;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 140deg, rgba(31, 100, 120, 0.9) 0 6deg, transparent 6deg 12deg);
    -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59%);
    mask: radial-gradient(circle, transparent 0 58%, #000 59%);
}

.about-photo-badge img {
    width: 235px;
    height: 235px;
    border: 11px solid #ffffff;
    border-radius: 50%;
    object-fit: cover;
    object-position: 53% center;
    box-shadow: 0 22px 44px rgba(19, 56, 69, 0.2);
}

.about-photo-badge-alt {
    margin-left: auto;
    margin-right: 38px;
}

.about-photo-badge-alt::before {
    transform: rotate(38deg);
}

.about-photo-badge-alt::after {
    right: auto;
    left: -46px;
    bottom: 26px;
    background:
        repeating-conic-gradient(from 180deg, rgba(129, 211, 223, 0.95) 0 6deg, transparent 6deg 12deg);
}

.about-awards-section {
    position: relative;
    padding: 120px 0 110px;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 80%, rgba(255, 201, 96, 0.14) 0 12px, transparent 13px),
        radial-gradient(circle at 22% 88%, rgba(129, 211, 223, 0.18) 0 18px, transparent 19px),
        radial-gradient(circle at 72% 22%, rgba(63, 145, 166, 0.1) 0 14px, transparent 15px),
        radial-gradient(circle at 88% 70%, rgba(255, 201, 96, 0.12) 0 16px, transparent 17px),
        #fbfefe;
}

.about-awards-section::before,
.about-awards-section::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    opacity: 0.16;
    pointer-events: none;
}

.about-awards-section::before {
    left: 6%;
    top: 28%;
    background:
        linear-gradient(45deg, transparent 46%, var(--brand) 47% 53%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, var(--brand) 47% 53%, transparent 54%);
}

.about-awards-section::after {
    right: 8%;
    bottom: 12%;
    background:
        linear-gradient(45deg, transparent 46%, #ffc960 47% 53%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, #ffc960 47% 53%, transparent 54%);
}

.about-awards-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.about-award-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(63, 145, 166, 0.22);
}

.about-award-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-awards-inner .about-kicker {
    color: var(--brand-deep);
}

.about-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: min(920px, 100%);
    margin: 44px auto 0;
}

.about-metrics article {
    min-height: 150px;
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 38px rgba(19, 56, 69, 0.08);
}

.about-metrics strong {
    display: block;
    color: var(--brand);
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 900;
    line-height: 1;
}

.about-metrics span {
    display: block;
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.about-cta-band {
    padding: 76px 0;
    background:
        radial-gradient(circle at 86% 40%, rgba(129, 211, 223, 0.24), transparent 26%),
        #082838;
    color: #ffffff;
}

.about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
}

.about-cta-inner .about-kicker {
    color: var(--accent);
}

.about-cta-inner h2 {
    max-width: 780px;
    color: #ffffff;
}

@media (max-width: 1220px) {
    .about-video-card {
        aspect-ratio: 16 / 8.2;
        border-width: 18px;
    }

.about-video-copy {
        left: 44px;
        right: 140px;
        bottom: 44px;
    }

.about-principles-grid,
    .about-pillars-grid {
        gap: 58px;
    }

.about-photo-badge {
        width: 270px;
        height: 270px;
    }

.about-photo-badge img {
        width: 204px;
        height: 204px;
    }
}

@media (max-width: 920px) {
    .about-hero {
        padding: calc(var(--header-offset) + 76px) 0 68px;
    }

.about-ring-left {
        left: -250px;
        opacity: 0.72;
    }

.about-ring-right {
        right: -140px;
        opacity: 0.78;
    }

.about-video-card {
        aspect-ratio: 4 / 3;
        margin-top: 48px;
    }

.about-video-card::after {
        width: 320px;
        height: 320px;
        border-width: 34px;
    }

.about-video-orb {
        width: 120px;
        height: 120px;
    }

.about-video-arc {
        width: 330px;
        height: 165px;
    }

.about-video-copy {
        right: 44px;
    }

.about-mission-section,
    .about-principles-section,
    .about-pillars-section {
        padding: 72px 0;
    }

.about-split-grid,
    .about-principles-grid,
    .about-pillars-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

.about-pillars-copy {
        order: -1;
    }

.about-photo-badge,
    .about-photo-badge-alt {
        margin: 54px auto 0;
    }

.about-metrics {
        grid-template-columns: 1fr;
    }

.about-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .about-hero {
        padding: calc(var(--header-offset) + 54px) 0 54px;
    }

.about-hero h1 {
        font-size: 42px;
        line-height: 1.04;
    }

.about-hero-inner>p:not(.about-kicker) {
        font-size: 17px;
    }

.about-video-card {
        aspect-ratio: 4 / 4.6;
        border-width: 10px;
        border-radius: 18px;
    }

.about-video-card img {
        object-position: 52% center;
    }

.about-video-tint,
    .about-video-orb {
        display: none;
    }

.about-video-play {
        width: 62px;
        height: 62px;
    }

.about-video-play svg {
        width: 24px;
        height: 24px;
    }

.about-video-copy {
        left: 22px;
        right: 22px;
        bottom: 26px;
    }

.about-video-copy small {
        font-size: 24px;
    }

.about-video-copy strong {
        font-size: 34px;
        line-height: 1;
    }

.about-statement span {
        font-size: 38px;
    }

.about-statement p,
    .about-principles-copy>p:not(.about-kicker),
    .about-pillars-copy>p:not(.about-kicker) {
        font-size: 16px;
    }

.about-principles-copy h2,
    .about-pillars-copy h2,
    .about-awards-inner h2,
    .about-cta-inner h2 {
        font-size: 31px;
    }

.about-principle-panel,
    .about-pillar-panel {
        padding: 12px;
    }

.about-principle-panel article,
    .about-pillar-panel article {
        grid-template-columns: 20px 1fr;
        gap: 12px;
        padding: 22px 18px;
    }

.about-principle-panel p,
    .about-pillar-panel p {
        font-size: 15px;
    }

.about-photo-badge {
        width: 230px;
        height: 230px;
    }

.about-photo-badge img {
        width: 174px;
        height: 174px;
        border-width: 8px;
    }

.about-photo-badge::after {
        width: 125px;
        height: 125px;
        border-width: 8px;
    }

.about-awards-section {
        padding: 86px 0 82px;
    }

.about-metrics article {
        min-height: 132px;
    }

.about-cta-band {
        padding: 64px 0;
    }
}

.service-detail-page {
    background: var(--white);
}

.service-main {
    background: var(--white);
}

.service-hero {
    position: relative;
    min-height: 720px;
    padding: calc(var(--header-offset) + 74px) 0 82px;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(26, 183, 196, 0.96) 0%, rgba(18, 128, 158, 0.98) 52%, rgba(20, 95, 130, 1) 100%);
    color: var(--white);
}

.service-hero::before,
.service-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.service-hero::before {
    top: 28px;
    left: -210px;
    width: 430px;
    height: 430px;
    border: 42px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 0 0 32px rgba(63, 145, 166, 0.56),
        0 0 0 66px rgba(184, 237, 241, 0.72);
}

.service-hero::after {
    right: -80px;
    top: -86px;
    width: 260px;
    height: 260px;
    border: 20px solid rgba(129, 211, 223, 0.78);
    box-shadow: 0 0 0 18px rgba(129, 211, 223, 0.42);
}

.service-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1396px, calc(100% - 80px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(420px, 0.72fr);
    align-items: center;
    gap: 70px;
}

.service-hero-copy {
    max-width: 690px;
}

.service-eyebrow {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 23px;
    font-weight: 900;
}

.service-hero h1 {
    margin: 0;
    color: var(--white);
    font-size: clamp(46px, 5vw, 74px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
}

.service-hero-copy>p:not(.service-eyebrow) {
    max-width: 620px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.42;
}

.service-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 64px;
}

.service-hero-primary,
.service-hero-secondary,
.service-hero-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.service-hero-primary {
    min-width: 310px;
    padding: 0 34px;
    background: var(--brand);
    color: var(--white);
    box-shadow: 0 18px 34px rgba(8, 57, 75, 0.24);
}

.service-hero-primary:hover {
    transform: translateY(-2px);
    background: var(--brand-deep);
    box-shadow: 0 22px 40px rgba(8, 57, 75, 0.3);
}

.service-hero-secondary {
    gap: 13px;
    min-width: 190px;
    padding: 0 26px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
}

.service-hero-demo {
    min-width: 150px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

.service-hero-secondary:hover {
    transform: translateY(-2px);
    color: var(--brand);
    box-shadow: 0 16px 34px rgba(8, 57, 75, 0.18);
}

.service-hero-demo:hover,
.service-hero-demo:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(8, 57, 75, 0.18);
}

.service-hero-secondary svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

.service-signal-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 110px;
}

.service-signal-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.service-hero-art {
    position: relative;
    min-height: 500px;
}

.service-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ring-a {
    right: 12px;
    bottom: -18px;
    width: min(520px, 38vw);
    height: min(520px, 38vw);
    border: 20px solid rgba(184, 237, 241, 0.86);
}

.ring-b {
    right: -4px;
    bottom: -34px;
    width: min(490px, 36vw);
    height: min(490px, 36vw);
    border: 34px solid rgba(63, 145, 166, 0.66);
}

.service-image-shell {
    position: absolute;
    right: 36px;
    bottom: 12px;
    width: min(470px, 34vw);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: #d9f0f4;
    box-shadow: 0 24px 80px rgba(6, 51, 70, 0.35);
}

.service-image-shell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.02);
}

.service-image-note {
    position: absolute;
    right: 270px;
    bottom: 18px;
    min-width: 190px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    box-shadow: 0 18px 42px rgba(8, 57, 75, 0.18);
}

.service-image-note span {
    display: block;
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.service-image-note strong {
    display: block;
    margin-top: 4px;
    font-size: 24px;
    font-weight: 900;
}

.service-anchor-nav {
    position: sticky;
    top: var(--header-offset);
    z-index: 80;
    display: flex;
    justify-content: center;
    gap: min(5vw, 82px);
    padding: 0 24px;
    background: #f5f8fb;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}

.service-anchor-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    color: #5d7084;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.service-anchor-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--brand);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 180ms ease, transform 180ms ease;
}

.service-anchor-nav a:hover,
.service-anchor-nav a.is-active {
    color: var(--ink);
}

.service-anchor-nav a.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.service-detail-section,
.service-demo-section,
.service-process-section,
.service-benefit-section,
.service-insight-section,
.service-faq-section,
.service-case-section,
.service-cta-band {
    scroll-margin-top: calc(var(--header-offset) + 82px);
}

.service-detail-section,
.service-demo-section,
.service-process-section,
.service-benefit-section,
.service-insight-section,
.service-faq-section {
    padding: 94px 0;
}

.service-case-section {
    padding: 94px 0;
    background: #f7fcfd;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.service-section-heading {
    max-width: 980px;
    margin: 0 auto 44px;
    text-align: center;
}

.service-section-heading p {
    margin: 0 0 16px;
    color: var(--brand);
    font-size: 22px;
    font-weight: 900;
}

.service-section-heading h2,
.service-case-inner h2,
.service-cta-inner h2 {
    margin: 0;
    color: #071f2b;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: 0;
}

.service-section-heading span,
.service-case-inner p {
    display: block;
    max-width: 760px;
    margin: 18px auto 0;
    color: #53687c;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.58;
}

.service-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 28px;
    border-radius: 8px;
    background:
        repeating-linear-gradient(135deg, rgba(63, 145, 166, 0.045) 0 10px, rgba(255, 255, 255, 0.2) 10px 20px),
        #f2fbfc;
}

.service-demo-section {
    background:
        radial-gradient(circle at 16% 12%, rgba(129, 211, 223, 0.18), transparent 28%),
        linear-gradient(180deg, #eaf4f7 0%, #dcebf0 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.service-demo-heading {
    margin-bottom: 42px;
}

.service-demo-card {
    display: grid;
    grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
    gap: 26px;
    padding: 24px;
    border: 1px solid rgba(19, 56, 69, 0.14);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(241, 247, 249, 0.96), rgba(220, 233, 238, 0.9)),
        var(--surface-card);
    box-shadow: 0 24px 64px rgba(19, 56, 69, 0.12);
}

.service-demo-copy {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: clamp(22px, 3vw, 38px);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.38);
}

.service-demo-copy > span {
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.service-demo-copy h3 {
    margin: 0;
    color: #071f2b;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 900;
    line-height: 1.06;
}

.service-demo-copy p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.58;
}

.service-demo-copy ul {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 4px 0 0;
    list-style: none;
}

.service-demo-copy li {
    position: relative;
    padding-left: 20px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.4;
}

.service-demo-copy li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.56em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}

.service-demo-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.service-demo-tools span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(63, 145, 166, 0.12);
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 900;
}

.service-demo-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 480px;
    padding: clamp(18px, 2.5vw, 34px);
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(129, 211, 223, 0.24), transparent 26%),
        linear-gradient(135deg, #082838 0%, #113f51 58%, #1f6478 100%);
    color: #ffffff;
}

.service-demo-preview::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    pointer-events: none;
}

.demo-site-shell,
.demo-browser-shell,
.demo-chat-shell,
.demo-flow-shell,
.demo-dashboard-shell,
.demo-growth-shell {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(3, 18, 26, 0.28);
    overflow: hidden;
}

.demo-site-shell {
    background: #f8fcfd;
}

.demo-site-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    min-height: 58px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(19, 56, 69, 0.11);
    background: rgba(255, 255, 255, 0.9);
}

.demo-site-top strong {
    color: #071f2b;
    font-size: 17px;
    font-weight: 900;
}

.demo-site-top nav {
    display: flex;
    gap: 16px;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-site-top a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.demo-site-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.62fr);
    gap: 26px;
    align-items: center;
    padding: clamp(26px, 4vw, 46px);
    background:
        radial-gradient(circle at 88% 18%, rgba(129, 211, 223, 0.24), transparent 30%),
        linear-gradient(135deg, #f3fafb 0%, #dceff4 100%);
}

.demo-site-copy {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.demo-site-copy > span,
.demo-site-lead > span {
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-site-copy h4 {
    max-width: 520px;
    margin: 0;
    color: #071f2b;
    font-size: clamp(31px, 4.2vw, 52px);
    font-weight: 900;
    line-height: 0.98;
}

.demo-site-copy p {
    max-width: 510px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.52;
}

.demo-site-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.demo-site-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: #082838;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.demo-site-actions span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(63, 145, 166, 0.12);
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 900;
}

.demo-site-hero figure {
    position: relative;
    min-height: 270px;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #082838;
    box-shadow: 0 24px 54px rgba(19, 56, 69, 0.18);
}

.demo-site-hero img {
    width: 100%;
    height: 100%;
    min-height: 270px;
    object-fit: cover;
    filter: saturate(1.03) contrast(1.03);
}

.demo-site-hero figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 40, 56, 0.08), rgba(8, 40, 56, 0.72)),
        linear-gradient(90deg, rgba(8, 40, 56, 0.58), transparent 62%);
}

.demo-site-hero figcaption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    display: grid;
    gap: 2px;
    min-width: 128px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    box-shadow: 0 16px 34px rgba(5, 32, 40, 0.16);
}

.demo-site-hero figcaption strong {
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-site-hero figcaption span {
    color: var(--brand);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.demo-site-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(19, 56, 69, 0.12);
}

.demo-site-proof span {
    display: grid;
    place-items: center;
    min-height: 66px;
    padding: 13px;
    background: #ffffff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
}

.demo-site-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 16px;
    padding: 18px;
    background: #eef6f8;
}

.demo-site-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.demo-site-services article,
.demo-site-lead {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.demo-site-services span {
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
}

.demo-site-services strong,
.demo-site-lead strong {
    display: block;
    margin-top: 9px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}

.demo-site-services p,
.demo-site-lead p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
}

.demo-site-lead {
    display: grid;
    align-content: start;
}

.demo-site-lead button {
    min-height: 38px;
    margin-top: 15px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.demo-browser-top {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(19, 56, 69, 0.12);
    background: #e4eef2;
}

.demo-browser-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
}

.demo-browser-top span:nth-child(2) {
    background: var(--accent);
}

.demo-browser-top span:nth-child(3) {
    background: var(--ink-soft);
}

.demo-browser-top strong {
    margin-left: auto;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-website-hero {
    display: grid;
    gap: 12px;
    padding: clamp(28px, 5vw, 54px);
    background:
        radial-gradient(circle at 82% 24%, rgba(129, 211, 223, 0.3), transparent 30%),
        linear-gradient(135deg, #f1f7f9 0%, #d9edf1 100%);
}

.demo-website-hero small,
.demo-chat-header small,
.demo-flow-step small,
.demo-growth-board small {
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-website-hero strong {
    max-width: 520px;
    color: #071f2b;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 900;
    line-height: 1.02;
}

.demo-website-hero p {
    max-width: 510px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.demo-website-hero > span {
    justify-self: start;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.demo-website-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(19, 56, 69, 0.12);
}

.demo-website-grid div {
    min-height: 118px;
    padding: 20px;
    background: #f8fcfd;
}

.demo-website-grid span,
.demo-flow-step span {
    display: block;
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
}

.demo-website-grid strong {
    display: block;
    margin-top: 16px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.28;
}

.demo-chat-shell {
    max-width: 480px;
}

.demo-chat-header {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--brand-deep), var(--brand));
    color: #ffffff;
}

.demo-chat-header span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 46%, #ffffff 0 28%, transparent 29%),
        rgba(255, 255, 255, 0.2);
}

.demo-chat-header small {
    color: rgba(255, 255, 255, 0.76);
}

.demo-chat-body {
    display: grid;
    gap: 12px;
    padding: 18px;
    background: #e8f2f5;
}

.demo-chat-body p {
    width: fit-content;
    max-width: 82%;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: 0 8px 20px rgba(19, 56, 69, 0.08);
}

.demo-chat-body .is-user {
    justify-self: end;
    background: var(--brand-deep);
    color: #ffffff;
}

.demo-chat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px 16px;
}

.demo-chat-actions span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #e7f7fa;
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 900;
}

.demo-flow-shell {
    display: grid;
    gap: 12px;
    max-width: 560px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.92);
}

.demo-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 14px;
    border: 1px solid rgba(19, 56, 69, 0.12);
    border-radius: 8px;
    background: #f1f7f9;
}

.demo-flow-step span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
}

.demo-flow-step strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.2;
}

.demo-flow-step small {
    grid-column: 2;
}

.demo-flow-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 66px;
    padding: 16px;
    border-radius: 8px;
    background: #082838;
    color: #ffffff;
}

.demo-flow-summary span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.demo-dashboard-shell {
    display: grid;
    gap: 16px;
    padding: 18px;
    background: #f1f7f9;
}

.demo-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.demo-dashboard-head strong {
    color: #071f2b;
    font-size: 23px;
    line-height: 1;
}

.demo-dashboard-head span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.demo-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.demo-metric-grid div,
.demo-dashboard-list p,
.demo-growth-board div {
    margin: 0;
    border: 1px solid rgba(19, 56, 69, 0.11);
    border-radius: 8px;
    background: #ffffff;
}

.demo-metric-grid div {
    min-height: 120px;
    padding: 18px;
}

.demo-metric-grid strong {
    display: block;
    color: var(--brand);
    font-size: 32px;
    line-height: 1;
}

.demo-metric-grid span {
    display: block;
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.demo-dashboard-list {
    display: grid;
    gap: 8px;
}

.demo-dashboard-list p {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    min-height: 46px;
    padding: 13px 14px;
}

.demo-dashboard-list span {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.demo-dashboard-list strong {
    color: var(--brand-deep);
    font-size: 12px;
    text-transform: uppercase;
}

.demo-growth-shell {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    background: #f1f7f9;
}

.demo-growth-score {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 270px;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 50%, rgba(129, 211, 223, 0.3), transparent 58%),
        #082838;
    color: #ffffff;
}

.demo-growth-score span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-growth-score strong {
    margin-top: 10px;
    font-size: 72px;
    line-height: 1;
}

.demo-growth-board {
    display: grid;
    gap: 10px;
}

.demo-growth-board div {
    padding: 15px;
}

.demo-growth-board span {
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-growth-board strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.26;
}

.demo-growth-board small {
    display: block;
    margin-top: 8px;
    line-height: 1.35;
}

.service-main.is-changing-service .service-hero-copy,
.service-main.is-changing-service .service-hero-art,
.service-main.is-changing-service .service-detail-grid,
.service-main.is-changing-service .service-demo-stage,
.service-main.is-changing-service .service-case-inner,
.service-main.is-changing-service .service-process-grid,
.service-main.is-changing-service .service-benefit-grid,
.service-main.is-changing-service .service-insight-grid,
.service-main.is-changing-service .service-faq-list {
    animation: serviceSwapIn 260ms ease both;
}

@keyframes serviceSwapIn {
    from {
        opacity: 0.58;
        transform: translateY(8px);
    }

to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-demo-stage {
    position: relative;
}

.service-demo-card {
    grid-template-columns: minmax(290px, 0.68fr) minmax(0, 1.32fr);
    gap: 22px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(232, 242, 245, 0.92)),
        #ffffff;
    overflow: hidden;
}

.service-demo-copy {
    border: 1px solid rgba(19, 56, 69, 0.1);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.service-demo-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.service-demo-status span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(63, 145, 166, 0.16);
    border-radius: 999px;
    background: #eef9fb;
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.service-demo-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #36b37e;
    box-shadow: 0 0 0 4px rgba(54, 179, 126, 0.16);
    animation: demoPulse 1.8s ease infinite;
}

@keyframes demoPulse {
    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.72;
    }

50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.service-demo-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.service-demo-stats div {
    min-width: 0;
    padding: 13px 12px;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #f7fbfc;
}

.service-demo-stats strong {
    display: block;
    color: #0d4f64;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.service-demo-stats span {
    display: block;
    margin-top: 7px;
    color: #607184;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}

.service-demo-preview {
    min-height: 560px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(135deg, #082838 0%, #123f52 54%, #1f6478 100%);
    background-size: 38px 38px, 38px 38px, auto;
}

.service-demo-preview::after {
    content: "";
    position: absolute;
    top: 26px;
    right: 26px;
    width: 96px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(129, 211, 223, 0.52) 0 34%, transparent 34% 42%, rgba(255, 201, 96, 0.68) 42% 64%, transparent 64% 72%, rgba(255, 255, 255, 0.32) 72% 100%);
    pointer-events: none;
}

.demo-browser-bar {
    display: grid;
    grid-template-columns: 10px 10px 10px 1fr;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(19, 56, 69, 0.1);
    background: #dfecef;
}

.demo-browser-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6b6b;
}

.demo-browser-bar span:nth-child(2) {
    background: #ffc960;
}

.demo-browser-bar span:nth-child(3) {
    background: #36b37e;
}

.demo-browser-bar strong {
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #607184;
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: lowercase;
    white-space: nowrap;
}

.demo-site-visual {
    transform: translateZ(0);
}

.demo-site-chat-card {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    width: min(188px, calc(100% - 28px));
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 8px;
    background: rgba(8, 40, 56, 0.84);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(5, 32, 40, 0.2);
}

.demo-site-chat-card strong,
.demo-site-chat-card span,
.demo-site-lead em {
    display: block;
}

.demo-site-chat-card strong {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-site-chat-card span {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.demo-site-lead em {
    margin-top: 12px;
    color: #36b37e;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-site-lead.is-sent {
    border-color: rgba(54, 179, 126, 0.42);
    background: #f2fbf6;
}

.demo-site-lead.is-sent button {
    background: #36b37e;
}

.demo-chat-shell {
    max-width: 560px;
}

.demo-chat-header {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 74px;
}

.demo-chat-header div {
    min-width: 0;
}

.demo-chat-header strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-chat-header em {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.demo-chat-body {
    max-height: 292px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.demo-chat-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 16px 14px;
    background: #e8f2f5;
}

.demo-chat-side div {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.demo-chat-side span {
    color: #607184;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-chat-side strong {
    display: block;
    margin-top: 7px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
}

.demo-chat-actions button {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    background: #e7f7fa;
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 900;
    transition: transform 160ms ease, background 160ms ease;
}

.demo-chat-actions button:hover,
.demo-chat-actions button:focus-visible {
    transform: translateY(-1px);
    background: #d1eef4;
}

.demo-chat-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 0 16px 16px;
    background: #ffffff;
}

.demo-chat-input span {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(19, 56, 69, 0.11);
    border-radius: 999px;
    color: #607184;
    font-size: 12px;
    font-weight: 800;
}

.demo-chat-input button,
.demo-flow-head button,
.demo-dashboard-tabs button {
    min-height: 38px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-chat-input button {
    padding: 0 15px;
    background: var(--brand);
    color: #ffffff;
}

.demo-flow-shell {
    max-width: 660px;
    gap: 10px;
}

.demo-flow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 2px 2px 10px;
}

.demo-flow-head span,
.demo-dashboard-head small {
    display: block;
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-flow-head strong {
    display: block;
    margin-top: 6px;
    color: #071f2b;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.08;
}

.demo-flow-head button {
    flex: 0 0 auto;
    padding: 0 15px;
    background: #082838;
    color: #ffffff;
}

.demo-flow-step {
    overflow: hidden;
}

.demo-flow-step::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(129, 211, 223, 0.2), transparent);
    transition: width 380ms ease;
}

.demo-flow-step > * {
    position: relative;
    z-index: 1;
}

.demo-flow-step div {
    min-width: 0;
}

.demo-flow-shell.is-running .demo-flow-step::after,
.demo-flow-shell.is-complete .demo-flow-step::after {
    width: 100%;
}

.demo-flow-log {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.demo-flow-log p {
    display: flex;
    gap: 10px;
    margin: 0;
    color: #607184;
    font-size: 12px;
    font-weight: 800;
}

.demo-flow-log strong {
    color: var(--brand-deep);
}

.demo-dashboard-shell {
    max-width: 690px;
}

.demo-dashboard-head {
    align-items: flex-start;
}

.demo-dashboard-head > div:first-child {
    min-width: 0;
}

.demo-dashboard-head small {
    color: #607184;
}

.demo-dashboard-head strong {
    display: block;
    margin-top: 6px;
    line-height: 1.12;
}

.demo-dashboard-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.demo-dashboard-tabs button {
    padding: 0 11px;
    border: 1px solid rgba(19, 56, 69, 0.12);
    background: #ffffff;
    color: #607184;
}

.demo-dashboard-tabs button.is-active {
    border-color: transparent;
    background: var(--brand);
    color: #ffffff;
}

.demo-dashboard-chart {
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.demo-dashboard-chart div {
    display: grid;
    grid-template-columns: minmax(112px, 0.36fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.demo-dashboard-chart span {
    overflow: hidden;
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-dashboard-chart i {
    display: block;
    width: var(--bar);
    max-width: 100%;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), #ffc960);
}

.demo-dashboard-note {
    margin: 0;
    padding: 13px 14px;
    border: 1px solid rgba(63, 145, 166, 0.16);
    border-radius: 8px;
    background: #eef9fb;
    color: var(--brand-deep);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.45;
}

.demo-growth-shell {
    max-width: 680px;
    grid-template-columns: 170px minmax(0, 1fr);
}

.demo-growth-score {
    position: relative;
    overflow: hidden;
}

.demo-growth-score::after {
    content: "";
    position: absolute;
    inset: 28px;
    border: 14px solid rgba(255, 255, 255, 0.16);
    border-top-color: #ffc960;
    border-right-color: var(--accent);
    border-radius: 50%;
    pointer-events: none;
}

.demo-growth-score > * {
    position: relative;
    z-index: 1;
}

.demo-growth-score small {
    max-width: 120px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}

.demo-growth-board button {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(19, 56, 69, 0.11);
    border-radius: 8px;
    background: #ffffff;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.demo-growth-board button:hover,
.demo-growth-board button:focus-visible,
.demo-growth-board button.is-active {
    transform: translateY(-1px);
    border-color: rgba(63, 145, 166, 0.42);
    box-shadow: 0 12px 28px rgba(19, 56, 69, 0.1);
}

.demo-growth-checklist {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.demo-growth-checklist p {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
    color: #607184;
    font-size: 11px;
    font-weight: 900;
}

.demo-growth-checklist span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #36b37e;
    box-shadow: 0 0 0 3px rgba(54, 179, 126, 0.14);
    flex: 0 0 auto;
}

.demo-product-shell {
    --demo-accent: var(--brand);
    --demo-soft: rgba(63, 145, 166, 0.14);
    position: relative;
    z-index: 1;
    display: grid;
    width: min(740px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background: #f8fcfd;
    color: var(--ink);
    box-shadow: 0 24px 70px rgba(3, 18, 26, 0.28);
}

.demo-product-top,
.demo-product-footer {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
}

.demo-product-top {
    grid-template-columns: minmax(0, 1fr) auto auto;
    border-bottom: 1px solid rgba(19, 56, 69, 0.1);
    background:
        linear-gradient(90deg, var(--demo-soft), rgba(255, 255, 255, 0.84)),
        #ffffff;
}

.demo-product-top div {
    min-width: 0;
}

.demo-product-top span,
.demo-product-footer span,
.demo-product-shell small {
    color: #607184;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.demo-product-top strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #071f2b;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-product-top nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.demo-product-top nav span,
.demo-product-top em,
.demo-product-footer button,
.demo-product-search {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.demo-product-top nav span {
    background: rgba(19, 56, 69, 0.07);
    color: #607184;
}

.demo-product-top em {
    background: var(--demo-accent);
    color: #ffffff;
    font-style: normal;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--demo-accent) 28%, transparent);
}

.demo-product-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    border-top: 1px solid rgba(19, 56, 69, 0.1);
    background: #ffffff;
}

.demo-product-footer strong {
    display: block;
    margin-top: 4px;
    color: var(--demo-accent);
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.demo-product-footer button {
    border: 1px solid transparent;
    background: #082838;
    color: #ffffff;
}

.demo-product-shell.is-actioned .demo-product-footer button,
.demo-product-shell.is-actioned .demo-product-top em {
    background: #36b37e;
}

.demo-product-body,
.demo-product-body-split,
.demo-product-score,
.demo-product-booking,
.demo-product-handoff,
.demo-product-crm,
.demo-product-events,
.demo-product-brand,
.demo-product-audit,
.demo-product-performance {
    display: grid;
    gap: 14px;
    padding: 18px;
    background:
        radial-gradient(circle at 90% 10%, var(--demo-soft), transparent 34%),
        #eef6f8;
}

.demo-product-body-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
}

.demo-product-page,
.demo-product-cards article,
.demo-product-funnel article,
.demo-product-map article,
.demo-product-snippet,
.demo-product-editor section,
.demo-product-editor aside article,
.demo-product-chat section,
.demo-product-chat aside,
.demo-product-score div,
.demo-product-score p,
.demo-product-knowledge article,
.demo-product-booking aside,
.demo-product-handoff section,
.demo-product-handoff aside,
.demo-product-flow,
.demo-product-flow article,
.demo-product-sequence article,
.demo-product-crm section,
.demo-product-crm aside,
.demo-product-kanban section,
.demo-product-network article,
.demo-product-dashboard section article,
.demo-product-dashboard div,
.demo-product-dashboard aside,
.demo-product-table,
.demo-product-table p,
.demo-product-events section article,
.demo-product-events aside,
.demo-product-brand aside,
.demo-product-audit aside,
.demo-product-performance div,
.demo-product-performance section,
.demo-product-content article,
.demo-product-roadmap article {
    min-width: 0;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.demo-product-page {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 305px;
    padding: 24px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58)),
        radial-gradient(circle at 74% 18%, var(--demo-soft), transparent 34%),
        #ffffff;
}

.demo-product-page::before {
    content: "";
    position: absolute;
    top: 24px;
    right: 24px;
    width: 112px;
    height: 112px;
    border: 16px solid var(--demo-soft);
    border-top-color: var(--demo-accent);
    border-radius: 50%;
}

.demo-product-page > * {
    position: relative;
    z-index: 1;
}

.demo-product-page span,
.demo-product-cards span,
.demo-product-funnel span,
.demo-product-map span,
.demo-product-snippet span,
.demo-product-editor span,
.demo-product-booking aside span,
.demo-product-handoff span,
.demo-product-flow > strong,
.demo-product-sequence span,
.demo-product-crm span,
.demo-product-kanban span,
.demo-product-network span,
.demo-product-roadmap span {
    color: var(--demo-accent);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-product-page strong {
    display: block;
    max-width: 420px;
    margin-top: 10px;
    color: #071f2b;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.demo-product-page p,
.demo-product-snippet p,
.demo-product-editor p,
.demo-product-knowledge p,
.demo-product-handoff p,
.demo-product-table em,
.demo-product-content small {
    margin: 10px 0 0;
    color: #607184;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.demo-product-cards,
.demo-product-funnel,
.demo-product-knowledge,
.demo-product-sequence,
.demo-product-kanban,
.demo-product-content,
.demo-product-roadmap {
    display: grid;
    gap: 10px;
}

.demo-product-cards article,
.demo-product-funnel article,
.demo-product-knowledge article,
.demo-product-sequence article,
.demo-product-content article,
.demo-product-roadmap article {
    padding: 15px;
}

.demo-product-cards strong,
.demo-product-funnel strong,
.demo-product-map strong,
.demo-product-snippet strong,
.demo-product-editor h4,
.demo-product-editor strong,
.demo-product-score strong,
.demo-product-handoff strong,
.demo-product-flow article strong,
.demo-product-sequence strong,
.demo-product-crm strong,
.demo-product-network strong,
.demo-product-brand strong,
.demo-product-content strong,
.demo-product-roadmap strong {
    display: block;
    margin-top: 7px;
    color: #071f2b;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.22;
}

.demo-product-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
    background: #eef6f8;
}

.demo-product-map article {
    position: relative;
    min-height: 112px;
    padding: 16px;
}

.demo-product-map article.is-root {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--demo-soft), #ffffff);
}

.demo-product-snippet {
    padding: 16px;
}

.demo-product-editor {
    grid-template-columns: minmax(0, 1fr) 210px;
}

.demo-product-editor section,
.demo-product-editor aside {
    padding: 18px;
}

.demo-product-editor h4 {
    margin: 8px 0 14px;
    font-size: 28px;
}

.demo-product-devices {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 86px;
    align-items: end;
    gap: 14px;
    padding: 22px;
    background: #eef6f8;
}

.demo-product-devices .device {
    display: grid;
    align-content: end;
    min-height: 260px;
    padding: 14px;
    border: 10px solid #071f2b;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(19, 56, 69, 0.16);
}

.demo-product-devices .tablet {
    min-height: 210px;
    border-width: 8px;
}

.demo-product-devices .phone {
    min-height: 172px;
    border-width: 7px;
}

.demo-product-devices strong {
    color: #071f2b;
    font-size: 13px;
    line-height: 1.2;
}

.demo-product-devices i,
.demo-product-performance i,
.demo-product-dashboard i {
    display: block;
    height: 9px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--demo-accent);
}

.demo-product-devices p {
    grid-column: 1 / -1;
    margin: 0;
    color: #607184;
    font-size: 12px;
    font-weight: 900;
}

.demo-product-chat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 14px;
    padding: 18px;
    background: #eef6f8;
}

.demo-product-chat section,
.demo-product-chat aside {
    padding: 15px;
}

.demo-product-chat p {
    width: fit-content;
    max-width: 88%;
    margin: 0 0 10px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #eef6f8;
    color: #071f2b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.42;
}

.demo-product-chat .is-user {
    margin-left: auto;
    background: var(--demo-accent);
    color: #ffffff;
}

.demo-product-chat aside {
    display: grid;
    gap: 9px;
    align-content: start;
}

.demo-product-chat aside span,
.demo-product-crm aside span {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--demo-soft);
    color: #071f2b;
    font-size: 11px;
    font-weight: 900;
}

.demo-product-score,
.demo-product-booking,
.demo-product-handoff,
.demo-product-crm,
.demo-product-events,
.demo-product-brand,
.demo-product-audit,
.demo-product-performance {
    grid-template-columns: 190px minmax(0, 1fr);
}

.demo-product-score div,
.demo-product-performance div {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 260px;
    background:
        radial-gradient(circle at 50% 50%, var(--demo-soft), transparent 62%),
        #071f2b;
    color: #ffffff;
}

.demo-product-score div strong,
.demo-product-performance div strong {
    color: #ffffff;
    font-size: 72px;
    line-height: 1;
}

.demo-product-score section,
.demo-product-performance section {
    display: grid;
    gap: 10px;
}

.demo-product-score p,
.demo-product-performance p,
.demo-product-table p,
.demo-product-events aside p {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin: 0;
    padding: 13px;
}

.demo-product-score p span,
.demo-product-table p span,
.demo-product-events aside p,
.demo-product-performance p span {
    overflow: hidden;
    color: #071f2b;
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-product-score p strong,
.demo-product-table p strong {
    color: var(--demo-accent);
    font-size: 11px;
    text-transform: uppercase;
}

.demo-product-knowledge {
    padding: 18px;
    background: #eef6f8;
}

.demo-product-search {
    justify-content: flex-start;
    border: 1px solid rgba(19, 56, 69, 0.1);
    background: #ffffff;
    color: #607184;
}

.demo-product-booking section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.demo-product-booking section span {
    min-height: 82px;
    padding: 12px;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
    color: #607184;
    font-size: 11px;
    font-weight: 900;
}

.demo-product-booking section strong {
    display: block;
    margin-top: 8px;
    color: #071f2b;
    font-size: 28px;
}

.demo-product-booking section .is-active {
    border-color: transparent;
    background: var(--demo-accent);
    color: #ffffff;
}

.demo-product-booking section .is-active strong {
    color: #ffffff;
}

.demo-product-booking aside,
.demo-product-handoff section,
.demo-product-handoff aside {
    padding: 16px;
}

.demo-product-booking aside p,
.demo-product-handoff aside p,
.demo-product-crm p {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eef6f8;
    color: #071f2b;
    font-size: 12px;
    font-weight: 850;
}

.demo-product-handoff {
    align-items: center;
}

.demo-product-handoff i {
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--demo-accent), transparent);
}

.demo-product-flow,
.demo-product-sequence,
.demo-product-network,
.demo-product-dashboard,
.demo-product-table,
.demo-product-events,
.demo-product-brand,
.demo-product-audit,
.demo-product-performance,
.demo-product-content,
.demo-product-roadmap {
    padding: 18px;
    background: #eef6f8;
}

.demo-product-flow {
    gap: 10px;
}

.demo-product-flow article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 13px;
}

.demo-product-flow article > span,
.demo-product-network span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--demo-accent);
    color: #ffffff;
}

.demo-product-sequence {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.demo-product-sequence article {
    min-height: 188px;
}

.demo-product-crm aside {
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 16px;
}

.demo-product-kanban {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
    background: #eef6f8;
}

.demo-product-kanban section {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 14px;
}

.demo-product-kanban article {
    min-height: 62px;
    padding: 12px;
    border-radius: 8px;
    background: var(--demo-soft);
    color: #071f2b;
    font-size: 12px;
    font-weight: 900;
}

.demo-product-network {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.demo-product-network::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 42px;
    left: 42px;
    height: 2px;
    background: var(--demo-accent);
}

.demo-product-network article {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    justify-items: center;
    min-height: 150px;
    padding: 16px;
    text-align: center;
}

.demo-product-dashboard {
    display: grid;
    gap: 12px;
}

.demo-product-dashboard section,
.demo-product-events section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.demo-product-dashboard section article,
.demo-product-events section article {
    padding: 15px;
}

.demo-product-dashboard section strong,
.demo-product-events section strong {
    color: var(--demo-accent);
    font-size: 26px;
    line-height: 1;
}

.demo-product-dashboard div {
    display: grid;
    gap: 9px;
    padding: 14px;
}

.demo-product-dashboard p,
.demo-product-performance p {
    display: grid;
    grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0;
}

.demo-product-dashboard p i,
.demo-product-performance p i {
    width: var(--bar);
    max-width: 100%;
}

.demo-product-dashboard aside {
    padding: 13px;
    color: #607184;
    font-size: 12px;
    font-weight: 900;
}

.demo-product-table {
    display: grid;
    gap: 1px;
}

.demo-product-table div,
.demo-product-table p {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 82px minmax(120px, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 48px;
    padding: 0 13px;
    background: #ffffff;
}

.demo-product-table div {
    background: #071f2b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-product-events {
    gap: 12px;
}

.demo-product-events aside {
    padding: 14px;
}

.demo-product-events aside p span {
    color: var(--demo-accent);
    margin-right: 9px;
}

.demo-product-brand section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.demo-product-brand section i {
    min-height: 112px;
    border-radius: 8px;
    background: var(--demo-accent);
}

.demo-product-brand section i:nth-child(2) {
    background: #071f2b;
}

.demo-product-brand section i:nth-child(3) {
    background: #ffffff;
    border: 1px solid rgba(19, 56, 69, 0.12);
}

.demo-product-brand section i:nth-child(4) {
    background: linear-gradient(135deg, var(--demo-accent), #071f2b);
}

.demo-product-brand aside,
.demo-product-audit aside,
.demo-product-performance section {
    padding: 16px;
}

.demo-product-brand aside strong {
    font-size: 36px;
}

.demo-product-brand aside p,
.demo-product-audit aside p {
    margin: 10px 0 0;
    color: #607184;
    font-size: 12px;
    font-weight: 900;
}

.demo-product-audit section {
    position: relative;
    min-height: 260px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(19, 56, 69, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, rgba(19, 56, 69, 0.07) 1px, transparent 1px),
        #ffffff;
    background-size: 44px 44px;
}

.demo-product-audit section i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 42px;
    height: 42px;
    border: 9px solid color-mix(in srgb, var(--demo-accent) 34%, transparent);
    border-top-color: var(--demo-accent);
    border-radius: 50%;
}

.demo-product-performance section {
    display: grid;
    gap: 13px;
}

.demo-product-performance p {
    padding: 0;
    border: 0;
    background: transparent;
}

.demo-product-content,
.demo-product-roadmap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.demo-product-content article,
.demo-product-roadmap article {
    min-height: 170px;
}

.demo-product-site-command,
.demo-product-landing-funnel,
.demo-product-seo-map,
.demo-product-copy-editor,
.demo-product-device-lab {
    width: min(840px, 100%);
}

.demo-product-modebar,
.demo-offer-toggle,
.demo-responsive-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.demo-product-modebar button,
.demo-offer-toggle button,
.demo-responsive-tabs button,
.demo-landing-copy button,
.demo-ai-main button {
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0 13px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-product-modebar button.is-active,
.demo-offer-toggle button.is-active,
.demo-responsive-tabs button.is-active {
    border-color: transparent;
    background: var(--demo-accent);
    color: #ffffff;
}

.demo-product-ai-blueprint {
    display: grid;
    gap: 14px;
    padding: 18px;
    background:
        radial-gradient(circle at 78% 8%, rgba(148, 163, 184, 0.24), transparent 32%),
        radial-gradient(circle at 18% 18%, rgba(8, 215, 247, 0.28), transparent 34%),
        linear-gradient(135deg, #111111 0%, #222222 52%, #151515 100%);
    color: #ffffff;
}

.demo-product-ai-blueprint.is-light {
    background:
        radial-gradient(circle at 78% 8%, rgba(148, 163, 184, 0.16), transparent 32%),
        radial-gradient(circle at 18% 18%, rgba(8, 215, 247, 0.2), transparent 34%),
        #f5fbff;
    color: #071f2b;
}

.demo-ai-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(220px, 0.78fr);
    gap: 14px;
}

.demo-ai-main,
.demo-ai-widget,
.demo-ai-chart,
.demo-ai-signals article {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px) saturate(1.25);
}

.demo-product-ai-blueprint.is-light :is(.demo-ai-main, .demo-ai-widget, .demo-ai-chart, .demo-ai-signals article) {
    border-color: rgba(19, 56, 69, 0.1);
    background: rgba(255, 255, 255, 0.8);
    color: #071f2b;
    box-shadow: 0 18px 40px rgba(19, 56, 69, 0.1);
}

.demo-ai-main {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 318px;
    padding: 24px;
    overflow: hidden;
}

.demo-ai-main::before {
    content: "";
    position: absolute;
    top: 24px;
    right: 24px;
    width: 132px;
    height: 132px;
    border: 18px solid rgba(8, 215, 247, 0.16);
    border-top-color: var(--demo-accent);
    border-radius: 50%;
    box-shadow: 0 0 34px rgba(8, 215, 247, 0.28);
}

.demo-product-ai-blueprint.is-pulsing .demo-ai-main::before {
    animation: demoAiSpin 700ms ease both;
}

@keyframes demoAiSpin {
    to {
        transform: rotate(180deg) scale(1.06);
    }
}

.demo-ai-main > * {
    position: relative;
    z-index: 1;
}

.demo-ai-main span,
.demo-ai-widget span,
.demo-seo-score span,
.demo-seo-compare span,
.demo-seo-structure span,
.demo-landing-copy span,
.demo-landing-proof span,
.demo-offer-tiers span,
.demo-offer-calculator span,
.demo-responsive-tabs button,
.demo-responsive-stage aside span {
    color: var(--demo-accent);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-ai-main strong {
    display: block;
    max-width: 430px;
    margin-top: 12px;
    font-size: 38px;
    font-weight: 900;
    line-height: 0.98;
}

.demo-ai-main p,
.demo-landing-copy p,
.demo-seo-compare p,
.demo-offer-tiers p,
.demo-responsive-stage aside p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.48;
}

.demo-product-ai-blueprint.is-light :is(.demo-ai-main p, .demo-ai-widget p) {
    color: #607184;
}

.demo-ai-main div {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    margin-top: 20px;
}

.demo-ai-main button,
.demo-landing-copy button {
    border-color: transparent;
    background: linear-gradient(135deg, #30343a, #08d7f7);
    color: #ffffff;
    box-shadow: 0 16px 28px rgba(8, 215, 247, 0.22);
}

.demo-ai-main em,
.demo-landing-copy em {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.demo-product-ai-blueprint.is-light .demo-ai-main em {
    color: #607184;
}

.demo-ai-widget {
    align-self: start;
    padding: 16px;
    transform: translateY(22px);
}

.demo-ai-widget p {
    width: fit-content;
    max-width: 92%;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.38;
}

.demo-ai-widget .is-user {
    margin-left: auto;
    background: var(--demo-accent);
    color: #04131f;
}

.demo-ai-chart {
    display: flex;
    align-items: end;
    gap: 11px;
    min-height: 168px;
    padding: 16px;
}

.demo-ai-chart i {
    position: relative;
    flex: 1;
    min-width: 0;
    height: var(--h);
    min-height: 42px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #94a3b8, var(--demo-accent));
    box-shadow: 0 0 24px rgba(8, 215, 247, 0.22);
}

.demo-ai-chart span {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 8px);
    max-width: 72px;
    transform: translateX(50%);
    color: rgba(255, 255, 255, 0.72);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.demo-product-ai-blueprint.is-light .demo-ai-chart span {
    color: #607184;
}

.demo-ai-signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.demo-ai-signals article {
    padding: 13px;
}

.demo-ai-signals strong {
    display: block;
    color: var(--demo-accent);
    font-size: 23px;
    font-weight: 900;
}

.demo-ai-signals span {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-product-ai-blueprint.is-light .demo-ai-signals span {
    color: #607184;
}

.demo-product-landing-hero,
.demo-product-seo-lab,
.demo-product-offer-pricing,
.demo-product-responsive-lab {
    display: grid;
    gap: 14px;
    padding: 18px;
    background:
        radial-gradient(circle at 90% 10%, var(--demo-soft), transparent 34%),
        #eef6f8;
}

.demo-landing-canvas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.82fr);
    gap: 16px;
    min-height: 340px;
    padding: 24px;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 28%, rgba(148, 163, 184, 0.2), transparent 32%),
        linear-gradient(135deg, #fff 0%, #edf7fb 100%);
}

.demo-landing-copy {
    display: grid;
    align-content: center;
}

.demo-landing-copy strong {
    display: block;
    max-width: 430px;
    margin-top: 12px;
    color: #071f2b;
    font-size: 40px;
    font-weight: 900;
    line-height: 0.98;
}

.demo-landing-copy p {
    color: #607184;
}

.demo-landing-copy div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
}

.demo-landing-copy em {
    color: #607184;
}

.demo-landing-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 280px;
}

.demo-landing-visual i {
    position: absolute;
    width: min(260px, 82%);
    aspect-ratio: 1;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.24)),
        linear-gradient(135deg, #30343a, #08d7f7);
    box-shadow: 0 32px 70px rgba(47, 52, 59, 0.28);
    transform: rotate(-8deg) skewY(-4deg);
}

.demo-landing-visual strong {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 68px;
    font-weight: 900;
    text-shadow: 0 18px 28px rgba(0, 0, 0, 0.16);
}

.demo-landing-visual span {
    position: absolute;
    right: 6%;
    bottom: 18%;
    z-index: 2;
    width: 128px;
    height: 52px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(19, 56, 69, 0.16);
}

.demo-product-landing-hero.is-case-open .demo-landing-visual i {
    transform: rotate(-4deg) skewY(-2deg) scale(1.04);
}

.demo-landing-proof,
.demo-offer-tiers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.demo-landing-proof article,
.demo-offer-tiers article,
.demo-seo-score,
.demo-seo-structure article,
.demo-responsive-stage aside {
    min-width: 0;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.demo-landing-proof article,
.demo-offer-tiers article {
    padding: 15px;
}

.demo-landing-proof strong,
.demo-offer-tiers strong,
.demo-responsive-stage aside strong {
    display: block;
    margin-top: 7px;
    color: #071f2b;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
}

.demo-landing-proof small {
    display: block;
    margin-top: 8px;
    color: #607184;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.demo-product-seo-lab {
    grid-template-columns: 170px minmax(0, 1fr);
}

.demo-seo-score {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 190px;
    padding: 18px;
    text-align: center;
}

.demo-seo-score strong {
    display: block;
    margin-top: 10px;
    color: #071f2b;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.demo-seo-score b {
    color: var(--demo-accent);
    font-size: 58px;
}

.demo-seo-score small {
    margin-top: 8px;
}

.demo-seo-compare {
    position: relative;
    min-height: 190px;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.demo-seo-before,
.demo-seo-after {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    padding: 24px;
}

.demo-seo-before {
    background:
        repeating-linear-gradient(135deg, rgba(255, 95, 109, 0.12) 0 10px, transparent 10px 20px),
        #fff7f7;
}

.demo-seo-after {
    clip-path: inset(0 calc(100% - var(--split)) 0 0);
    background:
        linear-gradient(90deg, rgba(54, 179, 126, 0.16), rgba(255, 255, 255, 0.92)),
        #f8fffb;
}

.demo-seo-compare strong {
    margin-top: 8px;
    color: #071f2b;
    font-size: 24px;
    font-weight: 900;
}

.demo-seo-compare p {
    max-width: 300px;
    color: #607184;
}

.demo-seo-compare i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 3px;
    background: var(--demo-accent);
    box-shadow: 0 0 18px rgba(54, 179, 126, 0.48);
}

.demo-product-seo-lab input[type="range"] {
    grid-column: 2;
    width: 100%;
    accent-color: var(--demo-accent);
}

.demo-seo-structure {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.demo-seo-structure article {
    min-height: 98px;
    padding: 14px;
}

.demo-seo-structure article.is-root {
    background: linear-gradient(135deg, rgba(54, 179, 126, 0.14), #ffffff);
}

.demo-seo-structure strong {
    display: block;
    margin-top: 7px;
    color: #071f2b;
    font-size: 14px;
    font-weight: 900;
}

.demo-product-offer-pricing {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 201, 96, 0.2), transparent 36%),
        #f7f9fb;
}

.demo-offer-toggle {
    justify-content: center;
}

.demo-offer-toggle button {
    border-color: rgba(19, 56, 69, 0.12);
    background: #ffffff;
    color: #607184;
}

.demo-offer-tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.demo-offer-tiers article {
    position: relative;
    min-height: 214px;
}

.demo-offer-tiers article.is-featured {
    border-color: rgba(255, 201, 96, 0.72);
    box-shadow:
        0 0 0 1px rgba(255, 201, 96, 0.22),
        0 20px 48px rgba(255, 201, 96, 0.18);
    transform: translateY(-8px);
}

.demo-offer-tiers em {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--demo-accent);
    color: #071f2b;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

.demo-offer-tiers strong {
    margin-top: 12px;
    color: #071f2b;
    font-size: 30px;
}

.demo-offer-tiers p {
    color: #607184;
}

.demo-offer-calculator {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(19, 56, 69, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.demo-offer-calculator label {
    display: grid;
    gap: 9px;
}

.demo-offer-calculator input {
    width: 100%;
    accent-color: var(--demo-accent);
}

.demo-offer-calculator strong {
    color: #071f2b;
    font-size: 18px;
    font-weight: 900;
}

.demo-product-responsive-lab {
    background:
        radial-gradient(circle at 78% 10%, rgba(45, 116, 255, 0.18), transparent 35%),
        #eef6f8;
}

.demo-responsive-tabs {
    justify-content: center;
}

.demo-responsive-tabs button {
    border-color: rgba(19, 56, 69, 0.12);
    background: #ffffff;
    color: #607184;
}

.demo-responsive-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 14px;
    align-items: center;
}

.demo-responsive-device {
    display: grid;
    place-items: center;
    min-height: 336px;
    padding: 24px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
        #dce9f3;
}

.demo-responsive-device > div {
    width: min(520px, 100%);
    min-height: 246px;
    padding: 18px;
    border: 12px solid #071f2b;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 54px rgba(19, 56, 69, 0.18);
    transition: width 180ms ease, min-height 180ms ease, border-width 180ms ease;
}

.demo-product-responsive-lab.is-tablet .demo-responsive-device > div {
    width: min(330px, 78%);
    min-height: 260px;
    border-width: 10px;
}

.demo-product-responsive-lab.is-mobile .demo-responsive-device > div {
    width: min(190px, 58%);
    min-height: 310px;
    border-width: 8px;
}

.demo-responsive-device strong {
    color: #071f2b;
    font-size: 22px;
    font-weight: 900;
}

.demo-responsive-device p {
    margin: 10px 0 0;
    color: #607184;
    font-size: 12px;
    font-weight: 800;
}

.demo-responsive-device i {
    display: block;
    height: 16px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--demo-accent), rgba(45, 116, 255, 0.24));
}

.demo-responsive-device i:nth-of-type(2) {
    width: 68%;
}

.demo-responsive-device i:nth-of-type(3) {
    width: 42%;
}

.demo-responsive-stage aside {
    padding: 16px;
}

.demo-responsive-stage aside strong {
    font-size: 18px;
}

.demo-responsive-stage aside p {
    color: #607184;
}

.service-demo-card[class*="service-demo-product-"] .service-demo-preview {
    align-content: start;
    min-height: 0;
    place-items: start center;
}

.service-demo-card[class*="service-demo-product-"] .demo-product-shell {
    align-self: start;
}

@media (max-width: 920px) {
    .service-demo-card {
        grid-template-columns: 1fr;
    }

.demo-site-hero,
    .demo-site-lower {
        grid-template-columns: 1fr;
    }

.demo-site-lead {
        width: 100%;
    }

.demo-growth-shell {
        grid-template-columns: 1fr;
    }

.demo-product-top {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

.demo-product-top nav {
        justify-content: flex-start;
    }

.demo-product-body-split,
    .demo-product-editor,
    .demo-product-chat,
    .demo-product-score,
    .demo-product-booking,
    .demo-product-handoff,
    .demo-product-crm,
    .demo-product-events,
    .demo-product-brand,
    .demo-product-audit,
    .demo-product-performance {
        grid-template-columns: 1fr;
    }

.demo-product-sequence,
    .demo-product-network,
    .demo-product-content,
    .demo-product-roadmap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.demo-product-devices {
        grid-template-columns: minmax(0, 1fr) minmax(104px, 0.52fr) minmax(70px, 0.32fr);
    }

.demo-product-handoff i {
        width: 2px;
        height: 42px;
        margin: 0 auto;
        background: linear-gradient(180deg, transparent, var(--demo-accent), transparent);
    }

.demo-ai-dashboard,
    .demo-landing-canvas,
    .demo-product-seo-lab,
    .demo-responsive-stage {
        grid-template-columns: 1fr;
    }

.demo-ai-widget {
        transform: none;
    }

.demo-product-seo-lab input[type="range"] {
        grid-column: 1;
    }

.demo-ai-signals,
    .demo-landing-proof,
    .demo-seo-structure {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .service-demo-stats,
    .demo-site-proof,
    .demo-site-services,
    .demo-chat-side,
    .demo-growth-checklist {
        grid-template-columns: 1fr;
    }

.demo-site-top {
        grid-template-columns: 1fr auto;
    }

.demo-site-top nav {
        display: none;
    }

.demo-site-hero {
        padding: 22px;
    }

.demo-site-copy h4 {
        font-size: 30px;
        line-height: 1.04;
    }

.demo-site-hero figure,
    .demo-site-hero img {
        min-height: 230px;
    }

.service-demo-card[class*="service-demo-product-"] .service-demo-preview {
        padding: 12px;
        place-items: start stretch;
    }

.demo-product-shell {
        width: 100%;
    }

.demo-product-top,
    .demo-product-footer {
        grid-template-columns: 1fr;
    }

.demo-product-top strong {
        white-space: normal;
    }

.demo-product-footer button {
        justify-content: center;
        width: 100%;
    }

.demo-product-page {
        min-height: 220px;
        padding: 18px;
    }

.demo-product-page strong {
        font-size: 26px;
    }

.demo-product-map,
    .demo-product-booking section,
    .demo-product-kanban,
    .demo-product-dashboard section,
    .demo-product-events section,
    .demo-product-sequence,
    .demo-product-network,
    .demo-product-content,
    .demo-product-roadmap {
        grid-template-columns: 1fr;
    }

.demo-product-network::before {
        content: none;
    }

.demo-product-table {
        overflow-x: auto;
    }

.demo-product-table div,
    .demo-product-table p {
        min-width: 520px;
    }

.demo-product-devices {
        grid-template-columns: 1fr;
    }

.demo-product-devices .device,
    .demo-product-devices .tablet,
    .demo-product-devices .phone {
        min-height: 150px;
        border-width: 6px;
    }

.demo-product-ai-blueprint,
    .demo-product-landing-hero,
    .demo-product-seo-lab,
    .demo-product-offer-pricing,
    .demo-product-responsive-lab {
        padding: 12px;
    }

.demo-ai-main,
    .demo-landing-canvas,
    .demo-responsive-device {
        min-height: auto;
        padding: 18px;
    }

.demo-ai-main strong,
    .demo-landing-copy strong {
        font-size: 28px;
        line-height: 1.04;
    }

.demo-ai-main::before {
        width: 92px;
        height: 92px;
        border-width: 12px;
    }

.demo-ai-chart {
        min-height: 140px;
    }

.demo-ai-signals,
    .demo-landing-proof,
    .demo-seo-structure,
    .demo-offer-tiers,
    .demo-offer-calculator {
        grid-template-columns: 1fr;
    }

.demo-seo-score,
    .demo-seo-compare {
        min-height: 160px;
    }

.demo-seo-before,
    .demo-seo-after {
        padding: 18px;
    }

.demo-seo-compare strong {
        font-size: 20px;
    }

.demo-offer-tiers article.is-featured {
        transform: none;
    }

.demo-responsive-device > div,
    .demo-product-responsive-lab.is-tablet .demo-responsive-device > div,
    .demo-product-responsive-lab.is-mobile .demo-responsive-device > div {
        width: 100%;
        min-height: 210px;
        border-width: 8px;
    }

.demo-chat-header {
        grid-template-columns: 42px minmax(0, 1fr);
    }

.demo-chat-header em {
        grid-column: 1 / -1;
        justify-self: start;
    }

.demo-chat-input,
    .demo-dashboard-chart div {
        grid-template-columns: 1fr;
    }

.demo-flow-head,
    .demo-dashboard-head {
        align-items: stretch;
        flex-direction: column;
    }

.demo-dashboard-tabs {
        justify-content: flex-start;
    }
}

.service-detail-card,
.service-benefit,
.service-process-step,
.service-insight-card,
.service-faq,
.service-case-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
}

.service-detail-card {
    position: relative;
    min-height: 185px;
    padding: 28px 28px 28px 58px;
}

.service-check {
    position: absolute;
    top: 34px;
    left: 28px;
    width: 14px;
    height: 14px;
}

.service-check::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
}

.service-detail-card h3,
.service-benefit strong,
.service-process-step h3,
.service-insight-card h3,
.service-faq summary {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}

.service-detail-card p,
.service-benefit p,
.service-process-step p,
.service-insight-card p,
.service-faq p,
.service-case-panel p {
    margin: 16px 0 0;
    color: #5a6680;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
}

.service-case-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
    gap: 54px;
}

.service-case-inner .section-kicker {
    color: var(--brand);
}

.service-case-inner p {
    margin-right: 0;
    margin-left: 0;
}

.service-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.service-tool-row span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #e4f5f8;
    color: var(--brand-deep);
    font-size: 13px;
    font-weight: 900;
}

.service-case-panel {
    min-height: 292px;
    padding: 30px;
    background:
        linear-gradient(145deg, rgba(129, 211, 223, 0.26), rgba(242, 251, 252, 0.9)),
        var(--white);
}

.service-case-panel span {
    color: var(--brand);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.service-case-panel strong {
    display: block;
    margin-top: 32px;
    color: transparent;
    -webkit-text-stroke: 2px var(--brand);
    font-size: 92px;
    font-weight: 900;
    line-height: 0.9;
}

.service-process-grid,
.service-benefit-grid,
.service-insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.service-process-step {
    min-height: 250px;
    padding: 24px;
}

.service-process-step span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: #e7f7fa;
    color: var(--brand-deep);
    font-size: 15px;
    font-weight: 900;
}

.service-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-benefit {
    padding: 28px;
}

.service-insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-insight-card {
    overflow: hidden;
}

.service-insight-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    background: var(--cream-deep);
}

.service-insight-card div {
    padding: 22px;
}

.service-insight-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.service-faq-inner {
    max-width: 980px;
}

.service-faq-list {
    display: grid;
    gap: 12px;
}

.service-faq {
    padding: 0;
}

.service-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 72px;
    padding: 20px 24px;
    cursor: pointer;
}

.service-faq summary::after {
    content: "+";
    color: var(--brand);
    font-size: 26px;
    line-height: 1;
}

.service-faq[open] summary::after {
    content: "-";
}

.service-faq p {
    margin: 0;
    padding: 0 24px 24px;
}

.service-cta-band {
    padding: 72px 0;
    background: #f2fbfc;
    border-top: 1px solid var(--line);
}

.service-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.technology-detail-page .service-hero {
    background:
        radial-gradient(circle at 76% 24%, rgba(129, 211, 223, 0.34), transparent 34%),
        linear-gradient(155deg, #103249 0%, #11778b 52%, #1eb9b8 100%);
}

.technology-detail-page .service-hero::before {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow:
        0 0 0 32px rgba(63, 145, 166, 0.58),
        0 0 0 66px rgba(129, 211, 223, 0.5);
}

.technology-detail-page .service-hero::after {
    border-color: rgba(184, 237, 241, 0.82);
    box-shadow: 0 0 0 18px rgba(63, 145, 166, 0.4);
}

.technology-hero-art .ring-a {
    border-color: rgba(129, 211, 223, 0.72);
}

.technology-hero-art .ring-b {
    border-color: rgba(63, 145, 166, 0.76);
}

.technology-code-card {
    position: absolute;
    left: 0;
    top: 88px;
    z-index: 3;
    width: min(250px, 48%);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    box-shadow: 0 20px 48px rgba(6, 51, 70, 0.2);
}

.technology-code-card span,
.technology-code-card small {
    display: block;
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.technology-code-card strong {
    display: block;
    margin: 8px 0;
    color: #071f2b;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.technology-code-card small {
    color: #607184;
}

.technology-use-grid {
    background:
        linear-gradient(135deg, rgba(129, 211, 223, 0.2), rgba(242, 251, 252, 0.94)),
        #f8fcfd;
}

.technology-use-card {
    min-height: 190px;
    padding-left: 88px;
}

.technology-card-icon {
    position: absolute;
    top: 28px;
    left: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #e4f5f8;
    color: var(--brand-deep);
    font-size: 13px;
    font-weight: 900;
}

.technology-case-panel {
    background:
        linear-gradient(145deg, rgba(18, 119, 139, 0.14), rgba(231, 247, 250, 0.9)),
        var(--white);
}

.technology-lifecycle-section {
    background: #f6f9fb;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.technology-loop {
    position: relative;
    width: min(620px, 100%);
    height: 310px;
    margin: 0 auto 46px;
}

.technology-loop-circle,
.technology-loop-ribbon,
.technology-loop-node {
    position: absolute;
}

.technology-loop-circle {
    top: 50%;
    width: 240px;
    height: 240px;
    border: 38px solid rgba(129, 211, 223, 0.34);
    border-radius: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(0 18px 28px rgba(19, 56, 69, 0.08));
}

.technology-loop-left {
    left: 74px;
    border-top-color: #0c5b94;
    border-left-color: rgba(184, 237, 241, 0.88);
}

.technology-loop-right {
    right: 74px;
    border-right-color: rgba(170, 229, 235, 0.86);
    border-bottom-color: rgba(63, 145, 166, 0.24);
}

.technology-loop-ribbon {
    left: 50%;
    top: 50%;
    width: 260px;
    height: 48px;
    border: 5px solid rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    background: rgba(184, 237, 241, 0.9);
    transform: translate(-50%, -50%) rotate(-43deg);
    box-shadow: 0 16px 28px rgba(19, 56, 69, 0.08);
}

.technology-loop-node {
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: #0c5b94;
    color: var(--white);
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(12, 91, 148, 0.18);
}

.node-plan {
    top: 38px;
    left: 182px;
}

.node-map {
    top: 72px;
    right: 142px;
    background: var(--brand);
}

.node-build {
    bottom: 48px;
    right: 184px;
    background: var(--accent);
    color: var(--ink);
}

.node-tune {
    bottom: 72px;
    left: 132px;
    background: var(--brand-deep);
}

.mega-column a.is-current-service,
.mega-column a.is-current-technology {
    color: var(--brand);
}

@media (max-width: 1220px) {
    .service-hero-inner {
        width: min(100% - 48px, 1100px);
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 42px;
    }

.service-hero h1 {
        font-size: clamp(42px, 5.5vw, 60px);
    }

.service-hero-copy>p:not(.service-eyebrow) {
        font-size: 20px;
    }

.service-image-shell {
        right: 0;
        width: 380px;
    }

.ring-a {
        right: -24px;
        width: 420px;
        height: 420px;
    }

.ring-b {
        right: -40px;
        width: 390px;
        height: 390px;
    }

.service-image-note {
        right: 165px;
    }

.service-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1500px) {
    .headline-row {
        font-size: 58px;
    }

.hero-visual {
        right: 46px;
        width: min(500px, 40vw);
        height: 470px;
    }

}

@media (max-width: 1220px) {

.header-inner,
    .hero-inner,
    .section-inner {
        width: min(100% - 48px, 1100px);
    }

.nav-list {
        gap: 22px;
    }

.header-actions {
        gap: 16px;
    }

.mega-inner {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 32px;
    }

.mega-columns {
        gap: 24px;
    }

.phone-link {
        display: none;
    }

.hero-inner {
        padding-top: 92px;
    }

.headline-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        font-size: 54px;
        white-space: normal;
    }

.hero-visual {
        top: 86px;
        right: -10px;
        width: 410px;
        height: 430px;
        opacity: 0.9;
    }

.signal-eye {
        width: 280px;
        height: 162px;
    }

.signal-character {
        width: 320px;
        height: 282px;
    }

.guide-arm {
        top: 142px;
        width: 70px;
        height: 62px;
        border-width: 7px;
    }

.guide-base {
        bottom: 34px;
    }

.trusted-clients {
        margin-top: 104px;
    }

.capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    :root {
        --header-offset: 82px;
    }

body.nav-dropdown-open::before {
        display: none;
    }

.site-header {
        height: 72px;
    }

.brand {
        min-width: auto;
    }

.mobile-toggle {
        display: block;
    }

.main-nav {
        position: fixed;
        top: var(--header-offset);
        left: 0;
        display: none;
        width: 100%;
        max-height: calc(100vh - var(--header-offset));
        padding: 18px 24px 26px;
        overflow-y: auto;
        background: var(--white);
        border-top: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

.site-header.nav-open .main-nav {
        display: block;
    }

.nav-list {
        display: grid;
        gap: 0;
    }

.nav-link,
    .nav-button {
        width: 100%;
        justify-content: space-between;
        padding: 14px 0;
    }

.nav-list .nav-link.is-active,
    .nav-list .nav-button.is-active {
        padding: 14px 0;
        border: 0;
        color: var(--brand);
    }

.mega-menu {
        position: static;
        display: none;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

.nav-item.is-open .mega-menu {
        display: block;
    }

.mega-inner {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 8px 0 18px;
    }

.mega-overview {
        min-height: auto;
        padding: 16px;
        border: 1px solid var(--line);
        border-left: 4px solid var(--brand);
        border-radius: 8px;
        background: #eef9fb;
    }

.mega-overview strong {
        margin-top: 8px;
        font-size: 20px;
    }

.mega-overview small {
        margin-top: 8px;
    }

.mega-overview::after {
        display: none;
    }

.mega-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

.mega-column {
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--white);
    }

.mega-column h3 {
        margin-bottom: 10px;
    }

.mega-column a {
        padding: 7px 0;
        font-size: 14px;
    }

.mega-column a::before {
        display: none;
    }

.header-actions {
        display: none;
    }

.hero-section {
        padding-top: 82px;
    }

.hero-inner {
        min-height: calc(100vh - 82px);
        padding-top: 72px;
    }

.eyebrow {
        font-size: 20px;
    }

.headline-row {
        font-size: 44px;
    }

.hero-description {
        width: 450px;
        margin-top: 28px;
        margin-bottom: 42px;
        font-size: 20px;
    }

.hero-actions {
        align-items: stretch;
        flex-direction: column;
        width: min(420px, 100%);
    }

.hero-primary,
    .video-button {
        width: 100%;
        min-width: 0;
    }

.hero-visual {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 500px);
        height: 300px;
        margin: 54px 0 0 auto;
        opacity: 1;
    }

.signal-eye {
        width: 260px;
        height: 150px;
    }

.signal-character {
        width: 300px;
        height: 270px;
    }

.signal-antenna {
        top: -8px;
    }

.guide-arm {
        display: none;
    }

.guide-base {
        bottom: 34px;
    }

.iris {
        width: 84px;
        height: 84px;
    }

.pupil {
        width: 32px;
        height: 32px;
    }

.eye-label {
        bottom: 8px;
    }

.trusted-clients {
        margin-top: 84px;
    }

.client-logos {
        grid-template-columns: repeat(2, minmax(0, max-content));
    }

.stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 24px;
    }

.stat-item:nth-child(2)::after {
        display: none;
    }

.stat-number {
        font-size: 58px;
    }

.story-video-band {
        padding: 82px 0;
    }

.video-story-heading {
        margin-bottom: 34px;
        text-align: left;
    }

.story-video-card {
        border-width: 10px;
        aspect-ratio: 16 / 10;
    }

.video-big-word {
        left: 10%;
    }

.video-caption {
        right: 18px;
        bottom: 18px;
    }

.proof-grid,
    .contact-inner {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

.case-grid {
        grid-template-columns: 1fr;
        width: min(520px, 100%);
    }

.work-band {
        padding: 88px 0;
    }

.work-heading {
        margin-bottom: 38px;
        text-align: left;
    }

.work-heading h2 {
        font-size: 36px;
    }

.work-testimonial {
        margin-top: 68px;
        text-align: left;
    }

.testimonial-controls {
        width: 100%;
        justify-content: center;
    }

.section-heading h2,
    .proof-grid h2,
    .contact-inner h2 {
        font-size: 36px;
    }

.contact-modal {
        padding: 20px;
    }

.contact-panel {
        grid-template-columns: 1fr;
        width: min(100%, 720px);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

.contact-info-card {
        min-height: auto;
        padding: 46px 34px 34px;
    }

.contact-info-card h2 {
        font-size: 40px;
    }

.contact-steps {
        grid-template-columns: 1fr;
        margin-top: 34px;
    }

.contact-proof {
        display: none;
    }

.contact-form-card {
        margin: 0 18px 18px;
        padding: 28px;
    }

.form-footer {
        align-items: stretch;
        flex-direction: column;
    }

.submit-contact {
        width: 100%;
    }

.video-modal {
        padding: 20px;
    }

.modal-panel {
        width: min(100%, 680px);
        padding: 14px;
        border-radius: 18px;
    }

.modal-close {
        top: -18px;
        right: -10px;
        width: 44px;
        height: 44px;
    }

.contact-modal .contact-close {
        top: 12px;
        right: 12px;
    }

.video-frame {
        min-height: 480px;
        border-width: 6px;
        border-radius: 18px;
    }

.video-placeholder {
        padding: 34px 28px 72px;
    }

.network-preview {
        right: -38px;
        top: 128px;
        width: 230px;
        height: 230px;
        opacity: 0.58;
    }

.future-play {
        width: 78px;
        height: 78px;
    }

.fake-player-bar {
        grid-template-columns: 34px auto 1fr auto;
    }

.control-dot,
    .fake-player-bar strong {
        display: none;
    }
}

@media (max-width: 640px) {

.header-inner,
    .hero-inner,
    .section-inner {
        width: calc(100% - 32px);
    }

.brand-mark {
        width: 50px;
        height: 50px;
    }

.brand-name {
        font-size: 22px;
    }

.hero-inner {
        padding-top: 48px;
    }

.headline-row {
        font-size: 36px;
    }

.hero-description {
        width: 100%;
        font-size: 18px;
    }

.hero-visual {
        height: 260px;
        margin-top: 42px;
    }

.signal-eye {
        width: 220px;
        height: 128px;
    }

.signal-character {
        width: 250px;
        height: 235px;
    }

.orbit-one {
        width: 300px;
        height: 300px;
    }

.orbit-two {
        width: 220px;
        height: 220px;
    }

.wave-one,
    .wave-two,
    .guide-base {
        display: none;
    }

.iris {
        width: 72px;
        height: 72px;
    }

.eye-label {
        min-width: 190px;
        padding: 12px 14px;
    }

.eye-label strong {
        font-size: 20px;
    }

.hero-ring-left {
        width: 360px;
        height: 360px;
        left: -250px;
        border-width: 28px;
    }

.hero-ring-right {
        right: -64px;
    }

.trusted-clients {
        margin-top: 72px;
        padding: 18px;
    }

.client-logos {
        grid-template-columns: 1fr;
        gap: 10px;
    }

.signal {
        width: 100%;
        justify-content: center;
    }

.stats-band {
        padding: 52px 0;
    }

.stats-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

.stat-item {
        min-height: 112px;
    }

.stat-item::after {
        top: auto;
        right: 18%;
        bottom: 0;
        left: 18%;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(63, 145, 166, 0.22), transparent);
    }

.stat-item:nth-child(2)::after {
        display: block;
    }

.stat-item:last-child::after {
        display: none;
    }

.stat-number {
        font-size: 56px;
    }

.story-video-band {
        padding: 66px 0;
    }

.video-story-heading h2 {
        font-size: 31px;
    }

.video-story-heading span {
        font-size: 15px;
    }

.story-video-card {
        aspect-ratio: 4 / 3.4;
        border-width: 8px;
    }

.story-video-card img {
        object-position: 62% center;
    }

.video-shape-ring {
        left: 8%;
        bottom: 26%;
        width: 66px;
        height: 66px;
        border-width: 6px;
    }

.video-shape-dot {
        display: none;
    }

.video-shape-signal {
        width: 170px;
        height: 170px;
    }

.video-big-word {
        left: 13%;
        bottom: 22%;
        font-size: 64px;
    }

.story-play {
        width: 62px;
        height: 62px;
    }

.story-play svg {
        width: 25px;
        height: 25px;
    }

.video-caption {
        right: 12px;
        bottom: 12px;
        min-width: 170px;
        padding: 11px 12px;
    }

.capability-grid,
    .mega-columns {
        grid-template-columns: 1fr;
    }

.capability-band,
    .work-band,
    .proof-band,
    .contact-band {
        padding: 72px 0;
    }

.work-heading h2 {
        font-size: 31px;
    }

.case-card {
        gap: 20px;
        min-height: auto;
        padding: 16px;
    }

.case-media {
        min-height: 184px;
    }

.case-title-row {
        grid-template-columns: 1fr 32px;
        gap: 12px;
    }

.case-title-row h3 {
        font-size: 21px;
    }

.work-more-wrap {
        margin-top: 34px;
    }

.work-testimonial {
        margin-top: 54px;
    }

.testimonial-mark {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

.testimonial-stage {
        min-height: 248px;
    }

.testimonial-quote blockquote {
        font-size: 21px;
    }

.testimonial-quote figcaption {
        font-size: 17px;
    }

.testimonial-controls {
        gap: 16px;
    }

.chat-fab {
        width: 54px;
        height: 54px;
    }

.signal-chat-panel {
        right: 14px;
        bottom: 82px;
        width: calc(100vw - 28px);
        height: min(580px, calc(100dvh - 108px));
    }

.signal-chat-header {
        grid-template-columns: 34px 44px minmax(0, 1fr) 34px;
        min-height: 70px;
        padding: 12px 14px;
    }

.signal-chat-avatar {
        width: 44px;
        height: 44px;
    }

.signal-chat-avatar img {
        width: 33px;
        height: 33px;
    }

.signal-chat-messages {
        padding: 14px;
    }

.signal-chat-bubble {
        max-width: 90%;
    }

.contact-modal {
        padding: 14px;
    }

.contact-info-card {
        padding: 38px 22px 26px;
    }

.contact-info-card h2 {
        font-size: 32px;
    }

.contact-info-card p {
        margin-top: 18px;
        font-size: 15px;
    }

.contact-steps div {
        gap: 12px;
    }

.contact-form-card {
        margin: 0 10px 10px;
        padding: 20px;
    }

.phone-field {
        grid-template-columns: 1fr;
        gap: 10px;
    }

.phone-field select,
    .country-code-trigger,
    .phone-field input {
        border-radius: 4px;
        border-right: 1px solid rgba(19, 56, 69, 0.22);
    }

.country-code-menu {
        width: 100%;
    }

.video-modal {
        padding: 16px;
    }

.modal-panel {
        padding: 10px;
    }

.video-frame {
        min-height: 430px;
    }

.video-placeholder {
        padding: 28px 20px 68px;
    }

.placeholder-brand {
        top: 18px;
        left: 18px;
    }

.video-copy {
        margin-top: 38px;
    }

.video-copy h2 {
        font-size: 34px;
    }

.video-copy p {
        font-size: 15px;
    }

.network-preview {
        top: 166px;
        right: -70px;
        width: 210px;
        height: 210px;
    }

.video-side-actions {
        display: none;
    }
}

@media (max-width: 920px) {
    .service-hero {
        min-height: auto;
        padding: calc(var(--header-offset) + 52px) 0 64px;
    }

.service-hero::before {
        left: -250px;
        width: 360px;
        height: 360px;
        border-width: 28px;
    }

.service-hero::after {
        right: -120px;
        width: 210px;
        height: 210px;
    }

.service-hero-inner {
        width: min(100% - 48px, 760px);
        grid-template-columns: 1fr;
        gap: 48px;
    }

.service-hero-copy {
        max-width: none;
    }

.service-hero-actions {
        align-items: stretch;
        flex-direction: column;
        width: min(420px, 100%);
        margin-top: 42px;
    }

.service-hero-primary,
    .service-hero-secondary,
    .service-hero-demo {
        width: 100%;
        min-width: 0;
    }

.service-signal-strip {
        margin-top: 48px;
    }

.service-hero-art {
        min-height: 410px;
    }

.service-image-shell {
        right: 50%;
        width: min(380px, 84vw);
        transform: translateX(50%);
    }

.ring-a,
    .ring-b {
        right: 50%;
        transform: translateX(50%);
    }

.ring-a {
        width: min(420px, 92vw);
        height: min(420px, 92vw);
    }

.ring-b {
        width: min(390px, 86vw);
        height: min(390px, 86vw);
    }

.service-image-note {
        right: calc(50% - 30px);
        bottom: -4px;
        transform: translateX(50%);
    }

.service-anchor-nav {
        justify-content: flex-start;
        gap: 34px;
    }

.service-detail-section,
    .service-demo-section,
    .service-process-section,
    .service-benefit-section,
    .service-insight-section,
    .service-faq-section,
    .service-case-section {
        padding: 72px 0;
    }

.service-detail-grid,
    .service-benefit-grid,
    .service-insight-grid,
    .service-demo-card,
    .service-case-inner {
        grid-template-columns: 1fr;
    }

.service-detail-grid {
        padding: 18px;
    }

.service-case-inner {
        gap: 28px;
    }

.service-case-panel {
        min-height: auto;
    }

.service-demo-card {
        padding: 18px;
    }

.service-demo-preview {
        min-height: 420px;
    }

.demo-growth-shell {
        grid-template-columns: 1fr;
    }

.demo-growth-score {
        min-height: 190px;
    }

.service-insight-card img {
        height: 240px;
    }

.service-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .service-hero-inner {
        width: calc(100% - 32px);
    }

.service-eyebrow {
        font-size: 18px;
    }

.service-hero h1 {
        font-size: 36px;
        line-height: 1.08;
    }

.service-hero-copy>p:not(.service-eyebrow) {
        font-size: 17px;
    }

.service-hero-primary,
    .service-hero-secondary,
    .service-hero-demo {
        min-height: 58px;
    }

.service-demo-copy {
        padding: 20px;
    }

.service-demo-preview {
        min-height: 360px;
        padding: 16px;
    }

.demo-website-grid,
    .demo-metric-grid {
        grid-template-columns: 1fr;
    }

.demo-flow-summary,
    .demo-dashboard-head,
    .demo-dashboard-list p {
        align-items: flex-start;
        flex-direction: column;
    }

.demo-flow-summary span {
        text-align: left;
    }

.service-signal-strip span {
        width: 100%;
        justify-content: center;
    }

.service-hero-art {
        min-height: 330px;
    }

.service-image-shell {
        width: min(292px, 78vw);
    }

.ring-a {
        width: min(330px, 88vw);
        height: min(330px, 88vw);
        border-width: 12px;
    }

.ring-b {
        width: min(310px, 82vw);
        height: min(310px, 82vw);
        border-width: 20px;
    }

.service-image-note {
        min-width: 172px;
    }

.service-image-note strong {
        font-size: 20px;
    }

.service-section-heading {
        margin-bottom: 30px;
        text-align: left;
    }

.service-section-heading p {
        font-size: 18px;
    }

.service-section-heading h2,
    .service-case-inner h2,
    .service-cta-inner h2 {
        font-size: 30px;
    }

.service-section-heading span,
    .service-case-inner p {
        font-size: 16px;
    }

.service-detail-card {
        min-height: auto;
        padding: 24px 22px 24px 50px;
    }

.service-check {
        left: 22px;
    }

.service-process-grid {
        grid-template-columns: 1fr;
    }

.service-insight-card img {
        height: 190px;
    }
}

@media (max-width: 920px) {
    .technology-code-card {
        left: 50%;
        top: 14px;
        width: min(250px, 72vw);
        transform: translateX(-50%);
    }

.technology-loop {
        height: 270px;
        overflow: hidden;
    }

.technology-loop-circle {
        width: 210px;
        height: 210px;
        border-width: 30px;
    }

.technology-loop-left {
        left: calc(50% - 240px);
    }

.technology-loop-right {
        right: calc(50% - 240px);
    }

.node-plan {
        top: 34px;
        left: calc(50% - 112px);
    }

.node-map {
        top: 62px;
        right: calc(50% - 166px);
    }

.node-build {
        right: calc(50% - 122px);
        bottom: 42px;
    }

.node-tune {
        left: calc(50% - 168px);
        bottom: 62px;
    }
}

@media (max-width: 640px) {
    .technology-use-card {
        padding-left: 72px;
    }

.technology-card-icon {
        left: 20px;
        width: 38px;
        height: 38px;
    }

.technology-code-card {
        top: 0;
        padding: 14px;
    }

.technology-code-card strong {
        font-size: 26px;
    }

.technology-loop {
        height: 230px;
        margin-bottom: 32px;
    }

.technology-loop-circle {
        width: 166px;
        height: 166px;
        border-width: 24px;
    }

.technology-loop-left {
        left: calc(50% - 166px);
    }

.technology-loop-right {
        right: calc(50% - 166px);
    }

.technology-loop-ribbon {
        width: 184px;
        height: 40px;
    }

.technology-loop-node {
        min-width: 64px;
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
    }

.node-plan {
        left: calc(50% - 86px);
    }

.node-map {
        right: calc(50% - 124px);
    }

.node-build {
        right: calc(50% - 86px);
    }

.node-tune {
        left: calc(50% - 126px);
    }
}

@media (max-width: 1220px) {
    .footer-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px;
    }

.footer-subscribe-wrap {
        grid-column: span 2;
    }
}

@media (max-width: 920px) {
    .footer-signal-band {
        min-height: 140px;
    }

.footer-main-grid {
        gap: 34px;
    }

.footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

.footer-bottom nav {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .footer-signal-band {
        min-height: 126px;
        padding: 34px 16px;
    }

.footer-signal-band::before {
        right: -56%;
        bottom: -170px;
        width: 540px;
    }

.footer-signal-band::after {
        width: 68%;
    }

.footer-consult-button {
        width: min(100%, 330px);
        min-height: 58px;
        padding: 0 20px;
        font-size: 15px;
    }

.site-footer {
        padding: 48px 0 28px;
    }

.footer-inner {
        gap: 28px;
    }

.footer-main-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

.footer-subscribe-wrap {
        grid-column: auto;
    }

.footer-brand {
        margin-bottom: 24px;
    }

.footer-brand strong {
        font-size: 23px;
    }

.footer-subscribe-field {
        grid-template-columns: 1fr;
    }

.footer-subscribe button {
        width: 100%;
    }

.footer-bottom {
        font-size: 12px;
    }

.footer-bottom nav {
        gap: 14px;
    }
}

/* Our Work page-style refresh */
.work-band {
    position: relative;
    overflow: hidden;
    padding: 0;
    scroll-margin-top: var(--header-offset);
    background: #f2f5fa;
}

.work-band::before,
.work-band::after {
    display: none;
}

.work-hero {
    position: relative;
    min-height: 330px;
    padding: 108px 0 92px;
    overflow: hidden;
    background:
        repeating-radial-gradient(circle at 76% 98%, rgba(45, 119, 185, 0.12) 0 12px, transparent 13px 31px),
        linear-gradient(135deg, #06182d 0%, #082643 42%, #0a396d 100%);
    isolation: isolate;
}

.work-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.04), transparent 42%),
        linear-gradient(90deg, rgba(10, 37, 66, 0.34), transparent 72%);
}

.work-hero-inner {
    display: grid;
    justify-items: center;
    gap: 18px;
    text-align: center;
}

.work-hero-inner h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(46px, 5.4vw, 72px);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: 0;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.work-hero-inner p {
    width: min(650px, 100%);
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}

.work-hero-shape {
    position: absolute;
    pointer-events: none;
}

.work-shape-coral {
    top: -126px;
    left: -108px;
    width: 238px;
    height: 238px;
    border: 31px solid var(--brand);
    border-radius: 50%;
}

.work-shape-gold {
    bottom: -112px;
    left: -186px;
    width: 326px;
    height: 326px;
    border: 40px solid var(--accent);
    border-radius: 50%;
}

.work-shape-aqua {
    bottom: -72px;
    left: -22px;
    width: 184px;
    height: 184px;
    border-radius: 50%;
    background: var(--brand-deep);
}

.work-filter-band {
    padding: 18px 0 20px;
    background: #f4f6fa;
}

.work-filter-inner {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.work-tabs,
.work-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.work-filter-row {
    position: relative;
}

.work-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 21px;
    border: 1px solid rgba(8, 39, 70, 0.16);
    border-radius: 999px;
    background: #ffffff;
    color: #062540;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(8, 36, 71, 0.04);
    transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.work-tabs a:hover,
.work-tabs a:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(63, 145, 166, 0.42);
    color: var(--brand);
}

.work-tabs a.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.work-select {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    padding: 0 16px;
    border: 1px solid rgba(8, 39, 70, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #082746;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.work-select:hover,
.work-select:focus-visible,
.work-select.is-open,
.work-select.has-selection {
    border-color: rgba(63, 145, 166, 0.42);
    background: #f7fdff;
    color: var(--brand-deep);
    box-shadow: 0 10px 22px rgba(8, 36, 71, 0.08);
}

.work-select span {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(63, 145, 166, 0.12);
    color: var(--brand-deep);
    font-size: 10px;
}

.work-select strong {
    min-width: 0;
    overflow: hidden;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-select svg {
    flex: 0 0 auto;
    width: 12px;
    height: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.72;
    transition: transform 160ms ease;
}

.work-select.is-open svg {
    transform: rotate(180deg);
}

.work-filter-control {
    position: relative;
    min-width: 0;
}

.work-filter-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    display: grid;
    gap: 4px;
    width: max-content;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 32px));
    max-height: 300px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid rgba(8, 39, 70, 0.14);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(8, 36, 71, 0.16);
}

.work-filter-menu[hidden] {
    display: none;
}

.work-menu-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #082746;
    font-size: 12px;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
}

.work-menu-option:hover,
.work-menu-option:focus-visible {
    background: #eef9fb;
    color: var(--brand-deep);
}

.work-menu-option.is-active {
    background: var(--brand);
    color: #ffffff;
}

.work-clear {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    color: #0a467b;
    font-size: 12px;
    font-weight: 900;
}

.work-clear.is-active,
.work-clear:hover,
.work-clear:focus-visible {
    color: var(--brand);
}

.work-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: min(620px, 100%);
    margin: 34px auto 0;
    padding: 24px;
    border: 1px solid rgba(8, 39, 70, 0.12);
    border-radius: 8px;
    background: #f7fbfd;
    color: #34536d;
    text-align: center;
}

.work-empty[hidden] {
    display: none;
}

.work-empty strong {
    color: #082746;
    font-size: 17px;
    font-weight: 900;
}

.work-empty span {
    font-size: 13px;
    font-weight: 700;
}

.work-showcase {
    padding: 78px 0 76px;
    background: #ffffff;
}

.work-shell {
    position: relative;
    z-index: 1;
}

.work-heading {
    width: min(920px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.work-heading h2 {
    margin: 0;
    color: #050f1e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 3.7vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

.work-band .case-featured {
    width: min(980px, 100%);
    min-height: 0;
    margin: 0 auto 56px;
    padding: 16px;
    gap: 0;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff4d4 0%, #ffe4da 100%);
    box-shadow: none;
}

.work-band .case-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(8, 36, 71, 0.12);
}

.work-band .case-featured .case-media {
    aspect-ratio: 16 / 4.7;
    min-height: 230px;
    border-radius: 8px;
}

.work-band .case-featured .case-body {
    padding: 18px 14px 2px;
}

.work-band .case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: min(1010px, 100%);
    margin: 0 auto;
}

.work-band .case-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 18px;
    min-height: 440px;
    padding: 16px;
    border: 1px solid rgba(8, 39, 70, 0.18);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.work-band .case-card:hover {
    transform: translateY(-5px);
    border-color: rgba(63, 145, 166, 0.28);
    box-shadow: 0 18px 40px rgba(8, 36, 71, 0.12);
}

.work-band .case-media {
    position: relative;
    aspect-ratio: 16 / 10.5;
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #eaf2f7;
    isolation: isolate;
}

.work-band .case-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 22, 39, 0.04), rgba(4, 22, 39, 0.1)),
        radial-gradient(circle at 16% 16%, rgba(255, 255, 255, 0.52), transparent 24%);
    opacity: 1;
    pointer-events: none;
}

.work-band .case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 36%;
    transform: scale(1.02);
}

.work-band .case-media-featured::before {
    background:
        linear-gradient(90deg, rgba(4, 22, 39, 0.06), rgba(4, 22, 39, 0)),
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(4, 22, 39, 0.2));
}

.case-sweep {
    position: absolute;
    top: 33%;
    right: -28%;
    z-index: 3;
    width: 86%;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 48%, var(--brand-deep) 100%);
    box-shadow: 0 16px 30px rgba(31, 100, 120, 0.18);
    transform: rotate(-14deg);
}

.case-sweep-large {
    top: 38%;
    right: -14%;
    width: 78%;
    height: 42px;
}

.case-signal-dot {
    position: absolute;
    z-index: 4;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 7px rgba(63, 145, 166, 0.14);
}

.case-signal-dot.dot-one {
    top: 22%;
    left: 14%;
}

.case-signal-dot.dot-two {
    right: 12%;
    bottom: 16%;
    background: var(--accent);
    box-shadow: 0 0 0 7px rgba(129, 211, 223, 0.14);
}

.case-signal-dot.dot-three {
    top: 18%;
    right: 24%;
    background: var(--ink-soft);
    box-shadow: 0 0 0 7px rgba(37, 88, 106, 0.14);
}

.case-media-agent {
    background:
        linear-gradient(135deg, rgba(20, 70, 112, 0.92), rgba(39, 174, 189, 0.46)),
        linear-gradient(45deg, #102f52, #f6fbff);
}

.case-media-web {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(208, 244, 249, 0.68)),
        linear-gradient(45deg, #dce9f5, #fff0df);
}

.case-media-data {
    background:
        linear-gradient(135deg, rgba(9, 45, 76, 0.88), rgba(86, 197, 207, 0.46)),
        linear-gradient(45deg, #0d2946, #f1f8ff);
}

.case-media-seo {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 237, 205, 0.7)),
        linear-gradient(45deg, #f7fbff, #cbeaf2);
}

.case-media-automation {
    background:
        linear-gradient(135deg, rgba(10, 47, 83, 0.9), rgba(63, 145, 166, 0.24)),
        linear-gradient(45deg, #092746, #eaf7fb);
}

.case-media-commerce {
    background:
        linear-gradient(135deg, rgba(255, 245, 226, 0.92), rgba(213, 243, 248, 0.72)),
        linear-gradient(45deg, #fff8ec, #dceef7);
}

.case-screen,
.case-browser-card,
.case-data-panel,
.case-search-card,
.case-product-card {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(8, 39, 70, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 36px rgba(8, 36, 71, 0.13);
}

.case-screen.screen-main {
    left: 12%;
    top: 20%;
    width: 52%;
    height: 48%;
}

.case-screen.screen-main::before,
.case-browser-card::before,
.case-search-card::before,
.case-product-card::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 18%;
    height: 13px;
    border-radius: 999px;
    background: var(--accent);
}

.case-screen.screen-main::after,
.case-browser-card::after,
.case-search-card::after,
.case-product-card::after {
    content: "";
    position: absolute;
    left: 14%;
    bottom: 18%;
    width: 48%;
    height: 35%;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(63, 145, 166, 0.78), rgba(129, 211, 223, 0.42));
}

.case-screen.screen-side {
    right: 11%;
    bottom: 14%;
    width: 34%;
    height: 38%;
}

.case-browser-card {
    left: 10%;
    top: 18%;
    width: 60%;
    height: 48%;
}

.case-browser-card.small {
    right: 10%;
    bottom: 14%;
    left: auto;
    top: auto;
    width: 38%;
    height: 36%;
}

.case-data-panel {
    left: 11%;
    top: 16%;
    width: 48%;
    height: 58%;
}

.case-data-panel::before,
.case-data-panel::after {
    content: "";
    position: absolute;
    left: 16%;
    height: 12px;
    border-radius: 999px;
    background: var(--accent);
}

.case-data-panel::before {
    right: 16%;
    top: 24%;
}

.case-data-panel::after {
    width: 46%;
    top: 47%;
}

.case-metric-ring {
    position: absolute;
    right: 12%;
    top: 22%;
    z-index: 2;
    width: 92px;
    height: 92px;
    border: 16px solid rgba(63, 145, 166, 0.88);
    border-right-color: rgba(129, 211, 223, 0.42);
    border-radius: 50%;
}

.case-search-card {
    left: 12%;
    top: 20%;
    width: 62%;
    height: 52%;
}

.case-rank-pill,
.case-cart-pill {
    position: absolute;
    right: 12%;
    bottom: 16%;
    z-index: 4;
    display: inline-grid;
    place-items: center;
    min-width: 62px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #082746;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.case-flow-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 34px rgba(8, 36, 71, 0.16);
}

.case-flow-node::after {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
}

.case-flow-node.node-left {
    left: 10%;
    top: 42%;
}

.case-flow-node.node-center {
    left: 38%;
    top: 24%;
}

.case-flow-node.node-center::after {
    background: var(--accent);
}

.case-flow-node.node-right {
    right: 10%;
    top: 42%;
}

.case-flow-node.node-right::after {
    background: var(--ink-soft);
}

.case-product-card {
    left: 12%;
    top: 18%;
    width: 55%;
    height: 58%;
}

.case-cart-pill {
    background: var(--brand);
}

.work-band .case-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-content: start;
    gap: 16px;
}

.work-band .case-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 31px;
    gap: 14px;
    align-items: start;
}

.work-band .case-title-row h3 {
    margin: 0;
    color: #082746;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.18;
}

.work-band .case-featured .case-title-row h3 {
    font-size: 19px;
    line-height: 1.3;
}

.work-band .case-open {
    width: 27px;
    height: 27px;
    border-color: rgba(8, 39, 70, 0.34);
    border-radius: 4px;
    color: #082746;
}

.work-band .case-open:hover,
.work-band .case-open:focus-visible {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.work-band .case-open svg {
    width: 17px;
    height: 17px;
}

.work-band .case-body p {
    margin: 0;
    color: #34536d;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.58;
}

.work-band .case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.work-band .case-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f3f7fb;
    color: #0b3a61;
    font-size: 10px;
    font-weight: 900;
}

.work-band .case-featured .case-tags span:last-child {
    border: 1px solid rgba(63, 145, 166, 0.34);
    background: #eef9fb;
    color: var(--brand-deep);
}

.work-more-wrap {
    display: grid;
    justify-items: center;
    gap: 18px;
    margin-top: 42px;
}

.work-more-button {
    min-height: 42px;
    padding: 0 24px;
    border: 1px solid rgba(8, 39, 70, 0.18);
    border-radius: 999px;
    background: #ffffff;
    color: #082746;
    font-size: 13px;
    font-weight: 900;
    box-shadow: none;
}

.work-more-button:hover,
.work-more-button:focus-visible {
    transform: translateY(-2px);
    background: #082746;
    color: #ffffff;
}

.work-show-all {
    color: #0b477b;
    font-size: 13px;
    font-weight: 900;
}

.work-trusted {
    padding: 76px 0 86px;
    background: #ffffff;
    text-align: center;
}

.work-trusted h2 {
    margin: 0;
    color: #050f1e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3.1vw, 40px);
    font-weight: 700;
    line-height: 1.14;
}

.work-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 26px;
    margin-top: 30px;
}

.work-logo-row span {
    color: #24445f;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 950;
    letter-spacing: 0;
    white-space: nowrap;
}

.work-logo-row span:nth-child(1),
.work-logo-row span:nth-child(4) {
    color: var(--brand);
}

.work-logo-row span:nth-child(2) {
    color: #1f6478;
}

.work-logo-row span:nth-child(3) {
    color: #082746;
}

.work-logo-row span:nth-child(5) {
    color: var(--ink-soft);
}

.footer-signal-band {
    min-height: 196px;
    padding: 54px 24px;
    background:
        repeating-radial-gradient(circle at 84% 50%, rgba(45, 119, 185, 0.14) 0 13px, transparent 14px 32px),
        linear-gradient(135deg, #06182d 0%, #082f5c 100%);
}

.footer-signal-band::before {
    right: -5%;
    bottom: -260px;
    width: min(900px, 80vw);
    border-color: rgba(39, 195, 209, 0.07);
    box-shadow:
        0 0 0 22px rgba(39, 195, 209, 0.035),
        0 0 0 58px rgba(45, 119, 185, 0.04),
        0 0 0 96px rgba(45, 119, 185, 0.03),
        0 0 0 142px rgba(39, 195, 209, 0.025);
}

.footer-signal-inner {
    display: grid;
    justify-items: center;
    gap: 28px;
    text-align: center;
}

.footer-signal-inner h2 {
    margin: 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.12;
}

.footer-consult-button {
    min-height: 56px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
    font-size: 14px;
}

.footer-consult-button:hover,
.footer-consult-button:focus-visible {
    background: #2f8197;
    color: #ffffff;
}

@media (max-width: 1100px) {
    .work-band .case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(760px, 100%);
    }

.work-band .case-featured {
        width: min(840px, 100%);
    }
}

@media (max-width: 760px) {
    .work-hero {
        min-height: 0;
        padding: calc(var(--header-offset) + 18px) 0 48px;
    }

.work-hero-inner {
        justify-items: start;
        text-align: left;
        gap: 14px;
    }

.work-hero-inner h2 {
        font-size: 44px;
        line-height: 0.98;
    }

.work-hero-inner p {
        max-width: 36rem;
        font-size: 15px;
        line-height: 1.45;
    }

.work-filter-band {
        padding: 16px 0;
    }

.work-filter-inner {
        justify-items: stretch;
    }

.work-tabs,
    .work-filter-row {
        justify-content: flex-start;
    }

.work-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        overflow: visible;
        padding-bottom: 0;
    }

.work-tabs a {
        min-width: 0;
        min-height: 34px;
        padding: 0 8px;
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.work-showcase {
        padding: 50px 0 58px;
    }

.work-heading {
        margin-bottom: 28px;
        text-align: left;
    }

.work-heading h2 {
        font-size: 30px;
        line-height: 1.08;
    }

.work-band .case-featured {
        margin-bottom: 34px;
        padding: 12px;
    }

.work-band .case-featured .case-media {
        aspect-ratio: 16 / 9;
        min-height: 210px;
    }

.work-band .case-grid {
        grid-template-columns: 1fr;
        width: min(440px, 100%);
        gap: 18px;
    }

.work-band .case-card {
        min-height: auto;
        gap: 16px;
        padding: 12px;
    }

.work-band .case-title-row h3 {
        font-size: 21px;
    }

.work-band .case-body {
        gap: 14px;
    }

.work-trusted {
        padding: 50px 0 58px;
    }

.footer-signal-band {
        min-height: 172px;
        padding: 44px 16px;
    }
}

@media (max-width: 520px) {
    .work-hero {
        min-height: 276px;
        padding: calc(var(--header-offset) + 14px) 0 42px;
    }

.work-hero-inner h2 {
        font-size: 40px;
    }

.work-hero-inner p {
        font-size: 14px;
    }

.work-shape-coral {
        top: -112px;
        left: -126px;
        width: 220px;
        height: 220px;
        border-width: 28px;
    }

.work-shape-gold {
        left: -220px;
        width: 300px;
        height: 300px;
    }

.work-shape-aqua {
        left: -72px;
        width: 150px;
        height: 150px;
    }

.work-tabs a {
        min-height: 32px;
        padding: 0 6px;
        font-size: 11px;
    }

.work-filter-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
        width: 100%;
    }

.work-filter-control,
    .work-select {
        width: 100%;
    }

.work-select {
        justify-content: space-between;
        min-height: 36px;
        padding: 0 12px;
    }

.work-filter-menu {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

.work-clear {
        grid-column: 1 / -1;
        justify-self: start;
        min-height: 28px;
    }

.work-band .case-featured .case-body {
        padding: 14px 4px 0;
    }

.work-band .case-featured .case-media {
        min-height: 0;
    }

.case-sweep {
        height: 22px;
    }

.case-sweep-large {
        height: 32px;
    }

.work-band .case-media {
        aspect-ratio: 16 / 10.5;
    }

.work-band .case-title-row {
        grid-template-columns: minmax(0, 1fr) 28px;
    }

.work-band .case-title-row h3 {
        font-size: 20px;
    }

.work-band .case-body p {
        font-size: 13px;
        line-height: 1.5;
    }

.work-logo-row {
        gap: 14px 18px;
    }

.footer-signal-inner {
        gap: 22px;
    }

.footer-consult-button {
        width: min(100%, 330px);
        min-height: 52px;
        padding: 0 20px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .work-filter-row {
        grid-template-columns: 1fr;
    }

.work-clear {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .work-filter-row {
        display: none;
    }
}

/* Homepage work preview */
.home-work-band {
    position: relative;
    overflow: hidden;
    padding: 118px 0 112px;
    scroll-margin-top: var(--header-offset);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(232, 245, 248, 0.92) 18%, rgba(224, 238, 245, 0.96));
}

.home-work-band::before {
    content: "";
    display: block;
    position: absolute;
    top: 48px;
    right: 9vw;
    width: 116px;
    height: 116px;
    border: 16px solid rgba(63, 145, 166, 0.78);
    border-radius: 50%;
    opacity: 0.62;
}

.home-work-band::after {
    content: "";
    display: block;
    position: absolute;
    top: 92px;
    right: 13vw;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: repeating-linear-gradient(45deg, rgba(129, 211, 223, 0.48) 0 5px, transparent 5px 12px);
    opacity: 0.8;
}

.home-work-band .work-heading {
    width: min(920px, 100%);
    margin: 0 auto 54px;
    text-align: center;
}

.home-work-band .work-heading p {
    margin: 0 0 16px;
    color: var(--brand-deep);
    font-size: 20px;
    font-weight: 900;
}

.home-work-band .work-heading h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-main);
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.08;
}

.home-work-band .case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    width: min(1120px, 100%);
    margin: 0 auto;
}

.home-work-band .case-card {
    display: grid;
    grid-template-rows: none;
    gap: 24px;
    min-height: 532px;
    padding: 22px 22px 24px;
    border: 1px solid rgba(19, 56, 69, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 46px rgba(19, 56, 69, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-work-band .case-card:hover {
    transform: translateY(-6px);
    border-color: rgba(19, 56, 69, 0.09);
    box-shadow: 0 28px 62px rgba(19, 56, 69, 0.13);
}

.home-work-band .case-media {
    position: relative;
    min-height: 218px;
    aspect-ratio: auto;
    border-radius: 8px;
    overflow: hidden;
    background: #e9f7fa;
    isolation: auto;
}

.home-work-band .case-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: auto;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.48;
}

.home-work-band .case-media-agent {
    background:
        radial-gradient(circle at 72% 24%, rgba(129, 211, 223, 0.74), transparent 26%),
        linear-gradient(135deg, #102f3b, #1f6478 48%, #e8fbfd);
}

.home-work-band .case-media-web {
    background:
        linear-gradient(145deg, rgba(232, 251, 253, 0.9), rgba(255, 255, 255, 0.52)),
        linear-gradient(135deg, #d6eff5, #fff7df);
}

.home-work-band .case-media-data {
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 247, 223, 0.9), transparent 28%),
        linear-gradient(135deg, #dff6fa, #f7fcfd 52%, #cfe9ef);
}

.home-work-band .case-body {
    display: grid;
    grid-template-rows: none;
    align-content: normal;
    gap: 20px;
}

.home-work-band .case-title-row {
    display: grid;
    grid-template-columns: 1fr 34px;
    gap: 18px;
    align-items: start;
}

.home-work-band .case-title-row h3 {
    margin: 0;
    color: var(--ink);
    font-size: 23px;
    font-weight: 900;
    line-height: 1.26;
}

.home-work-band .case-open {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(19, 56, 69, 0.26);
    border-radius: 4px;
    color: var(--ink);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.home-work-band .case-open:hover,
.home-work-band .case-open:focus-visible {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.home-work-band .case-open svg {
    width: 18px;
    height: 18px;
}

.home-work-band .case-body p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.58;
}

.home-work-band .case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-self: end;
}

.home-work-band .case-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f1f7f9;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 800;
}

.home-work-band .work-more-wrap {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 48px;
}

.home-work-band .work-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border: 1px solid rgba(19, 56, 69, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: var(--brand-deep);
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 14px 34px rgba(19, 56, 69, 0.08);
    transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.home-work-band .work-more-button:hover,
.home-work-band .work-more-button:focus-visible {
    transform: translateY(-2px);
    background: var(--brand);
    color: #ffffff;
}

@media (max-width: 980px) {
    .home-work-band {
        padding: 88px 0;
    }

.home-work-band .case-grid {
        grid-template-columns: 1fr;
        width: min(520px, 100%);
    }

.home-work-band .work-heading {
        margin-bottom: 38px;
        text-align: left;
    }

.home-work-band .work-heading h2 {
        font-size: 36px;
    }

.home-work-band .work-testimonial {
        margin-top: 68px;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .home-work-band {
        padding: 72px 0;
    }

.home-work-band .work-heading h2 {
        font-size: 31px;
    }

.home-work-band .case-card {
        gap: 20px;
        min-height: auto;
        padding: 16px;
    }

.home-work-band .case-media {
        min-height: 184px;
        aspect-ratio: auto;
    }

.home-work-band .case-title-row {
        grid-template-columns: 1fr 32px;
        gap: 12px;
    }

.home-work-band .case-title-row h3 {
        font-size: 21px;
    }

.home-work-band .work-more-wrap {
        margin-top: 34px;
    }

.home-work-band .work-testimonial {
        margin-top: 54px;
    }
}

/* Industries page */
.industry-page {
    background: #ffffff;
}

.industries-main {
    overflow: hidden;
    background: #ffffff;
}

.industry-hero {
    position: relative;
    padding: calc(var(--header-offset) + 98px) 0 82px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)),
        linear-gradient(135deg, #f7fcfd 0%, #eef9fb 52%, #dff3f7 100%);
}

.industry-hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(63, 145, 166, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63, 145, 166, 0.08) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 74%);
    pointer-events: none;
}

.industry-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: clamp(44px, 6vw, 92px);
    align-items: center;
}

.industry-eyebrow,
.industry-section-heading p,
.industry-dispatch-copy p {
    margin: 0 0 18px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.industry-hero-copy h1 {
    margin: 0;
    max-width: 790px;
    color: #071f2b;
    font-size: clamp(44px, 5.5vw, 78px);
    font-weight: 900;
    line-height: 0.96;
}

.industry-hero-copy>p:not(.industry-eyebrow) {
    max-width: 650px;
    margin: 28px 0 0;
    color: #25586a;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.44;
}

.industry-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 34px;
}

.industry-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border: 1px solid rgba(19, 56, 69, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink);
    font-size: 15px;
    font-weight: 900;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.industry-secondary-link:hover,
.industry-secondary-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--brand);
    background: #ffffff;
}

.industry-hero-visual {
    position: relative;
    min-height: 560px;
    border-radius: 8px;
    overflow: hidden;
    background: #082838;
    box-shadow: 0 28px 70px rgba(8, 40, 56, 0.18);
}

.industry-hero-visual::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    pointer-events: none;
}

.industry-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(8, 40, 56, 0.1), rgba(8, 40, 56, 0.74)),
        linear-gradient(90deg, rgba(8, 40, 56, 0.58), rgba(8, 40, 56, 0));
    pointer-events: none;
}

.industry-hero-visual img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    object-position: 58% center;
}

.industry-command-card,
.industry-route-card {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    box-shadow: 0 18px 40px rgba(8, 40, 56, 0.22);
    backdrop-filter: blur(14px);
}

.industry-command-card {
    left: 34px;
    bottom: 34px;
    width: min(310px, calc(100% - 68px));
    padding: 20px;
}

.industry-route-card {
    right: 34px;
    top: 34px;
    min-width: 168px;
    padding: 16px 18px;
}

.industry-command-card span,
.industry-route-card span {
    color: var(--brand-deep);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.industry-command-card strong,
.industry-route-card strong {
    font-size: 22px;
    line-height: 1.1;
}

.command-metrics {
    display: grid;
    gap: 8px;
    margin-top: 7px;
}

.command-metrics i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), rgba(129, 211, 223, 0.3));
}

.command-metrics i:nth-child(2) {
    width: 72%;
}

.command-metrics i:nth-child(3) {
    width: 46%;
}

.industry-snapshot {
    padding: 28px 0;
    background: #082838;
}

.industry-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    overflow: hidden;
}

.industry-snapshot article {
    min-height: 128px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-align: center;
}

.industry-snapshot strong {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
}

.industry-snapshot span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.industry-grid-section {
    padding: 104px 0 108px;
    background: #ffffff;
}

.industry-section-heading {
    width: min(840px, 100%);
    margin: 0 auto 48px;
    text-align: center;
}

.industry-section-heading h2 {
    margin: 0;
    color: #071f2b;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 900;
    line-height: 1.05;
}

.industry-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.industry-card {
    position: relative;
    min-height: 286px;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 24px;
    border: 1px solid rgba(19, 56, 69, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.96)),
        #ffffff;
    box-shadow: 0 16px 38px rgba(19, 56, 69, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.industry-card:hover {
    transform: translateY(-5px);
    border-color: rgba(63, 145, 166, 0.34);
    box-shadow: 0 24px 52px rgba(19, 56, 69, 0.11);
}

.industry-badge {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #082838;
    color: var(--accent);
    font-size: 14px;
    font-weight: 900;
}

.industry-card h3 {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 23px;
    font-weight: 900;
    line-height: 1.12;
}

.industry-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.55;
}

.industry-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
}

.industry-card div span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef9fb;
    color: var(--brand-deep);
    font-size: 10px;
    font-weight: 900;
}

.industry-dispatch-band {
    padding: 106px 0;
    background:
        repeating-linear-gradient(90deg, rgba(129, 211, 223, 0.05) 0 1px, transparent 1px 52px),
        linear-gradient(135deg, #061822 0%, #082838 56%, #0c3d4f 100%);
    color: #ffffff;
}

.industry-dispatch-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.14fr);
    gap: clamp(40px, 6vw, 92px);
    align-items: center;
}

.industry-dispatch-copy h2 {
    margin: 0;
    max-width: 660px;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 900;
    line-height: 1.02;
}

.industry-dispatch-copy span {
    display: block;
    max-width: 590px;
    margin: 24px 0 32px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.56;
}

.dispatch-console {
    position: relative;
    min-height: 500px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)),
        rgba(255, 255, 255, 0.04);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.dispatch-console-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 0 2px 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.dispatch-console-top strong {
    color: var(--accent);
}

.dispatch-map {
    position: relative;
    min-height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
}

.route-line {
    position: absolute;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--brand), transparent);
    transform-origin: left center;
}

.route-one {
    left: 13%;
    top: 45%;
    width: 62%;
    transform: rotate(-12deg);
}

.route-two {
    left: 24%;
    top: 62%;
    width: 54%;
    transform: rotate(14deg);
}

.route-node {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 9px rgba(129, 211, 223, 0.13);
}

.node-a {
    left: 13%;
    top: 39%;
}

.node-b {
    left: 52%;
    top: 28%;
    background: var(--accent);
}

.node-c {
    right: 16%;
    bottom: 23%;
    background: var(--ink-soft);
}

.dispatch-queue {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.dispatch-queue article {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.dispatch-queue span {
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
}

.dispatch-queue strong {
    font-size: 15px;
}

.dispatch-queue small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.industry-system-band {
    padding: 104px 0;
    background:
        linear-gradient(180deg, #f8fcfd 0%, #eef9fb 100%);
}

.industry-system-inner .industry-section-heading {
    margin-bottom: 38px;
}

.industry-system-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.industry-system-grid article {
    min-height: 250px;
    padding: 24px;
    border: 1px solid rgba(19, 56, 69, 0.12);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(19, 56, 69, 0.06);
}

.industry-system-grid span {
    color: var(--brand);
    font-size: 13px;
    font-weight: 900;
}

.industry-system-grid h3 {
    margin: 18px 0 12px;
    color: var(--ink);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.16;
}

.industry-system-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.58;
}

.industry-contact-band {
    background: #ffffff;
}

@media (max-width: 1180px) {

.industry-card-grid,
    .industry-system-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {

.industry-hero-inner,
    .industry-dispatch-inner {
        grid-template-columns: 1fr;
    }

.industry-hero-visual {
        min-height: 480px;
    }

.industry-hero-visual img {
        min-height: 480px;
    }

.industry-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.industry-section-heading {
        text-align: left;
        margin-inline: 0;
    }
}

@media (max-width: 640px) {
    .industry-hero {
        padding: calc(var(--header-offset) + 62px) 0 64px;
    }

.industry-hero-copy h1 {
        font-size: 40px;
    }

.industry-hero-copy>p:not(.industry-eyebrow) {
        font-size: 17px;
    }

.industry-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

.industry-secondary-link,
    .industry-hero-actions .pill-button {
        width: 100%;
    }

.industry-hero-visual,
    .industry-hero-visual img {
        min-height: 390px;
    }

.industry-command-card {
        left: 18px;
        right: 18px;
        bottom: 18px;
        width: auto;
    }

.industry-route-card {
        top: 18px;
        right: 18px;
    }

.industry-snapshot-grid,
    .industry-card-grid,
    .industry-system-grid {
        grid-template-columns: 1fr;
    }

.industry-grid-section,
    .industry-dispatch-band,
    .industry-system-band {
        padding: 72px 0;
    }

.industry-section-heading h2,
    .industry-dispatch-copy h2 {
        font-size: 32px;
    }

.dispatch-console {
        min-height: auto;
        padding: 16px;
    }

.dispatch-map {
        min-height: 220px;
    }

.dispatch-queue article {
        grid-template-columns: 32px 1fr;
        padding: 12px;
    }

.dispatch-queue small {
        grid-column: 2;
    }
}

/* Site-wide advanced motion */
.motion-ready {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.985);
    filter: blur(8px);
    transition:
        opacity 760ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: calc(var(--motion-order, 0) * 64ms);
    will-change: opacity, transform, filter;
}

.motion-ready.motion-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.hero-copy>.motion-ready,
.industry-hero-copy>.motion-ready,
.service-hero-copy>.motion-ready,
.about-hero-inner>.motion-ready {
    transform: translate3d(-28px, 24px, 0) scale(0.985);
}

.hero-visual.motion-ready,
.industry-hero-visual.motion-ready,
.service-hero-art.motion-ready,
.story-video-card.motion-ready,
.about-video-card.motion-ready {
    transform: translate3d(38px, 24px, 0) scale(0.96);
}

.hero-copy>.motion-ready.motion-revealed,
.industry-hero-copy>.motion-ready.motion-revealed,
.service-hero-copy>.motion-ready.motion-revealed,
.about-hero-inner>.motion-ready.motion-revealed,
.hero-visual.motion-ready.motion-revealed,
.industry-hero-visual.motion-ready.motion-revealed,
.service-hero-art.motion-ready.motion-revealed,
.story-video-card.motion-ready.motion-revealed,
.about-video-card.motion-ready.motion-revealed {
    transform: translate3d(0, 0, 0) scale(1);
}

.method-frame.motion-revealed::after,
.dispatch-console.motion-revealed::after,
.industry-hero-visual.motion-revealed::before {
    animation: softSignalSweep 1800ms cubic-bezier(0.2, 0.8, 0.2, 1) 220ms both;
}

.method-panel.is-active {
    animation: methodPanelEnter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.method-panel.is-active .method-art>* {
    animation: methodArtRise 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.method-panel.is-active .method-art>*:nth-child(2) {
    animation-delay: 90ms;
}

.method-panel.is-active .method-art>*:nth-child(3) {
    animation-delay: 150ms;
}

.method-panel.is-active .method-art>*:nth-child(4) {
    animation-delay: 210ms;
}

.method-panel.is-active .method-art>*:nth-child(5) {
    animation-delay: 270ms;
}

.dispatch-console.motion-revealed .route-line {
    animation: routeSignal 2400ms ease-in-out infinite;
}

.dispatch-console.motion-revealed .route-two {
    animation-delay: 380ms;
}

.industry-card.motion-revealed .industry-badge,
.service-detail-card.motion-revealed .service-check,
.technology-use-card.motion-revealed .technology-card-icon {
    animation: badgePop 680ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.case-card.motion-revealed .case-media,
.industry-card.motion-revealed,
.service-detail-card.motion-revealed,
.technology-use-card.motion-revealed {
    backface-visibility: hidden;
}

.site-header {
    animation: headerEntrance 680ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.top-strip {
    animation: topStripEntrance 680ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.nav-list>li,
.header-actions {
    animation: navItemEntrance 620ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.nav-list>li:nth-child(1) {
    animation-delay: 90ms;
}

.nav-list>li:nth-child(2) {
    animation-delay: 140ms;
}

.nav-list>li:nth-child(3) {
    animation-delay: 190ms;
}

.nav-list>li:nth-child(4) {
    animation-delay: 240ms;
}

.nav-list>li:nth-child(5) {
    animation-delay: 290ms;
}

.nav-list>li:nth-child(6),
.header-actions {
    animation-delay: 340ms;
}

.nav-list .nav-link.is-active,
.nav-list .nav-button.is-active {
    position: relative;
    overflow: hidden;
}

.nav-list .nav-link.is-active::after,
.nav-list .nav-button.is-active::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent, rgba(129, 211, 223, 0.34), transparent);
    opacity: 0;
    transform: translateX(-120%);
    pointer-events: none;
    animation: activeNavSweep 2400ms ease-in-out 900ms infinite;
}

@keyframes headerEntrance {
    from {
        opacity: 0;
        transform: translateY(-18px);
        filter: blur(8px);
    }

to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes topStripEntrance {
    from {
        transform: scaleX(0);
        transform-origin: left center;
    }

to {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

@keyframes navItemEntrance {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes activeNavSweep {

0%,
    38%,
    100% {
        opacity: 0;
        transform: translateX(-120%);
    }

52% {
        opacity: 1;
    }

70% {
        opacity: 0;
        transform: translateX(120%);
    }
}

@keyframes methodPanelEnter {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        filter: blur(8px);
    }

to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes methodArtRise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

to {
        opacity: 1;
    }
}

@keyframes softSignalSweep {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }

45% {
        opacity: 0.9;
    }

to {
        opacity: 0;
        transform: translateX(32px);
    }
}

@keyframes routeSignal {

0%,
    100% {
        opacity: 0.62;
        filter: saturate(0.9);
    }

50% {
        opacity: 1;
        filter: saturate(1.25) drop-shadow(0 0 14px rgba(129, 211, 223, 0.26));
    }
}

@keyframes badgePop {
    0% {
        transform: translateY(8px) scale(0.86);
        opacity: 0;
    }

70% {
        transform: translateY(-2px) scale(1.04);
        opacity: 1;
    }

100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

.motion-ready,
    .site-header,
    .top-strip,
    .nav-list>li,
    .header-actions,
    .nav-list .nav-link.is-active::after,
    .nav-list .nav-button.is-active::after,
    .method-panel.is-active,
    .method-panel.is-active .method-art>*,
    .dispatch-console.motion-revealed .route-line,
    .industry-card.motion-revealed .industry-badge,
    .service-detail-card.motion-revealed .service-check,
    .technology-use-card.motion-revealed .technology-card-icon {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Mobile polish pass */
@media (max-width: 920px) {

html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

body.nav-menu-open {
        overflow: hidden;
    }

:where(.header-inner, .hero-inner, .section-inner, .service-hero-inner, .method-showcase, .method-frame, .method-panel, .case-card, .footer-main-grid) {
        min-width: 0;
    }

:where(.headline-row, .method-heading h2, .video-story-heading h2, .work-heading h2, .proof-grid h2, .contact-inner h2, .service-hero h1, .service-section-heading h2, .service-case-inner h2, .about-hero h1, .industry-hero-copy h1, .industry-section-heading h2) {
        overflow-wrap: break-word;
    }

.site-header {
        backdrop-filter: saturate(1.2) blur(10px);
    }

.header-inner {
        gap: 14px;
    }

.mobile-toggle {
        position: relative;
        display: inline-grid;
        flex: 0 0 auto;
        place-items: center;
        align-content: center;
        gap: 5px;
        padding: 0;
        box-shadow: 0 10px 24px rgba(31, 100, 120, 0.1);
    }

.mobile-toggle span {
        width: 22px;
        margin: 0;
        transform-origin: center;
        transition: transform 180ms ease, opacity 180ms ease;
    }

.site-header.nav-open .mobile-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

.site-header.nav-open .mobile-toggle span:nth-child(2) {
        opacity: 0;
    }

.site-header.nav-open .mobile-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

.main-nav {
        left: 16px;
        right: 16px;
        width: auto;
        max-height: min(720px, calc(100dvh - var(--header-offset) - 16px));
        padding: 14px;
        overscroll-behavior: contain;
        border: 1px solid rgba(19, 56, 69, 0.1);
        border-top: 0;
        border-radius: 0 0 18px 18px;
    }

.nav-list {
        gap: 8px;
    }

.nav-link,
    .nav-button {
        min-height: 50px;
        padding: 0 14px;
        border: 1px solid rgba(19, 56, 69, 0.08);
        border-radius: 8px;
        background: #f8fcfd;
        font-size: 15px;
    }

.nav-list .nav-link.is-active,
    .nav-list .nav-button.is-active {
        padding: 0 14px;
        border: 1px solid rgba(63, 145, 166, 0.28);
        background: #e7f7fa;
    }

.mega-inner {
        gap: 12px;
        padding: 6px 0 8px;
    }

.mega-overview {
        padding: 14px;
    }

.mega-overview strong {
        font-size: 17px;
    }

.mega-columns {
        gap: 10px;
    }

.mega-column {
        padding: 14px;
    }

.mega-column a {
        display: flex;
        align-items: center;
        min-height: 34px;
    }

.hero-section {
        min-height: auto;
        padding-top: var(--header-offset);
    }

.hero-inner {
        min-height: auto;
        padding-top: 58px;
        padding-bottom: 68px;
    }

.hero-copy {
        max-width: 650px;
    }

.headline-accent {
        min-width: 0;
    }

.hero-description {
        margin-bottom: 34px;
        line-height: 1.34;
    }

.hero-visual {
        margin-right: auto;
        margin-left: auto;
    }

.client-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.signal {
        width: 100%;
        justify-content: center;
    }

.method-steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }

.method-step {
        min-width: 0;
        border: 1px solid rgba(19, 56, 69, 0.1);
        background: #ffffff;
    }

.method-frame {
        overflow: hidden;
    }

.method-panel {
        gap: 28px;
    }

.proof-grid,
    .contact-inner {
        gap: 28px;
    }

.contact-panel {
        grid-template-columns: 1fr;
        width: min(720px, 100%);
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
    }

.contact-info-card {
        min-height: auto;
    }

.footer-bottom nav,
    .footer-social-links,
    .industry-list {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {

.header-inner,
    .hero-inner,
    .section-inner {
        width: calc(100% - 24px);
    }

.brand {
        max-width: calc(100% - 60px);
        gap: 9px;
    }

.brand-mark {
        width: 46px;
        height: 46px;
    }

.brand-name {
        font-size: 21px;
    }

.brand-tag {
        font-size: 6px;
        letter-spacing: 1px;
    }

.main-nav {
        left: 10px;
        right: 10px;
        max-height: calc(100dvh - var(--header-offset) - 10px);
        padding: 12px;
        border-radius: 0 0 16px 16px;
    }

.nav-link,
    .nav-button {
        min-height: 48px;
        font-size: 14px;
    }

.mega-columns {
        grid-template-columns: 1fr;
    }

.mega-column {
        padding: 12px 14px;
    }

.mega-column h3 {
        font-size: 13px;
    }

.mega-column a {
        font-size: 14px;
    }

.hero-inner {
        padding-top: 42px;
        padding-bottom: 58px;
    }

.eyebrow {
        margin-bottom: 14px;
        font-size: 16px;
    }

.headline-row {
        gap: 6px;
        font-size: 34px;
        line-height: 1.04;
    }

.hero-description {
        margin: 22px 0 28px;
        font-size: 16px;
        line-height: 1.45;
    }

.hero-actions {
        gap: 10px;
    }

.pill-button,
    .video-button {
        min-height: 48px;
        padding-right: 20px;
        padding-left: 20px;
    }

.trusted-clients {
        margin-top: 38px;
        padding: 16px;
    }

.client-logos {
        grid-template-columns: 1fr;
    }

.hero-visual {
        width: min(100%, 330px);
        height: 235px;
        margin-top: 36px;
    }

.method-band {
        padding: 54px 0 62px;
    }

.method-inner {
        gap: 24px;
    }

.method-heading p {
        margin-bottom: 10px;
        font-size: 13px;
    }

.method-heading h2 {
        font-size: 30px;
        line-height: 1.08;
    }

.method-showcase {
        gap: 18px;
    }

.method-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

.method-step {
        min-height: 74px;
        padding: 12px;
    }

.method-step:nth-child(5) {
        grid-column: 1 / -1;
    }

.method-step span {
        width: 28px;
        height: 28px;
    }

.method-step strong {
        font-size: 17px;
        line-height: 1.08;
    }

.method-frame {
        padding: 10px;
    }

.method-frame::after {
        display: none;
    }

.method-panel {
        padding: 22px 18px;
        border-radius: 8px;
    }

.method-copy p {
        font-size: 16px;
        line-height: 1.45;
    }

.method-copy ul {
        gap: 12px;
        margin-top: 22px;
    }

.method-copy li {
        align-items: flex-start;
        font-size: 15px;
        line-height: 1.35;
    }

.method-copy li span {
        flex: 0 0 20px;
        margin-top: 1px;
    }

.method-art {
        min-height: 210px;
        max-height: 235px;
        overflow: hidden;
    }

.stats-band,
    .story-video-band,
    .proof-band,
    .contact-band,
    .home-work-band,
    .work-showcase,
    .industry-grid-section,
    .industry-dispatch-band,
    .industry-system-band {
        padding-top: 62px;
        padding-bottom: 62px;
    }

.section-heading h2,
    .video-story-heading h2,
    .work-heading h2,
    .proof-grid h2,
    .contact-inner h2,
    .service-section-heading h2,
    .service-case-inner h2,
    .service-cta-inner h2,
    .industry-section-heading h2,
    .industry-dispatch-copy h2,
    .about-principles-copy h2,
    .about-pillars-copy h2,
    .about-awards-inner h2,
    .about-cta-inner h2 {
        font-size: 30px;
        line-height: 1.1;
    }

.story-video-card {
        aspect-ratio: 4 / 3.2;
    }

.case-card,
    .home-work-band .case-card,
    .work-band .case-card,
    .service-detail-card,
    .service-benefit,
    .service-process-step,
    .service-insight-card,
    .service-faq,
    .industry-card,
    .industry-system-grid article {
        min-height: auto;
    }

.service-anchor-nav,
    .work-tabs,
    .work-filter-row {
        scrollbar-width: none;
    }

.service-anchor-nav::-webkit-scrollbar,
    .work-tabs::-webkit-scrollbar,
    .work-filter-row::-webkit-scrollbar {
        display: none;
    }

.contact-panel {
        max-height: calc(100dvh - 24px);
        border-radius: 18px;
    }

.contact-info-card,
    .contact-form-card {
        padding: 24px 20px;
    }

.contact-info-card h2 {
        font-size: 30px;
    }

.form-footer {
        align-items: stretch;
        flex-direction: column;
    }

.recaptcha-placeholder {
        min-width: 0;
    }

.submit-contact {
        width: 100%;
        white-space: normal;
    }

.footer-signal-inner {
        text-align: left;
    }

.footer-signal-inner h2 {
        font-size: 30px;
        line-height: 1.1;
    }

.footer-bottom nav {
        gap: 10px 14px;
    }

.chat-fab {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
        width: 50px;
        height: 50px;
    }

.chat-fab svg {
        width: 25px;
        height: 25px;
    }

.signal-chat-panel {
        right: max(10px, env(safe-area-inset-right));
        bottom: calc(74px + env(safe-area-inset-bottom));
        width: calc(100vw - 20px);
        height: min(560px, calc(100dvh - 92px));
    }

.signal-chat-header {
        grid-template-columns: 32px 40px minmax(0, 1fr) 32px;
        gap: 8px;
        padding: 12px;
    }

.signal-chat-header button {
        width: 32px;
        height: 32px;
    }

.signal-chat-header strong {
        font-size: 15px;
    }

.signal-chat-title span {
        font-size: 11.5px;
    }

.signal-chat-avatar {
        width: 40px;
        height: 40px;
    }

.signal-chat-avatar img {
        width: 30px;
        height: 30px;
    }

.signal-chat-messages {
        padding: 12px;
    }

.signal-chat-actions {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
    }

.signal-chat-action {
        white-space: normal;
    }

.signal-chat-composer {
        padding: 12px;
    }
}

@media (max-width: 920px) {
    .privacy-hero {
        padding: 140px 0 64px;
    }

.privacy-hero-inner,
    .privacy-content-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

.privacy-signal-panel {
        min-height: auto;
        max-width: 520px;
    }

.privacy-contact-note {
        position: static;
    }
}

@media (max-width: 640px) {
    .privacy-hero {
        padding: 118px 0 48px;
    }

.privacy-hero-copy h1 {
        font-size: 42px;
        line-height: 1.02;
    }

.privacy-hero-copy > p:not(.section-kicker) {
        font-size: 16px;
        line-height: 1.55;
    }

.privacy-signal-panel {
        padding: 24px;
    }

.privacy-content-band {
        padding: 54px 0 70px;
    }

.privacy-section {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 26px 0;
    }

.privacy-section > span {
        width: 34px;
        height: 34px;
    }

.privacy-section p {
        font-size: 15px;
        line-height: 1.65;
    }
}

@media (max-width: 430px) {

.brand-name {
        font-size: 19px;
    }

.brand-tag {
        font-size: 5px;
        letter-spacing: 0.8px;
    }

.mobile-toggle {
        width: 42px;
        height: 42px;
    }

.headline-row {
        font-size: 31px;
    }

.method-heading h2,
    .video-story-heading h2,
    .work-heading h2,
    .proof-grid h2,
    .contact-inner h2,
    .service-section-heading h2,
    .industry-section-heading h2 {
        font-size: 28px;
    }

.method-step {
        min-height: 70px;
        padding: 11px;
    }

.method-step strong {
        font-size: 16px;
    }

.method-panel {
        padding: 20px 16px;
    }

.work-hero-inner h2,
    .industry-hero-copy h1,
    .about-hero h1,
    .service-hero h1 {
        font-size: 34px;
        line-height: 1.05;
    }
}

/* Our Work mobile finish */
@media (max-width: 760px) {
    #work-page .work-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        overflow: visible;
    }

#work-page .work-tabs a {
        min-width: 0;
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

#work-page .work-filter-row {
        display: none;
    }

#work-page .work-showcase {
        padding: 50px 0 56px;
    }

#work-page .work-heading {
        margin-bottom: 28px;
    }
}

@media (max-width: 520px) {
    #work-page .work-tabs a {
        padding: 0 6px;
        font-size: 11px;
    }

#work-page .work-showcase {
        padding: 44px 0 52px;
    }

#work-page .work-heading h2 {
        font-size: 29px;
        line-height: 1.08;
    }
}

@media (max-width: 380px) {
    #work-page .work-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Softer public-site neutrals */
body:not(.admin-body) {
    background: var(--surface-deep);
}

body:not(.admin-body) .site-header,
body:not(.admin-body) .mega-menu {
    background: rgba(241, 247, 249, 0.98);
}

body:not(.admin-body) .hero-section {
    background:
        radial-gradient(circle at 79% 20%, rgba(129, 211, 223, 0.28), transparent 30%),
        radial-gradient(circle at 50% 86%, rgba(255, 242, 210, 0.28), transparent 28%),
        linear-gradient(132deg, #e3eef2 0%, #d9e8ed 42%, #cce1e8 100%);
}

body:not(.admin-body) .stats-band {
    background:
        radial-gradient(circle at 18% 0%, rgba(129, 211, 223, 0.22), transparent 28%),
        radial-gradient(circle at 82% 100%, rgba(255, 246, 219, 0.3), transparent 30%),
        var(--surface-soft);
}

body:not(.admin-body) .story-video-band,
body:not(.admin-body) .method-band,
body:not(.admin-body) .proof-band,
body:not(.admin-body) .contact-band,
body:not(.admin-body) .work-showcase,
body:not(.admin-body) .work-trusted,
body:not(.admin-body) .privacy-content-band,
body:not(.admin-body) .about-mission-section,
body:not(.admin-body) .about-principles-section,
body:not(.admin-body) .about-pillars-section,
body:not(.admin-body) .industry-grid-section,
body:not(.admin-body) .service-detail-section,
body:not(.admin-body) .service-process-section,
body:not(.admin-body) .service-benefit-section,
body:not(.admin-body) .service-insight-section,
body:not(.admin-body) .service-faq-section {
    background: var(--surface);
}

body:not(.admin-body) .work-band,
body:not(.admin-body) .work-filter-band,
body:not(.admin-body) .service-main,
body:not(.admin-body) .service-case-section,
body:not(.admin-body) .service-cta-band,
body:not(.admin-body) .technology-lifecycle-section,
body:not(.admin-body) .industry-system-band,
body:not(.admin-body) .about-main,
body:not(.admin-body) .industries-main {
    background: var(--surface-soft);
}

body:not(.admin-body) .home-work-band {
    background:
        linear-gradient(180deg, rgba(232, 242, 245, 0.84), rgba(219, 234, 239, 0.96) 18%, var(--surface-deep));
}

body:not(.admin-body) .about-hero {
    background:
        radial-gradient(circle at 50% 30%, rgba(129, 211, 223, 0.12), transparent 28%),
        var(--surface);
}

body:not(.admin-body) .privacy-hero {
    background:
        radial-gradient(circle at 84% 16%, rgba(129, 211, 223, 0.34), transparent 28%),
        linear-gradient(180deg, var(--surface-soft) 0%, var(--surface) 100%);
}

body:not(.admin-body) .industry-hero {
    background:
        linear-gradient(90deg, rgba(232, 242, 245, 0.88), rgba(232, 242, 245, 0.62)),
        linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 52%, var(--surface-deep) 100%);
}

body:not(.admin-body) .capability-card,
body:not(.admin-body) .method-panel,
body:not(.admin-body) .work-band .case-card,
body:not(.admin-body) .home-work-band .case-card,
body:not(.admin-body) .service-detail-card,
body:not(.admin-body) .service-benefit,
body:not(.admin-body) .service-process-step,
body:not(.admin-body) .service-insight-card,
body:not(.admin-body) .service-faq,
body:not(.admin-body) .industry-system-grid article,
body:not(.admin-body) .about-principle-panel article,
body:not(.admin-body) .about-pillar-panel article,
body:not(.admin-body) .about-metrics article {
    background: var(--surface-card);
}

body:not(.admin-body) .work-band .case-featured {
    background: linear-gradient(135deg, #e8d8ae 0%, #e0c3ba 100%);
}

body:not(.admin-body) .industry-card {
    background:
        linear-gradient(180deg, rgba(241, 247, 249, 0.94), rgba(228, 239, 243, 0.96)),
        var(--surface-card);
}

body:not(.admin-body) .privacy-signal-panel,
body:not(.admin-body) .service-case-panel,
body:not(.admin-body) .technology-case-panel {
    background:
        linear-gradient(145deg, rgba(129, 211, 223, 0.18), rgba(222, 236, 241, 0.92)),
        var(--surface-card);
}

body:not(.admin-body) .about-principle-panel,
body:not(.admin-body) .about-pillar-panel,
body:not(.admin-body) .service-detail-grid,
body:not(.admin-body) .technology-use-grid {
    background:
        repeating-linear-gradient(135deg, rgba(63, 145, 166, 0.05) 0 8px, rgba(255, 255, 255, 0.24) 8px 16px),
        var(--surface-soft);
}

body:not(.admin-body) .video-button,
body:not(.admin-body) .trusted-clients,
body:not(.admin-body) .signal,
body:not(.admin-body) .eye-label,
body:not(.admin-body) .service-hero-secondary,
body:not(.admin-body) .service-image-note,
body:not(.admin-body) .technology-code-card,
body:not(.admin-body) .industry-secondary-link,
body:not(.admin-body) .industry-command-card,
body:not(.admin-body) .industry-route-card,
body:not(.admin-body) .work-tabs a,
body:not(.admin-body) .work-select,
body:not(.admin-body) .work-filter-menu,
body:not(.admin-body) .work-empty,
body:not(.admin-body) .work-more-button,
body:not(.admin-body) .home-work-band .work-more-button,
body:not(.admin-body) .privacy-contact-note,
body:not(.admin-body) .contact-form-card,
body:not(.admin-body) .signal-chat-panel,
body:not(.admin-body) .signal-chat-composer,
body:not(.admin-body) .signal-chat-bubble,
body:not(.admin-body) .signal-chat-action,
body:not(.admin-body) .country-code-menu {
    background: var(--surface-card);
}

body:not(.admin-body) .contact-form-card input,
body:not(.admin-body) .contact-form-card select,
body:not(.admin-body) .contact-form-card textarea,
body:not(.admin-body) .country-code-trigger,
body:not(.admin-body) .signal-chat-messages,
body:not(.admin-body) .signal-chat-composer input {
    background: var(--surface-soft);
}

body:not(.admin-body) .contact-form-card input:focus,
body:not(.admin-body) .contact-form-card select:focus,
body:not(.admin-body) .contact-form-card textarea:focus,
body:not(.admin-body) .country-code-trigger:hover,
body:not(.admin-body) .country-code-picker.is-open .country-code-trigger,
body:not(.admin-body) .country-code-trigger:focus-visible,
body:not(.admin-body) .signal-chat-composer input:focus {
    background: var(--surface-card);
}

body:not(.admin-body) .work-tabs a.is-active,
body:not(.admin-body) .work-menu-option.is-active,
body:not(.admin-body) .signal-chat-action.is-primary {
    background: var(--brand);
    color: #ffffff;
}

body:not(.admin-body) .work-select:hover,
body:not(.admin-body) .work-select:focus-visible,
body:not(.admin-body) .work-select.is-open,
body:not(.admin-body) .work-select.has-selection {
    background: #e2eef2;
}

body:not(.admin-body) .work-more-button:hover,
body:not(.admin-body) .work-more-button:focus-visible {
    background: #082746;
    color: #ffffff;
}

body:not(.admin-body) .home-work-band .work-more-button:hover,
body:not(.admin-body) .home-work-band .work-more-button:focus-visible {
    background: var(--brand);
    color: #ffffff;
}

body:not(.admin-body) .signal-chat-message.is-user .signal-chat-bubble {
    background: var(--brand-deep);
    color: #ffffff;
}

/* Admin panel and editable work imagery */
.home-work-band .case-media-photo {
    background: #102f3b;
}

.home-work-band .case-media-photo img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
}

.home-work-band .case-media-photo::before {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 22, 39, 0.02), rgba(4, 22, 39, 0.22)),
        radial-gradient(circle at 16% 16%, rgba(255, 255, 255, 0.54), transparent 24%);
}

.home-work-band .case-media-photo .case-sweep,
.home-work-band .case-media-photo .case-signal-dot {
    z-index: 3;
}

.admin-body {
    min-height: 100vh;
    color: #102b3a;
    background:
        radial-gradient(circle at 12% 10%, rgba(129, 211, 223, 0.26), transparent 26%),
        radial-gradient(circle at 86% 0%, rgba(255, 217, 130, 0.2), transparent 24%),
        linear-gradient(135deg, #eef7fb 0%, #f7fbfc 44%, #f2f5fb 100%);
    overflow-x: hidden;
}

.admin-shell {
    min-height: 100vh;
}

.admin-login-panel[hidden],
.admin-app[hidden] {
    display: none !important;
}

.admin-login-panel {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
    align-items: center;
    gap: 56px;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 48px 0;
}

.admin-login-brand {
    display: grid;
    align-content: center;
    gap: 24px;
    min-height: 500px;
    padding: 56px;
    border: 1px solid rgba(16, 47, 59, 0.1);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(16, 47, 59, 0.92), rgba(31, 100, 120, 0.9)),
        url("assets/hero-specialist.png") center / cover;
    box-shadow: 0 30px 90px rgba(14, 49, 67, 0.18);
    color: #ffffff;
    overflow: hidden;
}

.admin-login-brand img {
    width: 74px;
    height: 74px;
    border-radius: 18px;
    background: #ffffff;
    padding: 10px;
}

.admin-login-brand span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.admin-login-brand strong {
    display: block;
    max-width: 560px;
    font-size: clamp(42px, 5vw, 74px);
    line-height: 0.96;
    letter-spacing: 0;
}

.admin-login-card {
    display: grid;
    gap: 18px;
    padding: 36px;
    border: 1px solid rgba(16, 47, 59, 0.11);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 70px rgba(14, 49, 67, 0.14);
    backdrop-filter: blur(16px);
}

.admin-kicker {
    color: #1f6478;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.admin-login-card h1 {
    margin: 0 0 10px;
    color: #0c2533;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: 0;
}

.admin-login-card label,
.admin-field {
    display: grid;
    gap: 8px;
}

.admin-login-card label span,
.admin-field span,
.admin-upload-control span {
    color: #24445f;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-login-card input,
.admin-field input,
.admin-field select,
.admin-field textarea,
.admin-search input {
    width: 100%;
    border: 1px solid rgba(16, 47, 59, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #102b3a;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.admin-login-card input,
.admin-field input,
.admin-field select,
.admin-search input {
    height: 46px;
    padding: 0 14px;
}

.admin-field input[type="color"] {
    padding: 5px;
    cursor: pointer;
}

.admin-field textarea {
    min-height: 118px;
    padding: 13px 14px;
    line-height: 1.55;
    resize: vertical;
}

.admin-field input[readonly] {
    background: #f3f7f8;
    color: #607989;
    cursor: default;
}

.admin-field small {
    color: #6b8190;
    font-size: 12px;
    font-weight: 700;
}

.admin-login-card input:focus,
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus,
.admin-search input:focus {
    border-color: rgba(63, 145, 166, 0.62);
    box-shadow: 0 0 0 4px rgba(129, 211, 223, 0.2);
}

.admin-login-error {
    min-height: 20px;
    margin: 0;
    color: #b42318;
    font-size: 13px;
    font-weight: 800;
}

.admin-primary-button,
.admin-secondary-button,
.admin-ghost-button,
.admin-danger-button,
.admin-import-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.admin-primary-button {
    border: 1px solid #1f6478;
    background: #1f6478;
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(31, 100, 120, 0.22);
}

.admin-secondary-button {
    border: 1px solid rgba(224, 68, 139, 0.32);
    background: #e0448b;
    color: #ffffff;
}

.admin-ghost-button,
.admin-import-button {
    border: 1px solid rgba(16, 47, 59, 0.14);
    background: #ffffff;
    color: #24445f;
}

.admin-danger-button {
    border: 1px solid rgba(180, 35, 24, 0.2);
    background: #fff5f4;
    color: #b42318;
}

.admin-primary-button:hover,
.admin-secondary-button:hover,
.admin-ghost-button:hover,
.admin-danger-button:hover,
.admin-import-button:hover {
    transform: translateY(-1px);
}

.admin-app {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 28px;
    min-height: 100vh;
    padding: 24px;
    background: #0c2533;
    color: #ffffff;
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-brand img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #ffffff;
    padding: 6px;
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand strong {
    font-size: 18px;
}

.admin-brand small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.admin-nav {
    display: grid;
    align-content: start;
    gap: 10px;
}

.admin-nav button {
    display: grid;
    gap: 5px;
    width: 100%;
    min-height: 66px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    text-align: left;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.admin-nav button:hover,
.admin-nav button.is-active {
    transform: translateX(2px);
    border-color: rgba(129, 211, 223, 0.44);
    background: rgba(129, 211, 223, 0.13);
}

.admin-nav span {
    font-size: 15px;
    font-weight: 900;
}

.admin-nav small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 800;
}

.admin-sidebar-links {
    display: grid;
    gap: 8px;
}

.admin-sidebar-links a {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 850;
    transition: background 160ms ease, color 160ms ease;
}

.admin-sidebar-links a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.admin-sidebar-links a[aria-current="page"],
.admin-sidebar-links .admin-sidebar-cta {
    border: 1px solid rgba(129, 211, 223, 0.36);
    background: rgba(129, 211, 223, 0.12);
    color: #ffffff;
}

.admin-main {
    min-width: 0;
    padding: 28px;
}

.admin-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.admin-topbar h1 {
    margin: 8px 0 8px;
    color: #0c2533;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1;
    letter-spacing: 0;
}

.admin-topbar p {
    max-width: 680px;
    margin: 0;
    color: #557184;
    font-size: 15px;
    line-height: 1.6;
}

.admin-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #e8f8fa;
    color: #1f6478;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.admin-status-pill.is-error {
    background: #fff1ef;
    color: #b42318;
}

.admin-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(16, 47, 59, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 46px rgba(14, 49, 67, 0.08);
    backdrop-filter: blur(14px);
}

.admin-search {
    flex: 1 1 260px;
}

.admin-import-button {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.admin-import-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.admin-list-panel,
.admin-editor-panel {
    min-width: 0;
    border: 1px solid rgba(16, 47, 59, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 22px 62px rgba(14, 49, 67, 0.08);
}

.admin-list-panel {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 118px);
    overflow: hidden;
}

.admin-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(16, 47, 59, 0.08);
}

.admin-panel-heading span {
    color: #24445f;
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.admin-panel-heading strong {
    color: #1f6478;
    font-size: 13px;
}

.admin-item-list {
    display: grid;
    gap: 8px;
    max-height: calc(100vh - 176px);
    padding: 12px;
    overflow: auto;
}

.admin-item-list button {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 13px;
    border: 1px solid rgba(16, 47, 59, 0.09);
    border-radius: 8px;
    background: #ffffff;
    color: #102b3a;
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-item-list button:hover,
.admin-item-list button.is-active {
    transform: translateY(-1px);
    border-color: rgba(63, 145, 166, 0.42);
    background: #f2fbfd;
}

.admin-item-list strong {
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.25;
}

.admin-item-list span,
.admin-item-list em {
    color: #557184;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}

.admin-editor-form {
    display: grid;
    gap: 16px;
    padding: 18px;
}

.admin-editor-section,
.admin-nested-editor {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(16, 47, 59, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.admin-editor-section h3 {
    margin: 0;
    color: #102b3a;
    font-size: 15px;
    font-weight: 950;
}

.admin-nested-editor {
    background: #f7fbfc;
}

.admin-nested-editor > strong {
    color: #24445f;
    font-size: 13px;
    font-weight: 950;
}

.admin-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-field-grid-three {
    grid-template-columns: minmax(90px, 0.55fr) minmax(78px, 0.35fr) minmax(0, 1.4fr);
}

.admin-image-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
    gap: 16px;
    align-items: stretch;
}

.admin-image-fields {
    display: grid;
    gap: 14px;
}

.admin-image-editor figure {
    min-height: 214px;
    margin: 0;
    border: 1px solid rgba(16, 47, 59, 0.12);
    border-radius: 8px;
    background: #edf5f8;
    overflow: hidden;
}

.admin-image-editor img {
    width: 100%;
    height: 100%;
    min-height: 214px;
    object-fit: cover;
}

.admin-card-image-editor {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
}

.admin-card-image-editor figure,
.admin-card-image-editor img {
    min-height: 150px;
}

.admin-upload-control {
    display: grid;
    gap: 8px;
    min-height: 46px;
    padding: 12px;
    border: 1px dashed rgba(31, 100, 120, 0.38);
    border-radius: 8px;
    background: #f5fcfd;
    color: #1f6478;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.admin-upload-control input {
    width: 100%;
}

.admin-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-switch {
    display: inline-grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 12px;
    border: 1px solid rgba(16, 47, 59, 0.1);
    border-radius: 8px;
    background: #ffffff;
}

.admin-switch input {
    position: absolute;
    opacity: 0;
}

.admin-switch span {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #d8e5eb;
    transition: background 160ms ease;
}

.admin-switch span::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(14, 49, 67, 0.2);
    transition: transform 160ms ease;
}

.admin-switch input:checked + span {
    background: #1f6478;
}

.admin-switch input:checked + span::after {
    transform: translateX(18px);
}

.admin-switch strong {
    color: #24445f;
    font-size: 13px;
}

.admin-switch input:disabled + span {
    background: #a9bec8;
}

.admin-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-permission-switch {
    min-height: 58px;
}

.admin-note {
    display: block;
    color: #557184;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.admin-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.admin-empty-state {
    min-height: 140px;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #557184;
    font-size: 14px;
    font-weight: 850;
    text-align: center;
}

.admin-leads-app .admin-sidebar {
    background:
        linear-gradient(180deg, rgba(12, 37, 51, 0.96), rgba(7, 31, 43, 0.98)),
        radial-gradient(circle at 18% 10%, rgba(129, 211, 223, 0.24), transparent 30%);
}

.admin-lead-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.admin-lead-stats article {
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(16, 47, 59, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 44px rgba(14, 49, 67, 0.07);
}

.admin-lead-stats span {
    display: block;
    margin-bottom: 10px;
    color: #557184;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.admin-lead-stats strong {
    color: #0c2533;
    font-size: 30px;
    line-height: 1;
}

.admin-leads-workspace {
    grid-template-columns: minmax(310px, 410px) minmax(0, 1fr);
}

.admin-lead-list button {
    position: relative;
}

.admin-lead-list button::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 13px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #3f91a6;
}

.admin-lead-detail {
    padding: 18px;
}

.admin-lead-card {
    display: grid;
    gap: 18px;
}

.admin-lead-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(12, 37, 51, 0.96), rgba(31, 100, 120, 0.9));
    color: #ffffff;
}

.admin-lead-head-main {
    min-width: 0;
}

.admin-lead-head span {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 850;
}

.admin-lead-head h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1;
    letter-spacing: 0;
}

.admin-lead-head p {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
}

.admin-lead-head-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}

.admin-lead-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.admin-lead-status-badge,
.admin-lead-local-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-lead-local-badge {
    background: rgba(255, 255, 255, 0.82);
    color: #24445f;
}

.admin-lead-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.admin-lead-head-actions .admin-primary-button,
.admin-lead-head-actions .admin-secondary-button,
.admin-lead-head-actions .admin-danger-button,
.admin-lead-head-actions .admin-ghost-button {
    min-height: 40px;
    box-shadow: 0 12px 28px rgba(4, 20, 28, 0.18);
}

.admin-lead-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.admin-lead-fields div,
.admin-lead-message {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(16, 47, 59, 0.1);
    border-radius: 10px;
    background: #ffffff;
}

.admin-lead-fields dt,
.admin-lead-message span {
    margin-bottom: 8px;
    color: #557184;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.admin-lead-fields dd {
    margin: 0;
    color: #102b3a;
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-lead-fields a {
    color: #1f6478;
}

.admin-lead-message {
    display: grid;
    gap: 8px;
}

.admin-lead-message p {
    margin: 0;
    color: #24445f;
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.admin-primary-button:disabled,
.admin-secondary-button:disabled,
.admin-ghost-button:disabled,
.admin-danger-button:disabled,
.admin-import-button:disabled,
.pill-button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
}

@media (max-width: 1120px) {
    .admin-app {
        grid-template-columns: 1fr;
    }

.admin-sidebar {
        position: static;
        min-height: auto;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

.admin-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

.admin-sidebar-links {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

.admin-workspace,
    .admin-leads-workspace {
        grid-template-columns: 1fr;
    }

.admin-list-panel {
        position: static;
        max-height: none;
    }

.admin-item-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }
}

@media (max-width: 820px) {
    .admin-login-panel {
        grid-template-columns: 1fr;
        gap: 22px;
    }

.admin-login-brand {
        min-height: 300px;
        padding: 30px;
    }

.admin-main {
        padding: 20px;
    }

.admin-topbar {
        display: grid;
    }

.admin-toolbar {
        position: static;
    }

.admin-sidebar {
        grid-template-columns: 1fr;
    }

.admin-lead-stats,
    .admin-nav,
    .admin-sidebar-links,
    .admin-item-list,
    .admin-image-editor,
    .admin-field-grid,
    .admin-field-grid-three,
    .admin-permission-grid,
    .admin-lead-fields {
        grid-template-columns: 1fr;
    }

.admin-lead-head {
        display: grid;
    }

.admin-lead-head-controls,
    .admin-lead-badges,
    .admin-lead-head-actions {
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
    }

.admin-image-editor figure,
    .admin-image-editor img {
        min-height: 230px;
    }

.admin-card-image-editor figure,
    .admin-card-image-editor img {
        min-height: 160px;
    }
}

@media (max-width: 560px) {
    .admin-login-panel {
        width: min(100% - 28px, 1180px);
    }

.admin-login-card {
        padding: 24px;
    }

.admin-top-actions,
    .admin-toolbar,
    .admin-editor-actions,
    .admin-lead-head-actions {
        align-items: stretch;
    }

.admin-top-actions,
    .admin-toolbar,
    .admin-editor-actions,
    .admin-lead-head-actions,
    .admin-switch-row {
        flex-direction: column;
    }

.admin-primary-button,
    .admin-secondary-button,
    .admin-ghost-button,
    .admin-danger-button,
    .admin-import-button {
        width: 100%;
    }
}

/* Homepage gaming aesthetic */
body.gaming-theme {
    --gaming-cobalt: #2f343b;
    --gaming-indigo: #3a3a3a;
    --gaming-teal: #00FFFF;
    --gaming-button-start: #343a40;
    --gaming-button-end: #171717;
    --gaming-rgb-bg:
        radial-gradient(circle at 82% 18%, rgba(0, 255, 255, 0.16), transparent 34%),
        linear-gradient(126deg, rgba(18, 18, 18, 0.98) 0%, rgba(36, 36, 36, 0.96) 50%, rgba(21, 21, 21, 0.96) 100%),
        #151515;
    --gaming-rgb-section:
        radial-gradient(circle at 16% 22%, rgba(0, 255, 255, 0.58) 0, rgba(0, 255, 255, 0.58) 1px, transparent 2px),
        radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0.42) 1px, transparent 2px),
        radial-gradient(circle at 42% 74%, rgba(148, 163, 184, 0.36) 0, rgba(148, 163, 184, 0.36) 1px, transparent 2px),
        linear-gradient(116deg, transparent 0 22%, rgba(0, 255, 255, 0.14) 22.4%, transparent 23%, transparent 48%, rgba(255, 255, 255, 0.1) 48.3%, transparent 49%),
        repeating-linear-gradient(90deg, transparent 0 76px, rgba(0, 255, 255, 0.06) 77px, transparent 79px),
        repeating-linear-gradient(180deg, transparent 0 42px, rgba(255, 255, 255, 0.04) 43px, transparent 45px),
        var(--gaming-rgb-bg);
    --gaming-glass:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(0, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(24, 24, 24, 0.68), rgba(17, 17, 17, 0.62));
    --gaming-glass-strong:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(0, 255, 255, 0.1)),
        rgba(18, 18, 18, 0.58);
    --gaming-glass-border: rgba(0, 255, 255, 0.34);
    --gaming-text-soft: rgba(255, 255, 255, 0.76);
    color: #ffffff;
    background: var(--gaming-rgb-bg);
}

body.gaming-theme .top-strip {
    background: linear-gradient(90deg, #111111 0%, #2b3036 42%, #3a3a3a 74%, #171717 100%);
    box-shadow:
        0 0 18px rgba(0, 255, 255, 0.34),
        0 0 28px rgba(41, 124, 255, 0.24);
}

body.gaming-theme .site-header {
    border-bottom: 1px solid rgba(0, 255, 255, 0.18);
    background:
        linear-gradient(90deg, rgba(18, 18, 18, 0.94) 0%, rgba(27, 27, 27, 0.98) 34%, rgba(20, 20, 20, 0.98) 68%, rgba(35, 35, 35, 0.94) 100%),
        rgba(18, 18, 18, 0.94);
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px) saturate(1.32);
}

body.gaming-theme .site-header.is-scrolled {
    background:
        linear-gradient(90deg, rgba(18, 18, 18, 0.98) 0%, rgba(27, 27, 27, 0.99) 34%, rgba(20, 20, 20, 0.99) 68%, rgba(35, 35, 35, 0.98) 100%),
        rgba(18, 18, 18, 0.98);
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(0, 255, 255, 0.12);
}

body.gaming-theme .brand-mark {
    box-shadow:
        0 0 0 1px rgba(0, 255, 255, 0.28),
        0 0 28px rgba(0, 255, 255, 0.34);
}

body.gaming-theme .brand::after {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0), rgba(0, 255, 255, 0.44), rgba(148, 163, 184, 0));
}

body.gaming-theme .brand-name,
body.gaming-theme .brand-tag,
body.gaming-theme .nav-link,
body.gaming-theme .nav-button,
body.gaming-theme .phone-link {
    color: #ffffff;
    text-shadow: 0 0 16px rgba(0, 255, 255, 0.22);
}

body.gaming-theme .nav-link:hover,
body.gaming-theme .nav-button:hover,
body.gaming-theme .nav-item.is-open .nav-button {
    color: var(--gaming-teal);
}

body.gaming-theme .header-actions {
    position: relative;
    align-self: stretch;
    padding: 0 18px 0 26px;
    margin-right: -18px;
    border-left: 1px solid rgba(0, 255, 255, 0.12);
    background:
        linear-gradient(90deg, rgba(0, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.015);
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.045),
        inset 18px 0 28px rgba(0, 255, 255, 0.025);
}

body.gaming-theme .phone-link {
    color: rgba(255, 255, 255, 0.92);
}

body.gaming-theme .phone-link svg {
    color: var(--gaming-teal);
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.55));
}

body.gaming-theme .pill-button.header-cta {
    border-color: rgba(0, 255, 255, 0.42);
    background: linear-gradient(135deg, #30343a 0%, #1f242b 52%, #00cfff 100%);
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.24),
        0 12px 26px rgba(52, 104, 255, 0.3);
}

body.gaming-theme .pill-button.header-cta:hover {
    background: linear-gradient(135deg, #3a3f46 0%, #242a31 52%, #00ffff 100%);
    box-shadow:
        0 0 28px rgba(0, 255, 255, 0.34),
        0 16px 32px rgba(52, 104, 255, 0.36);
}

body.gaming-theme .nav-list .nav-link.is-active,
body.gaming-theme .nav-list .nav-button.is-active {
    border-color: rgba(0, 255, 255, 0.72);
    color: #ffffff;
    background: rgba(0, 255, 255, 0.08);
    box-shadow: 0 0 22px rgba(0, 255, 255, 0.18);
}

body.gaming-theme .mobile-toggle {
    border: 1px solid rgba(0, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 22px rgba(0, 255, 255, 0.18);
}

body.gaming-theme .mobile-toggle span {
    background: #ffffff;
}

body.gaming-theme .main-nav {
    background: transparent;
}

body.gaming-theme .mega-menu {
    background: rgba(18, 18, 18, 0.94);
}

body.gaming-theme .mega-menu {
    border-color: rgba(0, 255, 255, 0.16);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px) saturate(1.3);
}

body.gaming-theme .mega-overview,
body.gaming-theme .mega-overview strong,
body.gaming-theme .mega-column a {
    color: #ffffff;
}

body.gaming-theme .mega-overview small,
body.gaming-theme .mega-column h3 {
    color: rgba(255, 255, 255, 0.7);
}

body.gaming-theme .mega-overview span,
body.gaming-theme .section-heading p,
body.gaming-theme .section-kicker {
    color: var(--gaming-teal);
}

body.gaming-theme .mega-overview::after {
    background: rgba(0, 255, 255, 0.12);
    color: #ffffff;
}

body.gaming-theme .hero-section {
    isolation: isolate;
    background: var(--gaming-rgb-bg);
}

body.gaming-theme .hero-section::before,
body.gaming-theme .hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

body.gaming-theme .hero-section::before {
    background:
        radial-gradient(circle at 16% 22%, rgba(0, 255, 255, 0.75) 0, rgba(0, 255, 255, 0.75) 1px, transparent 2px),
        radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.62) 0, rgba(255, 255, 255, 0.62) 1px, transparent 2px),
        radial-gradient(circle at 42% 74%, rgba(148, 163, 184, 0.42) 0, rgba(148, 163, 184, 0.42) 1px, transparent 2px),
        radial-gradient(circle at 86% 76%, rgba(0, 255, 255, 0.56) 0, rgba(0, 255, 255, 0.56) 1px, transparent 2px);
    background-size: 210px 170px, 260px 220px, 180px 210px, 320px 260px;
    opacity: 0.46;
    animation: gamingParticleDrift 18s linear infinite;
}

body.gaming-theme .hero-section::after {
    background:
        linear-gradient(116deg, transparent 0 22%, rgba(0, 255, 255, 0.16) 22.4%, transparent 23%, transparent 48%, rgba(255, 255, 255, 0.12) 48.3%, transparent 49%),
        linear-gradient(62deg, transparent 0 58%, rgba(148, 163, 184, 0.16) 58.4%, transparent 59%),
        repeating-linear-gradient(90deg, transparent 0 76px, rgba(0, 255, 255, 0.08) 77px, transparent 79px),
        repeating-linear-gradient(180deg, transparent 0 42px, rgba(255, 255, 255, 0.05) 43px, transparent 45px);
    mix-blend-mode: screen;
    opacity: 0.7;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.68) 58%, rgba(0, 0, 0, 0.9));
    animation: gamingDataSweep 12s linear infinite;
}

body.gaming-theme .hero-inner,
body.gaming-theme .hero-copy {
    position: relative;
}

body.gaming-theme .hero-inner,
body.gaming-theme .hero-copy {
    z-index: 2;
}

body.gaming-theme .hero-visual,
body.gaming-theme .hero-ring {
    z-index: 1;
}

body.gaming-theme .hero-ring-left {
    background:
        linear-gradient(rgba(18, 18, 18, 0.24), rgba(18, 18, 18, 0.24)) padding-box,
        linear-gradient(150deg, var(--gaming-teal) 0%, var(--gaming-indigo) 56%, #ff7a18 100%) border-box;
    box-shadow: 0 0 46px rgba(0, 255, 255, 0.18);
    opacity: 0.78;
}

body.gaming-theme .hero-ring-right {
    background:
        linear-gradient(rgba(18, 18, 18, 0.18), rgba(18, 18, 18, 0.18)) padding-box,
        linear-gradient(150deg, #ff7a18 0%, var(--gaming-indigo) 54%, var(--gaming-teal) 100%) border-box;
    box-shadow: 0 0 38px rgba(255, 122, 24, 0.22);
    opacity: 0.82;
}

body.gaming-theme .eyebrow,
body.gaming-theme .headline-row,
body.gaming-theme .headline-main,
body.gaming-theme .hero-description {
    color: #ffffff;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.34);
}

body.gaming-theme .headline-accent {
    background: linear-gradient(90deg, #ffffff 0%, var(--gaming-teal) 32%, #cbd5e1 68%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(0, 255, 255, 0.35));
}

body.gaming-theme .pill-button,
body.gaming-theme .hero-primary,
body.gaming-theme .contact-button,
body.gaming-theme .submit-contact,
body.gaming-theme .footer-consult-button,
body.gaming-theme .work-more-button,
body.gaming-theme .signal-chat-action.is-primary {
    border: 1px solid rgba(0, 255, 255, 0.34);
    background: linear-gradient(135deg, var(--gaming-button-start), var(--gaming-button-end));
    color: #ffffff;
    box-shadow:
        0 0 22px rgba(148, 163, 184, 0.22),
        0 14px 34px rgba(0, 0, 0, 0.28);
}

body.gaming-theme .pill-button:hover,
body.gaming-theme .hero-primary:hover,
body.gaming-theme .contact-button:hover,
body.gaming-theme .submit-contact:hover,
body.gaming-theme .footer-consult-button:hover,
body.gaming-theme .work-more-button:hover,
body.gaming-theme .signal-chat-action.is-primary:hover {
    background: linear-gradient(135deg, #3a3f46, #08cceb);
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.32),
        0 18px 38px rgba(0, 0, 0, 0.34);
}

body.gaming-theme .video-button {
    border-color: rgba(0, 255, 255, 0.42);
    background:
        linear-gradient(135deg, rgba(48, 52, 58, 0.44), rgba(23, 23, 23, 0.5)),
        rgba(2, 6, 22, 0.54);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 24px rgba(0, 255, 255, 0.16);
    backdrop-filter: blur(14px) saturate(1.25);
}

body.gaming-theme .video-button:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(135deg, var(--gaming-button-start), var(--gaming-button-end));
    box-shadow: 0 0 28px rgba(0, 255, 255, 0.26);
}

body.gaming-theme .trusted-clients {
    border: 1px solid rgba(0, 255, 255, 0.38);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(0, 255, 255, 0.08)),
        linear-gradient(180deg, rgba(24, 24, 24, 0.52), rgba(17, 17, 17, 0.48));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 34px rgba(0, 255, 255, 0.18),
        0 24px 60px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(22px) saturate(1.35);
}

body.gaming-theme .trusted-clients::after {
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.24));
}

body.gaming-theme .trusted-clients p {
    color: #ffffff;
}

body.gaming-theme .trusted-clients p::before {
    background: var(--gaming-teal);
    box-shadow:
        0 0 0 7px rgba(0, 255, 255, 0.14),
        0 0 20px rgba(0, 255, 255, 0.72);
}

body.gaming-theme .signal {
    border-color: rgba(0, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 10px 28px rgba(0, 0, 0, 0.18);
}

body.gaming-theme .signal:hover {
    border-color: rgba(0, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 24px rgba(0, 255, 255, 0.18);
}

body.gaming-theme .signal-dot,
body.gaming-theme .signal:not(:has(.signal-dot))::before {
    background: var(--gaming-teal);
    color: #031033;
    box-shadow: 0 0 16px rgba(0, 255, 255, 0.54);
}

body.gaming-theme .signal-eye-scene::before {
    background: radial-gradient(circle, rgba(0, 255, 255, 0.46), transparent 66%);
    filter: blur(8px);
}

body.gaming-theme .signal-eye-scene::after {
    background: radial-gradient(circle, rgba(148, 163, 184, 0.28), transparent 70%);
}

body.gaming-theme .orbit-one {
    border-color: rgba(0, 255, 255, 0.44);
    box-shadow: 0 0 26px rgba(0, 255, 255, 0.16);
}

body.gaming-theme .orbit-two,
body.gaming-theme .signal-wave {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 0 22px rgba(148, 163, 184, 0.14);
}

body.gaming-theme .signal-character::before {
    background: rgba(0, 255, 255, 0.18);
    filter: blur(18px);
}

body.gaming-theme .signal-antenna::before {
    background: linear-gradient(180deg, var(--gaming-teal), rgba(0, 255, 255, 0));
}

body.gaming-theme .signal-antenna span {
    background: var(--gaming-teal);
    box-shadow:
        0 0 0 10px rgba(0, 255, 255, 0.16),
        0 0 36px rgba(0, 255, 255, 0.78);
}

body.gaming-theme .signal-antenna i {
    border-color: rgba(0, 255, 255, 0.36);
}

body.gaming-theme .guide-arm {
    border-color: rgba(0, 255, 255, 0.58);
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.26));
}

body.gaming-theme .guide-arm span {
    border-color: rgba(0, 255, 255, 0.72);
    background: #07103a;
}

body.gaming-theme .signal-eye {
    border-color: rgba(0, 255, 255, 0.82);
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.96), rgba(159, 255, 255, 0.8) 43%, rgba(0, 255, 255, 0.28) 72%, rgba(148, 163, 184, 0.18) 100%);
    box-shadow:
        0 0 28px rgba(0, 255, 255, 0.72),
        0 0 84px rgba(0, 255, 255, 0.36),
        0 0 120px rgba(148, 163, 184, 0.2),
        inset 0 0 42px rgba(255, 255, 255, 0.66);
    animation: gamingEyePulse 2.8s ease-in-out infinite;
}

body.gaming-theme .eye-shine {
    background: rgba(255, 255, 255, 0.86);
}

body.gaming-theme .eye-lid {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.94), rgba(0, 255, 255, 0.18));
}

body.gaming-theme .iris {
    background:
        radial-gradient(circle at 34% 28%, #ffffff 0 11%, transparent 12%),
        radial-gradient(circle, #00ffff 0 24%, #2a8cff 25% 48%, #64748b 49% 72%, #151515 73% 100%);
    box-shadow:
        0 0 0 14px rgba(0, 255, 255, 0.22),
        0 0 42px rgba(0, 255, 255, 0.7),
        0 0 78px rgba(148, 163, 184, 0.26);
}

body.gaming-theme .pupil {
    background: #03071c;
}

body.gaming-theme .scan-line {
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.82), transparent);
}

body.gaming-theme .guide-base,
body.gaming-theme .eye-label {
    border-color: rgba(0, 255, 255, 0.36);
    background: rgba(18, 18, 18, 0.44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 28px rgba(0, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(1.3);
}

body.gaming-theme .base-light {
    background: var(--gaming-teal);
    box-shadow:
        0 0 0 7px rgba(0, 255, 255, 0.14),
        0 0 18px rgba(0, 255, 255, 0.72);
}

body.gaming-theme .base-copy,
body.gaming-theme .eye-label strong {
    color: #ffffff;
}

body.gaming-theme .base-dot {
    background: rgba(255, 255, 255, 0.72);
}

body.gaming-theme .eye-label span {
    color: rgba(255, 255, 255, 0.72);
}

body.gaming-theme .stats-band,
body.gaming-theme .story-video-band,
body.gaming-theme .method-band,
body.gaming-theme .proof-band,
body.gaming-theme .work-band,
body.gaming-theme .home-work-band,
body.gaming-theme .contact-band,
body.gaming-theme .footer-signal-band,
body.gaming-theme .site-footer {
    color: #ffffff;
    background: var(--gaming-rgb-section);
    border-color: rgba(0, 255, 255, 0.18);
}

body.gaming-theme .stats-band {
    border-top: 1px solid rgba(0, 255, 255, 0.18);
    border-bottom: 1px solid rgba(0, 255, 255, 0.18);
}

body.gaming-theme .stats-band::before,
body.gaming-theme .story-video-band::before {
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.88), rgba(148, 163, 184, 0.5), transparent);
}

body.gaming-theme .stats-band::after,
body.gaming-theme .work-band::before,
body.gaming-theme .home-work-band::before,
body.gaming-theme .footer-signal-band::before {
    border-color: rgba(0, 255, 255, 0.36);
    box-shadow:
        0 0 0 22px rgba(0, 255, 255, 0.045),
        0 0 0 58px rgba(148, 163, 184, 0.04),
        0 0 0 96px rgba(0, 255, 255, 0.03);
}

body.gaming-theme .work-band::after,
body.gaming-theme .home-work-band::after {
    background: repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.52) 0 5px, transparent 5px 12px);
    opacity: 0.62;
}

body.gaming-theme .video-story-heading p,
body.gaming-theme .method-heading p,
body.gaming-theme .work-heading p,
body.gaming-theme .home-work-band .work-heading p,
body.gaming-theme .section-kicker {
    color: var(--gaming-teal);
    text-shadow: 0 0 18px rgba(0, 255, 255, 0.3);
}

body.gaming-theme .stat-item span,
body.gaming-theme .video-story-heading h2,
body.gaming-theme .method-heading h2,
body.gaming-theme .work-heading h2,
body.gaming-theme .home-work-band .work-heading h2,
body.gaming-theme .section-heading h2,
body.gaming-theme .proof-grid h2,
body.gaming-theme .contact-inner h2,
body.gaming-theme .testimonial-quote blockquote,
body.gaming-theme .site-footer h2,
body.gaming-theme .footer-signal-inner h2 {
    color: #ffffff;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.34);
}

body.gaming-theme .video-story-heading span,
body.gaming-theme .method-copy p,
body.gaming-theme .method-copy li,
body.gaming-theme .case-body p,
body.gaming-theme .home-work-band .case-body p,
body.gaming-theme .testimonial-mark,
body.gaming-theme .testimonial-quote figcaption,
body.gaming-theme .footer-addresses address,
body.gaming-theme .footer-subscribe-wrap p,
body.gaming-theme .footer-bottom {
    color: var(--gaming-text-soft);
}

body.gaming-theme .stat-number,
body.gaming-theme .stat-item:nth-child(2) .stat-number,
body.gaming-theme .stat-item:nth-child(3) .stat-number,
body.gaming-theme .stat-item:nth-child(4) .stat-number {
    color: rgba(255, 255, 255, 0.06);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.88);
    text-shadow:
        0 0 22px rgba(0, 255, 255, 0.44),
        0 18px 42px rgba(0, 0, 0, 0.22);
}

body.gaming-theme .story-video-card,
body.gaming-theme .method-frame,
body.gaming-theme .method-panel,
body.gaming-theme .capability-card,
body.gaming-theme .case-card,
body.gaming-theme .home-work-band .case-card,
body.gaming-theme .contact-form-card,
body.gaming-theme .signal-chat-panel,
body.gaming-theme .work-testimonial {
    border: 1px solid var(--gaming-glass-border);
    background: var(--gaming-glass);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 34px rgba(0, 255, 255, 0.16),
        0 24px 60px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(20px) saturate(1.28);
}

body.gaming-theme .work-testimonial {
    padding: 34px;
    border-radius: 8px;
}

body.gaming-theme .story-video-card {
    border-width: 1px;
}

body.gaming-theme .method-frame {
    padding: 18px;
}

body.gaming-theme .method-panel {
    border-radius: 8px;
}

body.gaming-theme .method-step {
    color: #ffffff;
}

body.gaming-theme .method-step span {
    border: 1px solid rgba(0, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.gaming-theme .method-step strong {
    color: #ffffff;
}

body.gaming-theme .method-step:hover strong,
body.gaming-theme .method-step:focus-visible strong,
body.gaming-theme .method-step.is-active strong {
    color: var(--gaming-teal);
    text-shadow: 0 0 18px rgba(0, 255, 255, 0.34);
}

body.gaming-theme .method-step.is-active span {
    background: rgba(0, 255, 255, 0.16);
    color: #ffffff;
}

body.gaming-theme .art-board,
body.gaming-theme .art-card,
body.gaming-theme .art-browser,
body.gaming-theme .art-device,
body.gaming-theme .art-palette,
body.gaming-theme .art-code-window,
body.gaming-theme .art-growth-panel,
body.gaming-theme .art-ai-node,
body.gaming-theme .art-flow-node {
    background: rgba(255, 255, 255, 0.9);
}

body.gaming-theme .industry-list span,
body.gaming-theme .case-tags span,
body.gaming-theme .home-work-band .case-tags span,
body.gaming-theme .testimonial-arrow,
body.gaming-theme .footer-social-links a,
body.gaming-theme .footer-subscribe input,
body.gaming-theme .contact-form-card input,
body.gaming-theme .contact-form-card select,
body.gaming-theme .contact-form-card textarea,
body.gaming-theme .country-code-trigger,
body.gaming-theme .country-code-menu,
body.gaming-theme .signal-chat-messages,
body.gaming-theme .signal-chat-bubble,
body.gaming-theme .signal-chat-composer,
body.gaming-theme .signal-chat-composer input,
body.gaming-theme .signal-chat-action,
body.gaming-theme .recaptcha-placeholder {
    border-color: rgba(0, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.gaming-theme .industry-list span,
body.gaming-theme .case-tags span,
body.gaming-theme .home-work-band .case-tags span {
    font-weight: 900;
}

body.gaming-theme .case-title-row h3,
body.gaming-theme .home-work-band .case-title-row h3,
body.gaming-theme .method-copy li span,
body.gaming-theme .footer-brand strong,
body.gaming-theme .footer-addresses strong,
body.gaming-theme .footer-addresses a,
body.gaming-theme .footer-bottom a,
body.gaming-theme .footer-subscribe-note,
body.gaming-theme .contact-form-card label span,
body.gaming-theme .recaptcha-placeholder strong {
    color: #ffffff;
}

body.gaming-theme .footer-brand small,
body.gaming-theme .recaptcha-placeholder span,
body.gaming-theme .country-code-option-name,
body.gaming-theme .signal-chat-bubble time {
    color: var(--gaming-text-soft);
}

body.gaming-theme .case-open,
body.gaming-theme .home-work-band .case-open {
    border-color: rgba(0, 255, 255, 0.34);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

body.gaming-theme .case-open:hover,
body.gaming-theme .case-open:focus-visible,
body.gaming-theme .home-work-band .case-open:hover,
body.gaming-theme .home-work-band .case-open:focus-visible,
body.gaming-theme .testimonial-arrow:hover,
body.gaming-theme .testimonial-arrow:focus-visible,
body.gaming-theme .footer-subscribe button,
body.gaming-theme .signal-chat-composer button {
    border-color: rgba(0, 255, 255, 0.48);
    background: linear-gradient(135deg, var(--gaming-button-start), var(--gaming-button-end));
    color: #ffffff;
}

body.gaming-theme .case-card:hover,
body.gaming-theme .home-work-band .case-card:hover {
    border-color: rgba(0, 255, 255, 0.52);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 44px rgba(0, 255, 255, 0.24),
        0 30px 70px rgba(0, 0, 0, 0.32);
}

body.gaming-theme .case-media-web,
body.gaming-theme .home-work-band .case-media-web,
body.gaming-theme .case-media-data,
body.gaming-theme .home-work-band .case-media-data {
    background:
        radial-gradient(circle at 80% 18%, rgba(0, 255, 255, 0.42), transparent 28%),
        linear-gradient(135deg, rgba(17, 17, 17, 0.92), rgba(58, 58, 58, 0.7) 48%, rgba(0, 255, 255, 0.38));
}

body.gaming-theme .site-card,
body.gaming-theme .data-panel {
    background: rgba(255, 255, 255, 0.76);
}

body.gaming-theme .testimonial-mark img,
body.gaming-theme .footer-brand img {
    box-shadow:
        0 0 0 1px rgba(0, 255, 255, 0.3),
        0 0 24px rgba(0, 255, 255, 0.32);
}

body.gaming-theme .testimonial-dots button {
    background: rgba(255, 255, 255, 0.32);
}

body.gaming-theme .testimonial-dots button.is-active {
    background: var(--gaming-teal);
    box-shadow: 0 0 14px rgba(0, 255, 255, 0.64);
}

body.gaming-theme .site-footer {
    border-top: 1px solid rgba(0, 255, 255, 0.18);
}

body.gaming-theme .footer-bottom {
    border-top-color: rgba(0, 255, 255, 0.18);
}

body.gaming-theme .footer-social-links .social-x,
body.gaming-theme .footer-social-links .social-linkedin,
body.gaming-theme .footer-social-links .social-facebook,
body.gaming-theme .footer-social-links .social-youtube {
    color: #ffffff;
}

body.gaming-theme .footer-subscribe input::placeholder,
body.gaming-theme .contact-form-card input::placeholder,
body.gaming-theme .contact-form-card textarea::placeholder,
body.gaming-theme .signal-chat-composer input::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

body.gaming-theme .footer-subscribe input:focus,
body.gaming-theme .contact-form-card input:focus,
body.gaming-theme .contact-form-card select:focus,
body.gaming-theme .contact-form-card textarea:focus,
body.gaming-theme .country-code-trigger:hover,
body.gaming-theme .country-code-trigger:focus-visible,
body.gaming-theme .country-code-picker.is-open .country-code-trigger,
body.gaming-theme .signal-chat-composer input:focus {
    border-color: rgba(0, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.14);
}

body.gaming-theme .chat-fab {
    border: 1px solid rgba(0, 255, 255, 0.42);
    background: linear-gradient(135deg, #30343a 0%, #1f242b 52%, #00cfff 100%);
    box-shadow:
        0 0 24px rgba(0, 255, 255, 0.3),
        0 14px 34px rgba(0, 0, 0, 0.28);
}

@keyframes gamingParticleDrift {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
    }

100% {
        background-position: 210px 170px, -260px 220px, 180px -210px, -320px -260px;
    }
}

@keyframes gamingDataSweep {
    0% {
        background-position: -140px 0, 120px 0, 0 0, 0 0;
    }

100% {
        background-position: 180px 0, -220px 0, 160px 0, 0 120px;
    }
}

@keyframes gamingEyePulse {
    0%,
    100% {
        transform: scale(1);
        filter: saturate(1.08);
    }

50% {
        transform: scale(1.035);
        filter: saturate(1.32);
    }
}

@media (max-width: 920px) {
    body.gaming-theme .main-nav {
        border-color: rgba(0, 255, 255, 0.18);
        background: rgba(18, 18, 18, 0.96);
        box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
    }

body.gaming-theme .nav-link,
    body.gaming-theme .nav-button,
    body.gaming-theme .mega-column,
    body.gaming-theme .mega-overview {
        border-color: rgba(0, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.gaming-theme .hero-section::before,
    body.gaming-theme .hero-section::after,
    body.gaming-theme .signal-eye {
        animation: none;
    }
}

/* Unified RGB public theme */
body:not(.admin-body) {
    --public-rgb-cobalt: #2f343b;
    --public-rgb-blue: #3f4650;
    --public-rgb-violet: #3a3a3a;
    --public-rgb-cyan: #08d7f7;
    --public-rgb-ink: #151515;
    --public-rgb-bg:
        radial-gradient(circle at 82% 18%, rgba(8, 215, 247, 0.16), transparent 34%),
        linear-gradient(126deg, rgba(18, 18, 18, 0.98) 0%, rgba(34, 34, 34, 0.96) 42%, rgba(46, 46, 46, 0.94) 68%, rgba(21, 21, 21, 0.98) 100%),
        #151515;
    --public-rgb-section:
        linear-gradient(180deg, rgba(28, 28, 28, 0.88), rgba(18, 18, 18, 0.94));
    --public-rgb-hero:
        radial-gradient(circle at 82% 18%, rgba(8, 215, 247, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(32, 32, 32, 0.76), rgba(18, 18, 18, 0.92));
    --public-rgb-glass:
        linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(8, 215, 247, 0.08)),
        linear-gradient(180deg, rgba(32, 32, 32, 0.68), rgba(17, 17, 17, 0.62));
    --public-rgb-glass-strong:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(8, 215, 247, 0.1)),
        rgba(18, 18, 18, 0.66);
    --public-rgb-card-light: rgba(245, 251, 255, 0.93);
    --public-rgb-border: rgba(8, 215, 247, 0.32);
    --public-rgb-text-soft: rgba(255, 255, 255, 0.78);
    color: #ffffff;
    background: var(--public-rgb-bg);
    background-size: 220% 220%, auto;
    animation: publicRgbBodyFlow 22s ease-in-out infinite alternate;
}

body:not(.admin-body)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 20%, rgba(8, 215, 247, 0.74) 0, rgba(8, 215, 247, 0.74) 1px, transparent 2px),
        radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px, transparent 2px),
        radial-gradient(circle at 44% 74%, rgba(148, 163, 184, 0.4) 0, rgba(148, 163, 184, 0.4) 1px, transparent 2px),
        linear-gradient(116deg, transparent 0 22.6%, rgba(8, 215, 247, 0.16) 22.9%, transparent 23.4%, transparent 51.8%, rgba(255, 255, 255, 0.1) 52.1%, transparent 52.6%),
        linear-gradient(68deg, transparent 0 58%, rgba(148, 163, 184, 0.14) 58.3%, transparent 58.9%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.065) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0 1px, transparent 1px 60px);
    background-size:
        260px 210px,
        320px 260px,
        220px 260px,
        100% 100%,
        100% 100%,
        92px 100%,
        100% 60px;
    background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;
    opacity: 0.72;
    mix-blend-mode: screen;
    animation: publicRgbUnifiedLines 18s linear infinite;
    will-change: background-position;
}

body:not(.admin-body) .top-strip {
    background: linear-gradient(90deg, #111111 0%, #2b3036 42%, #3a3a3a 72%, #171717 100%);
    background-size: 220% 100%;
    box-shadow:
        0 0 18px rgba(8, 215, 247, 0.34),
        0 0 30px rgba(36, 105, 255, 0.24);
    animation: publicRgbStripFlow 7s linear infinite;
}

body:not(.admin-body) .site-header {
    border-bottom: 1px solid rgba(8, 215, 247, 0.18);
    background:
        linear-gradient(90deg, rgba(18, 18, 18, 0.94) 0%, rgba(27, 27, 27, 0.98) 34%, rgba(20, 20, 20, 0.98) 68%, rgba(35, 35, 35, 0.94) 100%),
        rgba(18, 18, 18, 0.94);
    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px) saturate(1.28);
}

body:not(.admin-body) .site-header.is-scrolled {
    background:
        linear-gradient(90deg, rgba(18, 18, 18, 0.98) 0%, rgba(27, 27, 27, 0.99) 34%, rgba(20, 20, 20, 0.99) 68%, rgba(35, 35, 35, 0.98) 100%),
        rgba(18, 18, 18, 0.98);
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.38),
        0 0 24px rgba(8, 215, 247, 0.12);
}

body:not(.admin-body) .brand-mark {
    box-shadow:
        0 0 0 1px rgba(8, 215, 247, 0.28),
        0 0 28px rgba(8, 215, 247, 0.34);
}

body:not(.admin-body) .brand::after {
    background: linear-gradient(90deg, rgba(8, 215, 247, 0), rgba(8, 215, 247, 0.42), rgba(148, 163, 184, 0));
}

body:not(.admin-body) .brand-name,
body:not(.admin-body) .brand-tag,
body:not(.admin-body) .nav-link,
body:not(.admin-body) .nav-button,
body:not(.admin-body) .phone-link {
    color: #ffffff;
    text-shadow: 0 0 16px rgba(8, 215, 247, 0.22);
}

body:not(.admin-body) .nav-link:hover,
body:not(.admin-body) .nav-button:hover,
body:not(.admin-body) .nav-item.is-open .nav-button {
    color: var(--public-rgb-cyan);
}

body:not(.admin-body) .header-actions {
    position: relative;
    align-self: stretch;
    padding: 0 18px 0 26px;
    margin-right: -18px;
    border-left: 1px solid rgba(8, 215, 247, 0.12);
    background:
        linear-gradient(90deg, rgba(8, 215, 247, 0.06), rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.015);
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.045),
        inset 18px 0 28px rgba(8, 215, 247, 0.025);
}

body:not(.admin-body) .phone-link svg {
    color: var(--public-rgb-cyan);
    filter: drop-shadow(0 0 10px rgba(8, 215, 247, 0.55));
}

body:not(.admin-body) .main-nav {
    background: transparent;
}

body:not(.admin-body) .mega-menu {
    background: rgba(18, 18, 18, 0.94);
}

body:not(.admin-body) .mega-menu {
    border-color: rgba(8, 215, 247, 0.16);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px) saturate(1.3);
}

body:not(.admin-body) .mega-overview,
body:not(.admin-body) .mega-overview strong,
body:not(.admin-body) .mega-column a {
    color: #ffffff;
}

body:not(.admin-body) .mega-overview small,
body:not(.admin-body) .mega-column h3 {
    color: rgba(255, 255, 255, 0.7);
}

body:not(.admin-body) .mega-overview span,
body:not(.admin-body) .section-heading p,
body:not(.admin-body) .section-kicker,
body:not(.admin-body) .service-section-heading p,
body:not(.admin-body) .service-case-inner .section-kicker,
body:not(.admin-body) .about-kicker,
body:not(.admin-body) .industry-eyebrow,
body:not(.admin-body) .industry-section-heading p,
body:not(.admin-body) .industry-dispatch-copy p,
body:not(.admin-body) .work-heading p,
body:not(.admin-body) .method-heading p,
body:not(.admin-body) .video-story-heading p {
    color: var(--public-rgb-cyan);
    text-shadow: 0 0 18px rgba(8, 215, 247, 0.28);
}

body:not(.admin-body) :is(.hero-section, .service-hero, .about-hero, .industry-hero, .privacy-hero, .work-hero) {
    isolation: isolate;
    color: #ffffff;
    background: var(--public-rgb-hero);
    background-size: 100% 100%, 100% 100%;
}

body:not(.admin-body) :is(.stats-band, .story-video-band, .method-band, .proof-band, .work-band, .home-work-band, .work-filter-band, .work-showcase, .work-trusted, .contact-band, .footer-signal-band, .site-footer, .service-main, .service-detail-section, .service-demo-section, .service-process-section, .service-benefit-section, .service-insight-section, .service-faq-section, .service-case-section, .service-cta-band, .about-main, .about-mission-section, .about-principles-section, .about-pillars-section, .about-awards-section, .about-cta-band, .industries-main, .industry-snapshot, .industry-grid-section, .industry-dispatch-band, .industry-system-band, .privacy-content-band) {
    color: #ffffff;
    background: var(--public-rgb-section);
    background-size: 100% 100%;
    border-color: rgba(8, 215, 247, 0.08);
}

body:not(.admin-body) :is(.hero-section, .service-hero, .about-hero, .industry-hero, .privacy-hero, .work-hero, .stats-band, .story-video-band, .method-band, .proof-band, .work-band, .home-work-band, .work-filter-band, .work-showcase, .service-detail-section, .service-demo-section, .service-process-section, .service-benefit-section, .service-insight-section, .service-faq-section, .service-case-section, .about-mission-section, .about-principles-section, .about-pillars-section, .about-awards-section, .industry-grid-section, .industry-system-band, .privacy-content-band)::before {
    border-color: rgba(8, 215, 247, 0.34);
}

body:not(.admin-body) .hero-section::before,
body:not(.admin-body) .hero-section::after,
body:not(.admin-body) .stats-band::before,
body:not(.admin-body) .story-video-band::before {
    content: none;
    animation: none;
}

body:not(.admin-body) :is(.eyebrow, .headline-row, .headline-main, .hero-description, .service-eyebrow, .service-hero h1, .service-hero-copy>p:not(.service-eyebrow), .about-hero h1, .about-hero-inner>p:not(.about-kicker), .industry-hero-copy h1, .industry-hero-copy>p:not(.industry-eyebrow), .privacy-hero-copy h1, .privacy-hero-copy>p:not(.section-kicker), .video-story-heading h2, .method-heading h2, .work-heading h2, .home-work-band .work-heading h2, .section-heading h2, .proof-grid h2, .contact-inner h2, .service-section-heading h2, .service-case-inner h2, .service-cta-inner h2, .about-statement span, .about-statement p, .about-principles-copy h2, .about-pillars-copy h2, .about-awards-inner h2, .about-cta-inner h2, .industry-section-heading h2, .industry-dispatch-copy h2, .footer-signal-inner h2, .site-footer h2) {
    color: #ffffff;
    text-shadow: 0 0 24px rgba(0, 0, 0, 0.34);
}

body:not(.admin-body) .headline-accent {
    min-width: 0;
    background: linear-gradient(90deg, #ffffff 0%, var(--public-rgb-cyan) 32%, #cbd5e1 68%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 16px rgba(8, 215, 247, 0.35));
}

body:not(.admin-body) :is(.video-story-heading span, .method-copy p, .method-copy li, .case-body p, .home-work-band .case-body p, .testimonial-mark, .testimonial-quote figcaption, .footer-addresses address, .footer-subscribe-wrap p, .footer-bottom, .service-section-heading span, .service-case-inner p, .about-principles-copy>p:not(.about-kicker), .about-pillars-copy>p:not(.about-kicker), .about-principle-panel p, .about-pillar-panel p, .about-metrics span, .industry-dispatch-copy span, .industry-card p, .privacy-section p, .privacy-signal-panel span, .privacy-contact-note p, .work-hero-inner p, .work-empty span) {
    color: var(--public-rgb-text-soft);
}

body:not(.admin-body) :is(.pill-button, .hero-primary, .service-hero-primary, .contact-button, .submit-contact, .footer-consult-button, .work-more-button, .signal-chat-action.is-primary) {
    border: 1px solid rgba(8, 215, 247, 0.36);
    background: linear-gradient(135deg, #30343a 0%, #1f242b 52%, #08cceb 100%);
    color: #ffffff;
    box-shadow:
        0 0 22px rgba(148, 163, 184, 0.22),
        0 14px 34px rgba(0, 0, 0, 0.28);
}

body:not(.admin-body) :is(.pill-button, .hero-primary, .service-hero-primary, .contact-button, .submit-contact, .footer-consult-button, .work-more-button, .signal-chat-action.is-primary):hover,
body:not(.admin-body) :is(.pill-button, .hero-primary, .service-hero-primary, .contact-button, .submit-contact, .footer-consult-button, .work-more-button, .signal-chat-action.is-primary):focus-visible {
    background: linear-gradient(135deg, #3a3f46 0%, #242a31 52%, #08e3ff 100%);
    box-shadow:
        0 0 30px rgba(8, 215, 247, 0.32),
        0 18px 38px rgba(0, 0, 0, 0.34);
}

body:not(.admin-body) :is(.video-button, .service-hero-secondary, .service-hero-demo, .industry-secondary-link, .work-tabs a, .work-select, .work-filter-menu, .work-empty, .privacy-contact-note .pill-button, .case-open, .home-work-band .case-open, .testimonial-arrow, .footer-social-links a, .signal-chat-action, .country-code-menu) {
    border-color: rgba(8, 215, 247, 0.32);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 24px rgba(8, 215, 247, 0.14);
    backdrop-filter: blur(14px) saturate(1.24);
}

body:not(.admin-body) :is(.video-button, .service-hero-secondary, .service-hero-demo, .industry-secondary-link, .work-tabs a, .work-select, .work-more-button, .case-open, .home-work-band .case-open, .testimonial-arrow):hover,
body:not(.admin-body) :is(.video-button, .service-hero-secondary, .service-hero-demo, .industry-secondary-link, .work-tabs a, .work-select, .work-more-button, .case-open, .home-work-band .case-open, .testimonial-arrow):focus-visible {
    border-color: rgba(255, 255, 255, 0.74);
    background: linear-gradient(135deg, #30343a, #08cceb);
    color: #ffffff;
}

body:not(.admin-body) :is(.trusted-clients, .story-video-card, .method-frame, .method-panel, .method-step, .capability-card, .case-card, .home-work-band .case-card, .work-testimonial, .service-demo-card, .service-detail-grid, .service-detail-card, .service-benefit, .service-process-step, .service-insight-card, .service-faq, .service-case-panel, .technology-use-grid, .technology-use-card, .technology-case-panel, .technology-code-card, .about-principle-panel, .about-pillar-panel, .about-principle-panel article, .about-pillar-panel article, .about-metrics article, .industry-card, .industry-system-grid article, .industry-command-card, .industry-route-card, .privacy-signal-panel, .privacy-contact-note, .contact-panel, .contact-info-card, .contact-steps div, .contact-proof, .contact-form-card, .contact-submit-notice, .signal-chat-panel, .signal-chat-composer, .signal-chat-bubble, .recaptcha-placeholder) {
    border-color: var(--public-rgb-border);
    background: var(--public-rgb-glass);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 34px rgba(8, 215, 247, 0.16),
        0 24px 60px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(20px) saturate(1.25);
}

body:not(.admin-body) :is(.demo-site-shell, .demo-browser-shell, .demo-chat-shell, .demo-flow-shell, .demo-dashboard-shell, .demo-growth-shell, .demo-product-shell, .site-card, .data-panel, .service-image-note) {
    background: var(--public-rgb-card-light);
    color: var(--ink);
    backdrop-filter: none;
}

body:not(.admin-body) :is(.case-title-row h3, .home-work-band .case-title-row h3, .method-copy li span, .method-step strong, .service-detail-card h3, .service-benefit strong, .service-process-step h3, .service-insight-card h3, .service-faq summary, .service-case-panel span, .technology-code-card strong, .about-principle-panel h3, .about-pillar-panel h3, .about-metrics strong, .industry-card h3, .industry-command-card strong, .industry-route-card strong, .privacy-signal-panel strong, .privacy-contact-note h2, .footer-brand strong, .footer-addresses strong, .footer-addresses a, .footer-bottom a, .contact-info-card h2, .contact-steps strong, .contact-proof strong, .contact-form-card label span, .contact-submit-notice-copy strong, .recaptcha-placeholder strong) {
    color: #ffffff;
}

body:not(.admin-body) :is(.technology-code-card span, .technology-code-card small, .contact-info-card p, .contact-proof p, .contact-submit-notice-copy, .country-code-option-name) {
    color: var(--public-rgb-text-soft);
}

body:not(.admin-body) :is(.work-tabs a.is-active, .work-menu-option.is-active, .work-clear.is-active, .work-clear:hover, .work-clear:focus-visible, .country-code-option:hover, .country-code-option:focus-visible, .country-code-option[aria-selected="true"]) {
    border-color: rgba(8, 215, 247, 0.5);
    background: linear-gradient(135deg, #30343a, #08cceb);
    color: #ffffff;
}

body:not(.admin-body) :is(.industry-badge, .service-signal-strip span, .service-process-step span, .technology-card-icon, .service-tool-row span, .industry-card div span, .case-tags span, .home-work-band .case-tags span, .industry-list span, .signal, .privacy-hero-copy > span, .work-select span) {
    border-color: rgba(8, 215, 247, 0.24);
    background: rgba(255, 255, 255, 0.11);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body:not(.admin-body) :is(.work-tabs a, .work-select, .work-menu-option, .work-clear, .service-anchor-nav a, .service-signal-strip span, .service-tool-row span, .case-tags span, .home-work-band .case-tags span, .industry-card div span, .industry-list span) {
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.22);
}

body:not(.admin-body) .trusted-clients p,
body:not(.admin-body) .base-copy,
body:not(.admin-body) .eye-label strong {
    color: #ffffff;
}

body:not(.admin-body) .trusted-clients p::before,
body:not(.admin-body) .signal-dot,
body:not(.admin-body) .signal:not(:has(.signal-dot))::before,
body:not(.admin-body) .base-light {
    background: var(--public-rgb-cyan);
    color: #031033;
    box-shadow:
        0 0 0 7px rgba(8, 215, 247, 0.14),
        0 0 18px rgba(8, 215, 247, 0.72);
}

body:not(.admin-body) .service-anchor-nav {
    background: rgba(18, 18, 18, 0.9);
    border-color: rgba(8, 215, 247, 0.18);
    backdrop-filter: blur(18px) saturate(1.2);
}

body:not(.admin-body) .service-anchor-nav a {
    color: rgba(255, 255, 255, 0.72);
}

body:not(.admin-body) .service-anchor-nav a:hover,
body:not(.admin-body) .service-anchor-nav a.is-active {
    color: #ffffff;
}

body:not(.admin-body) .service-anchor-nav a::after {
    background: var(--public-rgb-cyan);
    box-shadow: 0 0 14px rgba(8, 215, 247, 0.5);
}

body:not(.admin-body) .service-check::before {
    border-color: var(--public-rgb-cyan);
}

body:not(.admin-body) .service-case-panel strong {
    color: rgba(255, 255, 255, 0.06);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 0 22px rgba(8, 215, 247, 0.44);
}

body:not(.admin-body) :is(.contact-form-card input, .contact-form-card select, .contact-form-card textarea, .country-code-trigger, .footer-subscribe input, .signal-chat-messages, .signal-chat-composer input) {
    border-color: rgba(8, 215, 247, 0.24);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body:not(.admin-body) :is(.contact-form-card input, .contact-form-card select, .contact-form-card textarea, .country-code-trigger, .footer-subscribe input, .signal-chat-composer input):focus {
    border-color: rgba(8, 215, 247, 0.68);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 4px rgba(8, 215, 247, 0.14);
}

body:not(.admin-body) .chat-fab {
    border: 1px solid rgba(8, 215, 247, 0.42);
    background: linear-gradient(135deg, #30343a 0%, #1f242b 52%, #08cceb 100%);
    box-shadow:
        0 0 24px rgba(8, 215, 247, 0.3),
        0 14px 34px rgba(0, 0, 0, 0.28);
}

@keyframes publicRgbBodyFlow {
    0% {
        background-position: 0% 48%, 0 0;
    }

100% {
        background-position: 100% 52%, 0 0;
    }
}

@keyframes publicRgbStripFlow {
    0% {
        background-position: 0% 50%;
    }

100% {
        background-position: 200% 50%;
    }
}

@keyframes publicRgbUnifiedLines {
    0% {
        background-position:
            0 0,
            0 0,
            0 0,
            -18vw 0,
            16vw 0,
            0 0,
            0 0;
    }

100% {
        background-position:
            260px 210px,
            -320px 260px,
            220px -260px,
            18vw 0,
            -16vw 0,
            92px 0,
            0 60px;
    }
}

@keyframes publicRgbHeroFlow {
    0% {
        background-position: -120px 0, 0 0, 0 0, 0% 48%;
    }

50% {
        background-position: 60px 0, 80px 0, 0 40px, 55% 52%;
    }

100% {
        background-position: 160px 0, 160px 0, 0 80px, 100% 50%;
    }
}

@keyframes publicRgbSectionFlow {
    0% {
        background-position: -160px 0, 0 0, 0 0, 0% 50%;
    }

50% {
        background-position: 20px 0, 70px 0, 0 34px, 56% 48%;
    }

100% {
        background-position: 180px 0, 140px 0, 0 68px, 100% 52%;
    }
}

@media (min-width: 1221px) {
    body:not(.admin-body) .hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(420px, 0.62fr);
        align-items: center;
        gap: clamp(44px, 4vw, 70px);
        padding-top: 96px;
        padding-bottom: 64px;
    }

body:not(.admin-body) .hero-copy {
        max-width: 900px;
    }

body:not(.admin-body) .hero-visual {
        position: relative;
        top: auto;
        right: auto;
        justify-self: center;
        width: min(520px, 100%);
        height: min(480px, 36vw);
    }

body:not(.admin-body) .headline-row {
        flex-wrap: wrap;
        gap: 0.12em 0.32em;
        max-width: 900px;
        font-size: clamp(54px, 4.15vw, 74px);
        white-space: normal;
    }

body:not(.admin-body) .headline-accent {
        flex: 0 0 100%;
    }

body:not(.admin-body) .trusted-clients {
        margin-top: clamp(70px, 9vh, 118px);
    }

body:not(.admin-body) .service-hero-inner,
    body:not(.admin-body) .industry-hero-inner {
        align-items: center;
    }
}

@media (min-width: 921px) {
    body:not(.admin-body) :is(.service-hero, .industry-hero, .about-hero, .privacy-hero) {
        padding-top: calc(var(--header-offset) + 128px);
    }
}

@media (max-width: 920px) {
    body:not(.admin-body) .main-nav {
        border-color: rgba(8, 215, 247, 0.18);
        background: rgba(18, 18, 18, 0.96);
        box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
    }

body:not(.admin-body) :is(.nav-link, .nav-button, .mega-column, .mega-overview) {
        border-color: rgba(8, 215, 247, 0.18);
        background: rgba(255, 255, 255, 0.08);
    }

body:not(.admin-body) .hero-copy,
    body:not(.admin-body) .service-hero-copy,
    body:not(.admin-body) .industry-hero-copy,
    body:not(.admin-body) .privacy-hero-copy {
        max-width: 680px;
    }
}

@media (max-width: 640px) {
    body:not(.admin-body) .hero-actions,
    body:not(.admin-body) .industry-hero-actions {
        align-items: stretch;
        flex-direction: column;
        width: min(380px, 100%);
    }

body:not(.admin-body) :is(.hero-primary, .video-button, .industry-secondary-link) {
        width: 100%;
        min-width: 0;
    }

body:not(.admin-body) :is(.service-section-heading, .work-heading, .industry-section-heading) {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.admin-body),
    body:not(.admin-body)::before,
    body:not(.admin-body) .top-strip,
    body:not(.admin-body) :is(.hero-section, .service-hero, .about-hero, .industry-hero, .privacy-hero, .work-hero),
    body:not(.admin-body) :is(.stats-band, .story-video-band, .method-band, .proof-band, .work-band, .home-work-band, .work-filter-band, .work-showcase, .work-trusted, .contact-band, .footer-signal-band, .site-footer, .service-main, .service-detail-section, .service-demo-section, .service-process-section, .service-benefit-section, .service-insight-section, .service-faq-section, .service-case-section, .service-cta-band, .about-main, .about-mission-section, .about-principles-section, .about-pillars-section, .about-awards-section, .about-cta-band, .industries-main, .industry-snapshot, .industry-grid-section, .industry-dispatch-band, .industry-system-band, .privacy-content-band) {
        animation: none;
    }
}

${this.title}

Code Editor : index.css