/* Luxe layer: glass cards, premium product switch, richer section arrangements, contrast.
   Content is untouched; only design, arrangement and motion styling live here. */
:root{
  --glass-l:linear-gradient(150deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.55) 100%);
  --glass-d:linear-gradient(150deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 100%);
  --edge-l:rgba(255,255,255,.9);--ring-l:rgba(122,63,240,.10);
  --shadow-l:0 1px 0 rgba(255,255,255,.95) inset,0 20px 44px -22px rgba(42,19,79,.28),0 0 0 1px var(--ring-l);
  --shadow-lh:0 1px 0 rgba(255,255,255,.95) inset,0 34px 70px -26px rgba(78,31,176,.42),0 0 0 1px rgba(122,63,240,.30);
  --shadow-d:0 1px 0 rgba(255,255,255,.12) inset,0 24px 50px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.10);
  --shadow-dh:0 1px 0 rgba(255,255,255,.16) inset,0 36px 70px -26px rgba(0,0,0,.7),0 0 0 1px rgba(233,207,158,.38);
  --ease-lux:cubic-bezier(.22,1,.36,1);
  --ink-body:#4f4560;--ink-soft:#6a5e7a;
}
/* Section backdrop between receding sections */
body{background:#0d0718}

/* ---------- Glass card system ---------- */
.glass-l,.card:not(.fs-card):not(.mail),.num-card,.person,.post-card,.contact-option,.home-trust .principle,.trust .principle,.approach .principles article,.articles>a{
  --mx:-400px;--my:-400px;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(122,63,240,.10),transparent 62%),var(--glass-l);
  border:1px solid var(--edge-l);border-radius:20px;box-shadow:var(--shadow-l);
  transition:transform .8s var(--ease-lux),box-shadow .8s var(--ease-lux),border-color .5s,opacity 1s var(--ease-lux)}
@media(hover:hover){
.glass-l:hover,.card:not(.fs-card):not(.mail):hover,.num-card:hover,.person:hover,.post-card:hover,.contact-option:hover,.home-trust .principle:hover,.trust .principle:hover,.approach .principles article:hover,.articles>a:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-lh)}
}
.deploy-dark,.agents li,.security{
  --mx:-400px;--my:-400px;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(233,207,158,.13),transparent 62%),var(--glass-d),#1b0d33!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:20px;box-shadow:var(--shadow-d);
  transition:transform .8s var(--ease-lux),box-shadow .8s var(--ease-lux),opacity 1s var(--ease-lux)}
.agents li{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(233,207,158,.13),transparent 62%),var(--glass-d)!important}
@media(hover:hover){.deploy-dark:hover,.agents li:hover,.security:hover{transform:translateY(-6px);box-shadow:var(--shadow-dh)}}

/* Soft colour fields so the glass reads */
.products,.approach,.research,.home-trust .section,.content-page .section:not(.fs-engine):not(.cta-wrap),.content-page .section-mist{
  background-color:#e9e0f4;
  background-image:radial-gradient(760px 540px at 88% 6%,rgba(150,104,240,.32),transparent 62%),radial-gradient(640px 480px at 4% 96%,rgba(226,196,140,.30),transparent 62%),linear-gradient(180deg,#ece4f6,#e3d8f0)}
.content-page .section-mist,.approach{background-color:#e2d6f1}
.fs-engine{background:radial-gradient(800px 500px at 85% 0%,rgba(122,63,240,.28),transparent 60%),radial-gradient(600px 400px at 0% 100%,rgba(233,207,158,.10),transparent 60%),#120822!important}

/* ---------- Contrast: body copy on light, copy on dark ---------- */
.section-top>p,.product-copy>p,.principles p,.content-page .lede,.split-body>p,.num-card p,.deploy p,.person>p:last-child,.post-dek,.contact-option p,.security .sec-copy>p:not(.eyebrow){color:var(--ink-body)}
.product-copy li,.post-meta,.sec-list span{color:var(--ink-soft)}
.fs-engine .lede,.agents em{color:#cbbbe0}.agents span{color:#e9cf9e}.agents b{color:#fff}
.deploy-dark p{color:#d4c6e6!important}.deploy-dark .text-link{color:#f3e2c2!important}
.connection p,.contact p{color:#d8cbe8}
.dashboard-intro p{color:#d4c4e8}
.product-rail small{color:#bfb1d2}

/* ---------- Header: fixed, glass ---------- */
.floating-header{background:rgba(255,255,255,.96);backdrop-filter:saturate(170%) blur(18px);-webkit-backdrop-filter:saturate(170%) blur(18px);border-color:rgba(255,255,255,.7);box-shadow:0 14px 40px -12px rgba(8,2,16,.35),0 0 0 1px rgba(122,63,240,.08)}
.floating-header .logo-window{background:transparent}
.floating-header .logo-window img{mix-blend-mode:multiply}

/* ---------- Products: premium switch ---------- */
.tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:7px;border:1px solid rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.9);border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(246,240,253,.6));box-shadow:0 1px 0 #fff inset,0 18px 40px -24px rgba(42,19,79,.35),0 0 0 1px rgba(122,63,240,.10);isolation:isolate}
.tabs button{position:relative;z-index:1;bottom:0;border:0!important;border-radius:16px;padding:18px 22px;color:#5d5170;transition:color .55s var(--ease-lux),background .4s}
.tabs button:hover{color:#2a1450;background:rgba(122,63,240,.05)}
.tabs button>span{color:#7d669c;transition:color .55s var(--ease-lux)}
.tabs small{color:#8f7fa6;transition:color .55s var(--ease-lux)}
.tabs button[aria-selected=true]{color:#fff!important;background:transparent}
.tabs button[aria-selected=true]>span,.tabs button[aria-selected=true] small{color:#e2d6ff}
.tab-ind{position:absolute;z-index:0;top:7px;bottom:7px;left:0;width:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(120% 140% at 20% 0%,#9b6cf2 0%,#6a2fe0 45%,#3b1490 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 14px 30px -10px rgba(78,31,176,.6),0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .75s var(--ease-lux),width .75s var(--ease-lux)}
.tab-ind:after{content:'';position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#f3e2c2,transparent);opacity:.9}
.product-panel{gap:56px}
.product-copy .status{display:inline-flex;align-items:center;gap:8px;border-radius:30px;padding:6px 12px;background:rgba(255,255,255,.7);border:1px solid #e3d6f2;color:#4e1fb0}
.product-copy .status:before{content:'';width:6px;height:6px;border-radius:50%;background:#e9cf9e;box-shadow:0 0 0 3px rgba(233,207,158,.25)}
.product-copy li:before{color:#7a3ff0}
.product-art{border-radius:26px;background:radial-gradient(ellipse at 50% 70%,rgba(155,108,242,.55),transparent 62%),radial-gradient(ellipse at 90% 0%,rgba(243,226,194,.55),transparent 50%),linear-gradient(160deg,#f1e9fc,#e6dbf6);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 0 #fff inset,0 40px 80px -40px rgba(42,19,79,.45),0 0 0 1px rgba(122,63,240,.12)}
.art-grid{opacity:.7}
/* Switch choreography */
.product-panel.swap .product-copy>*{animation:lx-in .9s var(--ease-lux) both}
.product-panel.swap .product-copy>*:nth-child(2){animation-delay:.05s}
.product-panel.swap .product-copy>*:nth-child(3){animation-delay:.1s}
.product-panel.swap .product-copy>*:nth-child(4){animation-delay:.15s}
.product-panel.swap .product-copy>*:nth-child(5){animation-delay:.2s}
.product-panel.swap .product-copy>*:nth-child(6){animation-delay:.25s}
.product-panel.swap .visual:not([hidden]){animation:lx-art 1.1s var(--ease-lux) both}
@keyframes lx-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lx-art{from{opacity:0;transform:scale(.94) translateY(18px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}

/* ---------- Our approach: dark intro panel paired with aligned glass cards ---------- */
.approach{grid-template-columns:.85fr 1.15fr;gap:22px;align-items:stretch;border-top:0}
.approach .principles{display:flex;flex-direction:column;gap:18px}
.approach .principles article{display:flex;gap:24px;padding:30px 32px!important;border-bottom:1px solid var(--edge-l)!important}
.approach .principles article>span{flex-shrink:0;display:grid;place-items:center;width:52px;height:52px;padding:0!important;border-radius:16px;font:500 13px Inter;color:#4e1fb0!important;background:linear-gradient(150deg,#f3ecfd,#e9dcfb);box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(122,63,240,.15);transition:background .6s var(--ease-lux),color .6s,transform .8s var(--ease-lux)}
.approach .principles article:hover>span{background:linear-gradient(150deg,#8b55f4,#4e1fb0);color:#fff!important;transform:rotate(-6deg) scale(1.05)}
.approach .principles h3{margin-bottom:10px}
.approach .principles p{max-width:none}

/* Intro panels: the left-hand text becomes a dark plum card the height of its neighbours */
.approach-intro,.trust-grid>.section-head{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start;
  padding:44px 42px!important;border-radius:24px;color:#fff;
  background:radial-gradient(520px 420px at 100% 100%,rgba(122,63,240,.55),transparent 62%),radial-gradient(380px 300px at 0% 0%,rgba(233,207,158,.12),transparent 60%),linear-gradient(150deg,#1d0c3a,#2c1060 70%,#3a1477);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 30px 60px -28px rgba(29,12,58,.7),0 0 0 1px rgba(255,255,255,.06)}
.approach-intro:after,.trust-grid>.section-head:after{content:'';position:absolute;z-index:-1;right:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(233,207,158,.22);box-shadow:0 0 0 34px rgba(233,207,158,.04),0 0 0 68px rgba(199,180,255,.04)}
.approach-intro .eyebrow,.trust-grid>.section-head .eyebrow{color:#e9cf9e!important}
.approach-intro h2 .ln-i,.approach-intro h2:not([data-split]),.trust-grid>.section-head h2 .ln-i,.trust-grid>.section-head h2:not([data-split]){background:var(--tx-light)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.approach-intro h2 em{background:var(--tx-gold)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.trust-grid>.section-head .lede{color:#d6c8e8!important}
.approach-intro .text-link{color:#f3e2c2;border-bottom-color:rgba(233,207,158,.45);margin-top:auto;align-self:flex-start}
.approach-intro .text-link:hover{color:#fff}
.approach-intro h2{margin-bottom:40px}
.trust-grid{gap:22px!important;align-items:stretch}

/* ---------- Trust (home + trust page) ---------- */
.trust-grid .principles{gap:18px}
.home-trust .principle,.trust .principle{padding:28px!important}
.principle .line-ic{width:52px;height:52px;padding:12px;border-radius:16px;color:#5a22c8;background:linear-gradient(150deg,#f3ecfd,#e9dcfb);box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(122,63,240,.15);transition:transform .8s var(--ease-lux),background .6s,color .6s}
.principle:hover .line-ic{background:linear-gradient(150deg,#8b55f4,#4e1fb0);color:#fff;transform:rotate(-6deg)}
.security{padding:44px!important;margin-top:10px}
.security .eyebrow{color:#e9cf9e!important}
.security h3{color:#fff}
.security .sec-copy>p:not(.eyebrow){color:#d0c2e2!important}
.sec-list li{padding:18px 18px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:background .5s,border-color .5s}
.sec-list li:hover{background:rgba(255,255,255,.09);border-color:rgba(233,207,158,.35)}
.sec-list b{color:#f5e6c8!important;display:flex;align-items:center;gap:9px}
.sec-list b:before{content:'';width:7px;height:7px;border-radius:50%;background:#e9cf9e;box-shadow:0 0 0 3px rgba(233,207,158,.2)}
.sec-list span{color:#cbbcdf!important}

/* ---------- Statement band + contact ---------- */
.connection .eyebrow,.contact .eyebrow{display:inline-flex;margin-inline:auto;padding:8px 16px;border-radius:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.connection,.contact{border-top:1px solid rgba(233,207,158,.12)}
.contact-email{display:flex!important;width:max-content;margin:6px auto 0;padding:10px 18px;border-radius:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e2d3f7;transition:background .4s,border-color .4s,color .4s}
.contact-email:hover{background:rgba(255,255,255,.1);border-color:rgba(233,207,158,.5);color:#f3e2c2}

/* ---------- Research cards ---------- */
.articles{gap:26px}
.articles>a{padding:12px 12px 24px;border-bottom:1px solid var(--edge-l)!important}
.articles>a .article-art{border-radius:14px;margin-bottom:22px}
.articles>a>small,.articles>a>h3,.articles>a>.read-link{margin-inline:14px}
.articles>a>small{display:block}
.read-link{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:30px;background:#f3ecfd;color:#4e1fb0;transition:background .5s,color .5s}
.articles>a:hover .read-link{background:linear-gradient(135deg,#8b55f4,#4e1fb0);color:#fff}
.post-card{overflow:hidden}
.post-card .post-art{transition:transform 1.2s var(--ease-lux)}
.post-card:hover .post-art{transform:scale(1.04)}

/* ---------- Subpage polish ---------- */
.content-page .page-hero .eyebrow,.content-page .cta-wrap .eyebrow{color:#e2d3f7}
.fact-chips li,.checks li{background:rgba(255,255,255,.6);border-color:#e1d3f1;color:#5f3f8f}
.page-hero .checks li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#e2d6f2}
.num{color:#5a22c8}
.contact-grid .mail,.cta-wrap .mail{border-radius:16px}

/* ---------- Section fade (JS drives a light opacity change only) ---------- */


@media(max-width:1100px){.approach{gap:18px}}
@media(max-width:760px){
.tabs{padding:5px;gap:4px;border-radius:18px}
.tabs button{padding:12px 6px;font-size:14px;text-align:center;border-radius:13px}
.tabs small{display:none}
.tab-ind{top:5px;bottom:5px;border-radius:13px}
.approach-intro,.trust-grid>.section-head{padding:30px 26px!important;border-radius:20px}
.approach{grid-template-columns:1fr}
.approach .principles article{padding:22px!important;gap:16px}
.approach .principles article>span{width:42px;height:42px;border-radius:12px}
.security{padding:26px!important}
.articles>a{padding:10px 10px 20px}
}
@media(prefers-reduced-motion:reduce){.tab-ind{transition:none}.product-panel.swap *{animation:none!important}}
/* Dark glass for contact cards on dark bands */
.mail{--mx:-400px;--my:-400px;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(233,207,158,.14),transparent 62%),var(--glass-d)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px;box-shadow:var(--shadow-d);transition:transform .8s var(--ease-lux),box-shadow .8s var(--ease-lux),opacity 1s var(--ease-lux)}
@media(hover:hover){.mail:hover{transform:translateY(-5px);box-shadow:var(--shadow-dh)}}
.mail>span{color:#cbb8e0}.mail>b{color:#fff}.mail>.ic-arrow{color:#e9cf9e}
