/* Homepage draft: brand message, centered service scene, then a clear next step. */
.hero.hero-refined {
  display:flex; flex-direction:column; align-items:center; gap:0;
  min-height:0; padding:30px var(--hero-gutter,5.5vw) 30px; overflow:hidden;
}
.hero-refined .hero-copy {
  position:relative; top:auto; width:100%; max-width:none; padding:0;
  text-align:center; pointer-events:auto; z-index:4;
}
.hero-refined .hero-copy::before { display:none; }
.hero-refined .eyebrow {
  justify-content:center; font-size:16px; font-weight:500; line-height:1.6;
  letter-spacing:.15px; text-transform:none; color:#e0e7f3;
  margin:0 0 13px; gap:12px;
}
.hero-refined .eyebrow-line { width:28px; flex:none; background:linear-gradient(90deg,#d30b76,#8bc9e5); }
.hero-refined h1 {
  display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap;
  gap:0 24px; font-size:clamp(28px,2.55vw,38px); line-height:1.2;
  letter-spacing:-1.4px; margin:0; font-weight:450;
}
.hero-refined h1>span { display:block; white-space:nowrap; }
.hero-refined h1 .serene { color:#79cce3; letter-spacing:inherit; }
.hero-refined .orbit-stage {
  --art-width:min(78vw,950px); --capsule-width:240px;
  position:relative; inset:auto; transform:none;
  width:100%; max-width:1220px; height:450px; min-height:0; aspect-ratio:auto;
  margin:32px auto 0; z-index:2;
}
.hero-refined .orbit-art {
  position:absolute; inset:auto; width:var(--art-width); height:auto; aspect-ratio:3/2;
  left:calc((100% - var(--art-width)) / 2);
  top:calc((100% - var(--art-width) * 2 / 3) / 2);
}
.hero-refined .orbit-stars { inset:-6%; width:112%; height:112%; opacity:.65; }
.hero-refined .hero-service-categories { position:absolute; inset:0; }
.hero-refined .orbit-node {
  position:absolute; width:var(--capsule-width); height:84px; min-height:0;
  padding:4px; font-size:13px; border-radius:48px; isolation:isolate;
}
/* Deliberately unequal radii and heights: the services share a scene, not a grid. */
.hero-refined .node-web { top:2%; left:10%; right:auto; bottom:auto; --accent:#e474ac; --orbit-rx:28; --orbit-ry:16; }
.hero-refined .node-visibility { top:27%; right:2%; left:auto; bottom:auto; --accent:#83c8e4; --orbit-rx:30; --orbit-ry:18; }
.hero-refined .node-automation { top:auto; bottom:14%; left:0; right:auto; --accent:#e9bd74; --orbit-rx:26; --orbit-ry:18; }
.hero-refined .node-crm { top:auto; bottom:1%; right:10%; left:auto; --accent:#a9bbfa; --orbit-rx:24; --orbit-ry:14; }
.hero-refined .node-float,.hero-refined .node-capsule { animation:none; transform:none; height:100%; }
.hero-refined .node-capsule {
  min-height:0; padding:8px 12px 8px 10px; gap:8px; white-space:normal;
  border:1px solid color-mix(in srgb,var(--accent) 28%,#526175);
  border-top-color:color-mix(in srgb,var(--accent) 35%,#c1cedd);
  border-bottom-color:color-mix(in srgb,var(--accent) 20%,#29384a);
  background:radial-gradient(ellipse at 10% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 68%),linear-gradient(155deg,#1c2834ef,#0a131eed 75%);
  box-shadow:inset 0 1px 0 #eef8ff14,inset 0 -1px 0 #03091199,0 8px 22px #0005,0 0 18px color-mix(in srgb,var(--accent) 5%,transparent);
  transition:border-color .25s,box-shadow .25s;
}
.hero-refined .node-capsule::before { content:''; position:absolute; top:0; left:18%; width:64%; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,#f3faff80,transparent); }
.hero-refined .node-orb {
  width:30px; height:30px; color:color-mix(in srgb,var(--accent) 55%,#fff);
  border-color:color-mix(in srgb,var(--accent) 46%,#567082);
  background:radial-gradient(circle at 28% 17%,#e7faff26,transparent 46%),radial-gradient(circle at 40% 28%,color-mix(in srgb,var(--accent) 24%,#17283a),#0a1828 78%);
  box-shadow:inset 0 1px 2px #effaff38,inset -1px -2px 4px #0008,0 0 13px color-mix(in srgb,var(--accent) 20%,transparent);
  transition:box-shadow .25s,border-color .25s,color .25s;
}
.hero-refined .orbit-node:hover .node-capsule,.hero-refined .orbit-node:focus-visible .node-capsule {
  border-color:color-mix(in srgb,var(--accent) 72%,#ebf7ff);
  box-shadow:inset 0 1px 0 #f1faff38,inset 0 -1px 0 #03091199,0 0 24px color-mix(in srgb,var(--accent) 14%,transparent),0 10px 24px #0006;
}
.hero-refined .orbit-node:hover .node-orb,.hero-refined .orbit-node:focus-visible .node-orb {
  color:#f6fbff; border-color:var(--accent);
  box-shadow:inset 0 1px 2px #effaff45,0 0 17px color-mix(in srgb,var(--accent) 32%,transparent);
}
.hero-refined .node-copy { display:block; min-width:0; }
.hero-refined .node-copy strong { display:block; font-size:13px; font-weight:500; line-height:1.4; color:#e9effa; }
.hero-refined .node-copy small { display:block; font-size:10px; line-height:1.5; margin-top:4px; color:#a7b8cf; white-space:nowrap; }
.hero-refined .node-capsule .node-arrow { margin-left:auto; flex:none; color:#91a4bd; }
.hero-refined .orbit-node:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.hero-refined .motion-control {
  position:absolute; top:0; bottom:auto; right:0; font-size:10px;
  min-height:44px; padding:0 8px; color:#a1b2c8;
}
.hero-refined .hero-closing { position:relative; z-index:4; text-align:center; margin:32px 0 0; }
.hero-refined .hero-choice { font-size:12px; line-height:1.7; color:#d1daea; margin:0; }
.hero-refined .hero-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 20px; margin-top:14px; }
.hero-refined .hero-actions .button { min-height:50px; font-size:12px; padding:0 19px; gap:16px; }
.hero-refined .hero-actions .text-link { min-height:44px; font-size:12px; }
/* hero-orbits.js translates the native links themselves, keeping hit areas aligned. */
.hero-refined .orbit-node { --orbit-scale:1; translate:0 0; }
/* A brief reflection accompanies arrival and pointer/keyboard interaction. */
.hero-refined .capsules-active .node-capsule::after { animation:capsule-glint 1.1s ease-out both; animation-delay:var(--hero-glint-delay,.2s); }
.hero-refined .node-visibility { --hero-glint-delay:.4s; }
.hero-refined .node-automation { --hero-glint-delay:.6s; }
.hero-refined .node-crm { --hero-glint-delay:.8s; }
.hero-refined .orbit-node:hover .node-capsule::after,.hero-refined .orbit-node:focus-visible .node-capsule::after { animation:capsule-glint .75s ease-out both; }
.motion-paused .hero-refined .node-capsule::after { animation:none!important; }
.motion-paused .hero-refined .node-capsule,.motion-paused .hero-refined .node-orb,.motion-paused .hero-refined .node-arrow { transition:none; }
@media(min-width:1450px) {
  .hero.hero-refined { padding-top:36px; padding-bottom:36px; }
  .hero-refined .orbit-stage { height:470px; --art-width:990px; }
}
@media(min-width:901px) and (max-width:1150px) {
  .hero.hero-refined { padding-left:28px; padding-right:28px; }
  .hero-refined h1 { font-size:28px; gap:0 18px; letter-spacing:-1.3px; }
  .hero-refined .orbit-stage { --art-width:76vw; --capsule-width:222px; height:390px; }
  .hero-refined .orbit-node { --orbit-scale:.65; }
  .hero-refined .node-web { left:4%; }
  .hero-refined .node-automation { left:0; }
  .hero-refined .node-visibility { right:0; }
  .hero-refined .node-crm { right:3%; }
  .hero-refined .node-orb { width:30px; height:30px; }
  .hero-refined .node-capsule { gap:8px; padding:10px; }
  .hero-refined .node-copy strong { font-size:12px; }
  .hero-refined .node-copy small { font-size:9px; }
}
/* Preserve access to the bottom actions in short desktop windows. */
@media(min-width:901px) and (max-height:780px) {
  .hero.hero-refined { padding-top:14px; padding-bottom:24px; }
  .hero-refined .eyebrow { margin-bottom:8px; }
  .hero-refined .orbit-stage { height:360px; --art-width:min(72vw,800px); margin-top:28px; }
  .hero-refined .hero-closing { margin-top:26px; }
  .hero-refined .hero-actions { margin-top:12px; }
}
@media(max-width:900px) {
  .hero.hero-refined { padding:32px 24px 28px; }
  .hero-refined .eyebrow { font-size:15px; margin-bottom:16px; }
  .hero-refined h1 { display:block; font-size:clamp(32px,5.6vw,40px); line-height:1.18; letter-spacing:-1.6px; }
  .hero-refined .orbit-stage { width:100%; max-width:560px; height:auto; margin:8px auto 0; padding-bottom:42px; }
  .hero-refined .orbit-art { position:relative; inset:auto; width:100%; aspect-ratio:3/2; margin:0; }
  .hero-refined .hero-service-categories { position:relative; inset:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:-4px 0 0; }
  .hero-refined .orbit-node { translate:none!important; position:relative; inset:auto; width:auto; height:auto; padding:0; border-radius:16px; display:flex; align-items:stretch; }
  .hero-refined .node-float { width:100%; }
  .hero-refined .node-capsule { height:100%; min-height:94px; border-radius:16px; padding:12px 14px; gap:10px; }
  .hero-refined .node-orb { width:30px; height:30px; }
  .hero-refined .motion-control { top:auto; bottom:0; right:0; }
  .hero-refined .hero-closing { margin-top:16px; }
}
@media(max-width:480px) {
  .hero.hero-refined { padding-top:28px; }
  .hero-refined .eyebrow { font-size:13px; letter-spacing:0; gap:9px; }
  .hero-refined .eyebrow-line { width:20px; }
  .hero-refined h1 { font-size:clamp(30px,8.1vw,38px); letter-spacing:-1.5px; }
  .hero-refined .hero-choice { font-size:11px; }
  .hero-refined .hero-actions { gap:10px 18px; }
  .hero-refined .hero-actions .button { font-size:11px; padding:0 15px; }
  .hero-refined .hero-actions .text-link { font-size:11px; }
  .hero-refined .hero-service-categories { gap:8px; margin-top:-2px; }
  .hero-refined .node-capsule { border-radius:14px; padding:12px 10px; min-height:98px; gap:8px; align-items:center; }
  .hero-refined .node-orb { width:25px; height:25px; }
  .hero-refined .node-orb svg { width:13px; height:13px; }
  .hero-refined .node-copy strong { font-size:12px; line-height:1.45; }
  .hero-refined .node-copy small { font-size:10px; white-space:normal; line-height:1.5; }
  .hero-refined .node-capsule .node-arrow { display:none; }
}
@media(max-width:360px) {
  .hero-refined .node-capsule { padding:12px 8px; gap:6px; }
  .hero-refined .node-orb { width:22px; height:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-refined .orbit-node { translate:none!important; }
  .hero-refined .node-float { animation:none!important; transform:none; }
  .hero-refined .node-capsule::after { animation:none!important; }
  .hero-refined .node-capsule,.hero-refined .node-orb,.hero-refined .node-arrow { transition:none; }
}