/* AiXL — additions on top of the cloned Tailwind bundle (tw.css). */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Exo+2:wght@600;800&display=swap");

html { font-family: "Outfit", "Outfit Fallback", ui-sans-serif, system-ui, sans-serif; scroll-behavior: smooth; }
body { margin: 0; background: #000; }
img { max-width: 100%; height: auto; }
button { font: inherit; }

/* ---- generic reveal (mirrors whileInView) ---- */
[style*="opacity:0"] { transition: opacity .8s cubic-bezier(.16,.84,.34,1), transform .8s cubic-bezier(.16,.84,.34,1); }
.is-in { opacity: 1 !important; transform: none !important; }
.no-motion [style*="opacity:0"] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- nav ---- */
.nav-pill {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav-scrolled .nav-pill {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18);
}
nav[data-nav-light] .nav-pill { background: rgba(255,255,255,.42); border-color: rgba(0,0,0,.06); box-shadow: 0 8px 32px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.6); }
nav[data-nav-light].nav-scrolled .nav-pill { background: rgba(255,255,255,.62); }
.dd__panel { background: rgba(18,16,14,.72); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-color: rgba(255,255,255,.12); box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10); }
.nav-hidden { transform: translateY(-120%) !important; }
.navlink:hover > .navline, .navlink[aria-current="page"] > .navline { transform: scaleX(1) !important; }
.navline { transition: transform .3s cubic-bezier(.16,.84,.34,1); }
.dd { position: absolute; left: 0; right: 0; top: calc(100% + 10px); padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 60; }
.dd-host:hover .dd, .dd-host:focus-within .dd { opacity: 1; visibility: visible; transform: none; }
.dd__panel { background: rgba(23,23,23,.96); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.dd__item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; color: #fff; transition: background .2s; }
.dd__item:hover { background: rgba(255,255,255,.06); }
.dd__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgb(138 101 38 / .25); flex: none; }
.dd__ic svg { width: 20px; height: 20px; }
.dd__item b { display: block; font-weight: 400; font-size: 15px; }
.dd__item small { display: block; font-size: 12px; opacity: .55; margin-top: 2px; }
.dd-caret { transition: transform .3s; }
.dd-host:hover .dd-caret { transform: rotate(180deg); }

/* mobile menu */
.mnav { position: fixed; inset: 0; z-index: 55; background: #000; padding: 96px 24px 40px; overflow-y: auto; display: none; }
.mnav.open { display: block; }
.mnav a { display: block; padding: 16px 0; font-size: 22px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.mnav .sub a { font-size: 16px; opacity: .7; padding: 12px 0 12px 16px; }

/* ---- brand lockup ---- */
.brand { --mk: 34px; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand__mark { display: flex; align-items: baseline; font-family: "Exo 2", sans-serif; }
.brand__a, .brand__l, .brand__i { font-weight: 600; font-size: var(--mk); line-height: 1; letter-spacing: .01em; color: #fff; }
.brand__i { background-image: linear-gradient(140deg,#FBF2DA 0%,#E3C480 38%,#C9A24B 72%,#96712C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__x { font-family: "Exo 2", sans-serif; font-weight: 800; font-size: calc(var(--mk) * 1.25); line-height: .9; margin: 0 -.012em 0 -.018em; background-image: linear-gradient(136deg,#6FE0F5 0%,#3F9FD8 32%,#C9A24B 74%,#8A6526 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(201,162,75,.28)); }
.brand__sub { display: flex; justify-content: space-between; width: 100%; margin-top: calc(var(--mk) * .17); font-family: "Exo 2", sans-serif; font-weight: 700; font-size: calc(var(--mk) * .195); line-height: 1; color: rgba(255,255,255,.82); }
.brand--footer { --mk: 64px; }
.brand--mini { --mk: 22px; }
@media (max-width: 1023px) { .brand { --mk: 28px; } .brand--footer { --mk: 48px; } }

/* ---- primary button arrow swap (their two stacked spans) ---- */
.group:hover .btn-arrow-a { opacity: 0 !important; transform: translateX(100%) translateY(-100%) !important; }
.group:hover .btn-arrow-b { opacity: 1 !important; transform: none !important; }
.btn-arrow-a, .btn-arrow-b { transition: opacity .3s ease, transform .3s cubic-bezier(.16,.84,.34,1); }

/* ---- marquee ---- */
.mq { display: flex; flex-wrap: nowrap; white-space: nowrap; width: max-content; animation: mq var(--mq-dur, 40s) linear infinite; }
.mq:hover { animation-play-state: paused; }
.mq--rev { animation-direction: reverse; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq > * { flex: none; }

/* text logo badges standing in for partner logos */
.plogo { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 10px; font-size: 15px; letter-spacing: .06em; color: rgba(0,0,0,.42); border: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.03); transition: color .3s, background .3s, transform .3s; }
.plogo:hover { color: rgba(0,0,0,.9); background: rgba(201,162,75,.16); }
.plogo--dark { color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.plogo--dark:hover { color: #fff; }
.abadge { display: inline-grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%); font-size: 11px; letter-spacing: .06em; text-align: center; line-height: 1.3; color: rgba(255,255,255,.75); padding: 12px; opacity: .6; filter: saturate(0); transition: all .3s; }
.abadge:hover { opacity: 1; filter: none; color: #E3C480; border-color: rgba(227,196,128,.5); }
.abadge b { display: block; font-size: 18px; font-weight: 500; color: #fff; margin-bottom: 4px; }

/* ---- laptop frame ---- */
.laptop { position: relative; width: 100%; aspect-ratio: 5 / 3; }
.laptop__lid { position: absolute; left: 9%; right: 9%; top: 3.5%; bottom: 12%; background: #0B0A09; border-radius: 18px 18px 6px 6px; border: 1.5px solid #2a2724; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; }
.laptop__screen { position: absolute; inset: 3.5% 2.4% 2.4%; border-radius: 8px; overflow: hidden; background: #100E0C; }
.laptop__base { position: absolute; left: 3%; right: 3%; bottom: 8.6%; height: 3.4%; background: linear-gradient(#3a3632, #1c1a18); border-radius: 0 0 14px 14px; }
.laptop__base::after { content: ""; position: absolute; left: 40%; right: 40%; top: 0; height: 32%; background: #0d0c0b; border-radius: 0 0 8px 8px; }
.laptop__foot { position: absolute; left: 0; right: 0; bottom: 6%; height: 2.6%; background: linear-gradient(#26231f, #0f0e0d); border-radius: 0 0 40% 40% / 0 0 100% 100%; }
.laptop__cam { position: absolute; left: 50%; top: .9%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #1d1b19; box-shadow: inset 0 0 0 1.5px #2f2c28; }

/* ---- goldflow canvas ---- */
canvas[data-goldflow] { display: block; width: 100%; height: 100%; }

/* ---- hero specifics ---- */
.hero-stage { --vh: 1vh; }
.hero-card { will-change: clip-path; }

/* ---- FAQ ---- */
.faq-grid { transition: grid-template-rows .45s cubic-bezier(.16,.84,.34,1); }
.faq-body { transition: opacity .35s ease; }
.faq-icon { transition: transform .35s cubic-bezier(.16,.84,.34,1); }
.faq-open .faq-icon { transform: rotate(45deg); }
.faq-open .faq-line { opacity: 0 !important; }

/* ---- tabs ---- */
.tabbtn { transition: background .3s, border-color .3s, color .3s; border-color: rgba(255,255,255,.35); color: #fff; }
.tabbtn:hover { border-color: rgba(255,255,255,.8); }
.tabbtn.on { background: rgb(168 128 47); border-color: rgb(168 128 47); }
.tabpane { display: none; }
.tabpane.on { display: flex; animation: paneIn .5s cubic-bezier(.16,.84,.34,1); }
@keyframes paneIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- persona / values slider ---- */
.pslide { display: none !important; }
@media (min-width: 1024px) { .pslide.on { display: flex !important; } }
.pslide.on > * { animation: riseIn .7s cubic-bezier(.16,.84,.34,1) both; }
.pslide.on > *:nth-child(2) { animation-delay: .08s; }
.pslide.on > *:nth-child(3) { animation-delay: .16s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(120px); } to { opacity: 1; transform: none; } }
.pdot span { transition: transform .3s, background .3s; }
.pdot.on span { transform: scale(1) !important; }
.ptab { transition: color .3s; }
.ptab.on { color: #C9A24B; }

/* ---- team card hover (about) ---- */
.team-card .team-bio { display: none; }
@media (min-width: 1024px) { .team-card .team-bio { display: block; } }

/* ---- testimonial masonry card flip ---- */
.tcard:hover .tcard__back { display: flex; }

/* ---- "how we're different" video stage ---- */
.diff-stage { pointer-events: none; }
.diff-video { position: absolute; inset: 0; }
.diff-video canvas { width: 100%; height: 100%; }

/* ---- counters ---- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---- chat device (front-facing assistant) ---- */
.device { border-radius: 14px; overflow: hidden; background: #0B0A09; border: 1px solid rgba(255,255,255,.09); color: #fff; font-size: 13px; height: 100%; display: flex; flex-direction: column; }
.device__bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; background: #0A0908; border-bottom: 1px solid #221F1B; font-size: 11.5px; color: rgba(255,255,255,.6); flex: none; }
.device__bar .dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.device__bar .dot.r { background: #FF5F57; } .device__bar .dot.y { background: #FEBC2E; } .device__bar .dot.g { background: #28C840; }
.device__title { margin-left: 8px; color: rgba(255,255,255,.82); }
.device__badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(201,162,75,.16); color: #E3C480; font-size: 10.5px; }
.device__badge i { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #100E0C; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.07); flex: none; }
.chat__avatar { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(140deg,#E3C480,#8A6526); color: #14100A; }
.chat__avatar svg { width: 19px; height: 19px; }
.chat__head b { display: block; font-weight: 500; font-size: 13.5px; }
.chat__head small { display: block; font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; }
.chat__latency { margin-left: auto; font-size: 11px; color: #E3C480; font-variant-numeric: tabular-nums; }
.chat__log { flex: 1; min-height: 0; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 9px; justify-content: flex-end; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 15px; line-height: 1.45; font-size: 13px; }
.msg--user { align-self: flex-end; background: linear-gradient(140deg,#E3C480,#A8802F); color: #14100A; border-bottom-right-radius: 5px; }
.msg--bot { align-self: flex-start; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-bottom-left-radius: 5px; }
.msg--in, .tool, .rcard, .chips { animation: msgIn .42s cubic-bezier(.16,.84,.34,1); }
@keyframes msgIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 999px; background: rgba(63,159,216,.12); border: 1px solid rgba(63,159,216,.28); font-size: 11px; color: #9FD4F2; }
.tool i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(159,212,242,.35); border-top-color: #6FE0F5; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tool.done { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.28); color: #A7E8BE; }
.tool.done i { border: 0; background: none; animation: none; position: relative; }
.tool.done i::after { content: "✓"; font-size: 11px; line-height: 1; color: #4ADE80; }
.typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 12px 15px; border-radius: 15px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #E3C480; animation: dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
.rcard { align-self: flex-start; width: 100%; max-width: 320px; padding: 12px 14px; border-radius: 13px; background: rgba(201,162,75,.1); border: 1px solid rgba(201,162,75,.3); }
.rcard b { display: block; font-size: 12.5px; font-weight: 500; }
.rcard span { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.55); }
.rcard span em { font-style: normal; color: #fff; }
.chips { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 7px; }
.chips b { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-size: 11px; font-weight: 400; color: rgba(255,255,255,.7); }
.chat__composer { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.07); flex: none; }
.chat__input { flex: 1; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; }
.chat__input .caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 1px; background: #E3C480; vertical-align: -2px; animation: caret 1s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chat__send { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; background: #C9A24B; color: #14100A; }
.chat__send svg { width: 16px; height: 16px; }

/* ---- illustration wrapper ---- */
.ill-wrap { border-radius: 16px; overflow: hidden; line-height: 0; }
.ill { width: 100%; height: auto; display: block; }
.il-float { animation: ilFloat 7s ease-in-out infinite; } .il-float.il-d1 { animation-delay: -2.4s; animation-duration: 8.4s; }
@keyframes ilFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.il-pulse { animation: ilPulse 2.8s ease-in-out infinite; }
@keyframes ilPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.il-spin-slow { animation: ilBob 6s ease-in-out infinite; }
@keyframes ilBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.il-orbit { animation: ilSpin 26s linear infinite; } @keyframes ilSpin { to { transform: rotate(360deg); } }
.il-nodes circle, .il-nodes rect { animation: ilNode 3.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.il-nodes > *:nth-child(2) { animation-delay: .35s; } .il-nodes > *:nth-child(3) { animation-delay: .7s; } .il-nodes > *:nth-child(4) { animation-delay: 1.05s; }
@keyframes ilNode { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.il-bars > * { transform-origin: bottom; transform-box: fill-box; animation: ilGrow 5s ease-in-out infinite; }
.il-bars > *:nth-child(2) { animation-delay: .3s; } .il-bars > *:nth-child(3) { animation-delay: .6s; }
@keyframes ilGrow { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.88); } }
.il-ring circle:last-child { animation: ilRing 6s ease-in-out infinite; } @keyframes ilRing { 0%,100% { stroke-dasharray: 540 741; } 50% { stroke-dasharray: 640 741; } }
.il-ecg { stroke-dasharray: 460; stroke-dashoffset: 460; animation: ilEcg 3.4s linear infinite; } @keyframes ilEcg { to { stroke-dashoffset: -460; } }

/* cube list bullets (their lg:list-image cube) */
.cube-list { list-style: none; padding-left: 0; }
.cube-list li { position: relative; padding-left: 26px; }
.cube-list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(140deg,#E3C480,#8A6526); transform: rotate(45deg) scale(.82); box-shadow: 2px 2px 0 rgba(0,0,0,.18); }

/* ---- form ---- */
.finput { width: 100%; padding: 13px 16px; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,.12); color: #000; font: inherit; font-size: 15px; }
.finput:focus { outline: none; border-color: #C9A24B; box-shadow: 0 0 0 3px rgba(201,162,75,.2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [style*="opacity:0"] { opacity: 1 !important; transform: none !important; }
}

/* hero laptop sizing (their bundle has no arbitrary widths for this) */
.hero-laptop-inner { width: min(92vw, 1200px); }
@media (min-width: 1024px) { .hero-laptop-inner { width: min(76vw, 1180px); } }

/* nav on the ivory strip at the very top of the home page */
.nav-light, .nav-light .nav-pill, .nav-light .navlink, .nav-light .dd-host > div { color: #15130F !important; }
.nav-light .nav-pill { background: rgba(255,255,255,.55); border-color: rgba(21,19,15,.08);
  box-shadow: 0 8px 32px rgba(21,19,15,.10), inset 0 1px 0 rgba(255,255,255,.8); }
.nav-light.nav-scrolled .nav-pill { background: rgba(255,255,255,.74); border-color: rgba(21,19,15,.10); }
.nav-light .brand__a, .nav-light .brand__l { color: #0E2440; }
.nav-light .brand__sub { color: rgba(14,36,64,.9); }
.nav-light .navline { background: rgba(21,19,15,.45); }
.nav-light .nav__link[aria-current="page"], .nav-light .navlink[aria-current="page"] span { color: #8A6526 !important; }
.nav-light .nav-toggle span { background: #15130F; }
.nav-light .dd { color: #fff; }
.nav-light .dd__item, .nav-light .dd__item b, .nav-light .dd__item small { color: #fff !important; }
.nav-light .brand__a, .nav-light .brand__l { color: #0E2440; }
.nav-light .brand__sub { color: rgba(14,36,64,.9); }
.nav-light .navline { background: rgba(0,0,0,.5); }
.nav-light .dd { color: #fff; }

/* utilities the reference bundle does not ship (JIT) */
.mr-4{margin-right:1rem}.mr-6{margin-right:1.5rem}.pr-8{padding-right:2rem}.w-10{width:2.5rem}.uppercase{text-transform:uppercase}
.text-white\/40{color:rgb(255 255 255 / .4)}
.max-w-\[20ch\]{max-width:20ch}.max-w-\[22ch\]{max-width:22ch}.max-w-\[46ch\]{max-width:46ch}.max-w-\[60ch\]{max-width:60ch}
.w-\[60%\]{width:60%}.pt-\[6vh\]{padding-top:6vh}
.hover\:bg-grey8:hover{background-color:rgb(51 51 51)}
@media (min-width:640px){.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.lg\:w-\[44%\]{width:44%}.lg\:pr-24{padding-right:6rem}.lg\:blurred-dim-violet-dot{background-image:radial-gradient(50% 50%,rgba(168,128,47,.45) 0%,rgba(0,0,0,0) 100%)}}

nav[data-nav-light] { color: #000; }
nav[data-nav-light] .nav-pill, nav[data-nav-light] .navlink, nav[data-nav-light] .dd-host > div { color: #000; }
nav[data-nav-light] .brand__a, nav[data-nav-light] .brand__l { color: #0E2440; }
nav[data-nav-light] .brand__sub { color: rgba(14,36,64,.9); }
nav[data-nav-light] .navline { background: rgba(0,0,0,.5); }
nav[data-nav-light].nav-scrolled .nav-pill { background: rgba(255,255,255,.72); }
.aspect-\[0\.9\]{aspect-ratio:.9}.tracking-widest{letter-spacing:.1em}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:w-4\/5{width:80%}}

/* ===== photo backgrounds ===== */
.ph-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kenburns { animation: kb 22s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes kb { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); } }
.ph-dim::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55)); }

/* ===== floating 3D object ===== */
.float3d { animation: float3d 9s ease-in-out infinite; will-change: transform; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
@keyframes float3d { 0%,100% { transform: translateY(0) rotate(-4deg) scale(1); } 50% { transform: translateY(-26px) rotate(5deg) scale(1.04); } }
.spin3d { animation: spin3d 18s linear infinite; }
@keyframes spin3d { to { transform: rotateY(360deg); } }

/* ===== logo marquee (real logos, grayscale -> colour on hover) ===== */
.logo-cell { display:inline-flex; align-items:center; justify-content:center; height:56px; width:104px; padding:0 8px; }
@media (min-width:1024px){ .logo-cell { height:64px; width:150px; padding:0 14px; } }
.logo-cell svg { height:30px; width:auto; max-width:96px; fill:#000; opacity:.42; transition: opacity .3s, transform .3s, fill .3s; }
.logo-cell:hover svg { opacity:1; fill:#8A6526; transform: scale(1.08); }
@media (min-width:1024px){ .logo-cell svg { height:38px; max-width:140px; } }
.logo-cell--dark svg { fill:#fff; opacity:.35; }
.logo-cell--dark:hover svg { fill:#E3C480; opacity:1; }

/* ===== giant faded word behind stats (their #oneteam) ===== */
.bigword { position:absolute; inset-x:0; top:50%; pointer-events:none; text-align:center; white-space:nowrap; overflow:hidden;
  font-size: clamp(120px, 22vw, 340px); font-weight:300; line-height:1; letter-spacing:-.02em;
  background-image: linear-gradient(180deg, rgba(227,196,128,.22), rgba(227,196,128,.02)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== animated pipeline (inside the laptop) ===== */
.flowdev { position:relative; width:100%; height:100%; background:#F6F5F2; color:#15130F; font-size:12px; overflow:hidden; }
.flowdev::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle,#E2DFD7 1px,transparent 1px); background-size:22px 22px; }
.flowdev__bar { position:absolute; left:0; right:0; top:0; height:34px; background:#0A0908; display:flex; align-items:center; gap:10px; padding:0 14px; color:rgba(255,255,255,.65); font-size:11px; z-index:2; }
.flowdev__bar i { width:8px; height:8px; border-radius:50%; display:block; }
.flowdev__badge { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:rgba(201,162,75,.16); color:#E3C480; font-size:10px; }
.flowdev__badge b { width:6px; height:6px; border-radius:50%; background:#4ADE80; animation: blink 1.8s ease-in-out infinite; }
.flow { position:absolute; left:0; right:0; top:34px; bottom:52px; }
.flow__wires { position:absolute; inset:0; width:100%; height:100%; }
.flow__wires path { stroke:#C9A24B; stroke-width:1.6; fill:none; opacity:.5; }
.flow__wires path.hot { opacity:1; stroke-width:2.2; }
.fnode { position:absolute; display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border-radius:9px; background:#fff; border:1px solid #E6E3DC; box-shadow:0 5px 16px rgba(21,19,15,.07); transition: box-shadow .3s, transform .3s, border-color .3s; }
.fnode__ic { width:22px; height:22px; flex:none; border-radius:6px; display:grid; place-items:center; font-size:9px; font-weight:600; color:#fff; }
.fnode__tx b { display:block; font-size:12px; font-weight:500; line-height:1.2; }
.fnode__tx small { display:block; font-size:9.5px; color:#6B665D; margin-top:2px; line-height:1.3; }
.fnode--acc { border-color:#C9A24B; box-shadow:0 0 0 3px rgba(201,162,75,.15), 0 5px 16px rgba(21,19,15,.07); }
.fnode.is-hot { transform: translateY(-2px) scale(1.03); border-color:#C9A24B; box-shadow:0 0 0 3px rgba(201,162,75,.28), 0 10px 26px rgba(21,19,15,.14); }
.flow__stats { position:absolute; left:0; right:0; bottom:0; height:52px; display:flex; background:#0A0908; border-top:1px solid #221F1B; }
.flow__stats span { flex:1; padding:8px 14px; border-right:1px solid #1A1815; color:#fff; }
.flow__stats span:last-child { border-right:0; }
.flow__stats small { display:block; font-size:9.5px; color:rgba(255,255,255,.45); }
.flow__stats b { display:block; font-size:15px; font-weight:400; margin-top:2px; font-variant-numeric:tabular-nums; }

/* ===== outcome cards with cube renders (their 3-card row) ===== */
.cube-card { display:flex; flex-direction:column; align-items:center; text-align:center; height:100%; }
.cube-card__img { width:118px; height:118px; object-fit:contain; margin-bottom:6px; filter:drop-shadow(0 24px 34px rgba(0,0,0,.55)); animation: float3d 8s ease-in-out infinite; }
.cube-card h3 { min-height: 2.6em; display:flex; align-items:center; justify-content:center; }

/* ===== phones for the success story ===== */
.phone-mock { position:relative; width:220px; aspect-ratio: 9/19; border-radius:32px; background:#0D0C0B; padding:8px; box-shadow: 0 40px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.1); }
.phone-mock img { width:100%; height:100%; object-fit:cover; border-radius:26px; }
.phone-mock::before { content:""; position:absolute; top:14px; left:50%; width:70px; height:18px; margin-left:-35px; border-radius:12px; background:#0D0C0B; z-index:2; }

/* branded chat header */
.chat__brand { display:inline-flex; align-items:baseline; font-family:"Exo 2",sans-serif; }

@media (min-width:640px){.sm\:block{display:block}}

/* scroll-down indicator */
.scrollcue { display:flex; flex-direction:column; align-items:center; gap:10px; }
.scrollcue__label { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.scrollcue__mouse { position:relative; width:26px; height:42px; border-radius:14px; border:1.5px solid rgba(255,255,255,.42); }
.scrollcue__mouse::after { content:""; position:absolute; left:50%; top:8px; width:3.5px; height:8px; margin-left:-1.75px;
  border-radius:2px; background:#E3C480; animation: wheel 1.9s cubic-bezier(.16,.84,.34,1) infinite; }
@keyframes wheel { 0% { transform:translateY(0); opacity:0; } 18% { opacity:1; } 70% { transform:translateY(16px); opacity:0; } 100% { transform:translateY(16px); opacity:0; } }
.scrollcue__chevs { display:flex; flex-direction:column; align-items:center; gap:-2px; margin-top:-2px; }
.scrollcue__chevs i { display:block; width:9px; height:9px; margin-top:-4px; border-right:1.5px solid rgba(227,196,128,.85);
  border-bottom:1.5px solid rgba(227,196,128,.85); transform:rotate(45deg); animation: chev 1.9s ease-in-out infinite; }
.scrollcue__chevs i:nth-child(2) { animation-delay:.18s; }
.scrollcue__chevs i:nth-child(3) { animation-delay:.36s; }
@keyframes chev { 0%,100% { opacity:.18; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .scrollcue__mouse::after, .scrollcue__chevs i { animation:none; } }

/* hero wordmark */
.wordmark { display:inline-flex; align-items:baseline; gap:.5em; font-family:"Exo 2",sans-serif; white-space:nowrap; }
.wordmark b { font-weight:800; font-size:clamp(38px,6vw,78px); line-height:1; letter-spacing:-.01em; color:#fff;
  text-shadow:0 0 34px rgba(255,255,255,.18); }
.wordmark span { font-weight:700; font-size:clamp(13px,1.5vw,21px); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.95); align-self:center; }
/* the hero wordmark carries the logo's own letter treatment */
.wordmark b { display:inline-flex; align-items:baseline; }
.wordmark b > span { font-family:inherit; font-weight:inherit; font-size:inherit; letter-spacing:inherit; text-transform:none; color:#fff; align-self:baseline; }
.wordmark b > .wm__a, .wordmark b > .wm__l { font-weight:600; letter-spacing:.01em; }
.wordmark b > .wm__i { font-weight:600; background-image:linear-gradient(140deg,#FBF2DA 0%,#E3C480 38%,#C9A24B 72%,#96712C 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.wordmark b > .wm__x { font-weight:800; font-size:1.25em; line-height:.9; margin:0 -.012em 0 -.018em; background-image:linear-gradient(136deg,#6FE0F5 0%,#3F9FD8 32%,#C9A24B 74%,#8A6526 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 18px rgba(63,159,216,.32)); }
@media (max-width:640px){ .wordmark { flex-direction:column; align-items:center; gap:.25em; } }

/* AI-growth stat cards */
.statcard { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px;
  padding:28px 26px 26px; border-radius:24px; min-height:260px;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(227,196,128,.18);
  transition: transform .45s cubic-bezier(.16,.84,.34,1), border-color .45s, background .45s;
  animation: statIn .8s cubic-bezier(.16,.84,.34,1) both; animation-delay: var(--d, 0s); }
@keyframes statIn { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
.statcard:hover { transform:translateY(-6px); border-color:rgba(227,196,128,.55); background:linear-gradient(160deg, rgba(201,162,75,.14), rgba(255,255,255,.02)); }
.statcard__ic { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:rgba(201,162,75,.16); border:1px solid rgba(201,162,75,.28); }
.statcard__ic svg { width:22px; height:22px; }
.statcard__n { font-size:56px; line-height:1; font-weight:300; color:#fff; font-variant-numeric:tabular-nums; margin-top:4px; }
.statcard__h { font-size:15px; line-height:1.45; color:rgba(237,232,222,.92); }
.statcard__s { font-size:12.5px; line-height:1.4; color:rgba(237,232,222,.5); margin-top:auto; }
.statcard__bar { display:block; height:4px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; }
.statcard__bar u { display:block; height:100%; width:0; border-radius:2px; background:linear-gradient(90deg,#E3C480,#8A6526);
  transition: width 1.6s cubic-bezier(.16,.84,.34,1) .3s; }
.statcard.is-in .statcard__bar u, .is-in .statcard__bar u { width: var(--w); }

/* marquee edge fades on light sections */
.mq-fade { position:relative; }
.mq-fade::before, .mq-fade::after { content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.mq-fade::before { left:0; background:linear-gradient(to right, #EDE8DE, rgba(237,232,222,0)); }
.mq-fade::after { right:0; background:linear-gradient(to left, #EDE8DE, rgba(237,232,222,0)); }

/* no horizontal overflow anywhere (marquees / swipers) */
html, body { overflow-x: clip; max-width: 100%; }
main { overflow-x: clip; }
[data-swiper] .swiper { overflow: hidden !important; }
[data-swiper] .swiper.\!overflow-visible { overflow: hidden !important; }

.h-\[78\%\]{height:78%}

/* cube stage: scroll-reactive panel that hands off to the next section */
.cubestage [data-cube] { will-change: transform; transform-origin: 50% 55%; }
.cubestage__rail { position:absolute; left:50%; bottom:0; width:2px; height:34%; transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(227,196,128,0), rgba(227,196,128,.55)); overflow:hidden; }
.cubestage__rail i { position:absolute; left:-3px; top:0; width:8px; height:8px; border-radius:50%;
  background:#E3C480; box-shadow:0 0 14px rgba(227,196,128,.9); opacity:0; }
.cubestage + section, .cubestage + div { position:relative; }

.shadow-sm{box-shadow:0 1px 3px rgba(21,19,15,.08),0 8px 24px rgba(21,19,15,.06)}
.hover\:-translate-y-1:hover{transform:translateY(-4px)}

/* arbitrary utilities the cloned bundle does not ship (must be declared explicitly) */
.h-\[260vh\]{height:260vh}.h-\[220px\]{height:220px}.mt-\[-220px\]{margin-top:-220px}
.w-\[70\%\]{width:70%}.max-w-\[820px\]{max-width:820px}.max-w-\[40ch\]{max-width:40ch}
.aspect-\[16\/9\]{aspect-ratio:16/9}.items-end{align-items:flex-end}.order-2{order:2}.pt-24{padding-top:6rem}
.-mb-10{margin-bottom:-2.5rem}.text-premierBase\/40{color:rgb(237 232 222 / .4)}
@media (min-width:640px){.sm\:h-\[440px\]{height:440px}}
@media (min-width:1024px){.lg\:h-\[600px\]{height:600px}.lg\:mt-\[-420px\]{margin-top:-420px}.lg\:w-\[46\%\]{width:46%}.lg\:w-\[42\%\]{width:42%}.lg\:order-none{order:0}}
.gap-x-8{column-gap:2rem}
@media (min-width:1024px){.lg\:grid-cols-\[1fr_minmax\(0\,44\%\)\]{grid-template-columns:1fr minmax(0,44%)}}

/* ===== privacy layer device ===== */
.device--priv { box-shadow: 0 40px 110px rgba(0,0,0,.55), 0 0 70px rgba(201,162,75,.12); }
.priv { background:#100E0C; padding:16px 18px 14px; display:flex; flex-direction:column; gap:9px; }
.priv__label { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:7px; }
.priv__msg { border-radius:12px; padding:12px 14px; font-size:12.5px; line-height:1.65; border:1px solid rgba(255,255,255,.08); }
.priv__msg--raw { background:rgba(255,255,255,.045); color:rgba(255,255,255,.86); }
.priv__msg--safe { background:rgba(201,162,75,.10); border-color:rgba(201,162,75,.30); color:rgba(255,255,255,.9); opacity:0; transform:translateY(8px);
  transition:opacity .5s cubic-bezier(.16,.84,.34,1), transform .5s cubic-bezier(.16,.84,.34,1); }
.priv__msg--safe.on { opacity:1; transform:none; }
.priv__msg--safe b { font-weight:500; color:#E3C480; background:rgba(227,196,128,.14); border-radius:4px; padding:1px 5px; }

.pii { position:relative; border-radius:4px; padding:1px 4px; transition:background .35s, color .35s, box-shadow .35s; }
.pii.flag { background:rgba(240,120,90,.20); box-shadow:inset 0 0 0 1px rgba(240,120,90,.55); color:#FFC9BB; }
.pii.flag::after { content:attr(data-pii); position:absolute; left:0; top:-17px; font-size:8.5px; letter-spacing:.1em;
  color:#FFAE9B; background:rgba(240,120,90,.16); border-radius:3px; padding:1px 4px; white-space:nowrap; }
.pii.masked { background:rgba(227,196,128,.16); box-shadow:inset 0 0 0 1px rgba(227,196,128,.4); color:transparent; }
.pii.masked::before { content:"●●●●●●"; position:absolute; inset:0; display:grid; place-items:center; color:#E3C480; font-size:10px; letter-spacing:.08em; }
.pii.masked::after { display:none; }

.priv__arrow { display:flex; flex-direction:column; align-items:center; gap:2px; }
.priv__arrow i { width:7px; height:7px; border-right:1.5px solid rgba(227,196,128,.7); border-bottom:1.5px solid rgba(227,196,128,.7);
  transform:rotate(45deg); animation:chev 1.6s ease-in-out infinite; }
.priv__arrow i:nth-child(2){animation-delay:.16s} .priv__arrow i:nth-child(3){animation-delay:.32s}

.priv__checks { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.pcheck { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:10.5px;
  background:rgba(74,222,128,.10); border:1px solid rgba(74,222,128,.26); color:#A7E8BE;
  opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.pcheck.on { opacity:1; transform:none; }
.pcheck i { width:11px; height:11px; border-radius:50%; background:#4ADE80; position:relative; flex:none; }
.pcheck i::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:8px; color:#0B1F12; font-weight:700; }

.priv__audit { margin-top:4px; border-top:1px solid rgba(255,255,255,.07); padding-top:10px; }
.plog { height:74px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; color:rgba(255,255,255,.62); }
.plog div { animation:msgIn .32s cubic-bezier(.16,.84,.34,1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plog .t { color:rgba(255,255,255,.3); margin-right:7px; }
.plog .k { color:#E3C480; margin-right:7px; }
.plog .ok { color:#4ADE80; }
@media (prefers-reduced-motion: reduce) { .priv__arrow i { animation:none; } .priv__msg--safe, .pcheck { opacity:1; transform:none; } }

/* ===== rail that carries from the cube panel into the next section ===== */
.railconnect { position:relative; height:96px; margin-top:-2px; }
@media (min-width:1024px){ .railconnect { height:170px; } }
.railconnect__line { position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(227,196,128,.55), rgba(227,196,128,.06)); }
.railconnect__dot { position:absolute; left:50%; top:0; width:9px; height:9px; margin-left:-4.5px; border-radius:50%;
  background:#E3C480; box-shadow:0 0 16px 3px rgba(227,196,128,.75); opacity:0; }
/* header held back until the light arrives */
.js [data-rail-target] { opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.84,.34,1), transform .7s cubic-bezier(.16,.84,.34,1); }
[data-rail-target].rail-lit { opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){ .js [data-rail-target]{opacity:1;transform:none} .railconnect__dot{opacity:1;top:100%} }
.w-\[86\%\]{width:86%}.max-w-\[900px\]{max-width:900px}

.has-rail { padding-bottom: 0 !important; }
.railconnect { height: 88px; }
@media (min-width:1024px){ .railconnect { height: 150px; } }
/* failsafe: if the rail never fires, headers must still appear */
.no-rail-js [data-rail-target] { opacity: 1 !important; transform: none !important; }

/* ============================================================
   Mobile: the pipeline needs room, not a phone-sized laptop
   ============================================================ */
.flowscroll { width:100%; height:100%; overflow:hidden; }
.flowscroll__inner { width:100%; height:100%; }

@media (max-width: 1023px) {
  /* drop the laptop chrome and give the diagram a readable canvas */
  .laptop--flow { aspect-ratio:auto; height:auto; }
  .laptop--flow .laptop__lid { position:relative; inset:auto; left:0; right:0; top:0; bottom:0;
    border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.5); }
  .laptop--flow .laptop__screen { position:relative; inset:auto; height:470px; border-radius:12px; }
  .laptop--flow .laptop__base, .laptop--flow .laptop__foot, .laptop--flow .laptop__cam { display:none; }
  .laptop--flow .flowscroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .laptop--flow .flowscroll::-webkit-scrollbar { display:none; }
  .laptop--flow .flowscroll__inner { width:880px; height:470px; }
  .laptop--flow .flow { top:34px; bottom:56px; }
  .laptop--flow::after { content:"Swipe to follow the pipeline →"; display:block; margin-top:10px;
    text-align:center; font-size:11px; letter-spacing:.06em; color:rgba(237,232,222,.42); }
}

/* privacy device: don't reserve a void while the safe message is still hidden */
.priv__msg--safe { max-height:0; padding-top:0; padding-bottom:0; border-width:0; overflow:hidden;
  transition:opacity .5s cubic-bezier(.16,.84,.34,1), transform .5s cubic-bezier(.16,.84,.34,1),
             max-height .5s cubic-bezier(.16,.84,.34,1), padding .4s, border-width .4s; }
.priv__msg--safe.on { max-height:240px; padding-top:12px; padding-bottom:12px; border-width:1px; }

@media (max-width: 480px) {
  .priv { padding:12px 13px 11px; gap:7px; }
  .priv__msg { font-size:11.5px; line-height:1.6; padding:10px 11px; }
  .priv__label { font-size:9px; }
  .pcheck { font-size:9.5px; padding:4px 8px; }
  .plog { height:60px; font-size:9px; }
  .device__title { font-size:10.5px; }
  .chat__log { padding:12px; }
  .msg { max-width:88%; font-size:12.5px; padding:9px 12px; }
  .statcard { min-height:auto; padding:22px 20px; }
  .statcard__n { font-size:44px; }
}

/* ============================================================
   Blue / cyan as the second brand tone (from the logo's X)
   ============================================================ */
:root {
  --aixl-cyan-lt: #6FE0F5;
  --aixl-cyan:    #3F9FD8;
  --aixl-cyan-dp: #1D5CC0;
}

/* --- light sections get blue gradient lighting --- */
[data-light-bg] { position: relative; isolation: isolate; }
[data-light-bg]::before, .lw {
  background-image:
    /* two soft blooms for depth — both fully inside the tile so it repeats seamlessly */
    radial-gradient(64% 26% at 22% 26%, rgba(63,159,216,.20), transparent 74%),
    radial-gradient(60% 24% at 78% 70%, rgba(201,162,75,.15), transparent 76%),
    /* the steady blend across the page: cool, neutral, warm, cool */
    linear-gradient(90deg,
      rgba(63,159,216,.24)  0%,
      rgba(111,224,245,.15) 19%,
      rgba(63,159,216,.03)  44%,
      rgba(201,162,75,.11)  72%,
      rgba(63,159,216,.18)  100%),
    /* vertical breathing — identical at 0% and 100%, so tiles join invisibly */
    linear-gradient(180deg,
      rgba(63,159,216,.09)  0%,
      rgba(111,224,245,.03) 32%,
      rgba(201,162,75,.06)  50%,
      rgba(111,224,245,.03) 68%,
      rgba(63,159,216,.09)  100%);
  background-repeat: repeat-y;
  /* --vw / --wx / --wy are set from JS so every light surface samples the same
     document-anchored wash, whatever its own width or offset — no seams */
  background-size: var(--vw, 100vw) 1200px;
  background-position: var(--wx, 0px) var(--wy, 0px);
}
[data-light-bg]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
/* a washed block inside a washed wrapper must sit above the wrapper's
   overlay, otherwise the two stack and the block reads darker */
.lw { position: relative; z-index: 1; }
/* .white-to-black paints black from 0.1% down; when a washed cream block sits
   on top of it, nudge the transition past the anti-aliased edge so no dark
   hairline shows where the light band begins */
.white-to-black:has(> .lw:first-child) {
  background-image:
    linear-gradient(transparent 2px, #000 2px),
    /* the 1px that shows above the black is painted in the wash's own
       left-to-right tones, so the joint disappears instead of flashing cream */
    linear-gradient(90deg, #C3D6DD 0%, #DAE7E2 19%, #E8E6DE 44%, #E9E0CF 72%, #CEDBDE 100%);
}
[data-light-bg] > section:not(.absolute), [data-light-bg] > div:not(.absolute) { position: relative; z-index: 1; }

/* white cards on those sections pick up a cool edge */
[data-light-bg] .bg-white { box-shadow: 0 1px 3px rgba(21,32,45,.07), 0 10px 30px rgba(29,92,192,.10); }
[data-light-bg] a.bg-white:hover { box-shadow: 0 10px 34px rgba(29,92,192,.20); }

/* --- cyan accents on dark --- */
.blurred-cyan-dot { background-image: radial-gradient(50% 50%, rgba(63,159,216,.55) 0%, transparent 100%); }
.itile--cyan { background: rgba(63,159,216,.14); border-color: rgba(111,224,245,.32); }
.itile--cyan .ico { color: var(--aixl-cyan-lt); }
.fitem:hover .itile--cyan { background: rgba(63,159,216,.26); box-shadow: 0 8px 24px rgba(63,159,216,.28); }
.ico--cyan { color: var(--aixl-cyan-lt); }

/* rules and dividers run gold -> cyan */
.quote__rule, .my-4.h-px.w-20 { background-image: linear-gradient(90deg, #A8802F, var(--aixl-cyan)) !important; }
.fitem__rule { background: linear-gradient(90deg, #C9A24B, var(--aixl-cyan)); }
.fitem:hover .fitem__rule { background: linear-gradient(90deg, #E3C480, var(--aixl-cyan-lt)); }

/* hero + stages get a cool counter-light behind the warm one */
.hero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(46% 42% at 8% 12%, rgba(63,159,216,.28), transparent 70%);
}
.cubestage::after, .diff-stage .sticky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(42% 38% at 12% 16%, rgba(63,159,216,.24), transparent 72%);
}
/* lift only the content above the counter-light — re-positioning the
   absolutely placed background layers would drop them into normal flow */
.cubestage::after, .diff-stage .sticky::after { z-index: 0; }
.cubestage > .relative, .cubestage > .cubestage__rail,
.diff-stage .sticky > .relative { z-index: 1; }

/* stat cards: alternate the accent */
.statcard:nth-child(even) .statcard__ic { background: rgba(63,159,216,.15); border-color: rgba(111,224,245,.30); }
.statcard:nth-child(even) .statcard__ic svg { fill: url(#aixlCyan); }
.statcard:nth-child(even) .statcard__bar u { background: linear-gradient(90deg, var(--aixl-cyan-lt), var(--aixl-cyan-dp)); }
.statcard:hover { border-color: rgba(111,224,245,.45); }

/* chips + badges gain a cool option */
.abadge:hover { color: var(--aixl-cyan-lt); border-color: rgba(111,224,245,.5); }
.logo-cell--dark:hover svg { fill: var(--aixl-cyan-lt); }

/* links / arrows */
.link-arrow:hover { color: var(--aixl-cyan-lt); }
.dd__item:hover { background: rgba(63,159,216,.12); }
.dd__ic { background: linear-gradient(140deg, rgba(201,162,75,.26), rgba(63,159,216,.22)); }

/* privacy device already reads cool — reinforce it */
.priv__msg--safe { border-color: rgba(111,224,245,.34); background: rgba(63,159,216,.10); }
.priv__msg--safe b { color: var(--aixl-cyan-lt); background: rgba(111,224,245,.14); }

/* light-page nav keeps contrast over the blue wash */
.nav-light .nav-pill { background: rgba(255,255,255,.62); }

/* alternate the icon tiles so the two tones share the light grid */
[data-light-bg] .dd__ic { background: linear-gradient(140deg, rgba(201,162,75,.24), rgba(63,159,216,.20)); }
[data-light-bg] a.bg-white:nth-child(even) .dd__ic { background: linear-gradient(140deg, rgba(63,159,216,.26), rgba(111,224,245,.18)); }
[data-light-bg] a.bg-white:nth-child(even) .dd__ic svg { fill: url(#aixlCyan); }
[data-light-bg] a.bg-white:nth-child(even) span[style*="color:#8A6526"] { color: #1D5CC0 !important; }

/* --- hero picks up a cool cast over the warm photo --- */
.hero-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  /* the cool light sits inside the card, away from the clipped edge, so the
     rounded corners stay crisp instead of glowing */
  background:
    radial-gradient(54% 48% at 26% 30%, rgba(63,159,216,.40), transparent 72%),
    radial-gradient(46% 42% at 84% 78%, rgba(29,92,192,.28),  transparent 74%),
    radial-gradient(34% 30% at 68% 18%, rgba(111,224,245,.16), transparent 76%);
  mix-blend-mode: screen;
  opacity: .92;
}
.hero-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  /* vignette: keeps the banner edge dark and clean against the light page */
  background: radial-gradient(132% 112% at 50% 46%, transparent 50%, rgba(2,6,14,.52) 100%);
}
[data-hero-veil] { background-image: linear-gradient(to top, #000 0%, rgba(7,16,32,.62) 46%, transparent 100%) !important; }
.hero-stage { background-image: radial-gradient(58% 34% at 50% 0%, rgba(29,92,192,.22), transparent 72%); }


/* ============================================================
   Gold + blue blend: nothing on the site is a single tone,
   and every hover picks up the cool half of the palette
   ============================================================ */

/* primary buttons: warm fill, cool sheen arriving from the far corner */
.bg-premierViolet30 {
  background-image: linear-gradient(118deg, #B0862F 0%, #A8802F 58%, #96712C 100%);
  transition: background-image .28s ease, box-shadow .28s ease;
}
.group:hover .group-hover\:bg-premierViolet20,
.hover\:bg-premierViolet20:hover {
  background-image: linear-gradient(118deg, #C9A24B 0%, #B08A38 52%, #3D7FB8 148%);
  box-shadow: 0 8px 26px rgba(29,92,192,.26);
}
.group:active .group-active\:bg-premierViolet40,
.hover\:bg-premierViolet40:hover {
  background-image: linear-gradient(118deg, #8A6526 0%, #7B5C24 60%, #2C5A86 150%);
}
.group:hover .group-hover\:bg-premierViolet50 {
  background-image: linear-gradient(118deg, #6A4B18 0%, #5E4416 58%, #24506F 150%);
}

/* dark cards and rows: warm surface, cool lift */
a.bg-grey9:hover, .bg-grey9.group:hover, .swiper-slide:hover {
  box-shadow: 0 10px 34px rgba(29,92,192,.22), inset 0 0 0 1px rgba(111,224,245,.16);
}
[data-faq]:hover .faq-line { background-image: linear-gradient(90deg, #8A6526, var(--aixl-cyan)); }
[data-faq]:hover .faq-icon { color: var(--aixl-cyan-lt); }

/* light cards: warm tile, cool lift */
[data-light-bg] a.bg-white:hover,
[data-light-bg] .bg-white.group:hover {
  box-shadow: 0 12px 38px rgba(29,92,192,.22), 0 2px 6px rgba(21,32,45,.08);
}

/* brand logo cells */
.logo-cell:hover svg { fill: var(--aixl-cyan-dp); }
.logo-cell--dark:hover svg { fill: var(--aixl-cyan-lt); }

/* tabs and dropdown rows */
.tab:hover, .tab[aria-selected="true"] { border-color: rgba(111,224,245,.5); }
.dd__item:hover b { color: var(--aixl-cyan-lt); }

/* "Learn more" links: the reference turns them gold, we land between the two */
.hover\:text-premierViolet20:hover { color: #7FC7E8 !important; }
[data-light-bg] .hover\:text-premierViolet20:hover { color: var(--aixl-cyan-dp) !important; }

/* the marquee rules and section dividers never read as one tone */
.h-px.bg-\[\#292929\], .bg-\[\#292929\] {
  background-image: linear-gradient(90deg, #8A6526 0%, #292929 46%, #1D5CC0 100%) !important;
}

/* form controls */
.finput:focus { border-color: var(--aixl-cyan); box-shadow: 0 0 0 3px rgba(63,159,216,.18); outline: none; }

/* eyebrow chips carry both tones instead of a flat wash */
.chip { background-image: linear-gradient(118deg, rgba(201,162,75,.20) 0%, rgba(255,255,255,0) 52%, rgba(63,159,216,.22) 100%); }
.chip.bg-white\/30 { background-image: linear-gradient(118deg, rgba(201,162,75,.16) 0%, rgba(255,255,255,0) 54%, rgba(63,159,216,.18) 100%); }

/* busy photographs used as texture behind copy get calmed down */
.ph-calm { filter: saturate(.38) contrast(1.04); }