/* Groundswell Lifecycle Hero — orbit 
 Reads color/type from tokens.css. */

.solution-hero{
	position:relative; overflow:visible;
	padding:84px 24px 0; min-height:850px;
	text-align:center; color:var(--gibs-text);
	background:
	radial-gradient(60% 50% at 50% 100%, rgba(31,208,192,.06), transparent 70%),
	linear-gradient(180deg,var(--gibs-ink-800),var(--gibs-ink-700) 55%,var(--gibs-ink-900));
}
.home .solution-hero {
min-height: 770px;
}
.solution-hero .product-logo {
	text-align: center;
}

.solution-hero .product-logo img {
	display: block;
	text-align: center;
	margin: 0 auto 25px;
	max-width: 100%;
	height: 64px;
}
/* .page-id-4606 .solution-hero .product-logo img {
	max-width: 155px;
}
.page-id-4259 .solution-hero .product-logo img {
	max-width: 270px;
} */
.solution-hero.solution-hero--no-orbit {
min-height: auto;
}
.solution-hero .solution-hero-lines {
width: 100%;
position: absolute !important;
height: 100%;
background-image: url(/wp-content/themes/groundswell-child/assets/images/btm-right-lines.png);
background-position: bottom right;
background-repeat: no-repeat;
z-index: 9;
	left:0;
top: 0;
}
.solution-hero .solution-hero-lines:before {
	width: 100%;
	position: absolute;
	left:0;
	top: 0;
	height: 100%;
	background-image: url(/wp-content/themes/groundswell-child/assets/images/top-left-lines.png);
	background-position: top left;
	background-repeat: no-repeat;
	content: "";
}
.solution-hero-content {
	position: relative;
	z-index: 20 !important;
	padding-top: 4.5rem;
}
.solution-hero.solution-hero--no-orbit  .solution-hero-content {
	padding-top: 4rem;
	padding-bottom: 6.5rem;
}
.solution-hero.solution-hero--no-orbit .solution-hero__sub {
max-width: 58ch;
}
.solution-hero > :not(.solution-orbit-clip):not(.solution-seam){position:relative;z-index:2}

.solution-hero__title, .single-content .solution-hero__title {
	font-weight: 500;
	font-size: clamp(42px, 5.4vw, 66px);
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0 auto 14px;
	max-width: 18ch;
	color: var(--gibs-text);
}
.solution-hero__accent{background:var(--gibs-grad-2);
	-webkit-background-clip:text;background-clip:text;color:transparent}
.solution-hero__sub{color:var(--gibs-muted);max-width:46ch;margin:0 auto;font-size:16px}
.home .solution-hero__sub {
	max-width: 720px;
	font-size: 20px;
	line-height: 28px;
}
.solution-hero__cta{display:flex;gap:12px;justify-content:center;margin-top:22px !important;flex-wrap:wrap}
.solution-btn{font-family:var(--gibs-font-display);font-weight:600;font-size:14px;
	text-decoration:none;padding:12px 22px;border-radius:999px;cursor:pointer;
	display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gibs-line-2)}
.home .solution-btn {
	font-size: 16px;
}

.solution-btn--primary{background:var(--gibs-grad-2);color:#0b0f1a;border:0; transition: all ease .4s;}
.solution-btn--ghost{background:transparent;color:var(--gibs-text);transition: all ease .4s;}
.solution-btn--primary:hover{background:var(--gibs-grad-2-reverse); color:#fff;}
/* clip wrapper crops the orbit to the hero; only nodes accept pointer input */
.solution-orbit-clip{position:absolute;inset:0;overflow:hidden;z-index:12;}
.solution-orbit-clip,.solution-vrings,.solution-vring,.solution-ring,.solution-spoke{pointer-events:none}
.solution-orbit{--D:min(740px,176vw);position:absolute;left:50%;bottom:0;
	width:var(--D);aspect-ratio:1/1;transform:translate(-50%,50%)}

/* ---- glowing rings (static; glow tracks the mouse) -------------------- */
.solution-vrings{position:absolute;inset:0}
.solution-vring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
/* background: rgba(255, 255, 255, .05); */
background: rgb(5 7 18 / 47%);
border: 1px solid #033b39;
}
.solution-vring--1{width:100%;height:100%}
.solution-vring--2{width:70%;height:70%}
.solution-vring--3{width:44%;height:44%}
/* the moving glow: bright radial whose centre (--gx/--gy), size (--gr) and
   opacity (--go) are written per-ring by gibs.js */
.solution-vring__glow{position:absolute;inset:0;opacity:var(--go,0);opacity: .1;
	will-change:opacity,background;
	background:radial-gradient(var(--gr,460px) at var(--gx,50%) var(--gy,50%),
		rgba(31,208,192,.90), rgba(25,195,125,.28) 45%, transparent 66%)}
/* dark disc leaves only the rim lit, with a faint inner bleed */
.solution-vring__inner{	position: absolute;
	inset: 1.5px;
	border-radius: 50%;
	/* background: rgba(6, 10, 20, .76);*/ } 
/* innermost circle stays fully dark — the hover glow never shows here */
.solution-vring--3 .solution-vring__inner{background:#050813}

/* ---- node layers (rotating; no visible stroke) ------------------------ */
.solution-ring{position:absolute;top:50%;left:50%;width:100%;height:100%;
	border-radius:50%;transform:translate(-50%,-50%)}
.solution-ring--1{animation:gibsSpinRev 50s linear infinite}
.solution-ring--2{animation:gibsSpin 36s linear infinite}
.solution-ring--1 .solution-spin{animation:gibsSpin 50s linear infinite}
.solution-ring--2 .solution-spin{animation:gibsSpinRev 36s linear infinite}
.home .solution-ring--1 {
	animation: gibsSpinRev 70s linear infinite;
}
.home .solution-ring--1 .solution-spin {
	animation:gibsSpin 70s linear infinite
}
.home .solution-ring--2 {
	animation: gibsSpin 65s linear infinite;
}
.home .solution-ring--2 .solution-spin {animation:gibsSpinRev 65s linear infinite}

.solution-pos{position:absolute;top:50%;left:50%;width:0;height:0}
.solution-spoke{position:absolute;left:0;top:0;width:1px;height:var(--R);
	transform:translateX(-.5px);
	background:#093b3d;}

.solution-ring--1 .solution-pos{--R:calc(var(--D)/2 - 4px)}
.solution-ring--2 .solution-pos{--R:calc(var(--D)*.70/2 - 4px)}

/* node angles are written inline per node by render.php (transform on .solution-pos
   and the counter-rotation on .solution-tilt), so any node count is supported */

/* ---- node (neutral glassy circle -> label pill on click) -------------- */
.solution-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	pointer-events:auto;cursor:pointer;font:inherit;
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	width:64px;height:64px;padding:0;border-radius:50%;
	color:rgba(232,237,244,.74);
	background:#0a2b33;
	border:1px solid #045558;
	box-shadow:0 6px 22px rgba(0,0,0,.5);
	-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
	transition:border-color .2s, box-shadow .2s, color .2s, background .2s}
	.home .solution-node {
		color: rgba(232, 237, 244, .74);
		background: #090c1b;
		border: 1px solid #063c3e;
		box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
	}
.solution-node:hover,.solution-node:focus-visible{color:var(--gibs-text);
	border-color:rgba(255,255,255,.30);
	background:#0a2b33;
	border:1px solid #05696c;
	box-shadow:0 6px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10);outline:none}
	.solution-node:active, .solution-node:focus {
		background:#0a2b33 !important;
	}
.solution-node__icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto}
.solution-node__icon svg{width:24px;height:24px}
.solution-node__icon img{width:45px;height:auto;object-fit:contain;display:block}
.solution-node__label{display:none;font-size:13px;
	letter-spacing:.12em;text-transform:uppercase;color:var(--gibs-text);white-space:nowrap}

.solution-node.is-active{width:auto;height:50px;border-radius:999px;
	padding:0 18px 0 14px;gap:9px;color:var(--gibs-green-2);
	background:linear-gradient(180deg,rgba(31,208,192,.16),rgba(31,208,192,.04)),rgba(8,16,22,.7);
	border-color:var(--gibs-green-2);
	box-shadow:0 0 26px rgba(31,208,192,.32),0 10px 28px rgba(0,0,0,.55)}
.solution-node.is-active .solution-node__label{display:inline}

/* pause node rotation while interacting, so moving icons are clickable */
.solution-orbit:hover .solution-ring,
.solution-orbit:hover .solution-spin,
.solution-orbit:focus-within .solution-ring,
.solution-orbit:focus-within .solution-spin{animation-play-state:paused}

/* ---- seam badge -------------------------------------------------------- */
.solution-seam{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);z-index:13;
	display:grid;place-items:center;width:108px;height:108px;border-radius:50%;
	font-family:var(--gibs-font-display);font-weight:700;font-size:30px;color:var(--gibs-green-2);
	background: #00CD99;
	background: linear-gradient(270deg, rgba(0, 205, 153, 1) 0%, rgba(0, 184, 200, 1) 100%);
	box-shadow: 0px 20px 35px 0px rgba(0, 0, 0, 0.33);
	-webkit-box-shadow: 0px 20px 35px 0px rgba(0, 0, 0, 0.33);
}
.solution-seam:before {
position: absolute;
content: "";
background: #00080F;
background: linear-gradient(0deg, rgba(0, 8, 15, 1) 0%, rgba(0, 25, 48, 1) 100%);
width: 98px;
height: 98px;
border-radius: 50%;
left: 5px;
top: 5px;
}
.solution-seam img {
	position: relative;
	max-width: 40px;
	margin-left: -1px;
}
@keyframes gibsSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes gibsSpinRev{to{transform:translate(-50%,-50%) rotate(-360deg)}}

@media (max-width:1024px) {
.solution-hero .solution-hero-lines {
	background-size: 70%;
}
.solution-hero .solution-hero-lines:before {
	background-size: 60%;
}
}
@media (max-width:1023px) {
.home .solution-hero {
	min-height: auto;
	padding: 3.5rem 2rem 6rem;
}
.solution-orbit-clip, .solution-seam {
	display: none;
}

}
@media (max-width:800px) {
.solution-hero .solution-hero-lines {
	background-size: 80%;
}
.solution-hero .solution-hero-lines:before {
	background-size: 70%;
}
}

/* 508: stop node rotation under reduced motion (glow only responds to the
   user's own cursor, so it stays) */
@media (prefers-reduced-motion: reduce){
	.solution-ring,.solution-spin{animation:none !important}
}