/* =============================================================================
   RBNs Studio — marketing page stylesheet (self-contained / portable)

   This page is intentionally NOT coupled to the Podbits design system: it will
   eventually be lifted out to a standalone rbns.studio site with no build step.
   The bulk of this file is the compiled Tailwind utility + preflight layer that
   the approved mockup was authored against, appended verbatim below the
   extension layer. Fonts are loaded by templates/rbns_studio/base.html via a
   single Google Fonts request (Space Grotesk / Hanken Grotesk / JetBrains Mono
   / Newsreader) — the @font-face blocks from the mockup export (which pointed at
   dead blob: URLs) are deliberately omitted.

   PALETTE (hardcoded in the utility layer as literal rgb()):
     paper #FBFAF6 · ink #15140F · brand #12A06A · branddk #0B7A50
     accents → blue #2F6BD6 · violet #6B4DE0 · amber #C9881A · coral #EF6038
   ============================================================================= */

/* ---------------------------------------------------------------------------
   EXTENSION LAYER — utilities/components used by sections added on top of the
   mockup (real screenshots in browser frames, real logo walls, connector logos).
   Kept small and reuse-first; everything else comes from the compiled layer.
   --------------------------------------------------------------------------- */

/* Utility steps used by the added sections that the mockup's compiled subset
   happens not to include (the export only emitted classes the original markup
   used). Defining them here avoids silently-dead classes. */
/* single-column base for grids that hold a carousel: minmax(0,1fr) keeps the
   track at container width instead of letting the swiper's intrinsic content
   size an implicit auto track to millions of px below the lg: breakpoint. */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-5 { gap: 1.25rem; }
.gap-3\.5 { gap: .875rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-7 { column-gap: 1.75rem; }
.gap-y-3 { row-gap: .75rem; }
.mt-9 { margin-top: 2.25rem; }
.p-2 { padding: .5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
@media (min-width: 640px) { .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } }
.text-\[13px\] { font-size: 13px; }
.text-\[22px\] { font-size: 22px; }
.text-paper\/50 { color: rgba(251, 250, 246, .5); }
.text-paper\/60 { color: rgba(251, 250, 246, .6); }

/* object-fit helpers (not in the compiled utility subset) */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-top { object-position: top; }
.object-left-top { object-position: left top; }
.object-center { object-position: center; }

/* aspect helpers for product screenshots */
.shot-16-10 { aspect-ratio: 16 / 10; }
.shot-3-2   { aspect-ratio: 3 / 2; }
.shot-1-1   { aspect-ratio: 1 / 1; }

/* screenshot frame: image fills the framed area, pinned to the top */
.shot { overflow: hidden; background: #fff; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot.contain img { object-fit: contain; object-position: center; background: #fff; }

/* real-logo "trusted by / worked at" wall — desaturated, lifts on hover.
   Height is fixed here (not via h-* utilities — the compiled subset doesn't
   include every step, and an unconstrained img scales to full container width). */
.logo-mark { height: 26px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .55; transition: opacity .3s ease, filter .3s ease, transform .3s ease; }
.logo-mark:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
@media (min-width: 640px) { .logo-mark { height: 32px; } }

/* connector marquee — real integration logos inside the existing .chip-logo chips */
.conn-logo { height: 20px; width: auto; object-fit: contain; }

/* brand "R." mark in the nav/footer (real logo, swaps the CSS diamond) */
.brand-r { height: 26px; width: auto; display: block; }

/* small screenshot thumbnail strip (ESCL gallery) */
.thumb { overflow: hidden; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.thumb:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------------------
   COMPILED LAYER — Tailwind preflight + utilities + bespoke component classes
   (appended from the approved mockup). Do not hand-edit; regenerate from source.
   --------------------------------------------------------------------------- */
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
::after, ::before { --tw-content: ''; }
:host, html { line-height: 1.5; text-size-adjust: 100%; tab-size: 4; font-family: "Hanken Grotesk", sans-serif; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; }
body { margin: 0px; line-height: inherit; }
hr { height: 0px; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, pre, samp { font-family: "JetBrains Mono", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { appearance: none; }
::-webkit-file-upload-button { appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
fieldset { margin: 0px; padding: 0px; }
legend { padding: 0px; }
menu, ol, ul { list-style: none; margin: 0px; padding: 0px; }
dialog { padding: 0px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); }
[role="button"], button { cursor: pointer; }
:disabled { cursor: default; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none; }
.pointer-events-none { pointer-events: none; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.-inset-4 { inset: -1rem; }
.inset-0 { inset: 0px; }
.inset-x-0 { left: 0px; right: 0px; }
.inset-y-0 { top: 0px; bottom: 0px; }
.-bottom-32 { bottom: -8rem; }
.-bottom-6 { bottom: -1.5rem; }
.-left-24 { left: -6rem; }
.-left-4 { left: -1rem; }
.-right-20 { right: -5rem; }
.-right-3 { right: -0.75rem; }
.-top-28 { top: -7rem; }
.-top-4 { top: -1rem; }
.right-0 { right: 0px; }
.right-44 { right: 11rem; }
.top-0 { top: 0px; }
.top-44 { top: 11rem; }
.left-0 { left: 0px; }
.top-\[15px\] { top: 15px; }
.-right-10 { right: -2.5rem; }
.-top-20 { top: -5rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-12 { grid-column: span 12 / span 12; }
.mx-auto { margin-left: auto; margin-right: auto; }
.-mr-1 { margin-right: -0.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-auto { margin-left: auto; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[5\/4\] { aspect-ratio: 5 / 4; }
.h-1\.5 { height: 0.375rem; }
.h-16 { height: 4rem; }
.h-2 { height: 0.5rem; }
.h-2\.5 { height: 0.625rem; }
.h-3\.5 { height: 0.875rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-\[150px\] { height: 150px; }
.h-\[300px\] { height: 300px; }
.h-\[420px\] { height: 420px; }
.h-\[440px\] { height: 440px; }
.h-\[460px\] { height: 460px; }
.h-px { height: 1px; }
.h-\[64px\] { height: 64px; }
.h-1 { height: 0.25rem; }
.h-52 { height: 13rem; }
.h-\[360px\] { height: 360px; }
.w-1\.5 { width: 0.375rem; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.3333%; }
.w-2 { width: 0.5rem; }
.w-2\.5 { width: 0.625rem; }
.w-2\/3 { width: 66.6667%; }
.w-3\.5 { width: 0.875rem; }
.w-3\/4 { width: 75%; }
.w-4\/5 { width: 80%; }
.w-5 { width: 1.25rem; }
.w-5\/6 { width: 83.3333%; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-9 { width: 2.25rem; }
.w-\[230px\] { width: 230px; }
.w-\[300px\] { width: 300px; }
.w-\[420px\] { width: 420px; }
.w-\[440px\] { width: 440px; }
.w-\[460px\] { width: 460px; }
.w-\[96px\] { width: 96px; }
.w-full { width: 100%; }
.w-8 { width: 2rem; }
.w-fit { width: fit-content; }
.w-1 { width: 0.25rem; }
.w-\[360px\] { width: 360px; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-\[36rem\] { max-width: 36rem; }
.max-w-container { max-width: 1200px; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xs { max-width: 20rem; }
.flex-1 { flex: 1 1 0%; }
.rotate-45 { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
@keyframes pulse { 
  50% { opacity: 0.5; }
}
.animate-pulse { animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0px, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-7 { gap: 1.75rem; }
.gap-\[5px\] { gap: 5px; }
.gap-8 { gap: 2rem; }
.gap-4 { gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-9 { column-gap: 2.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-4 { row-gap: 1rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-y-8 { row-gap: 2rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); }
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); }
.overflow-hidden { overflow: hidden; }
.scroll-smooth { scroll-behavior: smooth; }
.rounded { border-radius: 0.25rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-\[22px\] { border-radius: 22px; }
.rounded-\[30px\] { border-radius: 30px; }
.rounded-\[3px\] { border-radius: 3px; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.border { border-width: 1px; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-r { border-right-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b-2 { border-bottom-width: 2px; }
.border-brand\/20 { border-color: rgba(18, 160, 106, 0.2); }
.border-ink\/10 { border-color: rgba(21, 20, 15, 0.1); }
.border-line { --tw-border-opacity: 1; border-color: rgb(231 225 212 / var(--tw-border-opacity, 1)); }
.border-line\/60 { border-color: rgba(231, 225, 212, 0.6); }
.border-line\/70 { border-color: rgba(231, 225, 212, 0.7); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
.border-ink\/20 { border-color: rgba(21, 20, 15, 0.2); }
.border-brand { --tw-border-opacity: 1; border-color: rgb(18 160 106 / var(--tw-border-opacity, 1)); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.border-white\/40 { border-color: rgba(255, 255, 255, 0.4); }
.bg-amber { --tw-bg-opacity: 1; background-color: rgb(201 136 26 / var(--tw-bg-opacity, 1)); }
.bg-amber\/50 { background-color: rgba(201, 136, 26, 0.5); }
.bg-amber\/70 { background-color: rgba(201, 136, 26, 0.7); }
.bg-ambersoft { --tw-bg-opacity: 1; background-color: rgb(249 238 207 / var(--tw-bg-opacity, 1)); }
.bg-ambersoft\/60 { background-color: rgba(249, 238, 207, 0.6); }
.bg-blue { --tw-bg-opacity: 1; background-color: rgb(47 107 214 / var(--tw-bg-opacity, 1)); }
.bg-blue\/30 { background-color: rgba(47, 107, 214, 0.3); }
.bg-bluesoft { --tw-bg-opacity: 1; background-color: rgb(229 236 251 / var(--tw-bg-opacity, 1)); }
.bg-bluesoft\/60 { background-color: rgba(229, 236, 251, 0.6); }
.bg-brand { --tw-bg-opacity: 1; background-color: rgb(18 160 106 / var(--tw-bg-opacity, 1)); }
.bg-brand\/20 { background-color: rgba(18, 160, 106, 0.2); }
.bg-brand\/70 { background-color: rgba(18, 160, 106, 0.7); }
.bg-brandsoft { --tw-bg-opacity: 1; background-color: rgb(225 242 233 / var(--tw-bg-opacity, 1)); }
.bg-brandsoft\/60 { background-color: rgba(225, 242, 233, 0.6); }
.bg-brandsoft\/70 { background-color: rgba(225, 242, 233, 0.7); }
.bg-coral { --tw-bg-opacity: 1; background-color: rgb(239 96 56 / var(--tw-bg-opacity, 1)); }
.bg-coral\/70 { background-color: rgba(239, 96, 56, 0.7); }
.bg-coralsoft { --tw-bg-opacity: 1; background-color: rgb(252 230 220 / var(--tw-bg-opacity, 1)); }
.bg-coralsoft\/60 { background-color: rgba(252, 230, 220, 0.6); }
.bg-deep { --tw-bg-opacity: 1; background-color: rgb(12 61 42 / var(--tw-bg-opacity, 1)); }
.bg-ink { --tw-bg-opacity: 1; background-color: rgb(21 20 15 / var(--tw-bg-opacity, 1)); }
.bg-ink\/10 { background-color: rgba(21, 20, 15, 0.1); }
.bg-ink\/15 { background-color: rgba(21, 20, 15, 0.15); }
.bg-mist { --tw-bg-opacity: 1; background-color: rgb(242 239 231 / var(--tw-bg-opacity, 1)); }
.bg-paper { --tw-bg-opacity: 1; background-color: rgb(251 250 246 / var(--tw-bg-opacity, 1)); }
.bg-paper\/40 { background-color: rgba(251, 250, 246, 0.4); }
.bg-paper\/70 { background-color: rgba(251, 250, 246, 0.7); }
.bg-paper\/85 { background-color: rgba(251, 250, 246, 0.85); }
.bg-surface { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-violet { --tw-bg-opacity: 1; background-color: rgb(107 77 224 / var(--tw-bg-opacity, 1)); }
.bg-violet\/30 { background-color: rgba(107, 77, 224, 0.3); }
.bg-violet\/40 { background-color: rgba(107, 77, 224, 0.4); }
.bg-violet\/60 { background-color: rgba(107, 77, 224, 0.6); }
.bg-violet\/70 { background-color: rgba(107, 77, 224, 0.7); }
.bg-violetsoft { --tw-bg-opacity: 1; background-color: rgb(236 230 251 / var(--tw-bg-opacity, 1)); }
.bg-violetsoft\/60 { background-color: rgba(236, 230, 251, 0.6); }
.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-white\/40 { background-color: rgba(255, 255, 255, 0.4); }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
.bg-white\/\[0\.03\] { background-color: rgba(255, 255, 255, 0.03); }
.bg-amber\/30 { background-color: rgba(201, 136, 26, 0.3); }
.bg-ambersoft\/40 { background-color: rgba(249, 238, 207, 0.4); }
.bg-bluesoft\/40 { background-color: rgba(229, 236, 251, 0.4); }
.bg-brandsoft\/40 { background-color: rgba(225, 242, 233, 0.4); }
.bg-violetsoft\/40 { background-color: rgba(236, 230, 251, 0.4); }
.bg-deep\/40 { background-color: rgba(12, 61, 42, 0.4); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-\[repeating-linear-gradient\(0deg\,\#0000_0_22px\,\#0000_22px\)\,radial-gradient\(\#e7e1d4_1px\,transparent_1px\)\] { background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 22px, rgba(0, 0, 0, 0) 22px), radial-gradient(rgb(231, 225, 212) 1px, transparent 1px); }
.bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); }
.from-brand\/20 { --tw-gradient-from: rgb(18 160 106 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(18 160 106 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-transparent { --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-mint\/40 { --tw-gradient-to: rgb(127 217 174 / 0.4) var(--tw-gradient-to-position); }
.p-2\.5 { padding: 0.625rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-3\.5 { padding: 0.875rem; }
.p-8 { padding: 2rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pl-2\.5 { padding-left: 0.625rem; }
.pr-3 { padding-right: 0.75rem; }
.pt-28 { padding-top: 7rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pt-16 { padding-top: 4rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pt-6 { padding-top: 1.5rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-sans { font-family: "Hanken Grotesk", sans-serif; }
.font-display { font-family: "Space Grotesk", sans-serif; }
.font-mono { font-family: "JetBrains Mono", monospace; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13\.5px\] { font-size: 13.5px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 15px; }
.text-\[16\.5px\] { font-size: 16.5px; }
.text-\[16px\] { font-size: 16px; }
.text-\[17px\] { font-size: 17px; }
.text-\[30px\] { font-size: 30px; }
.text-\[32px\] { font-size: 32px; }
.text-\[34px\] { font-size: 34px; }
.text-\[40px\] { font-size: 40px; }
.text-\[9\.5px\] { font-size: 9.5px; }
.text-\[9px\] { font-size: 9px; }
.text-\[14\.5px\] { font-size: 14.5px; }
.text-\[24px\] { font-size: 24px; }
.text-\[10\.5px\] { font-size: 10.5px; }
.text-\[18px\] { font-size: 18px; }
.text-\[28px\] { font-size: 28px; }
.text-\[26px\] { font-size: 26px; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.not-italic { font-style: normal; }
.leading-\[1\.03\] { line-height: 1.03; }
.leading-\[1\.04\] { line-height: 1.04; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-\[1\.0\] { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
.leading-tight { line-height: 1.25; }
.leading-\[1\.08\] { line-height: 1.08; }
.leading-none { line-height: 1; }
.tracking-\[0\.05em\] { letter-spacing: 0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.text-amber { --tw-text-opacity: 1; color: rgb(201 136 26 / var(--tw-text-opacity, 1)); }
.text-blue { --tw-text-opacity: 1; color: rgb(47 107 214 / var(--tw-text-opacity, 1)); }
.text-brand { --tw-text-opacity: 1; color: rgb(18 160 106 / var(--tw-text-opacity, 1)); }
.text-branddk { --tw-text-opacity: 1; color: rgb(11 122 80 / var(--tw-text-opacity, 1)); }
.text-coral { --tw-text-opacity: 1; color: rgb(239 96 56 / var(--tw-text-opacity, 1)); }
.text-inksoft { --tw-text-opacity: 1; color: rgb(88 82 73 / var(--tw-text-opacity, 1)); }
.text-inksoft\/75 { color: rgba(88, 82, 73, 0.75); }
.text-muted { --tw-text-opacity: 1; color: rgb(142 135 122 / var(--tw-text-opacity, 1)); }
.text-paper { --tw-text-opacity: 1; color: rgb(251 250 246 / var(--tw-text-opacity, 1)); }
.text-paper\/65 { color: rgba(251, 250, 246, 0.65); }
.text-paper\/90 { color: rgba(251, 250, 246, 0.9); }
.text-violet { --tw-text-opacity: 1; color: rgb(107 77 224 / var(--tw-text-opacity, 1)); }
.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.text-paper\/40 { color: rgba(251, 250, 246, 0.4); }
.text-paper\/75 { color: rgba(251, 250, 246, 0.75); }
.text-paper\/85 { color: rgba(251, 250, 246, 0.85); }
.text-ink { --tw-text-opacity: 1; color: rgb(21 20 15 / var(--tw-text-opacity, 1)); }
.text-paper\/45 { color: rgba(251, 250, 246, 0.45); }
.text-white\/55 { color: rgba(255, 255, 255, 0.55); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-white\/95 { color: rgba(255, 255, 255, 0.95); }
.antialiased { -webkit-font-smoothing: antialiased; }
.opacity-\[0\.12\] { opacity: 0.12; }
.shadow-\[0_8px_30px_-18px_rgba\(21\,20\,15\,\.4\)\] { --tw-shadow: 0 8px 30px -18px rgba(21,20,15,.4); --tw-shadow-colored: 0 8px 30px -18px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.ring-2 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-violet\/30 { --tw-ring-color: rgb(107 77 224 / 0.3); }
.blur-2xl { --tw-blur: blur(40px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.backdrop-blur-md { --tw-backdrop-blur: blur(12px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-sm { --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.\[background-size\:18px_18px\] { background-size: 18px 18px; }
.\[mask-image\:radial-gradient\(ellipse_at_top_left\,\#000\,transparent_65\%\)\] { -webkit-mask-image: radial-gradient(at left top, rgb(0, 0, 0), transparent 65%); mask-image: radial-gradient(at left top, rgb(0, 0, 0), transparent 65%); }
.\[mask-image\:radial-gradient\(ellipse_at_top_right\,\#000_0\%\,transparent_62\%\)\] { -webkit-mask-image: radial-gradient(at right top, rgb(0, 0, 0) 0%, transparent 62%); mask-image: radial-gradient(at right top, rgb(0, 0, 0) 0%, transparent 62%); }
.hover\:border-ink:hover { --tw-border-opacity: 1; border-color: rgb(21 20 15 / var(--tw-border-opacity, 1)); }
.hover\:bg-paper:hover { --tw-bg-opacity: 1; background-color: rgb(251 250 246 / var(--tw-bg-opacity, 1)); }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:text-ink:hover { --tw-text-opacity: 1; color: rgb(21 20 15 / var(--tw-text-opacity, 1)); }
.hover\:text-paper:hover { --tw-text-opacity: 1; color: rgb(251 250 246 / var(--tw-text-opacity, 1)); }
.group:hover .group-hover\:rotate-0 { --tw-rotate: 0deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
@media (min-width: 640px) {
  .sm\:-right-6 { right: -1.5rem; }
  .sm\:col-span-1 { grid-column: span 1 / span 1; }
  .sm\:col-span-9 { grid-column: span 9 / span 9; }
  .sm\:flex { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:p-5 { padding: 1.25rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:p-9 { padding: 2.25rem; }
  .sm\:p-7 { padding: 1.75rem; }
  .sm\:p-14 { padding: 3.5rem; }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .sm\:pt-36 { padding-top: 9rem; }
  .sm\:pt-20 { padding-top: 5rem; }
  .sm\:text-\[18px\] { font-size: 18px; }
  .sm\:text-\[40px\] { font-size: 40px; }
  .sm\:text-\[44px\] { font-size: 44px; }
  .sm\:text-\[46px\] { font-size: 46px; }
  .sm\:text-\[56px\] { font-size: 56px; }
  .sm\:text-\[36px\] { font-size: 36px; }
  .sm\:text-\[31px\] { font-size: 31px; }
}
@media (min-width: 768px) {
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:mt-16 { margin-top: 4rem; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0px, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0px, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0px, 1fr)); }
  .lg\:gap-10 { gap: 2.5rem; }
  .lg\:border-l { border-left-width: 1px; }
  .lg\:border-t-0 { border-top-width: 0px; }
  .lg\:text-\[60px\] { font-size: 60px; }
}

.whitespace-nowrap { white-space: nowrap; }
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}

  body { background:#FBFAF6; color:#15140F; font-family:"Hanken Grotesk",sans-serif; -webkit-font-smoothing:antialiased; }
  .font-display { letter-spacing:-0.025em; }
  h1,h2,h3 { text-wrap:balance; }
  p { text-wrap:pretty; }
  .eyebrow { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; }
  .ital { font-family:"Newsreader",serif; font-style:italic; font-weight:400; letter-spacing:-0.01em; }
  .pill { font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; }

  .reveal { opacity:0; }
  .reveal.in { opacity:1; animation:revealRise .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in[data-d="1"]{ animation-delay:.08s } .reveal.in[data-d="2"]{ animation-delay:.16s } .reveal.in[data-d="3"]{ animation-delay:.24s }
  @keyframes revealRise { from{ transform:translateY(18px); } to{ transform:none; } }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; } .reveal.in{ animation:none; } }

  .flow-line { stroke-dasharray:4 5; animation:dashmove 1.1s linear infinite; }
  @keyframes dashmove { to { stroke-dashoffset:-18; } }

  .logrow { opacity:.25; transform:translateX(-4px); transition:opacity .45s ease, transform .45s ease; }
  .in .logrow { opacity:1; transform:none; }
  .in .logrow[data-r="1"]{ transition-delay:.15s } .in .logrow[data-r="2"]{ transition-delay:.3s } .in .logrow[data-r="3"]{ transition-delay:.45s } .in .logrow[data-r="4"]{ transition-delay:.6s }

  .pipe-track .pipe-fill { width:0; transition: width 2s cubic-bezier(.4,0,.2,1); }
  .pipe-track.in .pipe-fill { width:100%; }
  .pipe-node { transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .35s ease; }

  .card-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
  .card-hover:hover { transform:translateY(-4px); box-shadow:0 22px 48px -28px rgba(21,20,15,.4); }

  .btn-brand { background:#12A06A; color:#fff; transition:transform .2s, background-color .2s, box-shadow .2s; box-shadow:0 8px 20px -10px rgba(18,160,106,.7); }
  .btn-brand:hover { background:#0B7A50; transform:translateY(-1px); }
  .link-u { background-image:linear-gradient(currentColor,currentColor); background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s ease; }
  .link-u:hover { background-size:100% 1.5px; }

  .float { animation:floaty 7s ease-in-out infinite; } .float2 { animation:floaty 9s ease-in-out infinite; }
  @keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
  .blob { filter:blur(48px); border-radius:9999px; }
  .hairline { border:1px solid #E7E1D4; }
  .grain { background-image:radial-gradient(#15140f0a 1px, transparent 1px); background-size:22px 22px; }
  ::selection { background:#12A06A; color:#fff; }

  /* image placeholder */
  .ph { background:repeating-linear-gradient(135deg,#EFEBE0 0 11px,#F6F3EB 11px 22px); position:relative; }
  .ph::after { content:attr(data-label); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:"JetBrains Mono",monospace; font-size:11px; color:#8E877A; background:rgba(251,250,246,.92);
    border:1px solid #E7E1D4; border-radius:7px; padding:5px 10px; white-space:nowrap; }
  .win-shadow { box-shadow:0 34px 80px -42px rgba(21,20,15,.5); }

  /* ---- infinite connector marquee ---- */
  .marquee-wrap { -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .marquee { display:flex; width:max-content; gap:12px; animation:marq 40s linear infinite; }
  .marquee.rev { animation-direction:reverse; animation-duration:48s; }
  .marquee-wrap:hover .marquee { animation-play-state:paused; }
  @keyframes marq { to { transform:translateX(-50%); } }
  .chip-logo { display:flex; align-items:center; gap:9px; white-space:nowrap; }

  /* ---- layer-card mini diagrams (play on hover / in-view) ---- */
  .mini .a { animation-play-state:paused; }
  .layer-card:hover .mini .a, .layer-card.playing .mini .a { animation-play-state:running; }
  .layer-card .mini { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .layer-card:hover .mini { transform:translateY(-2px); }
  @keyframes growW { 0%,100%{ width:35%; } 50%{ width:92%; } }
  @keyframes barUp { 0%,100%{ height:25%; } 50%{ height:100%; } }
  @keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:.12; } }
  @keyframes ringp { 0%{ transform:scale(.4); opacity:.7; } 100%{ transform:scale(1.8); opacity:0; } }
  @keyframes bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
  @keyframes sweep { 0%{ transform:translateX(-160%); } 100%{ transform:translateX(160%); } }

  /* ---- AI cycling widget ---- */
  .ai-panel { display:none; }
  .ai-panel.active { display:block; animation:aifade .5s ease; }
  @keyframes aifade { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  .ai-tab { transition:color .25s, background-color .25s; }

  /* ---- brand grid texture ---- */
  .grid-bg { background-image:linear-gradient(rgba(21,20,15,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(21,20,15,.05) 1px,transparent 1px); background-size:40px 40px; }
  .grid-bg-dark { background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:40px 40px; }

  /* ---- generic tab system (AI + Industries) ---- */
  .tab-panel { display:none; }
  .tab-panel.active { display:block; animation:aifade .45s ease both; }
  .tab-btn { transition:background-color .25s,color .25s,border-color .25s; }
  .tab-btn[aria-selected="true"] { background:#15140F; color:#FBFAF6; border-color:#15140F; }
  .tab-btn-dark[aria-selected="true"] { background:#12A06A; color:#fff; border-color:#12A06A; }

  /* ---- button arrow nudge ---- */
  .btn-arrow svg { transition:transform .25s; }
  .btn-arrow:hover svg { transform:translateX(3px); }

  /* fixed-nav anchor offset */
  section[id]{ scroll-margin-top:92px; }

  @media (prefers-reduced-motion: reduce){
    .marquee{ animation:none; } .mini .a{ animation:none !important; }
  }

/* ===========================================================================
   VUCI BRAND ALIGNMENT  (overrides the compiled layer — source-order wins)
   Bricolage Grotesque + DM Sans, navy ink (#0d1b2a), signature mint (#ADFFBE)
   and the hard-offset shadow on primary actions.
   =========================================================================== */
html, body, .font-sans { font-family: 'DM Sans', system-ui, sans-serif; }
.font-display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -0.02em; }
body { color: #0d1b2a; }
.text-ink { color: #0d1b2a; }
.bg-ink { background-color: #0d1b2a; }
.bg-deep { background-color: #0d1b2a; }          /* AI section → Vuci navy */
.border-ink\/20 { border-color: rgba(13, 27, 42, .2); }
::selection { background: #ADFFBE; color: #0d1b2a; }

/* hard-offset shadow — Vuci's signature on primary actions */
.btn-brand { box-shadow: 3px 3px 0 0 #0d1b2a; }
.btn-brand:hover { box-shadow: 5px 5px 0 0 #0d1b2a; transform: translateY(-1px); }

/* a reusable mint hard-shadow accent for framed surfaces */
.rs-shadow { box-shadow: 6px 6px 0 0 #ADFFBE; }
@media (max-width: 640px) { .rs-shadow { box-shadow: 4px 4px 0 0 #ADFFBE; } }

/* small proof chips in the hero */
.proof-chip { display: flex; align-items: flex-start; gap: .55rem; }
.proof-chip svg { flex: none; margin-top: 1px; }

/* ===========================================================================
   SWIPER carousels (galleries for case studies / modules / branding)
   =========================================================================== */
/* width:100% + min-width:0 are essential: these swipers live inside flex
   parents whose default min-width:auto would otherwise let the wrapper's
   intrinsic (sum-of-slides) width blow the container out to millions of px. */
.rs-swiper { overflow: hidden; width: 100%; min-width: 0; max-width: 100%; }
.rs-swiper .swiper-slide { height: auto; }
.rs-swiper .swiper-pagination { position: static; margin-top: 16px; display: flex; justify-content: center; gap: 7px; }
.rs-swiper .swiper-pagination-bullet { background: #0d1b2a; opacity: .2; width: 7px; height: 7px; margin: 0 !important; border-radius: 9999px; transition: width .3s ease, opacity .3s ease, background-color .3s ease; }
.rs-swiper .swiper-pagination-bullet-active { background: #12A06A; opacity: 1; width: 22px; }
/* dark variant (on the navy AI / dark surfaces) */
.rs-swiper.on-dark .swiper-pagination-bullet { background: #fff; }
.rs-swiper.on-dark .swiper-pagination-bullet-active { background: #ADFFBE; }

/* fixed-height card gallery (project cards) — pagination overlays the image */
.rs-swiper.cardgal, .rs-swiper.cardgal .swiper-slide, .rs-swiper.cardgal .shot { height: 13rem; }
.rs-swiper.cardgal .swiper-pagination { position: absolute; left: 0; right: 0; bottom: 8px; margin-top: 0; z-index: 2; }
.rs-swiper.cardgal .swiper-pagination-bullet { background: #fff; opacity: .55; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.rs-swiper.cardgal .swiper-pagination-bullet-active { background: #ADFFBE; opacity: 1; }

/* ===========================================================================
   ████  APPLE REDESIGN LAYER · 2026  ████
   A ground-up visual re-skin authored on top of the approved mockup. Thesis:
   editorial restraint — collapse the five-way accent rainbow to a near-
   monochrome system (warm paper + navy ink) with ONE chromatic accent (brand
   green) and mint as the single spark; bolder fluid typography with far more
   air; calmer surfaces (no grain/grid/stacked blobs — one tasteful wash); and
   cinematic, cohesive motion. Source-order wins, so this governs everything
   above it without touching the working Swiper / tab / reveal machinery.
   =========================================================================== */
:root {
  --rs-paper:   #FBFAF6;   /* warm off-white base                 */
  --rs-surface: #FFFFFF;   /* raised cards                         */
  --rs-mist:    #F3F0E8;   /* section bands                        */
  --rs-tint:    #F1EEE6;   /* unified faint card tint (ex-rainbow) */
  --rs-ink:     #0d1b2a;   /* navy — text + dark surfaces          */
  --rs-ink-2:   #45525f;   /* secondary text                       */
  --rs-muted:   #8a93a0;   /* tertiary / captions                  */
  --rs-line:    rgba(13,27,42,.09);
  --rs-line-2:  rgba(13,27,42,.14);
  --rs-green:   #0e7a3f;   /* Vuci green — legible on light (ex-emerald #12A06A) */
  --rs-green-d: #0e7a3f;   /* contrast-safe green text on light    */
  --rs-mint:    #ADFFBE;   /* Vuci mint — the bright pop           */
  --rs-mint-2:  #81FF94;   /* deeper glow-mint                     */
  --rs-violet:  #6600ff;   /* Vuci violet (wordmark) — co-lead     */
  --rs-violet-d:#4d00cc;   /* violet pressed                       */
  --rs-violet-s:#efe9ff;   /* light violet tint surface            */
  --rs-mint-s:  #e2fbe8;   /* light mint tint surface              */
  --rs-dot:     rgba(13,27,42,.16);  /* window-chrome dots → mono  */
  --rs-ease:    cubic-bezier(.22,.61,.18,1);
  --rs-shadow:  0 40px 80px -52px rgba(13,27,42,.55);
  --rs-shadow-sm: 0 18px 40px -30px rgba(13,27,42,.4);
}

/* ---- 1 · TYPOGRAPHY — bolder, tighter, fluid -------------------------------*/
body { color: var(--rs-ink); letter-spacing: -0.011em; }
.font-display { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h1.font-display, h2.font-display { letter-spacing: -0.04em; }
.ital { letter-spacing: -0.02em; }
p { color: var(--rs-ink-2); }

/* one fluid hero headline — calmer leading, dramatic size */
.rs-hero-title { font-size: clamp(44px, 6.4vw, 82px) !important; line-height: .98 !important; letter-spacing: -0.045em !important; }
.rs-hero-lede  { font-size: clamp(17px, 1.5vw, 20px) !important; line-height: 1.55 !important; color: var(--rs-ink-2) !important; }

/* lift the section headlines a step, keep them disciplined */
.text-\[34px\], .sm\:text-\[46px\] { letter-spacing: -0.04em; }
@media (min-width:640px){
  .sm\:text-\[46px\] { font-size: 50px; }
  .sm\:text-\[44px\] { font-size: 48px; }
  .sm\:text-\[40px\] { font-size: 44px; }
}

/* eyebrows: bold, branded violet — the section's loud little flag */
.eyebrow { font-size: 11.5px; letter-spacing: .2em; color: var(--rs-violet); font-weight: 700; }
.eyebrow.text-brand { color: var(--rs-violet) !important; }
.pill { letter-spacing: .12em; font-weight: 600; }

/* ---- 2 · EXPRESSIVE VUCI DUOTONE — violet + mint --------------------------*/
/* The brief: bold, expressive, Vuci-branded. Two co-lead colours carry the
   whole page — electric violet (#6600ff) and mint (#ADFFBE) — folding the old
   five-way rainbow into a confident duotone. Cool family (violet/blue/coral)
   → violet; warm/brand family (amber/brand) → mint+green. */

/* soft card tints → violet-tint or mint-tint by family */
.bg-violetsoft, .bg-violetsoft\/40, .bg-violetsoft\/60,
.bg-bluesoft,   .bg-bluesoft\/40,   .bg-bluesoft\/60,
.bg-coralsoft,  .bg-coralsoft\/60 { background-color: var(--rs-violet-s) !important; }
.bg-ambersoft,  .bg-ambersoft\/40, .bg-ambersoft\/60,
.bg-brandsoft,  .bg-brandsoft\/40, .bg-brandsoft\/60, .bg-brandsoft\/70 { background-color: var(--rs-mint-s) !important; }

/* solid mini-viz accents — violet family */
.bg-violet            { background-color: var(--rs-violet) !important; }
.bg-violet\/70        { background-color: rgba(102,0,255,.70) !important; }
.bg-violet\/60        { background-color: rgba(102,0,255,.55) !important; }
.bg-violet\/40        { background-color: rgba(102,0,255,.40) !important; }
.bg-violet\/30        { background-color: rgba(102,0,255,.30) !important; }
.bg-blue              { background-color: var(--rs-violet) !important; }
.bg-blue\/30          { background-color: rgba(102,0,255,.30) !important; }
.bg-coral             { background-color: var(--rs-violet) !important; }
/* solid mini-viz accents — mint/green family */
.bg-amber             { background-color: var(--rs-green) !important; }
.bg-amber\/50         { background-color: rgba(18,160,106,.5) !important; }
.bg-amber\/30         { background-color: rgba(18,160,106,.3) !important; }

/* window-chrome traffic dots → playful violet · mint · green trio */
.bg-coral\/70 { background-color: rgba(102,0,255,.55) !important; }
.bg-amber\/70 { background-color: var(--rs-mint-2) !important; }
.bg-brand\/70 { background-color: var(--rs-green) !important; }

/* accent text / numbers / pills — violet leads, warm family → green */
.text-violet, .text-blue, .text-coral { color: var(--rs-violet) !important; }
.text-amber { color: var(--rs-green-d) !important; }

/* category dots inside module chips inherit the same duotone via the bg rules */

/* brand GREEN → Vuci green system (retire the emerald #12A06A / #0B7A50).
   Mint #ADFFBE stays the signature in hard-shadows, soft tints (brandsoft →
   mint tint) and on the dark sections; green TEXT/FILLS on light use the
   contrast-safe Vuci green so nothing turns illegible. */
.text-brand, .text-branddk { color: var(--rs-green) !important; }
.bg-brand { background-color: var(--rs-green) !important; }
.bg-brand\/20 { background-color: rgba(14,122,63,.2) !important; }
.border-brand { border-color: var(--rs-green) !important; }
.border-brand\/20 { border-color: rgba(14,122,63,.22) !important; }

/* ---- 3 · SURFACES — calmer, cleaner ---------------------------------------*/
/* slightly translucent so the page-wide grid/wash reads through the bands too */
.bg-mist { background-color: rgba(243,240,232,.8) !important; }
.hairline, .border-line { border-color: var(--rs-line) !important; }
.border-line\/70, .border-line\/60 { border-color: var(--rs-line) !important; }

/* kill the layered visual noise — grain, grids, stacked blobs */
.grain { background-image: none !important; }
.grid-bg { background-image: none !important; }
.grid-bg-dark { opacity: .5; }
.blob { display: none !important; }   /* replaced by one controlled wash below */

/* one tasteful hero wash: a single soft mint→transparent bloom, top-right */
#top > section:first-of-type { position: relative; }
#top > section:first-of-type::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(58% 54% at 90% 4%, rgba(173,255,190,.55), transparent 60%),
    radial-gradient(50% 52% at 6% 0%, rgba(102,0,255,.14), transparent 58%);
}
#top > section:first-of-type > .max-w-container { position: relative; z-index: 1; }

/* ---- 4 · NAV — floats, then tightens on scroll ----------------------------*/
#nav > .max-w-container > div {
  border-color: var(--rs-line) !important;
  background: rgba(251,250,246,.72) !important;
  box-shadow: 0 1px 0 rgba(13,27,42,.04) !important;
  transition: background .3s var(--rs-ease), box-shadow .3s var(--rs-ease),
              transform .3s var(--rs-ease), border-color .3s var(--rs-ease);
}
#nav.scrolled > .max-w-container > div {
  background: rgba(251,250,246,.9) !important;
  box-shadow: 0 12px 30px -22px rgba(13,27,42,.5) !important;
}

/* ---- 5 · BUTTONS / LINKS — bold violet, mint hard-shadow (Vuci signature) --*/
.btn-brand {
  background: var(--rs-violet) !important; color: #fff !important;
  border-radius: 9999px !important;
  box-shadow: 3px 3px 0 0 var(--rs-mint) !important;
  transition: transform .22s var(--rs-ease), background-color .22s, box-shadow .22s;
}
.btn-brand:hover {
  background: var(--rs-violet-d) !important; color:#fff !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 5px 5px 0 0 var(--rs-mint) !important;
}
.link-u:hover { color: var(--rs-violet); }
/* the hero / nav primary keeps the rounded pill; arrow nudge stays */

/* secondary "ghost" action (the hero's "See our work") → clean hairline pill.
   Scoped to <a> so it never touches the hairline CARD frames (Figma window,
   job-queue, floating product card) which share .hairline.bg-surface. */
a.hairline.bg-surface { border-radius: 9999px !important; }

/* ---- 6 · CARDS — softer radius, quieter borders, real lift ----------------*/
.card-hover { border-radius: 20px !important; transition: transform .4s var(--rs-ease), box-shadow .4s var(--rs-ease), border-color .4s var(--rs-ease); }
.card-hover:hover { transform: translateY(-5px) !important; box-shadow: var(--rs-shadow) !important; border-color: var(--rs-line-2) !important; }
.layer-card { border-radius: 20px !important; transition: transform .4s var(--rs-ease), box-shadow .35s var(--rs-ease), border-color .35s; }
.layer-card:hover { transform: translateY(-4px); box-shadow: var(--rs-shadow-sm); border-color: var(--rs-line-2) !important; }

/* window frames: cleaner chrome + a single refined shadow */
.win-shadow { box-shadow: var(--rs-shadow) !important; }
.rs-shadow  { box-shadow: 10px 10px 0 0 var(--rs-mint) !important; }
@media (max-width:640px){ .rs-shadow { box-shadow: 6px 6px 0 0 var(--rs-mint) !important; } }

/* ---- 7 · MOTION — one cinematic reveal (blur clears as it rises) ----------*/
.reveal { opacity: 0; transform: translateY(28px); filter: blur(8px);
  transition: opacity .9s var(--rs-ease), transform .9s var(--rs-ease), filter .9s var(--rs-ease);
  animation: none !important; }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal.in[data-d="1"]{ transition-delay:.09s } .reveal.in[data-d="2"]{ transition-delay:.18s } .reveal.in[data-d="3"]{ transition-delay:.27s }

/* hero product shot drifts on scroll (JS sets --rs-py) */
.rs-parallax { transform: translate3d(0, var(--rs-py, 0px), 0); will-change: transform; }

/* thin scroll-progress hairline under the nav */
#rs-progress { position: fixed; top: 0; left: 0; height: 2.5px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--rs-violet), var(--rs-mint-2), var(--rs-mint)); transition: width .1s linear; }

@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .rs-parallax { transform: none !important; }
}

/* ===========================================================================
   ████  EXPRESSIVE LAYER · violet+mint moments + restored motion  ████
   =========================================================================== */

/* ---- 8 · TABS — active light tab goes bold violet; dark tab stays mint -----*/
.tab-btn[aria-selected="true"] { background: var(--rs-violet) !important; color:#fff !important; border-color: var(--rs-violet) !important; }
.tab-btn-dark[aria-selected="true"] { background: var(--rs-mint) !important; color: var(--rs-ink) !important; border-color: var(--rs-mint) !important; }

/* ---- 9 · CONTACT CTA — the big violet→ink moment, mint accents ------------ */
#contact .bg-brand {
  background: linear-gradient(135deg, var(--rs-violet) 0%, #3a0ea8 52%, var(--rs-ink) 100%) !important;
}
#contact .bg-brand a.bg-white { color: var(--rs-violet) !important; }
#contact .bg-brand .ital { color: var(--rs-mint) !important; }

/* ---- 10 · "HOW WE WORK" PIPELINE — restored, more alive -------------------*/
/* a continuously travelling mint comet rides the rail once the fill lands;
   nodes light in sequence (JS) and the active one pulses violet. */
.pipe-track .pipe-fill { background: linear-gradient(90deg, var(--rs-violet), var(--rs-mint-2)) !important; height: 2px !important; }
.pipe-track .rail-wrap { position: relative; }
.pipe-comet { position: absolute; top: 14px; left: 0; width: 14px; height: 4px; border-radius: 9999px;
  background: linear-gradient(90deg, transparent, var(--rs-mint-2), #fff); box-shadow: 0 0 12px 2px rgba(129,255,148,.8);
  opacity: 0; }
.pipe-track.in .pipe-comet { opacity: 1; animation: cometRun 3.2s 1.6s linear infinite; }
@keyframes cometRun { from { left: -3%; } to { left: 103%; } }
.pipe-node { box-shadow: 0 0 0 0 rgba(102,0,255,0); }
.pipe-node.lit { background: var(--rs-ink) !important; color:#fff !important; border-color: var(--rs-ink) !important; }
.pipe-node.lit.is-key { background: var(--rs-violet) !important; border-color: var(--rs-violet) !important;
  transform: scale(1.14); box-shadow: 0 0 0 6px rgba(102,0,255,.14); }
@media (prefers-reduced-motion: reduce){ .pipe-track.in .pipe-comet { animation: none; } }

/* ---- 11 · MARQUEES — Swiper-driven continuous loop (gap-proof) ------------*/
/* The pure-CSS -50% loop showed blank space whenever one content copy was
   narrower than the viewport (it was). A Swiper marquee (data-marquee) clones
   slides to always fill the row + beyond, so it loops seamlessly at any width.
   delay:0 + a linear wrapper timing-function makes it glide continuously. */
.rs-marquee { width: 100%; overflow: visible; }
.rs-marquee .swiper-wrapper { transition-timing-function: linear !important; }
.rs-marquee .swiper-slide { width: auto !important; display: flex; align-items: center; }
.marquee-wrap:hover .rs-marquee .swiper-wrapper { } /* hover-pause handled in JS */
/* desaturated logo wall, a touch larger, lifts to full colour on hover */
.logo-mark { height: 30px; opacity: .5; transition: opacity .3s ease, filter .3s ease; }
@media (min-width:640px){ .logo-mark { height: 38px; } }
.logo-mark:hover { opacity: 1; }

/* ---- 12 · aligned list "diamonds" (replaces the off-baseline ◆ glyph) -----*/
.diamond { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 2px;
  transform: rotate(45deg); background: var(--rs-violet); }
.diamond.mint { background: var(--rs-green); }

/* ---- 13 · ANIMATED FIGMA CANVAS — collaborative design, live -------------- */
.figma-grid { background-color: #fbfaf6;
  background-image: radial-gradient(rgba(13,27,42,.11) 1px, transparent 1px);
  background-size: 16px 16px; }
.fig-ava { width: 20px; height: 20px; border-radius: 9999px; display: flex; align-items: center;
  justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700;
  color: #fff; border: 2px solid var(--rs-surface); }
.fig-tool { width: 15px; height: 15px; display: block; }
/* the selection outline around the live-edited button */
.fig-select { position: absolute; border: 1.5px solid var(--rs-violet); border-radius: 7px;
  animation: figSelPulse 2.6s var(--rs-ease) infinite; }
.fig-select b { position: absolute; width: 6px; height: 6px; background: #fff; border: 1.5px solid var(--rs-violet); border-radius: 1px; }
.fig-select b:nth-child(1){ top:-4px; left:-4px } .fig-select b:nth-child(2){ top:-4px; right:-4px }
.fig-select b:nth-child(3){ bottom:-4px; left:-4px } .fig-select b:nth-child(4){ bottom:-4px; right:-4px }
@keyframes figSelPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(102,0,255,.22) } 50%{ box-shadow: 0 0 0 5px rgba(102,0,255,0) } }
/* a collaborator cursor drifting across the canvas on a loop */
.fig-cursor { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none;
  animation: figCursor 7s var(--rs-ease) infinite; }
.fig-cursor svg { filter: drop-shadow(0 1px 2px rgba(13,27,42,.35)); }
.fig-cursor span { position: absolute; top: 14px; left: 12px; white-space: nowrap;
  background: var(--rs-violet); color: #fff; font-family: "JetBrains Mono", monospace;
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; border-bottom-left-radius: 1px; }
@keyframes figCursor {
  0%   { transform: translate(26px, 150px); }
  22%  { transform: translate(150px, 64px); }
  44%  { transform: translate(196px, 120px); }
  66%  { transform: translate(110px, 154px); }
  88%  { transform: translate(58px, 92px); }
  100% { transform: translate(26px, 150px); }
}
/* a component "ghost" that drops into place, then resets */
.fig-drop { animation: figDrop 7s var(--rs-ease) infinite; }
@keyframes figDrop { 0%,8%{ opacity:0; transform: translateY(8px) scale(.96) } 16%,70%{ opacity:1; transform:none } 84%,100%{ opacity:0; transform: translateY(8px) scale(.96) } }
@media (prefers-reduced-motion: reduce){
  .fig-cursor, .fig-select, .fig-drop { animation: none !important; }
  .fig-cursor { transform: translate(150px, 64px); }
}

/* ---- 14 · WHAT-WE-DO unified panel (artifact-style) + richer AI anim -------*/
/* one white panel with hairline dividers instead of five floating tinted cards;
   cells stay flat (no per-card lift), the mini-animations are preserved. */
.layer-panel { box-shadow: var(--rs-shadow); }
.layer-panel .layer-card { border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; transition: background-color .3s var(--rs-ease); }
.layer-panel .layer-card:hover { transform: none !important; box-shadow: none !important;
  background: rgba(102,0,255,.035) !important; border-color: var(--rs-line) !important; }
/* fixed mini height (the h-12 utility isn't in the compiled subset, so without
   this the boxes collapse to content height and the titles misalign) */
.layer-panel .mini { height: 48px; flex: none; transition: transform .35s var(--rs-ease); }
.layer-panel .layer-card:hover .mini { transform: translateY(-2px); }

/* AI cell — a mint satellite orbiting the violet node (plays in view / on hover) */
.ai-orbit { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; animation: aiSpin 3.2s linear infinite; }
.ai-dot { position: absolute; top: -2px; left: 50%; margin-left: -3px; width: 6px; height: 6px;
  border-radius: 9999px; background: var(--rs-mint-2); box-shadow: 0 0 7px 1px rgba(129,255,148,.9); }
@keyframes aiSpin { to { transform: rotate(360deg); } }
/* data bars scale (percentage heights don't resolve inside the flex mini) */
@keyframes barScale { 0%,100% { transform: scaleY(.42); } 50% { transform: scaleY(1); } }
.mini .ai-orbit { animation-play-state: paused; }
.layer-card:hover .mini .ai-orbit, .layer-card.playing .mini .ai-orbit { animation-play-state: running; }
@media (prefers-reduced-motion: reduce){ .ai-orbit { animation: none !important; } }

/* ---- 15 · PAGE-WIDE DYNAMIC BACKDROP — one continuous faded canvas ---------*/
/* A single backdrop behind the whole page: alternating violet/green washes that
   drift down the scroll + a very faint square grid. No per-section bands or
   colour jumps — the light sections all flow on this one canvas; the deliberate
   dark blocks (AI, contact CTA, footer) paint over it. */
body { position: relative; }
body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(30% 17% at 86% 2%,  rgba(102,0,255,.08),  transparent 60%),  /* violet  */
    radial-gradient(36% 18% at 9% 11%,  rgba(173,255,190,.20), transparent 60%),  /* mint    */
    radial-gradient(26% 14% at 96% 22%, rgba(47,107,214,.07),  transparent 60%),  /* blue    */
    radial-gradient(32% 17% at 3% 35%,  rgba(102,0,255,.07),   transparent 60%),  /* violet  */
    radial-gradient(30% 15% at 94% 46%, rgba(173,255,190,.17), transparent 60%),  /* mint    */
    radial-gradient(26% 14% at 7% 58%,  rgba(201,136,26,.06),  transparent 60%),  /* warm    */
    radial-gradient(30% 16% at 92% 70%, rgba(102,0,255,.07),   transparent 60%),  /* violet  */
    radial-gradient(28% 15% at 96% 84%, rgba(47,107,214,.06),  transparent 60%),  /* blue    */
    radial-gradient(34% 17% at 6% 88%,  rgba(173,255,190,.19), transparent 60%),  /* mint    */
    linear-gradient(rgba(13,27,42,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,27,42,.03) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, 62px 62px, 62px 62px;
}
/* lift content above the backdrop (NOT the fixed nav/progress, which keep their
   own stacking so they stay pinned) */
main, footer { position: relative; z-index: 1; }
/* the old per-section wrapper is now just a transparent passthrough */
.rs-grid-canvas { position: relative; }

/* ---- 16 · SOLUTIONS — editorial hairline grid + dark callout --------------*/
.solutions-grid { box-shadow: var(--rs-shadow); }
.sol-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem 1.5rem;
  transition: background-color .3s var(--rs-ease); position: relative; }
.sol-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--rs-violet); transform: scaleY(0); transform-origin: top; transition: transform .3s var(--rs-ease); }
.sol-row:hover { background: rgba(102,0,255,.035); }
.sol-row:hover::before { transform: scaleY(1); }
.sol-n { flex: none; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700;
  color: var(--rs-violet); padding-top: 2px; }
.sol-row h3 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 600;
  font-size: 16.5px; letter-spacing: -0.02em; color: var(--rs-ink); }
.sol-row p { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--rs-muted); }

.sol-callout { position: relative; overflow: hidden; color: var(--rs-paper);
  background: radial-gradient(120% 150% at 100% 0%, rgba(102,0,255,.5), transparent 55%), var(--rs-ink);
  transition: transform .35s var(--rs-ease), box-shadow .35s var(--rs-ease); }
.sol-callout::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 100% 0%, #000, transparent 70%); }
.sol-callout > * { position: relative; z-index: 1; }
.sol-callout:hover { transform: translateY(-3px); box-shadow: var(--rs-shadow); }
.sol-callout .btn-arrow { transition: transform .25s var(--rs-ease); }
.sol-callout:hover .btn-arrow { transform: translateY(-1px); }