:root{
  --navy:#08264A;
  --deep:#04152B;
  --blue:#1768B3;
  --aqua:#28C4D7;
  --violet:#6557D9;
  --gold:#D8B45D;
  --green:#91C83E;
  --ink:#17243A;
  --muted:#61728A;
  --line:#DCE6F1;
  --soft:#F5F8FC;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);font-size:13.5px;line-height:1.5;background:#fff}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92vw);margin:0 auto}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.navbar{height:66px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;color:var(--navy);font-size:20px;font-weight:700;letter-spacing:-.02em}
.mark{width:35px;height:35px;border-radius:4px;background:linear-gradient(135deg,var(--navy),var(--violet));position:relative;box-shadow:0 10px 28px rgba(8,38,74,.16)}
.mark:after{content:"";position:absolute;inset:8px;border:3px solid var(--aqua);border-left-color:var(--gold);transform:rotate(45deg)}
.nav{display:flex;align-items:center;margin:0;padding:0}
.nav>li{list-style:none;position:relative}
.nav>li>a{display:block;padding:24px 14px;font-size:12.5px;font-weight:700;color:#263A56}
.nav>li:hover>a{background:#F1F6FC;color:var(--blue)}
.dropdown{display:none;position:absolute;top:66px;left:0;width:365px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--aqua);box-shadow:0 24px 58px rgba(8,38,74,.18);animation:drop .18s ease both}
@keyframes drop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.nav>li:hover .dropdown{display:block}
.dropdown strong{display:block;background:#F5F8FC;padding:11px 15px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#526B8B}
.dropdown a{display:block;padding:11px 15px;border-top:1px solid #EDF2F7;font-size:12.5px;color:#17243A}
.dropdown a:hover{background:#F8FBFF;color:var(--blue)}
.cta{background:var(--navy);color:#fff!important;margin-left:8px;padding:8px 13px!important;border-radius:2px}
.hero{background:linear-gradient(112deg,#04152B 0%,#08264A 48%,#1768B3 100%);color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:5%;top:12%;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(40,196,215,.30),transparent 70%);animation:pulse 7s ease-in-out infinite}
.hero:after{content:"";position:absolute;left:-120px;bottom:-180px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(216,180,93,.18),transparent 70%)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:76px 0;position:relative;z-index:1}
.kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.17em;color:var(--aqua);font-weight:700;margin-bottom:12px}
h1{font-size:38px;line-height:1.08;letter-spacing:-.035em;margin:0 0 16px;font-weight:700}
.lead{font-size:15.5px;color:#D8E5F4;max-width:780px;margin:0 0 22px}
.btn{display:inline-block;padding:10px 15px;font-size:12.5px;font-weight:700;border:1px solid transparent;border-radius:2px;transition:.22s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--aqua);color:#041426}
.btn.secondary{border-color:rgba(255,255,255,.45);color:#fff;margin-left:8px}
.hero-card{background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.18);padding:22px;border-radius:3px;box-shadow:0 28px 80px rgba(0,0,0,.18);animation:heroLift .8s ease both .15s;position:relative;overflow:hidden}
.hero-card:after{content:"";position:absolute;left:-50%;top:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(40,196,215,.16),transparent);animation:scan 4s ease-in-out infinite}
@keyframes scan{0%{left:-50%}100%{left:110%}}
.hero-card h3{font-size:17px;margin:0 0 14px;color:#fff}
.hero-line{display:grid;grid-template-columns:112px 1fr;gap:14px;border-top:1px solid rgba(255,255,255,.15);padding:13px 0;position:relative;z-index:1}
.hero-line:first-of-type{border-top:0}
.hero-line b{color:#fff}.hero-line span{color:#C9D7E8}
.hero .kicker,.hero h1,.hero .lead,.hero .btn{animation:fadeUp .75s ease both}
.hero h1{animation-delay:.08s}.hero .lead{animation-delay:.16s}.hero .btn{animation-delay:.24s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroLift{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.band{background:#F5F8FC;border-bottom:1px solid var(--line)}
.band .container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:16px 0;color:#425671}
.band b{font-size:18px;color:var(--navy)}
.section{padding:58px 0;background:#fff}
.section.alt{background:var(--soft)}
.section.dark{background:var(--deep);color:#fff}
.section.market{background:linear-gradient(135deg,#F5F8FC,#EEF8FA);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;font-weight:700;color:var(--blue);margin-bottom:9px}
.dark .eyebrow{color:var(--aqua)}
h2{font-size:29px;line-height:1.14;letter-spacing:-.028em;color:var(--navy);margin:0 0 12px}
.dark h2{color:#fff}
.sub{font-size:14px;color:var(--muted);max-width:850px;margin:0 0 26px}
.dark .sub{color:#C9D7E8}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);padding:22px;border-radius:3px;transition:.22s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(8,38,74,.10)}
.card.accent{border-top:4px solid var(--aqua)}
.card.gold{border-top:4px solid var(--gold)}
.card.violet{border-top:4px solid var(--violet)}
.card.green{border-top:4px solid var(--green)}
.card h3{font-size:17.5px;color:var(--navy);margin:0 0 9px}
.card p,.card li{color:var(--muted)}
.card ul{margin:10px 0 0;padding-left:17px}
.dark .card{background:#0E2748;border-color:rgba(255,255,255,.15)}
.dark .card h3{color:#fff}.dark .card p,.dark .card li{color:#CBD9EB}
.workflow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{background:#fff;border:1px solid var(--line);padding:20px;position:relative;overflow:hidden}
.step:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--aqua),var(--violet),var(--gold))}
.step b{display:block;color:var(--navy);font-size:16px;margin-bottom:6px}
.step span{color:var(--muted)}
.service-row{display:grid;grid-template-columns:260px 1fr 180px;gap:22px;align-items:start;border-top:1px solid var(--line);padding:21px 0}
.service-row:last-child{border-bottom:1px solid var(--line)}
.service-row h3{font-size:17.5px;color:var(--navy);margin:0}
.service-row p{margin:0;color:var(--muted)}
.link{color:var(--blue);font-weight:700;font-size:12.5px}
.page-hero{background:linear-gradient(112deg,var(--deep),var(--navy));color:#fff;padding:60px 0;position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;right:-80px;bottom:-120px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(216,180,93,.18),transparent 68%)}
.page-hero h1{max-width:960px}
.page-hero .lead{color:#D8E5F4}
.logo-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.logo-tile{height:72px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;color:#16253C;padding:10px;letter-spacing:-.02em;transition:.2s ease}
.logo-tile:hover{border-color:var(--aqua);transform:translateY(-2px)}
.logo-tile small{display:block;color:#77879B;font-weight:400;font-size:10.5px;margin-top:3px}
.logo-amazon{font-size:19px}.logo-mirakl{color:#194F90}.logo-ebay span:nth-child(1){color:#e53238}.logo-ebay span:nth-child(2){color:#0064d2}.logo-ebay span:nth-child(3){color:#f5af02}.logo-ebay span:nth-child(4){color:#86b817}.logo-ml{color:#2d66d4}.logo-shopify{color:#008060}.logo-walmart{color:#0071ce}.logo-abe{color:#704214}
.marquee{overflow:hidden;border:1px solid var(--line);background:#fff}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marquee 26s linear infinite;padding:12px}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .logo-tile{width:190px;min-width:190px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{border:1px solid #CCD7E5;background:#fff;padding:7px 10px;font-size:11.5px;color:#31465C}
.float-card{animation:floatCard 5.5s ease-in-out infinite}
.float-card:nth-child(2){animation-delay:.7s}.float-card:nth-child(3){animation-delay:1.2s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.product-badge{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--violet),var(--aqua));padding:5px 8px;margin-bottom:12px}
.product-badge.gold{background:linear-gradient(90deg,var(--gold),var(--green));color:#06182F}
.reveal{opacity:0;transform:translateY(20px);animation:reveal .7s ease forwards;animation-timeline:view();animation-range:entry 0% cover 25%}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
.profile{display:grid;grid-template-columns:120px 1fr;gap:17px;align-items:center}
.avatar{width:120px;height:120px;background:linear-gradient(135deg,var(--navy),var(--violet));color:#fff;display:grid;place-items:center;font-size:32px;font-weight:700;border-radius:2px}
.footer{background:#06101F;color:#B7C4D7;padding:40px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:22px}
.footer h4{color:#fff;margin:0 0 9px;font-size:13px}
.footer a,.footer p{display:block;margin:6px 0;color:#B7C4D7;font-size:11.5px}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:16px;font-size:11.5px}
@media(max-width:900px){.nav{display:none}.hero-grid,.grid2,.grid3,.footer-grid,.workflow{grid-template-columns:1fr}.service-row{grid-template-columns:1fr}.logo-wall{grid-template-columns:repeat(2,1fr)}.profile{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

.network-wrap{position:relative;min-height:430px;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(40,196,215,.12),transparent 58%)}
.orbit{position:absolute;border:1px solid rgba(40,196,215,.35);border-radius:50%;animation:spin 22s linear infinite}.orbit.one{width:330px;height:330px}.orbit.two{width:250px;height:250px;animation-duration:16s;animation-direction:reverse;border-color:rgba(216,180,93,.36)}.orbit.three{width:390px;height:390px;animation-duration:30s;border-color:rgba(101,87,217,.30)}@keyframes spin{to{transform:rotate(360deg)}}
.network-center{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--violet));color:white;display:grid;place-items:center;text-align:center;padding:18px;font-weight:700;box-shadow:0 28px 70px rgba(8,38,74,.24);z-index:2}
.node{position:absolute;width:132px;min-height:58px;background:white;border:1px solid var(--line);box-shadow:0 16px 38px rgba(8,38,74,.10);padding:10px 12px;text-align:center;font-weight:700;color:var(--navy);animation:nodeFloat 5s ease-in-out infinite}.node small{display:block;font-weight:400;color:var(--muted);font-size:10.5px;margin-top:3px}.node.n1{top:24px;left:50%;transform:translateX(-50%)}.node.n2{right:10px;top:118px;animation-delay:.4s}.node.n3{right:55px;bottom:56px;animation-delay:.8s}.node.n4{left:55px;bottom:56px;animation-delay:1.2s}.node.n5{left:10px;top:118px;animation-delay:1.6s}@keyframes nodeFloat{0%,100%{margin-top:0}50%{margin-top:-10px}}
.connection-line{position:absolute;inset:0;pointer-events:none;background:linear-gradient(45deg,transparent 49.7%,rgba(40,196,215,.12) 50%,transparent 50.3%),linear-gradient(-45deg,transparent 49.7%,rgba(216,180,93,.12) 50%,transparent 50.3%);opacity:.8}
.amazon-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.flow-box{background:#fff;border:1px solid var(--line);padding:16px;position:relative}.flow-box:after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--aqua);font-weight:700}.flow-box:last-child:after{content:""}.flow-box b{display:block;color:var(--navy);margin-bottom:6px}.flow-box span{color:var(--muted)}
.dashboard-card{background:linear-gradient(135deg,#fff,#F4F9FC);border:1px solid var(--line);padding:20px;box-shadow:0 18px 45px rgba(8,38,74,.08)}.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.kpi{border:1px solid var(--line);background:white;padding:13px}.kpi b{display:block;color:var(--blue);font-size:18px}.kpi span{font-size:11px;color:var(--muted)}
@media(max-width:900px){.network-wrap{min-height:600px}.node{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:8px auto}.orbit,.connection-line{display:none}.network-center{margin-bottom:10px}.amazon-flow,.dashboard-grid{grid-template-columns:1fr}.flow-box:after{display:none}}

/* V11 richer gradient + dual ecosystem */
.hero{
background:
radial-gradient(circle at 18% 22%, rgba(101,87,217,.40), transparent 30%),
radial-gradient(circle at 82% 18%, rgba(40,196,215,.28), transparent 28%),
linear-gradient(120deg,#04152B 0%,#08264A 32%,#1768B3 66%,#6557D9 100%);
}
.dual-ecosystem{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
align-items:center;
}
.ecosystem-card{
background:#fff;
border:1px solid var(--line);
padding:26px;
position:relative;
overflow:hidden;
min-height:520px;
box-shadow:0 20px 50px rgba(8,38,74,.08);
}
.ecosystem-card:before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top right, rgba(40,196,215,.08), transparent 35%);
pointer-events:none;
}
.ecosystem-title{
font-size:23px;
color:var(--navy);
margin-bottom:10px;
letter-spacing:-.02em;
}
.ecosystem-sub{
color:var(--muted);
margin-bottom:20px;
max-width:500px;
}
.mini-network{
position:relative;
height:360px;
display:grid;
place-items:center;
}
.core{
width:130px;
height:130px;
border-radius:50%;
background:linear-gradient(135deg,var(--blue),var(--violet));
display:grid;
place-items:center;
text-align:center;
color:#fff;
font-weight:700;
z-index:2;
box-shadow:0 22px 55px rgba(8,38,74,.22);
}
.ring{
position:absolute;
border:1px solid rgba(40,196,215,.28);
border-radius:50%;
animation:spin 26s linear infinite;
}
.ring.r1{width:280px;height:280px}
.ring.r2{width:210px;height:210px;animation-direction:reverse;animation-duration:18s;border-color:rgba(216,180,93,.26)}
.eco-node{
position:absolute;
background:#fff;
border:1px solid var(--line);
padding:10px 12px;
font-size:12px;
font-weight:700;
box-shadow:0 12px 28px rgba(8,38,74,.08);
animation:nodeFloat 5s ease-in-out infinite;
}
.eco-node small{
display:block;
font-weight:400;
font-size:10px;
color:var(--muted);
margin-top:3px;
}
.e1{top:5px;left:50%;transform:translateX(-50%)}
.e2{right:10px;top:105px;animation-delay:.5s}
.e3{right:55px;bottom:30px;animation-delay:1s}
.e4{left:55px;bottom:30px;animation-delay:1.5s}
.e5{left:10px;top:105px;animation-delay:2s}
@media(max-width:900px){
.dual-ecosystem{grid-template-columns:1fr}
.ecosystem-card{min-height:auto}
}

/* V13 separate institutional color system */
.institutional-card .core{
background:linear-gradient(135deg,#D8B45D,#C77A2B)!important;
}
.institutional-card .ring{
border-color:rgba(216,180,93,.34)!important;
}
.institutional-card .ring.r2{
border-color:rgba(199,122,43,.28)!important;
}
.institutional-card .eco-node{
border-top:3px solid #D8B45D;
}
.commerce-card .core{
background:linear-gradient(135deg,var(--blue),var(--violet));
}
.commerce-card .eco-node{
border-top:3px solid var(--aqua);
}

/* V14 triple ecosystem layout */
.triple-ecosystem{
display:grid;
grid-template-columns:1fr;
gap:26px;
}
.eco-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
}
.ecosystem-card.green-card .core{
background:linear-gradient(135deg,#91C83E,#34A853)!important;
}
.ecosystem-card.green-card .ring{
border-color:rgba(145,200,62,.34)!important;
}
.ecosystem-card.green-card .ring.r2{
border-color:rgba(52,168,83,.28)!important;
}
.ecosystem-card.green-card .eco-node{
border-top:3px solid #91C83E;
}
.ecosystem-card{
min-height:500px!important;
}
@media(max-width:900px){
.eco-row{
grid-template-columns:1fr;
}
}

/* V15 single-row business divisions */
.triple-ecosystem{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:22px!important;
align-items:start;
}
.eco-row{
display:contents!important;
}
.ecosystem-card{
min-height:560px!important;
}
.ecosystem-title{
font-size:21px!important;
}
.ecosystem-sub{
min-height:72px;
}
.mini-network{
height:330px!important;
}
.core{
width:118px!important;
height:118px!important;
font-size:15px;
}
.eco-node{
width:118px!important;
font-size:11px!important;
padding:9px 10px!important;
}
.eco-node small{
font-size:9.5px!important;
}
.e1{top:2px!important}
.e2{right:0px!important;top:95px!important}
.e3{right:38px!important;bottom:22px!important}
.e4{left:38px!important;bottom:22px!important}
.e5{left:0px!important;top:95px!important}
@media(max-width:1200px){
.triple-ecosystem{
grid-template-columns:1fr!important;
}
}

/* V16 clearer Solutions page */
.division-nav{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin-top:26px;
}
.division-link{
background:#fff;
border:1px solid var(--line);
padding:18px;
transition:.22s ease;
}
.division-link:hover{
transform:translateY(-3px);
box-shadow:0 16px 36px rgba(8,38,74,.10);
}
.division-link b{
display:block;
color:var(--navy);
font-size:16px;
margin-bottom:6px;
}
.division-link span{
color:var(--muted);
font-size:12.5px;
}
.division-section{
border-top:1px solid var(--line);
}
.division-header{
display:grid;
grid-template-columns:280px 1fr;
gap:28px;
align-items:start;
margin-bottom:24px;
}
.division-label{
font-size:10.5px;
letter-spacing:.15em;
text-transform:uppercase;
font-weight:700;
margin-bottom:10px;
}
.division-label.library{color:#C77A2B}
.division-label.market{color:var(--blue)}
.division-label.ecommerce{color:var(--green)}
.division-header h2{
margin-bottom:10px;
}
.solution-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}
.solution-item{
background:#fff;
border:1px solid var(--line);
padding:18px;
}
.solution-item h3{
font-size:16px;
color:var(--navy);
margin:0 0 8px;
}
.solution-item p{
color:var(--muted);
margin:0;
}
.clear-note{
background:linear-gradient(135deg,#F5F8FC,#EEF8FA);
border:1px solid var(--line);
padding:22px;
margin-top:24px;
}
@media(max-width:900px){
.division-nav,.division-header,.solution-list{
grid-template-columns:1fr;
}
}

/* V17 animated visual explainers for Solutions page */
.division-visual{
  background:#fff;
  border:1px solid var(--line);
  min-height:220px;
  position:relative;
  overflow:hidden;
  padding:18px;
  box-shadow:0 16px 36px rgba(8,38,74,.08);
}
.division-visual:before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at center,rgba(40,196,215,.12),transparent 35%);
  animation:softPulse 5s ease-in-out infinite;
}
@keyframes softPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
.visual-title{
  position:relative;
  z-index:2;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
}
.icon-orbit{
  position:absolute;
  inset:52px 32px 24px;
  border-radius:50%;
  border:1px solid rgba(8,38,74,.12);
  animation:spin 20s linear infinite;
}
.icon-orbit.two{
  inset:78px 64px 50px;
  animation-duration:14s;
  animation-direction:reverse;
}
.visual-core{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  width:84px;
  height:84px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:30px;
  z-index:2;
  box-shadow:0 18px 42px rgba(8,38,74,.20);
}
.visual-core.library{background:linear-gradient(135deg,#D8B45D,#C77A2B)}
.visual-core.market{background:linear-gradient(135deg,var(--blue),var(--violet))}
.visual-core.ecommerce{background:linear-gradient(135deg,var(--green),#34A853)}
.visual-dot{
  position:absolute;
  width:46px;
  height:46px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  font-size:22px;
  z-index:3;
  box-shadow:0 12px 28px rgba(8,38,74,.10);
  animation:dotFloat 4.6s ease-in-out infinite;
}
@keyframes dotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.visual-dot.d1{left:28px;top:72px}
.visual-dot.d2{right:34px;top:58px;animation-delay:.4s}
.visual-dot.d3{left:62px;bottom:32px;animation-delay:.8s}
.visual-dot.d4{right:70px;bottom:28px;animation-delay:1.2s}
.visual-line{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(40,196,215,.45),transparent);
  left:20%;
  right:20%;
  top:51%;
  animation:lineScan 3.2s ease-in-out infinite;
}
@keyframes lineScan{0%,100%{opacity:.25;transform:scaleX(.7)}50%{opacity:1;transform:scaleX(1.1)}}
.division-header.visual-layout{
  grid-template-columns:290px 1fr 320px;
}
.solution-item h3:before{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-right:8px;
  border-radius:7px;
  background:#F1F6FC;
  color:var(--blue);
  font-size:13px;
  vertical-align:middle;
}
#libraries .solution-item:nth-child(1) h3:before{content:"🔎"}
#libraries .solution-item:nth-child(2) h3:before{content:"📚"}
#libraries .solution-item:nth-child(3) h3:before{content:"🧾"}
#libraries .solution-item:nth-child(4) h3:before{content:"🏛️"}
#marketplaces .solution-item:nth-child(1) h3:before{content:"🛒"}
#marketplaces .solution-item:nth-child(2) h3:before{content:"🔌"}
#marketplaces .solution-item:nth-child(3) h3:before{content:"💹"}
#marketplaces .solution-item:nth-child(4) h3:before{content:"✉️"}
#marketplaces .solution-item:nth-child(5) h3:before{content:"📊"}
#marketplaces .solution-item:nth-child(6) h3:before{content:"⚠️"}
#ecommerce .solution-item:nth-child(1) h3:before{content:"🛍️"}
#ecommerce .solution-item:nth-child(2) h3:before{content:"🌐"}
#ecommerce .solution-item:nth-child(3) h3:before{content:"🧩"}
#ecommerce .solution-item:nth-child(4) h3:before{content:"⚙️"}
#ecommerce .solution-item:nth-child(5) h3:before{content:"📈"}
#ecommerce .solution-item:nth-child(6) h3:before{content:"🔗"}
@media(max-width:1100px){
  .division-header.visual-layout{grid-template-columns:1fr}
  .division-visual{min-height:260px}
}

/* V18 pro tech visual system - no emojis */
.division-visual{
  background:linear-gradient(135deg,#07162d,#102a4d)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  min-height:260px!important;
  color:#fff;
}
.division-visual:before{
  background:
    radial-gradient(circle at 72% 28%,rgba(40,196,215,.28),transparent 34%),
    radial-gradient(circle at 20% 82%,rgba(101,87,217,.24),transparent 36%)!important;
  opacity:1;
}
.division-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(circle at center,black,transparent 78%);
}
.visual-title{
  color:#d9e7ff!important;
  z-index:5!important;
}
.pro-visual{
  position:absolute;
  inset:46px 20px 16px;
  z-index:4;
}
.tech-svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.tech-line{
  fill:none;
  stroke:rgba(40,196,215,.55);
  stroke-width:1.4;
  stroke-dasharray:6 8;
  animation:dashMove 4s linear infinite;
}
.tech-line.gold{stroke:rgba(216,180,93,.65)}
.tech-line.green{stroke:rgba(145,200,62,.65)}
@keyframes dashMove{to{stroke-dashoffset:-80}}
.tech-node{
  fill:#fff;
  stroke:rgba(255,255,255,.55);
  stroke-width:1;
  filter:drop-shadow(0 0 8px rgba(40,196,215,.65));
  animation:nodePulse 2.4s ease-in-out infinite;
}
.tech-node.gold{filter:drop-shadow(0 0 8px rgba(216,180,93,.75))}
.tech-node.green{filter:drop-shadow(0 0 8px rgba(145,200,62,.75))}
@keyframes nodePulse{0%,100%{opacity:.72;r:4}50%{opacity:1;r:6}}
.brain-path{
  fill:none;
  stroke:url(#brainGrad);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 9px rgba(40,196,215,.35));
  stroke-dasharray:240;
  stroke-dashoffset:240;
  animation:drawBrain 3.8s ease forwards infinite alternate;
}
@keyframes drawBrain{to{stroke-dashoffset:0}}
.market-cube{
  fill:none;
  stroke:url(#marketGrad);
  stroke-width:2.5;
  filter:drop-shadow(0 0 10px rgba(101,87,217,.40));
}
.web-ring{
  fill:none;
  stroke:url(#webGrad);
  stroke-width:2.4;
  stroke-dasharray:8 7;
  animation:spinSvg 10s linear infinite;
  transform-origin:center;
}
@keyframes spinSvg{to{transform:rotate(360deg)}}
.visual-core,.visual-dot,.icon-orbit,.visual-line{
  display:none!important;
}
.solution-item h3:before{
  background:linear-gradient(135deg,rgba(40,196,215,.15),rgba(101,87,217,.12))!important;
  color:var(--blue)!important;
}
#libraries .solution-item h3:before,#marketplaces .solution-item h3:before,#ecommerce .solution-item h3:before{
  content:""!important;
  background:linear-gradient(135deg,var(--aqua),var(--violet))!important;
  width:8px!important;
  height:8px!important;
  border-radius:99px!important;
  margin-right:10px!important;
  vertical-align:middle!important;
}
#libraries .solution-item h3:before{background:linear-gradient(135deg,#D8B45D,#C77A2B)!important}
#ecommerce .solution-item h3:before{background:linear-gradient(135deg,var(--green),#34A853)!important}

/* V19 - more futuristic, cleaner visuals blended with page background */
.division-visual{
  background:transparent !important;
  border:1px solid rgba(8,38,74,.10)!important;
  min-height:280px!important;
  color:var(--ink)!important;
  box-shadow:none !important;
  border-radius:18px;
  backdrop-filter:blur(6px);
}
.division-visual:before{
  inset:0;
  border-radius:18px;
  background:
    radial-gradient(circle at 22% 24%, rgba(40,196,215,.11), transparent 24%),
    radial-gradient(circle at 78% 28%, rgba(101,87,217,.08), transparent 26%),
    radial-gradient(circle at 44% 82%, rgba(216,180,93,.07), transparent 22%) !important;
  opacity:1;
}
.division-visual:after{
  inset:0;
  background-image:
    linear-gradient(rgba(8,38,74,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,38,74,.04) 1px, transparent 1px);
  background-size:24px 24px;
  border-radius:18px;
  mask-image:none;
  opacity:.7;
}
.visual-title{
  color:var(--navy)!important;
  position:relative;
  z-index:8!important;
}
.visual-chipbar{
  position:absolute;
  right:18px;
  top:16px;
  display:flex;
  gap:6px;
  z-index:8;
}
.visual-chip{
  padding:5px 8px;
  border:1px solid rgba(8,38,74,.10);
  border-radius:999px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  backdrop-filter:blur(8px);
}
.division-visual.library-tech{
  border-color:rgba(199,122,43,.18)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.35)) !important;
}
.division-visual.market-tech{
  border-color:rgba(23,104,179,.16)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.35)) !important;
}
.division-visual.ecommerce-tech{
  border-color:rgba(145,200,62,.18)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.35)) !important;
}
.pro-visual{
  inset:40px 16px 12px;
}
.tech-svg{
  filter:drop-shadow(0 10px 22px rgba(8,38,74,.06));
}
.brain-path{
  stroke-width:3.2;
  filter:drop-shadow(0 0 8px rgba(199,122,43,.16));
}
.tech-line{
  stroke:rgba(40,196,215,.34);
  stroke-width:1.5;
}
.tech-line.gold{stroke:rgba(199,122,43,.40)}
.tech-line.green{stroke:rgba(52,168,83,.42)}
.market-cube{
  stroke-width:2.2;
  filter:drop-shadow(0 0 8px rgba(23,104,179,.10));
}
.web-ring{
  stroke-width:2.2;
  filter:drop-shadow(0 0 8px rgba(52,168,83,.10));
}
.tech-node{
  stroke:rgba(23,104,179,.28);
  fill:#fff;
  filter:drop-shadow(0 0 6px rgba(40,196,215,.18));
}
.tech-node.gold{
  stroke:rgba(199,122,43,.34);
  filter:drop-shadow(0 0 6px rgba(199,122,43,.18));
}
.tech-node.green{
  stroke:rgba(52,168,83,.34);
  filter:drop-shadow(0 0 6px rgba(52,168,83,.18));
}
.division-section .solution-item{
  border-radius:12px;
}
.division-section .solution-item:hover{
  transform:translateY(-2px);
}

/* V20 – cleaner, more futuristic, better-aligned pro visuals */
.division-header.visual-layout{
  grid-template-columns:260px 1fr 340px !important;
  align-items:start !important;
}

.division-visual{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
  padding:18px 18px 14px 18px !important;
  min-height:300px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.55)) !important;
  border:1px solid rgba(8,38,74,.10) !important;
  box-shadow:
    0 18px 40px rgba(8,38,74,.06),
    inset 0 1px 0 rgba(255,255,255,.65);
  overflow:hidden;
}

.division-visual.library-tech{
  box-shadow:
    0 18px 40px rgba(199,122,43,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.division-visual.market-tech{
  box-shadow:
    0 18px 40px rgba(23,104,179,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.division-visual.ecommerce-tech{
  box-shadow:
    0 18px 40px rgba(52,168,83,.08),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.division-visual:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background:
    radial-gradient(circle at 16% 18%, rgba(40,196,215,.10), transparent 20%),
    radial-gradient(circle at 84% 22%, rgba(101,87,217,.08), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(216,180,93,.06), transparent 30%);
  pointer-events:none;
}

.division-visual:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background-image:
    linear-gradient(rgba(8,38,74,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,38,74,.035) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.45;
  pointer-events:none;
}

.visual-header{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.visual-title{
  color:var(--navy) !important;
  font-size:13px !important;
  letter-spacing:.13em !important;
  text-transform:uppercase;
  font-weight:700;
  margin:0 !important;
}

.visual-subtitle{
  color:var(--muted);
  font-size:11.5px;
  line-height:1.4;
  margin-top:4px;
  max-width:180px;
}

.visual-chipbar{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  z-index:5;
  max-width:140px;
}

.visual-chip{
  padding:5px 8px;
  border:1px solid rgba(8,38,74,.10);
  border-radius:999px;
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,.74);
  color:var(--muted);
  backdrop-filter:blur(8px);
  white-space:nowrap;
}

.pro-visual{
  position:relative !important;
  inset:auto !important;
  z-index:4;
  flex:1 1 auto;
  min-height:205px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px 2px 0 2px;
}

.tech-svg{
  width:100%;
  height:205px;
  overflow:visible;
  filter:drop-shadow(0 10px 16px rgba(8,38,74,.05));
}

/* refined futuristic lines */
.tech-line{
  fill:none;
  stroke:rgba(40,196,215,.42);
  stroke-width:1.4;
  stroke-dasharray:5 6;
  animation:dashMove 5s linear infinite;
}
.tech-line.gold{stroke:rgba(199,122,43,.45)}
.tech-line.green{stroke:rgba(52,168,83,.42)}

@keyframes dashMove{to{stroke-dashoffset:-66}}

.tech-node{
  fill:#fff;
  stroke:rgba(23,104,179,.22);
  stroke-width:1;
  filter:drop-shadow(0 0 4px rgba(40,196,215,.14));
  animation:nodePulsePro 2.8s ease-in-out infinite;
}
.tech-node.gold{
  stroke:rgba(199,122,43,.26);
  filter:drop-shadow(0 0 4px rgba(199,122,43,.16));
}
.tech-node.green{
  stroke:rgba(52,168,83,.26);
  filter:drop-shadow(0 0 4px rgba(52,168,83,.16));
}
@keyframes nodePulsePro{
  0%,100%{opacity:.8;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}

.brain-path{
  fill:none;
  stroke:url(#brainGrad);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(199,122,43,.12));
  stroke-dasharray:220;
  stroke-dashoffset:220;
  animation:drawBrainPro 4.5s ease forwards infinite alternate;
}
@keyframes drawBrainPro{to{stroke-dashoffset:0}}

.market-cube{
  fill:none;
  stroke:url(#marketGrad);
  stroke-width:2.1;
  filter:drop-shadow(0 0 5px rgba(23,104,179,.08));
}

.web-ring{
  fill:none;
  stroke:url(#webGrad);
  stroke-width:2.1;
  stroke-dasharray:6 6;
  animation:spinSvg 12s linear infinite;
  transform-origin:center;
}
@keyframes spinSvg{to{transform:rotate(360deg)}}

.visual-bottom{
  position:relative;
  z-index:5;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.visual-stat{
  border:1px solid rgba(8,38,74,.10);
  background:rgba(255,255,255,.6);
  border-radius:12px;
  padding:8px 10px;
  min-width:86px;
}
.visual-stat b{
  display:block;
  color:var(--navy);
  font-size:12px;
}
.visual-stat span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:2px;
}

@media(max-width:1100px){
  .division-header.visual-layout{
    grid-template-columns:1fr !important;
  }
  .division-visual{
    min-height:280px !important;
  }
  .visual-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .visual-chipbar{
    justify-content:flex-start;
    max-width:none;
  }
}

/* V21 – interactive home division cards: hover-only motion + tooltips */
.ecosystem-card{
  overflow:hidden;
}
.ecosystem-card .mini-network{
  position:relative;
  transition:transform .3s ease;
}
.ecosystem-card:hover .mini-network{
  transform:translateY(-2px);
}

.ecosystem-card .core{
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.ecosystem-card:hover .core{
  transform:scale(1.04);
  box-shadow:0 28px 60px rgba(8,38,74,.18);
  filter:saturate(1.08);
}

.ecosystem-card .ring{
  transition:opacity .25s ease, filter .25s ease;
}
.ecosystem-card:hover .ring{
  opacity:1;
  filter:drop-shadow(0 0 8px rgba(40,196,215,.10));
}

.ecosystem-card .eco-node{
  cursor:default;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
  z-index:3;
}
.ecosystem-card .eco-node:hover{
  transform:translateY(-3px) scale(1.03) !important;
  box-shadow:0 18px 36px rgba(8,38,74,.12);
  background:#fff;
}

.ecosystem-card .eco-node::after{
  content:attr(data-info);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);
  min-width:170px;
  max-width:220px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(8,38,74,.10);
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 38px rgba(8,38,74,.14);
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:20;
}
.ecosystem-card .eco-node::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  transform:translateX(-50%);
  width:10px;
  height:10px;
  background:rgba(255,255,255,.96);
  border-left:1px solid rgba(8,38,74,.10);
  border-top:1px solid rgba(8,38,74,.10);
  rotate:225deg;
  opacity:0;
  transition:opacity .22s ease;
  z-index:19;
}
.ecosystem-card .eco-node:hover::after,
.ecosystem-card .eco-node:hover::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Hover-only orbital motion */
.ecosystem-card:hover .e1{animation:orbitTop 4.8s ease-in-out infinite}
.ecosystem-card:hover .e2{animation:orbitRightTop 5.2s ease-in-out infinite .1s}
.ecosystem-card:hover .e3{animation:orbitRightBottom 5.4s ease-in-out infinite .2s}
.ecosystem-card:hover .e4{animation:orbitLeftBottom 5.6s ease-in-out infinite .15s}
.ecosystem-card:hover .e5{animation:orbitLeftTop 5.0s ease-in-out infinite .05s}

@keyframes orbitTop{
  0%,100%{transform:translateX(-50%) translateY(0)}
  25%{transform:translateX(-44%) translateY(-7px)}
  50%{transform:translateX(-50%) translateY(-12px)}
  75%{transform:translateX(-56%) translateY(-7px)}
}
@keyframes orbitRightTop{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(6px,-6px)}
  50%{transform:translate(10px,0)}
  75%{transform:translate(4px,6px)}
}
@keyframes orbitRightBottom{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(8px,3px)}
  50%{transform:translate(12px,10px)}
  75%{transform:translate(4px,12px)}
}
@keyframes orbitLeftBottom{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-7px,4px)}
  50%{transform:translate(-12px,10px)}
  75%{transform:translate(-4px,12px)}
}
@keyframes orbitLeftTop{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-6px,-6px)}
  50%{transform:translate(-10px,0)}
  75%{transform:translate(-4px,6px)}
}

.eco-hover-note{
  margin-top:12px;
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.02em;
}
.eco-hover-note b{
  color:var(--navy);
}

@media(max-width:900px){
  .ecosystem-card .eco-node::after{
    left:0;
    bottom:auto;
    top:calc(100% + 10px);
    transform:translateX(0) translateY(-6px);
  }
  .ecosystem-card .eco-node::before{
    left:18px;
    bottom:auto;
    top:calc(100% + 2px);
    transform:none;
    rotate:45deg;
  }
  .ecosystem-card .eco-node:hover::after{
    transform:translateX(0) translateY(0);
  }
}

/* V22 – premium futuristic solution visuals */
.division-header.visual-layout{
  grid-template-columns:240px minmax(0,1fr) 420px !important;
  align-items:start !important;
  gap:34px !important;
}
.division-header.visual-layout > div{
  align-self:start;
}

.division-visual{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:14px;
  padding:20px 20px 18px 20px !important;
  min-height:360px !important;
  border-radius:24px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)) !important;
  border:1px solid rgba(8,38,74,.10) !important;
  box-shadow:0 26px 48px rgba(8,38,74,.06), inset 0 1px 0 rgba(255,255,255,.8);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.division-visual.library-tech{border-color:rgba(199,122,43,.18)!important}
.division-visual.market-tech{border-color:rgba(23,104,179,.16)!important}
.division-visual.ecommerce-tech{border-color:rgba(52,168,83,.18)!important}

.division-visual:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 22%, rgba(40,196,215,.11), transparent 20%),
    radial-gradient(circle at 84% 18%, rgba(101,87,217,.10), transparent 24%),
    radial-gradient(circle at 52% 96%, rgba(216,180,93,.08), transparent 30%);
  pointer-events:none;
}
.division-visual:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  background-image:
    linear-gradient(rgba(8,38,74,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,38,74,.03) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.55;
  pointer-events:none;
}

.visual-top{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.visual-copy{
  max-width:210px;
}
.visual-kicker{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--navy);
  margin:0 0 8px 0;
}
.visual-desc{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  margin:0;
}
.visual-pillbar{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
.visual-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(8,38,74,.10);
  background:rgba(255,255,255,.74);
  box-shadow:0 8px 18px rgba(8,38,74,.06);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.visual-pill b{
  width:6px;height:6px;border-radius:99px;display:inline-block;
}
.library-tech .visual-pill b{background:linear-gradient(135deg,#D8B45D,#C77A2B)}
.market-tech .visual-pill b{background:linear-gradient(135deg,#28C4D7,#6557D9)}
.ecommerce-tech .visual-pill b{background:linear-gradient(135deg,#91C83E,#34A853)}

.visual-stage{
  position:relative;
  z-index:4;
  flex:1 1 auto;
  min-height:210px;
}
.future-svg{
  width:100%;
  height:210px;
  display:block;
  overflow:visible;
}

.visual-stats{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.visual-stat{
  border:1px solid rgba(8,38,74,.10);
  border-radius:14px;
  background:rgba(255,255,255,.64);
  padding:10px 12px;
  min-height:62px;
  box-shadow:0 10px 22px rgba(8,38,74,.04);
}
.visual-stat strong{
  display:block;
  color:var(--navy);
  font-size:12px;
  margin-bottom:3px;
}
.visual-stat span{
  display:block;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.35;
}

.tech-ambient{
  fill:none;
  stroke-width:1.4;
  stroke-dasharray:5 7;
  animation:futureDash 6s linear infinite;
}
.tech-ambient.lib{stroke:rgba(199,122,43,.38)}
.tech-ambient.market{stroke:rgba(40,196,215,.38)}
.tech-ambient.ecom{stroke:rgba(52,168,83,.40)}
@keyframes futureDash{to{stroke-dashoffset:-72}}

.tech-node2{
  fill:#fff;
  stroke-width:1.2;
  animation:nodePulse22 2.8s ease-in-out infinite;
}
.tech-node2.lib{stroke:rgba(199,122,43,.42); filter:drop-shadow(0 0 5px rgba(199,122,43,.18))}
.tech-node2.market{stroke:rgba(23,104,179,.40); filter:drop-shadow(0 0 5px rgba(23,104,179,.14))}
.tech-node2.ecom{stroke:rgba(52,168,83,.42); filter:drop-shadow(0 0 5px rgba(52,168,83,.14))}
@keyframes nodePulse22{
  0%,100%{opacity:.82; transform:scale(1)}
  50%{opacity:1; transform:scale(1.08)}
}

.brain-stroke{
  fill:none;
  stroke:url(#brainStrokeGrad);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(140,91,32,.12));
}
.brain-inner{
  fill:none;
  stroke:url(#brainInnerGrad);
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.circuit-ray{
  fill:none;
  stroke:url(#brainRayGrad);
  stroke-width:2;
  stroke-linecap:round;
  opacity:.85;
}
.market-form{
  fill:none;
  stroke:url(#marketGradMain);
  stroke-width:2.8;
  filter:drop-shadow(0 0 7px rgba(23,104,179,.10));
}
.market-panel{
  fill:rgba(255,255,255,.55);
  stroke:rgba(23,104,179,.18);
  stroke-width:1.2;
}
.ecom-form{
  fill:none;
  stroke:url(#ecomGradMain);
  stroke-width:2.6;
  filter:drop-shadow(0 0 7px rgba(52,168,83,.08));
}
.ecom-window{
  fill:rgba(255,255,255,.55);
  stroke:rgba(52,168,83,.18);
  stroke-width:1.1;
}

@media(max-width:1100px){
  .division-header.visual-layout{
    grid-template-columns:1fr !important;
  }
  .division-visual{
    min-height:340px !important;
  }
}
@media(max-width:700px){
  .visual-top{
    flex-direction:column;
  }
  .visual-pillbar{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .visual-stats{
    grid-template-columns:1fr;
  }
}

/* V23 clean premium Solutions page */
.sol-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 24%, rgba(101,87,217,.34), transparent 30%),
    radial-gradient(circle at 80% 16%, rgba(40,196,215,.20), transparent 26%),
    linear-gradient(120deg,#04152B 0%,#08264A 38%,#1768B3 72%,#6557D9 100%);
  color:#fff;
  padding:62px 0 54px;
}
.sol-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at center, black, transparent 85%);
  pointer-events:none;
}
.sol-hero .container{position:relative;z-index:2}
.sol-hero h1{
  color:#fff;
  max-width:760px;
  margin:0 0 12px;
}
.sol-hero .lead{
  color:#DCE7F5;
  max-width:820px;
  margin:0 0 26px;
}
.sol-hero-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.sol-hero-card{
  display:block;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  padding:18px 16px;
  color:#fff;
  backdrop-filter:blur(8px);
  transition:.22s ease;
}
.sol-hero-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.14)}
.sol-hero-card b{
  display:block;
  font-size:18px;
  margin-bottom:7px;
}
.sol-hero-card span{
  display:block;
  color:#D7E5F5;
  font-size:12.5px;
  line-height:1.45;
}

.sol-section{
  padding:56px 0 24px;
}
.sol-section.alt{
  background:#F8FBFE;
}
.sol-header{
  display:grid;
  grid-template-columns:220px 1fr 430px;
  gap:34px;
  align-items:start;
  margin-bottom:26px;
}
.sol-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  margin-bottom:10px;
}
.sol-label.library{color:#C77A2B}
.sol-label.market{color:#1768B3}
.sol-label.ecom{color:#5FAE35}
.sol-title{
  font-size:26px;
  line-height:1.08;
  color:var(--navy);
  margin:0;
}
.sol-copy{
  font-size:15px;
  color:var(--muted);
  line-height:1.6;
  margin:0;
  max-width:700px;
}
.sol-visual{
  position:relative;
  min-height:340px;
  padding:20px;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  border:1px solid rgba(8,38,74,.10);
  box-shadow:0 24px 48px rgba(8,38,74,.06), inset 0 1px 0 rgba(255,255,255,.88);
}
.sol-visual:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(40,196,215,.10), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(101,87,217,.10), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(216,180,93,.08), transparent 30%);
}
.sol-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(8,38,74,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,38,74,.03) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.6;
}
.sol-visual.library{border-color:rgba(199,122,43,.18)}
.sol-visual.market{border-color:rgba(23,104,179,.18)}
.sol-visual.ecom{border-color:rgba(95,174,53,.18)}
.sol-v-top, .sol-v-stage, .sol-v-stats{position:relative;z-index:2}
.sol-v-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.sol-v-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--navy);
  margin:0 0 7px;
}
.sol-v-desc{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  max-width:210px;
}
.sol-v-pills{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}
.sol-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(8,38,74,.10);
  box-shadow:0 8px 18px rgba(8,38,74,.05);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.sol-pill i{
  width:6px;height:6px;border-radius:99px;display:inline-block;font-style:normal;
}
.sol-visual.library .sol-pill i{background:linear-gradient(135deg,#D8B45D,#C77A2B)}
.sol-visual.market .sol-pill i{background:linear-gradient(135deg,#28C4D7,#6557D9)}
.sol-visual.ecom .sol-pill i{background:linear-gradient(135deg,#91C83E,#34A853)}

.sol-v-stage{
  min-height:195px;
}
.sol-v-stage svg{
  width:100%;
  height:195px;
  display:block;
}
.sol-v-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.sol-stat{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(8,38,74,.10);
  box-shadow:0 8px 18px rgba(8,38,74,.03);
}
.sol-stat b{
  display:block;
  color:var(--navy);
  font-size:12px;
  margin-bottom:3px;
}
.sol-stat span{
  display:block;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.35;
}

.sol-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.sol-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 18px 17px;
  box-shadow:0 10px 22px rgba(8,38,74,.03);
}
.sol-item-title{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--navy);
  font-size:17px;
  margin:0 0 8px;
}
.sol-dot{
  width:9px;height:9px;border-radius:99px;display:inline-block;flex:0 0 auto;
}
.sol-section.library .sol-dot{background:linear-gradient(135deg,#D8B45D,#C77A2B)}
.sol-section.market .sol-dot{background:linear-gradient(135deg,#28C4D7,#6557D9)}
.sol-section.ecom .sol-dot{background:linear-gradient(135deg,#91C83E,#34A853)}
.sol-item p{
  margin:0;
  color:var(--muted);
}
.sol-note{
  margin-top:20px;
  padding:20px 22px;
  border-radius:18px;
  background:linear-gradient(135deg,#F6FAFF,#EEF7FA);
  border:1px solid var(--line);
  color:var(--muted);
}
.sol-note b{color:var(--navy)}

.svg-flow{
  fill:none;
  stroke-width:1.6;
  stroke-dasharray:5 6;
  animation:solDash 7s linear infinite;
}
.svg-flow.lib{stroke:rgba(199,122,43,.36)}
.svg-flow.market{stroke:rgba(23,104,179,.34)}
.svg-flow.ecom{stroke:rgba(52,168,83,.36)}
@keyframes solDash{to{stroke-dashoffset:-68}}
.svg-node{
  fill:#fff;
  stroke-width:1.2;
  animation:solPulse 3s ease-in-out infinite;
}
.svg-node.lib{stroke:rgba(199,122,43,.40)}
.svg-node.market{stroke:rgba(23,104,179,.34)}
.svg-node.ecom{stroke:rgba(52,168,83,.40)}
@keyframes solPulse{0%,100%{opacity:.8}50%{opacity:1}}

@media(max-width:1100px){
  .sol-hero-grid{grid-template-columns:1fr}
  .sol-header{grid-template-columns:1fr}
}
@media(max-width:700px){
  .sol-v-top{flex-direction:column}
  .sol-v-pills{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .sol-v-stats,.sol-grid{grid-template-columns:1fr}
}

/* V24: richer page hero across all pages */
.page-hero{
background:
radial-gradient(circle at 18% 24%, rgba(101,87,217,.34), transparent 30%),
radial-gradient(circle at 80% 16%, rgba(40,196,215,.20), transparent 26%),
linear-gradient(120deg,#04152B 0%,#08264A 38%,#1768B3 72%,#6557D9 100%) !important;
color:#fff;
position:relative;
overflow:hidden;
}
.page-hero:before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:28px 28px;
mask-image:radial-gradient(circle at center, black, transparent 85%);
pointer-events:none;
}
.page-hero > .container{position:relative;z-index:1}
.page-hero .lead{color:#DDE8F5}

/* V24 solutions page */
.solutions-page .section{padding:54px 0}
.solutions-page .hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.solutions-page .hero-card{
display:block;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);
padding:18px 16px;color:#fff;backdrop-filter:blur(8px);transition:.22s ease
}
.solutions-page .hero-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.14)}
.solutions-page .hero-card strong{display:block;font-size:18px;margin-bottom:7px}
.solutions-page .hero-card span{display:block;color:#D7E5F5;font-size:12.5px;line-height:1.45}

.division-wrap{padding:56px 0 26px}
.division-wrap.alt{background:#F8FBFE}
.division-intro{
display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start;margin-bottom:28px
}
.division-text{
display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start
}
.division-title{font-size:26px;line-height:1.06;margin:0;color:var(--navy)}
.division-summary{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0 0 18px}
.quicklinks{
display:grid;grid-template-columns:repeat(2,1fr);gap:10px
}
.quicklink{
display:block;padding:12px 14px;border:1px solid var(--line);background:#fff;border-radius:14px;box-shadow:0 8px 18px rgba(8,38,74,.03)
}
.quicklink b{display:block;color:var(--navy);font-size:14px;margin-bottom:4px}
.quicklink span{display:block;color:var(--muted);font-size:11.5px;line-height:1.4}

.visual-pro{
position:relative;min-height:370px;padding:22px;border-radius:26px;overflow:hidden;
background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
border:1px solid rgba(8,38,74,.10);box-shadow:0 24px 48px rgba(8,38,74,.06), inset 0 1px 0 rgba(255,255,255,.88)
}
.visual-pro:before{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 18% 18%, rgba(40,196,215,.10), transparent 20%),
radial-gradient(circle at 82% 18%, rgba(101,87,217,.10), transparent 24%),
radial-gradient(circle at 50% 100%, rgba(216,180,93,.08), transparent 30%)
}
.visual-pro:after{
content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(8,38,74,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(8,38,74,.03) 1px, transparent 1px);
background-size:22px 22px;opacity:.6
}
.visual-pro.library{border-color:rgba(199,122,43,.18)}
.visual-pro.market{border-color:rgba(23,104,179,.18)}
.visual-pro.ecom{border-color:rgba(95,174,53,.18)}
.v-top,.v-stage,.v-stats{position:relative;z-index:2}
.v-top{display:flex;justify-content:space-between;gap:18px;margin-bottom:14px}
.v-title{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--navy);margin:0 0 7px}
.v-desc{margin:0;font-size:12px;line-height:1.45;color:var(--muted);max-width:220px}
.v-pills{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.v-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(8,38,74,.10);box-shadow:0 8px 18px rgba(8,38,74,.05);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.v-pill i{width:6px;height:6px;border-radius:99px;display:inline-block;font-style:normal}
.visual-pro.library .v-pill i{background:linear-gradient(135deg,#D8B45D,#C77A2B)}
.visual-pro.market .v-pill i{background:linear-gradient(135deg,#28C4D7,#6557D9)}
.visual-pro.ecom .v-pill i{background:linear-gradient(135deg,#91C83E,#34A853)}
.v-stage{min-height:200px}
.v-stage svg{width:100%;height:200px;display:block}
.v-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.v-stat{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.66);border:1px solid rgba(8,38,74,.10);box-shadow:0 8px 18px rgba(8,38,74,.03)}
.v-stat b{display:block;color:var(--navy);font-size:12px;margin-bottom:3px}
.v-stat span{display:block;color:var(--muted);font-size:10.5px;line-height:1.35}

.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.service-card{
display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 17px;box-shadow:0 10px 22px rgba(8,38,74,.03);transition:.22s ease
}
.service-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(8,38,74,.05)}
.service-card h3{display:flex;align-items:center;gap:10px;color:var(--navy);font-size:17px;margin:0 0 8px}
.service-card p{margin:0;color:var(--muted)}
.service-card .arrow{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;color:var(--blue)}
.dotx{width:9px;height:9px;border-radius:99px;display:inline-block;flex:0 0 auto}
.division-wrap.library .dotx{background:linear-gradient(135deg,#D8B45D,#C77A2B)}
.division-wrap.market .dotx{background:linear-gradient(135deg,#28C4D7,#6557D9)}
.division-wrap.ecom .dotx{background:linear-gradient(135deg,#91C83E,#34A853)}

.detail-hero .eyebrow-nav{font-size:11px;color:#DDE8F5;margin-bottom:10px}
.detail-hero .eyebrow-nav a{color:#fff;opacity:.9}
.detail-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.hero-mini-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);padding:18px;border-radius:18px;backdrop-filter:blur(8px)}
.hero-mini-card b{display:block;font-size:13px;margin-bottom:8px;color:#fff}
.hero-mini-card p{margin:0;color:#DCE8F6}
.detail-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
.detail-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 10px 22px rgba(8,38,74,.03)}
.detail-card h3{margin-top:0;color:var(--navy)}
.bullet-list{padding-left:18px;margin:0}
.bullet-list li{margin:0 0 8px;color:var(--muted)}
.related-list{display:grid;gap:12px}
.related-item{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.related-item b{display:block;color:var(--navy);margin-bottom:4px}
.related-item span{display:block;color:var(--muted);font-size:12px;line-height:1.4}

.svg-flow{fill:none;stroke-width:1.6;stroke-dasharray:5 6;animation:solDash 7s linear infinite}
.svg-flow.lib{stroke:rgba(199,122,43,.36)}
.svg-flow.market{stroke:rgba(23,104,179,.34)}
.svg-flow.ecom{stroke:rgba(52,168,83,.36)}
@keyframes solDash{to{stroke-dashoffset:-68}}
.svg-node{fill:#fff;stroke-width:1.2;animation:solPulse 3s ease-in-out infinite}
.svg-node.lib{stroke:rgba(199,122,43,.40)}
.svg-node.market{stroke:rgba(23,104,179,.34)}
.svg-node.ecom{stroke:rgba(52,168,83,.40)}
@keyframes solPulse{0%,100%{opacity:.8}50%{opacity:1}}

@media(max-width:1100px){
  .solutions-page .hero-cards,.service-grid,.quicklinks,.v-stats,.detail-grid,.detail-hero-grid{grid-template-columns:1fr}
  .division-intro,.division-text{grid-template-columns:1fr}
}
@media(max-width:700px){
  .v-top{flex-direction:column}
  .v-pills{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
}

/* V25 visual explainer system */
.visual-band{
  padding:28px 0 8px;
}
.visual-band.tight{
  padding:18px 0 2px;
}
.visual-band.alt{
  background:#F8FBFE;
}
.visual-band .band-intro{
  margin-bottom:18px;
}
.visual-band .band-intro h2{
  margin:0 0 8px;
}
.visual-band .band-intro p{
  margin:0;
  color:var(--muted);
  max-width:860px;
}
.band-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.band-grid.two{
  grid-template-columns:repeat(2,1fr);
}
.visual-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 24px rgba(8,38,74,.03);
}
.visual-card h3{
  margin:0 0 6px;
  color:var(--navy);
  font-size:18px;
}
.visual-card p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
}
.visual-card .mini-caption{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.visual-card .mini-caption div{
  background:#F7FAFD;
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 10px;
}
.visual-card .mini-caption b{
  display:block;
  color:var(--navy);
  font-size:11.5px;
  margin-bottom:2px;
}
.visual-card .mini-caption span{
  color:var(--muted);
  font-size:10.5px;
  line-height:1.35;
}

.svg-lab{
  width:100%;
  height:170px;
  display:block;
  overflow:visible;
}
.svg-wire{
  fill:none;
  stroke-width:1.7;
  stroke-dasharray:6 7;
  animation:gbDash 8s linear infinite;
}
.svg-wire.blue{stroke:rgba(23,104,179,.36)}
.svg-wire.gold{stroke:rgba(199,122,43,.34)}
.svg-wire.green{stroke:rgba(52,168,83,.36)}
.svg-wire.violet{stroke:rgba(101,87,217,.34)}
@keyframes gbDash{to{stroke-dashoffset:-70}}
.svg-orb{
  fill:#fff;
  stroke-width:1.25;
  animation:gbPulse 3s ease-in-out infinite;
}
.svg-orb.blue{stroke:rgba(23,104,179,.32)}
.svg-orb.gold{stroke:rgba(199,122,43,.38)}
.svg-orb.green{stroke:rgba(52,168,83,.36)}
.svg-orb.violet{stroke:rgba(101,87,217,.34)}
@keyframes gbPulse{0%,100%{opacity:.82}50%{opacity:1}}
.home-visual-row{padding-top:18px}

.detail-visual{
  margin-top:22px;
}
.detail-visual .visual-card{
  padding:20px;
}
.detail-visual .band-grid{
  grid-template-columns:1fr;
}

@media(max-width:1100px){
  .band-grid,.band-grid.two{grid-template-columns:1fr}
}

/* V26 — visible home explainer system */
.gb-explainer{
  padding:64px 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(101,87,217,.08), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(40,196,215,.10), transparent 26%),
    #fff;
  border-bottom:1px solid var(--line);
}
.gb-explainer-head{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:34px;
  align-items:start;
  margin-bottom:28px;
}
.gb-mini-kicker{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--blue);
}
.gb-explainer-head h2{
  margin:0 0 10px;
  font-size:34px;
  letter-spacing:-.035em;
}
.gb-explainer-head p{
  margin:0;
  color:var(--muted);
  max-width:880px;
  font-size:15px;
}
.gb-explainer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.gb-division-card{
  position:relative;
  display:block;
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  min-height:500px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(8,38,74,.06);
  transition:.28s ease;
}
.gb-division-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 64px rgba(8,38,74,.12);
}
.gb-division-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 18%, rgba(40,196,215,.10), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(101,87,217,.08), transparent 28%);
  pointer-events:none;
}
.gb-library{border-top:5px solid #D8B45D}
.gb-market{border-top:5px solid #28C4D7}
.gb-ecom{border-top:5px solid #91C83E}
.gb-card-top,.gb-card-viz,.gb-card-content{position:relative;z-index:2}
.gb-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.gb-card-top span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:99px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
}
.gb-card-top span:before{
  content:"";
  width:7px;height:7px;border-radius:99px;display:block;
}
.gb-library .gb-card-top span:before{background:#D8B45D}
.gb-market .gb-card-top span:before{background:#28C4D7}
.gb-ecom .gb-card-top span:before{background:#91C83E}
.gb-card-viz{
  height:210px;
  margin:6px 0 18px;
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.28)),
    radial-gradient(circle at center,rgba(40,196,215,.08),transparent 60%);
  border:1px solid rgba(8,38,74,.08);
  overflow:hidden;
}
.gb-card-viz svg{
  width:100%;
  height:100%;
  display:block;
}
.gb-card-content h3{
  color:var(--navy);
  font-size:22px;
  margin:0 0 9px;
}
.gb-card-content p{
  color:var(--muted);
  margin:0 0 16px;
  font-size:13.5px;
}
.gb-chip-list{
  display:grid;
  gap:8px;
  margin:0 0 18px;
}
.gb-chip-list div{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.4;
}
.gb-chip-list div:before{
  content:"";
  width:8px;height:8px;border-radius:99px;margin-top:5px;flex:0 0 auto;
}
.gb-library .gb-chip-list div:before{background:linear-gradient(135deg,#D8B45D,#C77A2B)}
.gb-market .gb-chip-list div:before{background:linear-gradient(135deg,#28C4D7,#6557D9)}
.gb-ecom .gb-chip-list div:before{background:linear-gradient(135deg,#91C83E,#34A853)}
.gb-card-link{
  color:var(--blue);
  font-weight:700;
  font-size:12.5px;
}
.gb-svg-wire{
  fill:none;
  stroke-width:1.7;
  stroke-dasharray:5 7;
  animation:gbWire 7s linear infinite;
}
.gb-svg-wire.gold{stroke:rgba(199,122,43,.38)}
.gb-svg-wire.blue{stroke:rgba(23,104,179,.36)}
.gb-svg-wire.green{stroke:rgba(52,168,83,.38)}
.gb-svg-wire.violet{stroke:rgba(101,87,217,.36)}
@keyframes gbWire{to{stroke-dashoffset:-80}}
.gb-svg-node{
  fill:#fff;
  stroke-width:1.3;
  animation:gbNode 2.8s ease-in-out infinite;
}
.gb-svg-node.gold{stroke:rgba(199,122,43,.42)}
.gb-svg-node.blue{stroke:rgba(23,104,179,.38)}
.gb-svg-node.green{stroke:rgba(52,168,83,.40)}
.gb-svg-node.violet{stroke:rgba(101,87,217,.38)}
@keyframes gbNode{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.gb-brain{
  fill:none;
  stroke:url(#gbBrainGrad);
  stroke-width:4.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.gb-inner{
  fill:none;
  stroke:url(#gbInnerGrad);
  stroke-width:2.5;
  stroke-linecap:round;
}
.gb-cube,.gb-window{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.gb-process{
  padding:56px 0;
  background:#F8FBFE;
  border-bottom:1px solid var(--line);
}
.gb-process-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}
.gb-process h2{
  margin:0 0 12px;
  font-size:32px;
}
.gb-process p{
  margin:0;
  color:var(--muted);
  max-width:760px;
}
.gb-flow{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  box-shadow:0 18px 42px rgba(8,38,74,.05);
  overflow:hidden;
}
.gb-flow:before{
  content:"";
  position:absolute;
  left:-20%;
  top:0;
  width:30%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(40,196,215,.13),transparent);
  animation:gbScan 4.5s ease-in-out infinite;
}
@keyframes gbScan{0%{left:-35%}100%{left:110%}}
.gb-flow-steps{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.gb-flow-step{
  padding:14px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.gb-flow-step b{
  display:block;
  color:var(--navy);
  margin-bottom:5px;
}
.gb-flow-step span{
  color:var(--muted);
  font-size:11.5px;
}
.gb-flow-line{
  position:relative;
  z-index:2;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#D8B45D,#28C4D7,#6557D9,#91C83E);
  margin:18px 10px 0;
}
.gb-flow-line:after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:14px;
  height:14px;
  border-radius:99px;
  background:#fff;
  border:3px solid #28C4D7;
  transform:translateY(-50%);
  animation:gbDotTravel 5s ease-in-out infinite;
}
@keyframes gbDotTravel{
  0%{left:0}
  33%{left:33%}
  66%{left:66%}
  100%{left:calc(100% - 14px)}
}
@media(max-width:1100px){
  .gb-explainer-head,.gb-explainer-grid,.gb-process-grid{grid-template-columns:1fr}
  .gb-flow-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .gb-flow-steps{grid-template-columns:1fr}
  .gb-division-card{min-height:auto}
}

/* V27 simplified home */
.home-division-simple{
  padding:54px 0 44px;
  background:
    radial-gradient(circle at 12% 18%, rgba(101,87,217,.06), transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(40,196,215,.08), transparent 24%),
    #fff;
  border-bottom:1px solid var(--line);
}
.home-division-simple .section-head{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:30px;
  align-items:start;
  margin-bottom:24px;
}
.home-division-simple .section-head .mini{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--blue);
}
.home-division-simple .section-head h2{
  margin:0 0 9px;
  font-size:33px;
  letter-spacing:-.035em;
}
.home-division-simple .section-head p{
  margin:0;
  color:var(--muted);
  max-width:860px;
}
.home-bubble-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.bubble-card{
  position:relative;
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  min-height:370px;
  box-shadow:0 14px 34px rgba(8,38,74,.04);
  transition:.24s ease;
  overflow:hidden;
}
.bubble-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 44px rgba(8,38,74,.08);
}
.bubble-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(40,196,215,.09), transparent 20%),
    radial-gradient(circle at 80% 12%, rgba(101,87,217,.08), transparent 22%);
  pointer-events:none;
}
.bubble-card > *{position:relative; z-index:2;}
.bubble-card.library{border-top:4px solid #D8B45D;}
.bubble-card.market{border-top:4px solid #28C4D7;}
.bubble-card.ecom{border-top:4px solid #91C83E;}

.bubble-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.bubble-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}
.bubble-kicker:before{
  content:"";
  width:7px;height:7px;border-radius:999px;
  display:block;
}
.bubble-card.library .bubble-kicker:before{background:#D8B45D;}
.bubble-card.market .bubble-kicker:before{background:#28C4D7;}
.bubble-card.ecom .bubble-kicker:before{background:#91C83E;}

.bubble-card h3{
  margin:0 0 7px;
  color:var(--navy);
  font-size:22px;
  line-height:1.1;
}
.bubble-card p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.bubble-diagram{
  height:160px;
  position:relative;
  margin:8px 0 16px;
}
.main-bubble, .sub-bubble{
  position:absolute;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fff;
  border:1px solid rgba(8,38,74,.10);
  box-shadow:0 10px 24px rgba(8,38,74,.05);
}
.main-bubble{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:128px;
  height:128px;
  color:#fff;
  font-weight:700;
  line-height:1.2;
  padding:18px;
}
.bubble-card.library .main-bubble{background:linear-gradient(135deg,#C77A2B,#D8B45D);}
.bubble-card.market .main-bubble{background:linear-gradient(135deg,#1768B3,#6557D9);}
.bubble-card.ecom .main-bubble{background:linear-gradient(135deg,#34A853,#91C83E);}
.sub-bubble{
  width:82px;
  height:82px;
  font-size:11px;
  color:var(--navy);
  line-height:1.25;
  padding:8px;
  animation:floaty 5s ease-in-out infinite;
}
.sub-bubble small{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:3px;
}
.sub-bubble.one{left:8px; top:8px;}
.sub-bubble.two{right:8px; top:18px; animation-delay:.4s;}
.sub-bubble.three{left:26px; bottom:2px; animation-delay:.8s;}
.sub-bubble.four{right:28px; bottom:0; animation-delay:1.1s;}
.diagram-line{
  position:absolute;
  border-top:1.5px dashed rgba(8,38,74,.16);
  transform-origin:left center;
}
@keyframes floaty{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-5px)}
}

.bubble-points{
  display:grid;
  gap:8px;
  margin-bottom:14px;
}
.bubble-points div{
  display:flex;
  gap:9px;
  align-items:flex-start;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.bubble-points div:before{
  content:"";
  width:8px;height:8px;border-radius:999px;flex:0 0 auto;margin-top:5px;
}
.bubble-card.library .bubble-points div:before{background:linear-gradient(135deg,#D8B45D,#C77A2B);}
.bubble-card.market .bubble-points div:before{background:linear-gradient(135deg,#28C4D7,#6557D9);}
.bubble-card.ecom .bubble-points div:before{background:linear-gradient(135deg,#91C83E,#34A853);}
.bubble-link{
  color:var(--blue);
  font-size:12.5px;
  font-weight:700;
}

.home-summary-strip{
  padding:22px 0 42px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.summary-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.summary-pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#F8FBFE;
  color:var(--muted);
  font-size:12px;
}
.summary-pill b{color:var(--navy);}

@media(max-width:1100px){
  .home-division-simple .section-head,
  .home-bubble-grid{grid-template-columns:1fr;}
}

/* V28 home simplification */
.home-division-simple{padding:32px 0 36px}
.home-division-simple .section-head.compact{margin-bottom:14px}
.home-division-simple .section-head.compact h2{font-size:26px;margin-bottom:5px}
.home-division-simple .section-head.compact p{font-size:13px;max-width:760px}
.bubble-card.compact{min-height:270px;padding:16px}
.bubble-card.compact h3{font-size:18px;margin-bottom:3px}
.bubble-diagram.compact{height:122px;margin:4px 0 8px}
.bubble-card.compact .main-bubble{width:100px;height:100px;font-size:15px}
.bubble-card.compact .sub-bubble{width:62px;height:62px;font-size:9.5px}
.bubble-card.compact .bubble-points.compact{margin-bottom:8px}
.bubble-card.compact .bubble-points.compact div{font-size:11px}
.home-cta-clean{padding:0 0 54px;background:#fff}
.home-cta-box{
display:flex;justify-content:space-between;gap:24px;align-items:center;
padding:22px 24px;border:1px solid var(--line);border-radius:22px;
background:linear-gradient(135deg,#F8FBFE,#FFFFFF);box-shadow:0 12px 28px rgba(8,38,74,.04)
}
.home-cta-box h3{margin:3px 0 6px;color:var(--navy);font-size:24px}
.home-cta-box p{margin:0;color:var(--muted)}
.home-cta-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:1100px){
  .home-cta-box{flex-direction:column;align-items:flex-start}
}

/* V29 simplified single-solution pages */
.focus-hero .lead{
  max-width:760px;
}
.focus-page{
  padding:54px 0 64px;
}
.focus-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:start;
}
.focus-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  box-shadow:0 12px 26px rgba(8,38,74,.04);
}
.focus-card h3{
  margin-top:0;
  color:var(--navy);
}
.focus-card p{
  color:var(--muted);
}
.focus-list{
  margin:0;
  padding-left:18px;
}
.focus-list li{
  margin:0 0 8px;
  color:var(--muted);
}
.focus-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.focus-pill{
  padding:10px 13px;
  border-radius:999px;
  background:#F8FBFE;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.focus-box{
  display:grid;
  gap:14px;
}
.focus-mini{
  background:linear-gradient(135deg,#F8FBFE,#FFFFFF);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.focus-mini b{
  display:block;
  color:var(--navy);
  margin-bottom:4px;
}
.focus-mini span{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
}
.focus-cta{
  margin-top:24px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#F8FBFE;
}
.focus-cta h3{
  margin:0 0 8px;
}
.focus-cta p{
  margin:0 0 12px;
}
@media(max-width:1000px){
  .focus-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   V37 — Audience / Concrete use cases block on product pages
   ============================================================ */
.product-audience{
  background:linear-gradient(135deg,#F8FBFE 0%,#FFFFFF 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:48px 0 56px;
}
.product-audience .section-head{
  margin-bottom:26px;
}
.product-audience .section-head .mini{
  display:inline-block;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--blue);
  font-weight:800;
  margin-bottom:8px;
}
.product-audience h2{
  font-size:26px;
  line-height:1.2;
  color:var(--navy);
  margin:0 0 8px;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
}
.product-audience .section-head p{
  margin:0;color:var(--muted);font-size:14px;max-width:680px;
}
.audience-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}
.audience-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 22px 20px;
  box-shadow:0 10px 22px rgba(8,38,74,.04);
  position:relative;
  overflow:hidden;
}
.audience-card.who{ border-top:4px solid var(--aqua); }
.audience-card.use{ border-top:4px solid var(--gold); }
.audience-card h3{
  margin:0 0 12px;
  color:var(--navy);
  font-size:17px;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-weight:700;
  display:flex;align-items:center;gap:10px;
}
.audience-card h3 .ico{
  width:30px;height:30px;border-radius:8px;
  display:inline-grid;place-items:center;
  font-size:14px;font-weight:800;
}
.audience-card.who h3 .ico{ background:rgba(40,196,215,.14); color:#0E7A88; }
.audience-card.use h3 .ico{ background:rgba(216,180,93,.18); color:#8A6B22; }
.audience-card ul{
  margin:0;padding-left:0;list-style:none;
}
.audience-card ul li{
  position:relative;
  padding:9px 0 9px 22px;
  color:var(--ink);
  font-size:13.5px;
  line-height:1.5;
  border-top:1px solid #EEF3F8;
}
.audience-card ul li:first-child{ border-top:0; padding-top:4px; }
.audience-card ul li:before{
  content:"";position:absolute;left:2px;top:15px;
  width:8px;height:8px;border-radius:50%;
  background:var(--aqua);
  box-shadow:0 0 0 3px rgba(40,196,215,.18);
}
.audience-card.use ul li:before{
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(216,180,93,.22);
}
.audience-card ul li:first-child{ padding-top:9px; }
.audience-card ul li b{ color:var(--navy); font-weight:700; }
@media(max-width:760px){
  .audience-grid{ grid-template-columns:1fr; }
}

.hub-page{padding:54px 0 64px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hub-grid.two{grid-template-columns:repeat(2,1fr)}
.hub-card{
  display:block;background:#fff;border:1px solid var(--line);border-radius:22px;
  padding:20px;box-shadow:0 12px 24px rgba(8,38,74,.04);transition:.22s ease;overflow:hidden
}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(8,38,74,.07)}
.hub-card h3{margin:0 0 8px;color:var(--navy);font-size:22px}
.hub-card p{margin:0 0 14px;color:var(--muted);font-size:13.5px;line-height:1.5}
.hub-list{display:grid;gap:9px}
.hub-list a{
  display:block;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:#F8FBFE
}
.hub-list a b{display:block;color:var(--navy);font-size:13.5px;margin-bottom:3px}
.hub-list a span{display:block;color:var(--muted);font-size:11.5px;line-height:1.35}
.hub-kicker{
  display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px
}
.hub-kicker:before{content:"";width:7px;height:7px;border-radius:99px;display:block}
.hub-card.library .hub-kicker:before{background:#D8B45D}
.hub-card.market .hub-kicker:before{background:#28C4D7}
.hub-card.ecom .hub-kicker:before{background:#91C83E}
.hub-card.ai .hub-kicker:before{background:#6557D9}
.hub-card.log .hub-kicker:before{background:#1768B3}

.mini-visual{
  height:140px;margin:0 0 16px;border-radius:18px;border:1px solid rgba(8,38,74,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.3));
  overflow:hidden
}
.mini-visual svg{width:100%;height:100%;display:block}
.center-note{
  margin-top:22px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:#F8FBFE;color:var(--muted)
}
.center-note b{color:var(--navy)}

@media(max-width:1100px){
  .hub-grid,.hub-grid.two{grid-template-columns:1fr}
}

/* V31 unique product/solution visuals */
.focus-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:start;
}
.focus-visual{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 12px 26px rgba(8,38,74,.04);
  overflow:hidden;
}
.focus-visual h3{
  margin:0 0 10px;
  color:var(--navy);
}
.focus-visual p{
  margin:0 0 14px;
  color:var(--muted);
}
.focus-svg-wrap{
  height:210px;
  border:1px solid rgba(8,38,74,.08);
  border-radius:18px;
  background:
    radial-gradient(circle at 18% 18%, rgba(40,196,215,.08), transparent 22%),
    radial-gradient(circle at 82% 16%, rgba(101,87,217,.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4));
  overflow:hidden;
  margin-bottom:14px;
}
.focus-svg-wrap svg{width:100%;height:100%;display:block}
.focus-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.focus-tag{
  padding:9px 12px;
  border-radius:999px;
  background:#F8FBFE;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.focus-mini-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.focus-mini-card{
  padding:14px 15px;
  border-radius:16px;
  background:linear-gradient(135deg,#F8FBFE,#FFFFFF);
  border:1px solid var(--line);
}
.focus-mini-card b{
  display:block;
  color:var(--navy);
  margin-bottom:4px;
}
.focus-mini-card span{
  display:block;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.45;
}
.prod-wire{
  fill:none;
  stroke-width:1.8;
  stroke-dasharray:5 6;
  animation:prodDash 8s linear infinite;
}
.prod-node{
  fill:#fff;
  stroke-width:1.3;
  animation:prodPulse 3s ease-in-out infinite;
}
@keyframes prodDash{to{stroke-dashoffset:-70}}
@keyframes prodPulse{0%,100%{opacity:.8}50%{opacity:1}}
@media(max-width:1000px){
  .focus-grid{grid-template-columns:1fr}
}

/* V32 integrations logo marquee */
.integration-marquee{
  padding:44px 0 58px;
  background:#fff;
  border-top:1px solid var(--line);
}
.integration-marquee .mini{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--blue);
  margin-bottom:10px;
}
.integration-marquee h2{
  margin:0 0 8px;
  font-size:30px;
}
.integration-marquee p{
  margin:0 0 18px;
  color:var(--muted);
  max-width:820px;
}
.marquee-shell{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 12% 20%, rgba(40,196,215,.08), transparent 22%),
    radial-gradient(circle at 88% 12%, rgba(101,87,217,.07), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,254,.96));
  box-shadow:0 18px 36px rgba(8,38,74,.04);
  padding:18px 0;
}
.marquee-shell:before,
.marquee-shell:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  z-index:2;
  pointer-events:none;
}
.marquee-shell:before{
  left:0;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
}
.marquee-shell:after{
  right:0;
  background:linear-gradient(270deg,#fff,rgba(255,255,255,0));
}
.marquee-row{
  display:flex;
  width:max-content;
  animation:marqueeScroll 34s linear infinite;
}
.marquee-shell:hover .marquee-row{
  animation-play-state:paused;
}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.logo-pill{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:150px;
  height:68px;
  margin:0 8px;
  padding:12px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 10px 18px rgba(8,38,74,.03);
}
.logo-pill img{
  max-width:100px;
  max-height:26px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  filter:saturate(1.02);
}
.logo-pill .logo-fallback{
  display:none;
  color:var(--navy);
  font-weight:700;
  font-size:13px;
  letter-spacing:.02em;
}
@media(max-width:700px){
  .logo-pill{
    min-width:126px;
    height:60px;
    padding:10px 12px;
  }
  .logo-pill img{max-width:82px; max-height:22px;}
}

/* V33 stronger logo marquee */
.marquee-shell{
  padding:20px 0;
}
.marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  will-change:transform;
  animation:marqueeTrack 22s linear infinite;
}
.marquee-shell:hover .marquee-track{
  animation-play-state:paused;
}
.marquee-group{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
@keyframes marqueeTrack{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-50%,0,0)}
}
.logo-pill{
  min-width:164px;
  height:74px;
  margin:0 9px;
}
.logo-pill img{
  max-width:112px;
  max-height:34px;
}

/* V34 reliable marquee motion fix */
.marquee-shell{
  position:relative;
  overflow:hidden;
}
.marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
  animation:marqueeTrack var(--marquee-duration, 24s) linear infinite;
}
.marquee-group{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
@keyframes marqueeTrack{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--scroll-distance, -1600px),0,0)}
}

/* V35: JS-driven marquee, Edge-safe */
.marquee-track{
  animation:none !important;
  transform:translate3d(0,0,0);
  display:flex !important;
  align-items:center;
  width:max-content;
  will-change:transform;
}
.marquee-shell.is-paused .marquee-track{
  animation:none !important;
}
.marquee-group{
  display:flex !important;
  align-items:center;
  flex-shrink:0;
}


/* ============================================================
   V36 — Home redesign: more imposing, marquee on top,
   clearer services, real logos, refined visual language.
   All styles are additive — they only affect the home page
   (body.home-v36) or new V36 classes. Existing pages untouched.
   ============================================================ */

/* ---- Display typography (Plus Jakarta Sans) only for headings on home ---- */
.home-v36 .display-h1,
.home-v36 .display-h2{
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.028em;
}
.home-v36 .display-h1 .accent{
  color: #28C4D7;
  font-weight: 800;
}
.home-v36 .display-h2{
  font-weight: 700;
  letter-spacing: -.025em;
}

/* ---- Bigger header logo, applies to all pages ---- */
.logo-xl{
  font-size: 22px;
  gap: 12px;
}
.logo-xl .mark{
  width: 42px;
  height: 42px;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(8,38,74,.20);
}
.logo-xl .mark:after{
  inset: 9px;
  border-width: 3.5px;
}
.brand-text{ font-weight: 800; letter-spacing: -.02em; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.header .navbar{ height: 76px; }
.header .nav>li>a{ padding: 28px 14px; font-size: 12.5px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.header .dropdown a,
.header .dropdown strong{ font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
.header .dropdown{ top: 76px; }

/* ============================================================
   V36 HERO — taller, more cinematic, real visual presence
   ============================================================ */
.v36-hero{
  position: relative;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(101,87,217,.45), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(40,196,215,.32), transparent 30%),
    radial-gradient(circle at 50% 110%, rgba(216,180,93,.20), transparent 45%),
    linear-gradient(120deg,#04152B 0%,#08264A 32%,#1768B3 70%,#6557D9 100%);
}
.hero-bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.hero-grid-lines{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .55;
}
.hero-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  animation: heroFloat 12s ease-in-out infinite;
}
.hero-orb.orb-a{
  width: 360px; height: 360px; left: -90px; top: 60px;
  background: radial-gradient(circle, rgba(40,196,215,.55), transparent 65%);
}
.hero-orb.orb-b{
  width: 420px; height: 420px; right: -120px; top: 20%;
  background: radial-gradient(circle, rgba(101,87,217,.55), transparent 65%);
  animation-delay: 2s;
}
.hero-orb.orb-c{
  width: 300px; height: 300px; left: 35%; bottom: -100px;
  background: radial-gradient(circle, rgba(216,180,93,.45), transparent 65%);
  animation-delay: 4s;
}
@keyframes heroFloat{
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.08); }
}

.v36-hero-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items: center;
  padding: 60px 0 66px 40px;
  position: relative;
  z-index: 1;
}
.v36-hero-copy .kicker{
  font-size: 10.5px;
  letter-spacing: .22em;
}
.v36-hero-copy h1.display-h1{
  font-size: 38px;
  line-height: 1.04;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 6px 30px rgba(0,0,0,.18);
}
.v36-hero-copy .lead{
  font-size: 14px;
  line-height: 1.5;
  color: #D8E5F4;
  max-width: 520px;
  margin: 0 0 18px;
}
.v36-hero-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.btn-lg{
  padding: 14px 22px !important;
  font-size: 13.5px !important;
  border-radius: 4px !important;
}
.btn.primary.btn-lg{
  background: #28C4D7;
  color: #041426 !important;
  box-shadow: 0 10px 28px rgba(40,196,215,.32);
  font-weight: 800 !important;
}
.btn.secondary.btn-lg{
  border-color: rgba(255,255,255,.55);
  color: #fff !important;
  background: rgba(255,255,255,.04);
}
.btn.secondary.btn-lg:hover{ background: rgba(255,255,255,.10); }
.btn.ghost{
  background: transparent;
  border: 1px solid rgba(8,38,74,.18);
  color: var(--navy) !important;
}
.btn.ghost:hover{ border-color: var(--blue); color: var(--blue) !important; }

.v36-hero-trust{
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.6);
  font-size: 11px;
  letter-spacing: .04em;
}
.v36-hero-trust strong{
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Hero visual — three towers */
.v36-hero-visual{
  position: relative;
}
.v36-hero-visual svg{
  width: 100%;
  height: auto;
  max-width: 380px;
  display: block;
  margin-left: auto;
  margin-right: 0;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.42));
}

/* Pillars entry — use ONLY scaleY and opacity. We deliberately do NOT
   animate any translate property because each pillar already has a
   translate(...) in its HTML transform attribute that positions it
   horizontally — a CSS transform animation would clobber that. With
   transform-box:fill-box the SVG transform attribute is preserved as
   the "outer" transform, and CSS transforms only affect the local box. */
.v36-hero-visual .iso-pillars .pillar{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pillarRise 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.v36-hero-visual .p-lib  { animation-delay: .15s; }
.v36-hero-visual .p-mkt  { animation-delay: .30s; }
.v36-hero-visual .p-ecom { animation-delay: .45s; }
@keyframes pillarRise{
  from{ transform: scaleY(.25); opacity: 0; }
  to  { transform: scaleY(1);   opacity: 1; }
}

/* Floating books with bigger amplitude and rotation */
.v36-hero-visual .iso-books .book{
  transform-box: fill-box;
  transform-origin: center;
  animation: bookFloat 4.2s ease-in-out infinite;
}
.v36-hero-visual .iso-books .b1{ animation-delay: 0s;   animation-name: bookFloatA; }
.v36-hero-visual .iso-books .b2{ animation-delay: .6s;  animation-name: bookFloatB; }
.v36-hero-visual .iso-books .b3{ animation-delay: 1.2s; animation-name: bookFloatC; }
@keyframes bookFloatA{
  0%, 100% { transform: translate(85px, 200px) rotate(-4deg); }
  50%      { transform: translate(85px, 188px) rotate(-8deg); }
}
@keyframes bookFloatB{
  0%, 100% { transform: translate(515px, 195px) rotate(5deg); }
  50%      { transform: translate(515px, 183px) rotate(9deg); }
}
@keyframes bookFloatC{
  0%, 100% { transform: translate(295px, 60px) rotate(0deg); }
  50%      { transform: translate(295px, 50px) rotate(3deg); }
}

/* ============================================================
   Floating data-tag nodes — 6 around the scene (viewBox 600x560)
   ============================================================ */
.v36-hero-visual .iso-orbit-node{
  transform-box: fill-box;
  transform-origin: center;
}
.v36-hero-visual .iso-node-group g.n1{ animation: nodeFloatA 5.0s ease-in-out infinite; }
.v36-hero-visual .iso-node-group g.n2{ animation: nodeFloatB 6.2s ease-in-out infinite; }
.v36-hero-visual .iso-node-group g.n3{ animation: nodeFloatC 5.6s ease-in-out infinite; }
.v36-hero-visual .iso-node-group g.n4{ animation: nodeFloatD 6.8s ease-in-out infinite; }
/* Positions tuned for viewBox 0 -30 600 590.
   The platform centre is at (300, 360). The four nodes ring its midline. */
@keyframes nodeFloatA{ 0%,100%{ transform: translate(115px,210px); } 50%{ transform: translate(115px,198px); } }  /* ISBN   left-mid  */
@keyframes nodeFloatB{ 0%,100%{ transform: translate(485px,210px); } 50%{ transform: translate(485px,198px); } }  /* SP-API right-mid */
@keyframes nodeFloatC{ 0%,100%{ transform: translate(100px,340px); } 50%{ transform: translate(100px,330px); } }  /* SKU    left-low  */
@keyframes nodeFloatD{ 0%,100%{ transform: translate(500px,340px); } 50%{ transform: translate(500px,330px); } }  /* MARC   right-low */

/* Background halo — pulse */
.v36-hero-visual .hero-halo{
  transform-origin: 300px 300px;
  animation: haloPulse 6s ease-in-out infinite;
}
@keyframes haloPulse{
  0%, 100% { opacity: .9; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.05); }
}

/* Holographic floor mesh — gentle drift */
.v36-hero-visual .hero-floor-mesh{
  animation: meshShimmer 7s ease-in-out infinite;
}
@keyframes meshShimmer{
  0%, 100% { opacity: .25; }
  50%      { opacity: .42; }
}

/* Distant skyline — slow shimmer */
.v36-hero-visual .hero-skyline{
  animation: skylineShimmer 8s ease-in-out infinite;
}
@keyframes skylineShimmer{
  0%, 100% { opacity: .22; }
  50%      { opacity: .35; }
}

/* Floor glow — breathing */
.v36-hero-visual .hero-floor-glow{
  transform-origin: 300px 430px;
  animation: floorBreath 4.5s ease-in-out infinite;
}
@keyframes floorBreath{
  0%, 100% { opacity: .55; transform: scaleX(1); }
  50%      { opacity: .9;  transform: scaleX(1.1); }
}

/* Particles — staggered twinkle, bigger amplitude */
.v36-hero-visual .particle{
  transform-box: fill-box;
  transform-origin: center;
  animation: particleTwinkle 3.2s ease-in-out infinite;
}
.v36-hero-visual .particle.p1{ animation-delay: 0s; }
.v36-hero-visual .particle.p2{ animation-delay: .35s; }
.v36-hero-visual .particle.p3{ animation-delay: .7s; }
.v36-hero-visual .particle.p4{ animation-delay: 1.05s; }
.v36-hero-visual .particle.p5{ animation-delay: 1.4s; }
.v36-hero-visual .particle.p6{ animation-delay: 1.75s; }
.v36-hero-visual .particle.p7{ animation-delay: 2.1s; }
.v36-hero-visual .particle.p8{ animation-delay: .2s; }
.v36-hero-visual .particle.p9{ animation-delay: .55s; }
@keyframes particleTwinkle{
  0%, 100% { opacity: .2; transform: scale(.6); }
  50%      { opacity: 1;  transform: scale(2); }
}

/* Energy beams — flowing dashed pattern + opacity pulse */
.v36-hero-visual .beam{
  stroke-dasharray: 6 6;
  animation: beamFlow 1.8s linear infinite, beamPulse 3s ease-in-out infinite;
}
.v36-hero-visual .b-left      { animation-delay: 0s,    0s;    }
.v36-hero-visual .b-center-l  { animation-delay: -.3s,  -.4s;  }
.v36-hero-visual .b-center-r  { animation-delay: -.6s,  -.8s;  }
.v36-hero-visual .b-right     { animation-delay: -.9s,  -1.2s; }
.v36-hero-visual .b-low-l     { animation-delay: -1.2s, -1.6s; }
.v36-hero-visual .b-low-r     { animation-delay: -1.5s, -2.0s; }
@keyframes beamFlow{
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -24; }
}
@keyframes beamPulse{
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* Floor scanner line — sweeping across the platform top */
.v36-hero-visual .scan-line{
  animation: scanSweep 4s ease-in-out infinite;
}
@keyframes scanSweep{
  0%   { transform: translateY(-50px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(180px); opacity: 0; }
}

/* Platform corner dots — pulse */
.v36-hero-visual .corner-dot{
  transform-box: fill-box;
  transform-origin: center;
  animation: cornerPulse 2.4s ease-in-out infinite;
}
.v36-hero-visual .c-top    { animation-delay: 0s; }
.v36-hero-visual .c-right  { animation-delay: .6s; }
.v36-hero-visual .c-bottom { animation-delay: 1.2s; }
.v36-hero-visual .c-left   { animation-delay: 1.8s; }
@keyframes cornerPulse{
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.6); }
}

/* Beacon halo + core — strong pulse on the tallest tower */
.v36-hero-visual .beacon-halo{
  transform-box: fill-box;
  transform-origin: center;
  animation: beaconHalo 2s ease-in-out infinite;
}
.v36-hero-visual .beacon-core{
  transform-box: fill-box;
  transform-origin: center;
  animation: beaconCore 2s ease-in-out infinite;
}
@keyframes beaconHalo{
  0%, 100% { opacity: .4; transform: scale(.9); }
  50%      { opacity: 1;  transform: scale(1.5); }
}
@keyframes beaconCore{
  0%, 100% { opacity: .8; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.3); }
}

/* Tower LEDs — staggered blink. Each tower has more LEDs now since
   we removed the confusing "data panel" stickers and rely on LEDs +
   the flip label for content. */
.v36-hero-visual .led{
  transform-box: fill-box;
  transform-origin: center;
  animation: ledBlink 1.4s ease-in-out infinite;
}
/* Libraries tower LEDs (5) */
.v36-hero-visual .led-lib-1{ animation-delay: 0s;   }
.v36-hero-visual .led-lib-2{ animation-delay: .25s; }
.v36-hero-visual .led-lib-3{ animation-delay: .50s; }
.v36-hero-visual .led-lib-4{ animation-delay: .75s; }
.v36-hero-visual .led-lib-5{ animation-delay: 1.0s; }
/* Marketplaces tower LEDs (7, tallest) */
.v36-hero-visual .led-mkt-1{ animation-delay: .1s;  }
.v36-hero-visual .led-mkt-2{ animation-delay: .3s;  }
.v36-hero-visual .led-mkt-3{ animation-delay: .5s;  }
.v36-hero-visual .led-mkt-4{ animation-delay: .7s;  }
.v36-hero-visual .led-mkt-5{ animation-delay: .9s;  }
.v36-hero-visual .led-mkt-6{ animation-delay: 1.1s; }
.v36-hero-visual .led-mkt-7{ animation-delay: 1.3s; }
/* E-commerce tower LEDs (5) */
.v36-hero-visual .led-ecom-1{ animation-delay: .15s; }
.v36-hero-visual .led-ecom-2{ animation-delay: .4s;  }
.v36-hero-visual .led-ecom-3{ animation-delay: .65s; }
.v36-hero-visual .led-ecom-4{ animation-delay: .9s;  }
.v36-hero-visual .led-ecom-5{ animation-delay: 1.15s;}
@keyframes ledBlink{
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* ============================================================
   Tower flip-labels — each label has two faces (name / items)
   that alternate via opacity + scaleX.

   IMPORTANT: we do NOT animate transform on the .tower-label
   itself, because that would override the SVG transform="..."
   attribute that positions it above its tower. Only the .label-face
   children are animated (and they use transform-box: fill-box so
   their scaleX pivots around each face's own centre, not the SVG
   origin).
   ============================================================ */
.v36-hero-visual .label-face{
  transform-box: fill-box;
  transform-origin: center center;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.v36-hero-visual .face-a{ animation-name: faceA; }
.v36-hero-visual .face-b{ animation-name: faceB; }
/* Stagger so the three towers don't all flip at the same moment */
.v36-hero-visual .tl-lib  .label-face{ animation-delay: 0s;  }
.v36-hero-visual .tl-mkt  .label-face{ animation-delay: -2s; }
.v36-hero-visual .tl-ecom .label-face{ animation-delay: -4s; }
@keyframes faceA{
  /* Visible 0%–43%, hiding 43%–50%, hidden 50%–93%, showing 93%–100% */
  0%       { opacity: 1; transform: scaleX(1);   }
  43%      { opacity: 1; transform: scaleX(1);   }
  47%      { opacity: 0; transform: scaleX(.05); }
  93%      { opacity: 0; transform: scaleX(.05); }
  97%      { opacity: 1; transform: scaleX(1);   }
  100%     { opacity: 1; transform: scaleX(1);   }
}
@keyframes faceB{
  0%       { opacity: 0; transform: scaleX(.05); }
  43%      { opacity: 0; transform: scaleX(.05); }
  47%      { opacity: 0; transform: scaleX(.05); }
  50%      { opacity: 1; transform: scaleX(1);   }
  93%      { opacity: 1; transform: scaleX(1);   }
  97%      { opacity: 0; transform: scaleX(.05); }
  100%     { opacity: 0; transform: scaleX(.05); }
}

/* ============================================================
   V36 MARQUEE — bigger pills, bigger logos, just under hero
   ============================================================ */
.v36-marquee{
  padding: 26px 0 28px;
  background: linear-gradient(180deg, #fff 0%, #F5F8FC 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.v36-marquee-head{
  text-align: center;
  margin: 0 auto 16px;
  max-width: 1100px;
}
.v36-marquee-head .mini{ margin-bottom: 6px; }
.v36-marquee-head h2{
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -.022em;
  margin: 0 0 6px;
  color: var(--navy);
}
@media(min-width:1000px){
  .v36-marquee-head h2{ white-space: nowrap; }
}
.v36-marquee-head p{
  color: var(--muted);
  font-size: 12.5px;
  margin: 0;
}

.v36-marquee-shell{
  border-radius: 12px;
  padding: 12px 0;
  background:
    radial-gradient(circle at 8% 20%, rgba(40,196,215,.08), transparent 22%),
    radial-gradient(circle at 92% 14%, rgba(101,87,217,.07), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #F8FBFE 100%);
  box-shadow: 0 16px 32px rgba(8,38,74,.05);
  border: 1px solid var(--line);
}
.v36-marquee-shell:before,
.v36-marquee-shell:after{ width: 120px; }
.v36-marquee-shell:before{
  background: linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255,255,255,0) 100%);
}
.v36-marquee-shell:after{
  background: linear-gradient(270deg, #fff 0%, #fff 40%, rgba(255,255,255,0) 100%);
}

/* MUCH bigger logo pills */
.v36-marquee .logo-pill{
  min-width: 100px !important;
  height: 46px !important;
  margin: 0 7px !important;
  padding: 8px 12px !important;
  border-radius: 9px !important;
  background: #fff !important;
  border: 1px solid #E6EEF6 !important;
  box-shadow: 0 4px 10px rgba(8,38,74,.04) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.v36-marquee .logo-pill:hover{
  transform: translateY(-3px);
  border-color: #C9DBEE !important;
  box-shadow: 0 18px 32px rgba(8,38,74,.10) !important;
}
.v36-marquee .logo-pill img{
  max-width: 72px !important;
  max-height: 26px !important;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(1.05);
}

/* Stylized text fallbacks — these actually look good if a logo fails */
.v36-marquee .logo-fallback{
  display: none;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -.02em;
  color: var(--navy);
  text-align: center;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.v36-marquee .fb-shopify   { color: #008060; font-style: italic; }
.v36-marquee .fb-ebay      {
  background: linear-gradient(90deg,#e53238 0% 25%,#0064d2 25% 50%,#f5af02 50% 75%,#86b817 75% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v36-marquee .fb-ml        { color: #FFE600; background: #2D66D4; padding: 2px 6px; border-radius: 4px; }
.v36-marquee .fb-abe       { color: #704214; font-family: Georgia, serif; }
.v36-marquee .fb-ingram    { letter-spacing: .12em; color: #003A70; }
.v36-marquee .fb-gardners  { color: #C8102E; font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif; font-style: italic; }
.v36-marquee .fb-walmart   { color: #0071CE; }
.v36-marquee .fb-etsy      { color: #F1641E; font-family: Georgia, serif; font-style: italic; }
.v36-marquee .fb-paypal    { background: linear-gradient(90deg,#003087,#0070BA); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.v36-marquee .fb-stripe    { color: #635BFF; font-weight: 900; }
.v36-marquee .fb-woo       { color: #7F54B3; }
.v36-marquee .fb-bc        { color: #34313F; }
.v36-marquee .fb-magento   { color: #F46F25; }
.v36-marquee .fb-presta    { color: #DF0067; }
.v36-marquee .fb-rakuten   { color: #BF0000; }
.v36-marquee .fb-meta      { background: linear-gradient(90deg,#0064E0,#FA7E1E,#D62976); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v36-marquee .fb-ig        { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.v36-marquee .fb-tt        { color: #010101; }
.v36-marquee .fb-gs        { color: #4285F4; }
.v36-marquee .fb-klaviyo   { color: #232225; }
.v36-marquee .fb-odoo      { color: #714B67; }
.v36-marquee .fb-vtex      { color: #FF3366; }
.v36-marquee .fb-mirakl    { color: #194F90; letter-spacing: -.01em; }
.v36-marquee .fb-shipstation{ color: #0072C6; font-weight: 700; font-size: 11px; }

@media(max-width:700px){
  .v36-marquee .logo-pill{
    min-width: 150px !important;
    height: 78px !important;
    padding: 12px 16px !important;
  }
  .v36-marquee .logo-pill img{
    max-width: 110px !important;
    max-height: 38px !important;
  }
  .v36-marquee .logo-fallback{ font-size: 17px; }
}

/* ============================================================
   V36 STATS BAND
   ============================================================ */
.v36-stats{
  padding: 30px 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.v36-stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.v36-stats .stat{
  text-align: left;
  border-left: 3px solid transparent;
  padding-left: 14px;
  position: relative;
}
.v36-stats .stat:nth-child(1){ border-color: #D8B45D; }
.v36-stats .stat:nth-child(2){ border-color: #28C4D7; }
.v36-stats .stat:nth-child(3){ border-color: #6557D9; }
.v36-stats .stat:nth-child(4){ border-color: #91C83E; }
.v36-stats .stat b{
  display: block;
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -.035em;
  margin-bottom: 6px;
}
.v36-stats .stat b .num{
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.035em;
  line-height: 1;
}
.v36-stats .stat b .suf{
  color: var(--blue);
  font-size: 24px;
  margin-left: 2px;
  font-weight: 700;
}
.v36-stats .stat > span{
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
  max-width: none;
  white-space: nowrap;
}
@media(max-width:1100px){
  .v36-stats .stat > span{ white-space: normal; }
}
@media(max-width:900px){
  .v36-stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .v36-stats .stat b,
  .v36-stats .stat b .num{ font-size: 38px; }
  .v36-stats .stat b .suf{ font-size: 26px; }
}
@media(max-width:520px){
  .v36-stats-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   V36 DIVISIONS — refine the existing bubbles
   ============================================================ */
.v36-divisions{
  padding: 32px 0 36px !important;
}
.v36-divisions .section-head.compact h2{
  font-size: 28px;
}
.v36-divisions .section-head.compact p{
  font-size: 13px;
}
.v36-bubble-grid{
  margin-top: 12px;
}
.home-v36 .bubble-card{
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 38px rgba(8,38,74,.06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.home-v36 .bubble-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 26px 52px rgba(8,38,74,.13);
}
.home-v36 .bubble-card h3{
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ============================================================
   V36 HOW WE WORK — three-step engagement model
   ============================================================ */
.v36-howwework{
  padding: 56px 0 64px;
  background:
    radial-gradient(circle at 50% 0%, rgba(40,196,215,.06), transparent 50%),
    #FAFCFE;
  border-top: 1px solid var(--line);
}
.v36-howwework .section-head.compact{ text-align: center; max-width: 820px; margin: 0 auto 32px; }
.v36-howwework h2{ font-size: 34px; }
.v36-howwework p{ margin: 0 auto; max-width: 700px; }
.v36-how-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
}
.how-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(8,38,74,.05);
  transition: transform .28s ease, box-shadow .28s ease;
}
.how-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(8,38,74,.10);
}
.how-card:before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #D8B45D 0%, #28C4D7 50%, #91C83E 100%);
}
.how-card:nth-child(1):before{ background: #D8B45D; }
.how-card:nth-child(2):before{ background: #28C4D7; }
.how-card:nth-child(3):before{ background: #91C83E; }
.how-icon{
  width: 64px; height: 64px;
  margin-bottom: 14px;
}
.how-icon svg{ width: 100%; height: 100%; display: block; }
.how-step{
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 6px;
}
.how-card h3{
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.018em;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.18;
}
.how-card p{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.how-points{
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid #ECF1F7;
}
.how-points li{
  font-size: 12.5px;
  color: #425671;
  padding: 6px 0 6px 18px;
  position: relative;
}
.how-points li:before{
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #28C4D7;
}
.how-card:nth-child(1) .how-points li:before{ background: #D8B45D; }
.how-card:nth-child(3) .how-points li:before{ background: #91C83E; }

/* ============================================================
   V36 SUPPORT LAYER — AI + Logistics
   ============================================================ */
.v36-support-layer{
  padding: 56px 0;
  background: #fff;
}
.v36-support-layer .section-head.compact{ text-align: center; max-width: 820px; margin: 0 auto 32px; }
.v36-support-layer h2{ font-size: 32px; }
.v36-support-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.support-card{
  display: block;
  position: relative;
  padding: 32px 30px 28px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  color: inherit;
}
.support-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(8,38,74,.12);
}
.support-ai{
  background:
    radial-gradient(circle at 0% 0%, rgba(101,87,217,.10), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #F6F4FD 100%);
  border-color: #E2DCF8;
}
.support-log{
  background:
    radial-gradient(circle at 100% 0%, rgba(216,180,93,.12), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #FAF5E8 100%);
  border-color: #ECDFC0;
}
.sc-tag{
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .18em;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
  color: #fff;
}
.support-ai .sc-tag{ background: linear-gradient(90deg, #6557D9, #28C4D7); }
.support-log .sc-tag{ background: linear-gradient(90deg, #C77A2B, #D8B45D); }
.sc-graphic{
  width: 100%;
  max-width: 280px;
  margin-bottom: 16px;
}
.sc-graphic svg{ width: 100%; height: auto; display: block; }
.support-card h3{
  font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  color: var(--navy);
  line-height: 1.18;
}
.support-card p{
  color: #425671;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.sc-link{
  font-weight: 800;
  font-size: 12.5px;
  color: var(--blue);
  letter-spacing: .01em;
}
.support-log .sc-link{ color: #C77A2B; }

/* ============================================================
   V36 FINAL CTA
   ============================================================ */
.v36-final-cta{
  padding: 40px 0 80px;
  background: #fff;
}
.v36-cta-card{
  position: relative;
  border-radius: 22px;
  padding: 56px 48px;
  background:
    radial-gradient(circle at 12% 20%, rgba(101,87,217,.55), transparent 35%),
    radial-gradient(circle at 86% 80%, rgba(40,196,215,.45), transparent 40%),
    linear-gradient(120deg, #04152B 0%, #08264A 60%, #1768B3 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(8,38,74,.18);
}
.cta-bg{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 24px, rgba(255,255,255,.03) 24px 25px);
  pointer-events: none;
}
.cta-content{ position: relative; z-index: 1; max-width: 760px; }
.v36-cta-card .mini{
  color: #28C4D7;
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 800;
  margin-bottom: 12px;
  display: block;
}
.v36-cta-card h2{
  font-size: 36px;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.1;
}
.v36-cta-card p{
  color: #D8E5F4;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 620px;
}
.cta-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.v36-cta-card .btn.ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff !important;
}
.v36-cta-card .btn.ghost:hover{ background: rgba(255,255,255,.14); }

/* ============================================================
   V36 RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .v36-hero-grid{ grid-template-columns: 1fr; gap: 36px; padding: 60px 0 72px; }
  .v36-hero-copy h1.display-h1{ font-size: 42px; }
  .v36-hero-visual{ max-width: 440px; margin: 0 auto; }
  .v36-how-grid{ grid-template-columns: 1fr; gap: 16px; }
  .v36-support-grid{ grid-template-columns: 1fr; }
  .v36-cta-card{ padding: 40px 28px; }
  .v36-cta-card h2{ font-size: 26px; }
  .home-v36 .nav{ display: none; }
}
@media(max-width:600px){
  .v36-hero-copy h1.display-h1{ font-size: 34px; }
  .v36-hero-copy .lead{ font-size: 15px; }
  .v36-divisions .section-head.compact h2,
  .v36-howwework h2,
  .v36-support-layer h2{ font-size: 26px; }
  .v36-marquee-head h2{ font-size: 24px; }
}

/* Reduced motion respect */
@media(prefers-reduced-motion: reduce){
  .home-v36 *{ animation: none !important; transition: none !important; }
}


/* ============================================================
   V36 AI PRODUCTS — three distinct products, presented individually
   (reprAIcer and replAIer are separate; AI Acquisitions Discovery too)
   ============================================================ */
.v36-ai-products{
  padding: 56px 0 50px;
  background:
    radial-gradient(circle at 50% 0%, rgba(101,87,217,.06), transparent 50%),
    #fff;
  border-top: 1px solid var(--line);
}
.v36-ai-products .section-head.compact{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 32px;
}
.v36-ai-products h2{ font-size: 32px; }
.v36-ai-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 22px;
}
.ai-product-card{
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px 22px;
  position: relative;
  overflow: hidden;
  color: inherit;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  box-shadow: 0 14px 32px rgba(8,38,74,.05);
}
.ai-product-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 28px 56px rgba(8,38,74,.12);
}
.ai-product-card:before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.ai-product-card:nth-child(1):before{ background: linear-gradient(90deg, #6557D9, #28C4D7); }
.ai-product-card:nth-child(2):before{ background: linear-gradient(90deg, #28C4D7, #1768B3); }
.ai-product-card:nth-child(3):before{ background: linear-gradient(90deg, #D8B45D, #91C83E); }
.ai-product-card:nth-child(1):hover{ border-color: #C9C2F0; }
.ai-product-card:nth-child(2):hover{ border-color: #B9E2EA; }
.ai-product-card:nth-child(3):hover{ border-color: #E0D2A7; }

.ai-icon{
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
}
.ai-icon svg{ width: 100%; height: 100%; display: block; }

.ai-tag{
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 800;
  color: #6557D9;
  margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
.ai-product-card:nth-child(2) .ai-tag{ color: #1768B3; }
.ai-product-card:nth-child(3) .ai-tag{ color: #C77A2B; }

.ai-product-card h3{
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.15;
}
.ai-tagline{
  font-size: 13px;
  font-weight: 700;
  color: #425671;
  margin: 0 0 10px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
.ai-desc{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.ai-link{
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .01em;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
.ai-product-card:nth-child(1) .ai-link{ color: #6557D9; }
.ai-product-card:nth-child(2) .ai-link{ color: #1768B3; }
.ai-product-card:nth-child(3) .ai-link{ color: #C77A2B; }

.v36-ai-extras{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: center;
  padding-top: 18px;
  border-top: 1px dashed #D8E0EB;
}
.ai-extra-link{
  font-size: 13px;
  color: #425671;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  transition: color .2s ease;
}
.ai-extra-link:hover{ color: var(--blue); }
.ai-extra-link.strong{
  color: var(--blue);
  font-weight: 800;
}

@media(max-width:1000px){
  .v36-ai-grid{ grid-template-columns: 1fr; }
}

/* Single logistics band — keeps the support-card visual but full-width */
.v36-support-grid-single{
  grid-template-columns: 1fr;
  max-width: 920px;
  margin: 0 auto;
}
.v36-support-log-only{
  padding-top: 50px;
}


/* ============================================================
   V36 — .ai-mark: visual differentiator for the "AI" inside
   reprAIcer and replAIer so the I (uppercase) is not confused
   with the l (lowercase). Colour + slightly different weight.
   ============================================================ */
.ai-mark{
  color: #28C4D7;          /* aqua brand */
  font-weight: 900;
  letter-spacing: .01em;
  /* a tiny baseline shift so AI visually pops out of the wordmark */
  display: inline-block;
  padding: 0 1px;
}
.home-v36 .ai-mark{ color: #28C4D7; }
/* Inside the hero (dark background) the aqua already pops; inside light
   contexts (cards, nav, footer) the aqua reads well too. */

/* In sub-bubbles (which sit on dark gradient circles), the aqua is harder
   to see — use light-on-dark with a subtle bg pill instead. */
.sub-bubble .ai-mark{
  color: #08264A;
  background: rgba(255,255,255,.6);
  font-weight: 900;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 1px;
}

/* On the AI Product cards the AI gets its product-specific colour. */
.ai-product-card:nth-child(2) h3 .ai-mark{ color: #1768B3; }   /* reprAIcer card */
.ai-product-card:nth-child(3) h3 .ai-mark{ color: #C77A2B; }   /* replAIer  card */

/* On the dark footer the aqua is fine but a bit darker contrast looks
   sharper against grey text. */
.footer .ai-mark{ color: #28C4D7; }

/* ============================================================
   V36 — fallback styles for the new logo pills
   ============================================================ */
.v36-marquee .fb-amazon{
  color: #FF9900;
  font-weight: 900;
  font-style: italic;
  font-size: 15px;
  letter-spacing: -.04em;
}
.v36-marquee .fb-dhl{
  color: #D40511;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .04em;
  font-size: 16px;
}
.v36-marquee .fb-fedex{
  font-weight: 900;
  letter-spacing: -.03em;
  font-size: 14px;
  color: #4D148C;
}

.v36-marquee .fb-ups{
  color: #fff;
  background: #351C15;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: .04em;
}
.v36-marquee .fb-usps{
  color: #004B87;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 13px;
}
.v36-marquee .fb-trackingmore{
  color: #1A73E8;
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: 11px;
}


/* ============================================================
   V36 ITER6 — Divisions section redesign (less crowded)
   Replaces the old "central circle + 4 absolute-positioned subs"
   diagram (which overlapped) with: big central circle on top,
   four chips in a horizontal grid below. No collisions.
   ============================================================ */

/* More breathing room in the section */
.home-v36 .v36-divisions{
  padding: 78px 0 64px !important;
}
.home-v36 .v36-divisions .section-head.compact{
  margin-bottom: 40px;
}
.home-v36 .v36-bubble-grid{
  gap: 24px;
}

/* Cards: taller, more padding, more air */
.home-v36 .bubble-card.compact{
  min-height: 420px !important;
  padding: 26px 24px 22px !important;
  border-radius: 16px;
}
.home-v36 .bubble-card.compact h3{
  font-size: 22px !important;
  margin-bottom: 4px !important;
  letter-spacing: -.02em;
}
.home-v36 .bubble-card.compact .bubble-kicker{
  font-size: 10.5px;
  margin-bottom: 14px;
}

/* === The new diagram === */
.home-v36 .bubble-diagram.compact{
  height: auto !important;
  margin: 16px 0 18px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Central circle: bigger, breathing animation */
.home-v36 .bubble-card.compact .main-bubble{
  position: static !important;
  transform: none !important;
  width: 132px !important;
  height: 132px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  padding: 14px !important;
  letter-spacing: -.01em;
  box-shadow: 0 18px 38px rgba(8,38,74,.18);
  animation: mainBubbleBreath 4s ease-in-out infinite;
}
@keyframes mainBubbleBreath{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Sub bubbles → chips: horizontal row, 2x2 grid */
.home-v36 .bubble-card.compact .sub-bubble{
  position: static !important;
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  background: #fff !important;
  border: 1.5px solid #E6EEF6 !important;
  color: var(--navy) !important;
  white-space: nowrap;
  line-height: 1.2;
  animation: chipFloat 3.6s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(8,38,74,.04);
}
.home-v36 .bubble-card.compact .sub-bubble.two  { animation-delay: .4s; }
.home-v36 .bubble-card.compact .sub-bubble.three{ animation-delay: .8s; }
.home-v36 .bubble-card.compact .sub-bubble.four { animation-delay: 1.2s; }
@keyframes chipFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Coloured ring per division */
.home-v36 .bubble-card.library.compact .sub-bubble{ border-color: rgba(216,180,93,.55); }
.home-v36 .bubble-card.market.compact  .sub-bubble{ border-color: rgba(40,196,215,.55); }
.home-v36 .bubble-card.ecom.compact    .sub-bubble{ border-color: rgba(145,200,62,.55); }

/* Wrap the four chips into a 2-row grid below the central circle */
.home-v36 .bubble-card.compact .bubble-diagram.compact{
  /* the diagram contains: 1 main-bubble + 4 sub-bubbles */
}
/* Trick: target sub-bubbles via flex order — sub.one and sub.two on row 1,
   sub.three and sub.four on row 2. We do this by wrapping in a chips row. */
.home-v36 .bubble-card.compact .bubble-diagram.compact{
  position: relative;
}
.home-v36 .bubble-card.compact .bubble-diagram.compact:after{
  display: none; /* hide any old decorative pseudo */
}

/* Make sub-bubbles flow as inline-flex in a row underneath */
.home-v36 .bubble-card.compact .bubble-diagram.compact{
  /* use grid: row 1 = main bubble alone, row 2 = sub one + two, row 3 = sub three + four */
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 10px 10px;
  height: auto !important;
}
.home-v36 .bubble-card.compact .bubble-diagram.compact .main-bubble{
  grid-column: 1 / span 2;
  grid-row: 1;
  margin: 0 auto 8px;
}
.home-v36 .bubble-card.compact .bubble-diagram.compact .sub-bubble.one  { grid-column: 1; grid-row: 2; }
.home-v36 .bubble-card.compact .bubble-diagram.compact .sub-bubble.two  { grid-column: 2; grid-row: 2; }
.home-v36 .bubble-card.compact .bubble-diagram.compact .sub-bubble.three{ grid-column: 1; grid-row: 3; }
.home-v36 .bubble-card.compact .bubble-diagram.compact .sub-bubble.four { grid-column: 2; grid-row: 3; }

/* Bottom description: better readability */
.home-v36 .bubble-card.compact .bubble-points.compact{
  margin-top: 6px !important;
  margin-bottom: 14px !important;
}
.home-v36 .bubble-card.compact .bubble-points.compact div{
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.home-v36 .bubble-card.compact .bubble-link{
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .01em;
}

/* Fix the .ai-mark inside chips — remove the white pill (it was for dark
   gradient circles, but the chips are white now so the dark badge clashes).
   Use coloured aqua text matching the parent context. */
.home-v36 .bubble-card.market.compact .sub-bubble .ai-mark{
  color: #1768B3;
  background: transparent;
  font-weight: 900;
  padding: 0;
  border-radius: 0;
  margin: 0;
}

/* ============================================================
   V37 — Towers: minimal, almost-imperceptible color tone shift.
   Each tower very subtly brightens / dims on a long, slow loop.
   No movement at all — just a faint breath of color.
   ============================================================ */
html{ scroll-behavior: smooth; }

.hero-towers .tower{
  transform-origin: center;
  transform-box: fill-box;
  animation: towerBreath 9s ease-in-out infinite;
}
.hero-towers .tower-lib  { animation-delay:  0s;   }
.hero-towers .tower-mkt  { animation-delay: -3s;   }
.hero-towers .tower-ecom { animation-delay: -6s;   }

@keyframes towerBreath{
  0%,100% { filter: brightness(1)    saturate(1);    }
  50%     { filter: brightness(1.09) saturate(1.12); }
}

/* Beacon — tiny opacity pulse, very slow */
.hero-towers .beacon{
  animation: beaconBreath 5.5s ease-in-out infinite;
}
.hero-towers .beacon-lib  { animation-delay:  0s;     }
.hero-towers .beacon-mkt  { animation-delay: -1.8s;   }
.hero-towers .beacon-ecom { animation-delay: -3.6s;   }

@keyframes beaconBreath{
  0%,100% { opacity: .55; }
  50%     { opacity: 1;   }
}

/* Reduced motion: turn it all off */
@media(prefers-reduced-motion: reduce){
  .hero-towers .tower,
  .hero-towers .beacon{
    animation: none !important;
  }
}

/* Reveal classes kept as no-op so HTML doesn't break if classes remain.
   They simply don't trigger any animation. */
.reveal-on-scroll{ opacity: 1; transform: none; }



/* ============================================================
   V38 — Light hero theme
   Hero switches from dark navy to light/cloud for the brain visual.
   Highest specificity, placed last to override earlier rules.
   ============================================================ */

/* Light hero background — soft blue/white gradient */
.home-v36 .v36-hero,
.hero.v36-hero{
  background:
    radial-gradient(circle at 75% 50%, #FFFFFF 0%, #FFFFFF 28%, transparent 55%),
    radial-gradient(circle at 18% 18%, rgba(101,87,217,.10), transparent 35%),
    radial-gradient(circle at 82% 14%, rgba(40,196,215,.12), transparent 32%),
    radial-gradient(circle at 50% 110%, rgba(216,180,93,.05), transparent 45%),
    linear-gradient(155deg, #F2F6FB 0%, #FAFCFE 45%, #F4F8FD 100%) !important;
  color: var(--ink) !important;
}

/* Subtle hex grid pattern lighter on this background */
.home-v36 .v36-hero .hero-grid-lines path{
  stroke: rgba(8,38,74,.06) !important;
}
.home-v36 .v36-hero .hero-grid-lines{ opacity: .9; }

/* Orbs — recolour for light background, more subtle */
.home-v36 .v36-hero .hero-orb{ opacity: .35; filter: blur(60px); }
.home-v36 .v36-hero .hero-orb.orb-a{
  background: radial-gradient(circle, rgba(40,196,215,.45), transparent 65%);
}
.home-v36 .v36-hero .hero-orb.orb-b{
  background: radial-gradient(circle, rgba(101,87,217,.40), transparent 65%);
}
.home-v36 .v36-hero .hero-orb.orb-c{
  background: radial-gradient(circle, rgba(216,180,93,.35), transparent 65%);
}

/* Hero text — switch to dark colors */
.home-v36 .v36-hero .v36-hero-copy .kicker{
  color: var(--blue) !important;
}
.home-v36 .v36-hero .v36-hero-copy h1.display-h1,
.home-v36 .v36-hero .v36-hero-copy h1.display-h1 *{
  color: var(--navy) !important;
  text-shadow: none !important;
}
.home-v36 .v36-hero .v36-hero-copy h1.display-h1 .accent{
  color: var(--blue) !important;
  background: linear-gradient(120deg, #1768B3 0%, #28C4D7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-v36 .v36-hero .v36-hero-copy .lead{
  color: #4A5C75 !important;
}
.home-v36 .v36-hero .v36-hero-trust{
  border-top-color: rgba(8,38,74,.12) !important;
  color: #6B7C92 !important;
}
.home-v36 .v36-hero .v36-hero-trust strong{
  color: var(--navy) !important;
}

/* Primary CTA on light background — slightly stronger shadow */
.home-v36 .v36-hero .btn.primary{
  box-shadow: 0 10px 24px rgba(23,104,179,.22);
}

/* Hero image — brain illustration */
.home-v36 .v36-hero .v36-hero-visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-v36 .v36-hero .hero-visual-img{
  width: 100%;
  height: auto;
  max-width: 540px;
  display: block;
  mix-blend-mode: darken;
  /* darken blend on light hero: white image bg matches hero -> invisible,
     while coloured/dark areas (the brain itself) remain rich. */
  filter: contrast(1.02) saturate(1.06);
}

@media(max-width:1000px){
  .home-v36 .v36-hero .hero-visual-img{ max-width: 460px; margin: 0 auto; }
}
@media(max-width:600px){
  .home-v36 .v36-hero .hero-visual-img{ max-width: 360px; }
}


/* ============================================================
   V38 — In-place image replacement (no extra sections)
   - .focus-product-img replaces the small SVG inside .focus-svg-wrap
     on focus pages (repraicer, replaier).
   - .page-hero-split converts a page-hero into a two-column layout
     with the illustration on the right (logistics, solutions).
   ============================================================ */

/* --- Focus pages: image inside the focus-visual block --- */
.focus-svg-wrap{
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;          /* override the legacy fixed 210px */
  min-height: 0;
}
.focus-product-img{
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  border-radius: 8px;
}

/* --- Hub pages: split hero with illustration on the right --- */
.page-hero-split{
  padding: 44px 0 48px;
}
.page-hero-split .page-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 30px;
  align-items: center;
}
.page-hero-split .page-hero-copy{
  position: relative;
  z-index: 2;
}
.page-hero-split .page-hero-copy .kicker{
  display: inline-block;
  color: #7FF0FA;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  margin-bottom: 10px;
}
.page-hero-split .page-hero-copy h1{
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.1;
  color: #fff;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
}
.page-hero-split .page-hero-copy .lead{
  color: #D8E5F4;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
}
.page-hero-split .page-hero-visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(8,38,74,.30), 0 0 0 1px rgba(255,255,255,.08);
}
.page-hero-split .page-hero-visual img{
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 10px;
  /* No blend mode needed: card is solid white, image bg already matches. */
}

@media(max-width:1000px){
  .page-hero-split .page-hero-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .page-hero-split .page-hero-visual{ max-width: 460px; margin: 0 auto; }
}
@media(max-width:600px){
  .page-hero-split .page-hero-copy h1{ font-size: 26px; }
  .page-hero-split .page-hero-visual{ max-width: 360px; padding: 12px; }
}



/* ============================================================================
   V39 — Cleanup + dark mode
   ============================================================================ */

/* Fix the section-head when its mini-kicker is removed */
.home-division-simple .section-head{
  grid-template-columns: 1fr !important;
}

/* Theme toggle button in the header */
.theme-toggle{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  padding: 0;
  font-family: inherit;
}
.theme-toggle:hover{
  background: var(--soft);
  border-color: var(--blue);
  color: var(--blue);
}
.theme-toggle svg{ width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun{ display: none; }
.theme-toggle .icon-moon{ display: block; }
[data-theme="dark"] .theme-toggle .icon-sun{ display: block; }
[data-theme="dark"] .theme-toggle .icon-moon{ display: none; }

/* Add the toggle as a list item in the nav */
.nav .nav-tool{
  display: inline-flex;
  align-items: center;
  list-style: none;
  padding: 0;
}
.nav .nav-tool::before{ content: none !important; }
.nav .nav-tool a{ padding: 0 !important; }

/* ============================================================================
   DARK MODE — selectors scoped to [data-theme="dark"]
   ============================================================================ */
[data-theme="dark"]{
  color-scheme: dark;
}
[data-theme="dark"] body{
  background: #0A1320;
  color: #E5ECF5;
}

/* Header */
[data-theme="dark"] .header{
  background: rgba(10,19,32,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #1F2F47;
}
[data-theme="dark"] .header .brand-text{ color: #E5ECF5; }
[data-theme="dark"] .header .nav > li > a{ color: #BBC8DD; }
[data-theme="dark"] .header .nav > li > a:hover{ color: #7FF0FA; }
[data-theme="dark"] .header .nav > li > a.cta{
  background: #28C4D7;
  color: #04152B;
}
[data-theme="dark"] .header .dropdown{
  background: #131F30;
  border: 1px solid #243349;
  box-shadow: 0 24px 48px rgba(0,0,0,.45);
}
[data-theme="dark"] .header .dropdown a,
[data-theme="dark"] .header .dropdown strong{ color: #D6E0EE; }
[data-theme="dark"] .header .dropdown a:hover{ color: #7FF0FA; background: rgba(127,240,250,.06); }
[data-theme="dark"] .header .dropdown strong{ color: #7FF0FA; }
[data-theme="dark"] .theme-toggle{
  border-color: #243349;
  color: #E5ECF5;
}
[data-theme="dark"] .theme-toggle:hover{
  background: #1A2740;
  border-color: #28C4D7;
  color: #28C4D7;
}

/* Hero on home (light hero) becomes dark gradient again in dark mode */
[data-theme="dark"] .home-v36 .v36-hero,
[data-theme="dark"] .hero.v36-hero{
  background:
    radial-gradient(circle at 75% 50%, #15233A 0%, #15233A 22%, transparent 55%),
    radial-gradient(circle at 18% 18%, rgba(101,87,217,.18), transparent 35%),
    radial-gradient(circle at 82% 14%, rgba(40,196,215,.18), transparent 32%),
    linear-gradient(155deg, #0A1320 0%, #0F1A2A 45%, #0A1320 100%) !important;
}
[data-theme="dark"] .home-v36 .v36-hero .v36-hero-copy .kicker{ color: #7FF0FA !important; }
[data-theme="dark"] .home-v36 .v36-hero .v36-hero-copy h1.display-h1,
[data-theme="dark"] .home-v36 .v36-hero .v36-hero-copy h1.display-h1 *{
  color: #FFFFFF !important;
  -webkit-text-fill-color: initial !important;
}
[data-theme="dark"] .home-v36 .v36-hero .v36-hero-copy h1.display-h1 .accent{
  background: linear-gradient(120deg, #7FF0FA 0%, #28C4D7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
}
[data-theme="dark"] .home-v36 .v36-hero .v36-hero-copy .lead{ color: #C7D3E5 !important; }
[data-theme="dark"] .home-v36 .v36-hero .v36-hero-trust{
  border-top-color: rgba(255,255,255,.08) !important;
  color: #8DA1BC !important;
}
[data-theme="dark"] .home-v36 .v36-hero .v36-hero-trust strong{ color: #FFFFFF !important; }
/* In dark mode, the brain illustration sits on a soft dark card */
[data-theme="dark"] .home-v36 .v36-hero .hero-visual-img{
  mix-blend-mode: screen;
  filter: brightness(1.02) saturate(1.1);
}

/* Marquee section */
[data-theme="dark"] .v36-marquee{
  background: linear-gradient(180deg, #0A1320 0%, #0F1A2A 100%);
  border-top: 1px solid #1F2F47;
  border-bottom: 1px solid #1F2F47;
}
[data-theme="dark"] .v36-marquee-head h2{ color: #FFFFFF; }
[data-theme="dark"] .v36-marquee-head .mini,
[data-theme="dark"] .v36-marquee-head p{ color: #8DA1BC; }
[data-theme="dark"] .v36-marquee-shell{
  background: linear-gradient(180deg, #131F30 0%, #0F1A2A 100%);
  box-shadow: 0 18px 32px rgba(0,0,0,.30);
  border: 1px solid #243349;
}
[data-theme="dark"] .v36-marquee .logo-pill{
  background: #E5ECF5 !important;
  border-color: #2A3B55 !important;
}
[data-theme="dark"] .v36-marquee-shell:before{ background: linear-gradient(90deg, #0F1A2A 0%, #0F1A2A 40%, transparent 100%) !important; }
[data-theme="dark"] .v36-marquee-shell:after{  background: linear-gradient(270deg, #0F1A2A 0%, #0F1A2A 40%, transparent 100%) !important; }

/* Stats band */
[data-theme="dark"] .v36-stats{
  background: #0A1320;
  border-bottom: 1px solid #1F2F47;
}
[data-theme="dark"] .v36-stats .stat b,
[data-theme="dark"] .v36-stats .stat b .num{ color: #FFFFFF; }
[data-theme="dark"] .v36-stats .stat b .suf{ color: #7FF0FA; }
[data-theme="dark"] .v36-stats .stat > span{ color: #8DA1BC; }

/* Divisions section */
[data-theme="dark"] .home-division-simple,
[data-theme="dark"] .v36-divisions{
  background: #0F1A2A !important;
  border-bottom: 1px solid #1F2F47;
}
[data-theme="dark"] .home-division-simple .section-head h2,
[data-theme="dark"] .v36-divisions .section-head h2{ color: #FFFFFF; }
[data-theme="dark"] .home-division-simple .section-head p,
[data-theme="dark"] .v36-divisions .section-head p{ color: #8DA1BC; }
[data-theme="dark"] .bubble-card{
  background: #131F30 !important;
  border-color: #243349 !important;
  color: #D6E0EE;
  box-shadow: 0 18px 32px rgba(0,0,0,.30);
}
[data-theme="dark"] .bubble-card h3{ color: #FFFFFF; }
[data-theme="dark"] .bubble-card p,
[data-theme="dark"] .bubble-points div{ color: #B4C2D8; }
[data-theme="dark"] .bubble-kicker{ color: #7FF0FA; }
[data-theme="dark"] .sub-bubble{ background: #1A2740; color: #D6E0EE; border: 1px solid #2A3B55; }
[data-theme="dark"] .summary-pill{ background: #1A2740; color: #B4C2D8; }
[data-theme="dark"] .summary-pill b{ color: #FFFFFF; }

/* How we work */
[data-theme="dark"] .v36-howwework{
  background: #0A1320;
  border-top: 1px solid #1F2F47;
}
[data-theme="dark"] .v36-howwework h2{ color: #FFFFFF; }
[data-theme="dark"] .v36-howwework p{ color: #8DA1BC; }
[data-theme="dark"] .how-card{
  background: #131F30;
  border-color: #243349;
  color: #D6E0EE;
}
[data-theme="dark"] .how-card h3,
[data-theme="dark"] .how-card h4{ color: #FFFFFF; }
[data-theme="dark"] .how-card p,
[data-theme="dark"] .how-card li{ color: #B4C2D8; }

/* AI Products */
[data-theme="dark"] .v36-ai-products{
  background: #0F1A2A;
}
[data-theme="dark"] .v36-ai-products h2{ color: #FFFFFF; }
[data-theme="dark"] .v36-ai-products p{ color: #8DA1BC; }
[data-theme="dark"] .ai-product-card{
  background: #131F30 !important;
  border-color: #243349 !important;
}
[data-theme="dark"] .ai-product-card h3,
[data-theme="dark"] .ai-product-card h4{ color: #FFFFFF; }
[data-theme="dark"] .ai-product-card p,
[data-theme="dark"] .ai-product-card li{ color: #B4C2D8; }

/* Support / log-only */
[data-theme="dark"] .v36-support-layer{
  background: #0A1320;
  border-top: 1px solid #1F2F47;
}
[data-theme="dark"] .v36-support-layer h2{ color: #FFFFFF; }
[data-theme="dark"] .v36-support-layer p{ color: #8DA1BC; }
[data-theme="dark"] .v36-support-layer .support-card,
[data-theme="dark"] .v36-support-layer .v36-support-card{
  background: #131F30;
  border-color: #243349;
  color: #D6E0EE;
}

/* Final CTA */
[data-theme="dark"] .v36-final-cta{
  background: linear-gradient(135deg, #15233A, #0A1320);
}
[data-theme="dark"] .v36-final-cta h2,
[data-theme="dark"] .v36-final-cta h3{ color: #FFFFFF; }
[data-theme="dark"] .v36-final-cta p{ color: #C7D3E5; }

/* Page heroes (the dark navy ones already work — just polish a bit) */
[data-theme="dark"] .page-hero{
  background: linear-gradient(112deg, #04152B, #08264A);
}
[data-theme="dark"] .page-hero-split .page-hero-visual{
  background: #131F30;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(40,196,215,.10);
}
[data-theme="dark"] .page-hero-split .page-hero-visual img{ mix-blend-mode: screen; filter: brightness(1.05) saturate(1.05); }

/* Focus page (white background) */
[data-theme="dark"] .focus-page,
[data-theme="dark"] .focus-hero{ background: #0A1320; }
[data-theme="dark"] .focus-card{
  background: #131F30;
  border-color: #243349;
  color: #D6E0EE;
}
[data-theme="dark"] .focus-card h3,
[data-theme="dark"] .focus-card h2,
[data-theme="dark"] .focus-card h4{ color: #FFFFFF; }
[data-theme="dark"] .focus-card p,
[data-theme="dark"] .focus-card li{ color: #B4C2D8; }
[data-theme="dark"] .focus-tag{
  background: #1A2740;
  border-color: #2A3B55;
  color: #D6E0EE;
}
[data-theme="dark"] .focus-cta{
  background: linear-gradient(135deg, #15233A, #0A1320);
  border-color: #243349;
}
[data-theme="dark"] .focus-cta h3{ color: #FFFFFF; }
[data-theme="dark"] .focus-cta p{ color: #C7D3E5; }
[data-theme="dark"] .focus-visual h3{ color: #FFFFFF; }
[data-theme="dark"] .focus-visual p{ color: #B4C2D8; }
[data-theme="dark"] .focus-svg-wrap{
  background: #E8EEF6;  /* keep image readable; image bg is already light */
  border-color: #243349;
}
[data-theme="dark"] .focus-mini-card{
  background: #131F30;
  border-color: #243349;
}
[data-theme="dark"] .focus-mini-card b{ color: #FFFFFF; }
[data-theme="dark"] .focus-mini-card span{ color: #B4C2D8; }

/* Product audience block (the "who it's for / concrete uses" section) */
[data-theme="dark"] .product-audience{
  background: linear-gradient(135deg, #0F1A2A 0%, #0A1320 100%);
  border-top-color: #1F2F47;
  border-bottom-color: #1F2F47;
}
[data-theme="dark"] .product-audience h2{ color: #FFFFFF; }
[data-theme="dark"] .product-audience .section-head p{ color: #B4C2D8; }
[data-theme="dark"] .product-audience .section-head .mini{ color: #7FF0FA; }
[data-theme="dark"] .audience-card{
  background: #131F30;
  border-color: #243349;
  color: #D6E0EE;
}
[data-theme="dark"] .audience-card h3{ color: #FFFFFF; }
[data-theme="dark"] .audience-card ul li{ color: #B4C2D8; border-top-color: #243349; }
[data-theme="dark"] .audience-card ul li b{ color: #FFFFFF; }

/* Hub pages (solutions, logistics, ai, integrations etc.) */
[data-theme="dark"] .hub-page{ background: #0A1320; }
[data-theme="dark"] .hub-card{
  background: #131F30;
  border-color: #243349;
  color: #D6E0EE;
  box-shadow: 0 18px 32px rgba(0,0,0,.30);
}
[data-theme="dark"] .hub-card h3{ color: #FFFFFF; }
[data-theme="dark"] .hub-card p,
[data-theme="dark"] .hub-card li{ color: #B4C2D8; }
[data-theme="dark"] .hub-kicker{ color: #7FF0FA; }
[data-theme="dark"] .mini-visual{ background: rgba(255,255,255,.04); border-radius: 10px; }

/* Generic page / section colour fallback */
[data-theme="dark"] .section{ background: #0A1320; color: #D6E0EE; }
[data-theme="dark"] .section h1,
[data-theme="dark"] .section h2,
[data-theme="dark"] .section h3,
[data-theme="dark"] .section h4{ color: #FFFFFF; }
[data-theme="dark"] .section p,
[data-theme="dark"] .section li{ color: #B4C2D8; }
[data-theme="dark"] .card{
  background: #131F30;
  border-color: #243349;
  color: #D6E0EE;
}
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4{ color: #FFFFFF; }
[data-theme="dark"] .card p{ color: #B4C2D8; }

/* Founders page — custom styles inside the page need a dark equivalent */
[data-theme="dark"] .founders-band{ background: #0A1320; }
[data-theme="dark"] .fb-card{
  background: linear-gradient(135deg, #131F30, #0F1A2A);
  border-color: #243349;
}
[data-theme="dark"] .fb-card .num{ color: #7FF0FA; }
[data-theme="dark"] .fb-card h3{ color: #FFFFFF; }
[data-theme="dark"] .fb-card p{ color: #B4C2D8; }
[data-theme="dark"] .founder-section{
  background: #0F1A2A;
  border-top-color: #1F2F47;
}
[data-theme="dark"] .founder-section.alt{ background: #0A1320; }
[data-theme="dark"] .founder-body h2{ color: #FFFFFF; }
[data-theme="dark"] .founder-body p{ color: #C7D3E5; }
[data-theme="dark"] .founder-body p strong{ color: #FFFFFF; }
[data-theme="dark"] .founder-body .kicker{ color: #7FF0FA; }
[data-theme="dark"] .founder-tag{
  background: #1A2740 !important;
  border-color: #2A3B55 !important;
  color: #D6E0EE !important;
}
[data-theme="dark"] .founder-tag.aqua{ background: rgba(40,196,215,.10) !important; border-color: rgba(40,196,215,.30) !important; color: #7FF0FA !important; }
[data-theme="dark"] .founder-tag.gold{ background: rgba(216,180,93,.10) !important; border-color: rgba(216,180,93,.30) !important; color: #F0D58A !important; }
[data-theme="dark"] .founder-tag.violet{ background: rgba(101,87,217,.10) !important; border-color: rgba(101,87,217,.30) !important; color: #B4A8FF !important; }
[data-theme="dark"] .founder-tags{ border-top-color: #243349 !important; }
[data-theme="dark"] .principles{
  background: linear-gradient(180deg, #0F1A2A, #0A1320);
  border-top-color: #1F2F47;
}
[data-theme="dark"] .principles-head h2{ color: #FFFFFF; }
[data-theme="dark"] .principles-head p,
[data-theme="dark"] .principles-head .mini{ color: #8DA1BC; }
[data-theme="dark"] .principle-card{
  background: #131F30;
  border-color: #243349;
}
[data-theme="dark"] .principle-card h3{ color: #FFFFFF; }
[data-theme="dark"] .principle-card p{ color: #B4C2D8; }
[data-theme="dark"] .founders-cta h3{ color: #FFFFFF; }
[data-theme="dark"] .founders-cta p{ color: #C7D3E5; }

/* Footer */
[data-theme="dark"] .footer{
  background: #04101F;
  border-top: 1px solid #1F2F47;
  color: #B4C2D8;
}
[data-theme="dark"] .footer h4{ color: #FFFFFF; }
[data-theme="dark"] .footer a{ color: #B4C2D8; }
[data-theme="dark"] .footer a:hover{ color: #7FF0FA; }
[data-theme="dark"] .footer .copy{ color: #6B7B96; border-top-color: #1F2F47; }

/* Generic dark mode: buttons */
[data-theme="dark"] .btn.secondary{
  background: transparent;
  border: 1px solid #2A3B55;
  color: #D6E0EE;
}
[data-theme="dark"] .btn.secondary:hover{ background: #1A2740; border-color: #28C4D7; }

/* Smooth transition between modes */
html, body, .header, .hero, .page-hero, .section,
.bubble-card, .focus-card, .audience-card, .hub-card,
.footer, .v36-marquee, .v36-stats, .home-division-simple,
.v36-howwework, .v36-ai-products{
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}