.gps{
  --gps-accent:#3f9bb5; --gps-ink:#2f4a56; --gps-text:#8d9094;
  --gps-badge:#dcdcdc; --gps-line:#d6d8da;
  position:relative; width:100%; max-width:1120px; height:720px; margin:24px auto;
  box-sizing:border-box; font-family:"Maven Pro","Helvetica Neue",Arial,sans-serif; color:var(--gps-text);
  background:radial-gradient(ellipse at 50% 30%,#fbfbfb,#e9ebee); border-radius:12px; overflow:hidden;
}
.gps--clear{background:none}
.gps *,.gps *::before,.gps *::after{box-sizing:border-box}
.gps .gps-title,.gps .gps-tag,.gps .gps-copy h3,.gps .gps-copy p{font-family:"Maven Pro","Helvetica Neue",Arial,sans-serif}

.gps .gps-blob{position:absolute; border-radius:50%; filter:blur(10px); opacity:.55}
.gps .gps-b1{width:260px;height:260px;left:30%;top:20px;background:#7cc4dc}
.gps .gps-b2{width:220px;height:220px;right:28%;top:150px;background:#b9a8e8}
.gps .gps-b3{width:180px;height:180px;left:44%;top:230px;background:#9be0c4}

.gps .gps-glass{
  position:absolute; left:24%; right:24%; top:40px; height:360px; border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.45),rgba(255,255,255,.28) 45%,rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 40px rgba(40,60,80,.18), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px;
  transition:box-shadow .3s;
}
.gps .gps-glass.gps-lit{box-shadow:0 18px 46px rgba(63,155,181,.35), inset 0 1px 0 rgba(255,255,255,.9)}
.gps .gps-title{margin:0; padding:0; font-size:30px; font-weight:600; line-height:1.2; color:var(--gps-ink); letter-spacing:.3px}
.gps .gps-tag{margin:0; font-size:14px; line-height:1.4; color:var(--gps-text)}
.gps .gps-hero{width:104px;height:104px;filter:drop-shadow(0 8px 12px rgba(63,155,181,.3))}
.gps .gps-chips{display:flex; gap:14px; margin-top:6px}
.gps .gps-chip{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(40,60,80,.1)}
.gps .gps-chip svg{width:22px;height:22px}

.gps .gps-badge{position:absolute; width:88px; height:88px; border-radius:50%; background:var(--gps-badge); display:grid; place-items:center; transition:background .25s}
.gps .gps-badge svg{width:34px;height:34px;fill:#fff}
.gps .gps-node{position:absolute; width:26px; height:26px; border-radius:50%; background:#fff; border:4px solid var(--gps-accent); z-index:2; animation:gps-pulse 2.8s ease-out infinite}
@keyframes gps-pulse{0%{box-shadow:0 0 0 0 rgba(63,155,181,.5)}70%,100%{box-shadow:0 0 0 12px rgba(63,155,181,0)}}
.gps .gps-line{position:absolute; background:var(--gps-line); z-index:1}
.gps .gps-copy{position:absolute}
.gps .gps-copy h3{margin:0 0 10px; padding:0; font-size:30px; font-weight:400; line-height:1.15; color:var(--gps-accent)}
.gps .gps-copy p{margin:0; font-size:15px; line-height:1.9; color:var(--gps-text)}
.gps .gps-callout:hover .gps-badge,.gps .gps-callout:focus-within .gps-badge{background:var(--gps-accent)}
.gps .gps-callout:focus-visible{outline:2px solid var(--gps-accent); outline-offset:6px}

/* left */
.gps .gps-left .gps-badge{left:12px; top:20px}
.gps .gps-left .gps-line{left:100px; top:62px; height:5px; width:calc(24% - 100px + 26px)}
.gps .gps-left .gps-node{left:calc(24% + 14px); top:51px}
.gps .gps-left .gps-copy{left:12px; top:130px; width:calc(24% - 32px); min-width:200px}
/* right */
.gps .gps-right .gps-badge{right:12px; top:20px}
.gps .gps-right .gps-line{right:100px; top:62px; height:5px; width:calc(24% - 100px + 26px)}
.gps .gps-right .gps-node{right:calc(24% + 14px); top:51px}
.gps .gps-right .gps-copy{right:12px; top:130px; width:calc(24% - 32px); min-width:200px; text-align:right}
/* bottom */
.gps .gps-bottom .gps-node{left:calc(50% - 13px); top:374px}
.gps .gps-bottom .gps-line{left:calc(50% - 2.5px); top:392px; width:5px; height:166px}
.gps .gps-bottom .gps-badge{left:calc(50% - 44px); top:540px}
.gps .gps-bottom .gps-copy{left:calc(50% + 66px); top:556px; width:min(430px,calc(50% - 80px))}

@media (max-width:860px){
  /* Tablet & phone: one column, star only (no grey circle), compact glass cards */
  .gps{height:auto; display:flex; flex-direction:column; gap:16px; padding:22px 16px}
  .gps .gps-b1{width:160px;height:160px;left:8%;top:10px}
  .gps .gps-b2{width:140px;height:140px;right:6%;top:130px}
  .gps .gps-b3,.gps .gps-node,.gps .gps-line{display:none}

  .gps .gps-glass{position:relative; inset:auto; order:-1; height:auto; min-height:240px; padding:26px 16px; margin-bottom:4px}
  .gps .gps-title{font-size:26px}
  .gps .gps-hero{width:76px;height:76px}
  .gps .gps-chip{width:38px;height:38px}

  .gps .gps-callout,.gps .gps-callout:hover{position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px; row-gap:8px;
    padding:16px 18px; border-radius:18px; text-align:left;
    background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.3));
    border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 8px 20px rgba(40,60,80,.1), inset 0 1px 0 rgba(255,255,255,.9)}

  .gps .gps-badge,.gps .gps-left .gps-badge,.gps .gps-right .gps-badge,.gps .gps-bottom .gps-badge,
  .gps .gps-callout:hover .gps-badge,.gps .gps-callout:focus-within .gps-badge{
    position:static; inset:auto; grid-column:1; width:auto; height:auto; background:transparent; display:block; transition:none}
  .gps .gps-badge svg{width:30px;height:30px;fill:var(--gps-accent);display:block}

  .gps .gps-copy,.gps .gps-left .gps-copy,.gps .gps-right .gps-copy,.gps .gps-bottom .gps-copy{
    position:static; inset:auto; display:contents; width:auto; min-width:0; text-align:left}
  .gps .gps-copy h3{grid-column:2; margin:0; font-size:22px; font-weight:600; text-align:left}
  .gps .gps-copy p{grid-column:1 / -1; margin:0; font-size:15px; line-height:1.7; text-align:left}
}
@media (max-width:480px){
  .gps{padding:18px 12px; gap:14px}
  .gps .gps-glass{min-height:220px; padding:22px 12px}
  .gps .gps-title{font-size:24px}
  .gps .gps-tag{font-size:13px}
  .gps .gps-hero{width:64px;height:64px}
  .gps .gps-callout,.gps .gps-callout:hover{padding:14px 15px}
  .gps .gps-badge svg{width:26px;height:26px}
  .gps .gps-copy h3{font-size:20px}
  .gps .gps-copy p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.gps .gps-node{animation:none}.gps .gps-glass,.gps .gps-badge{transition:none}}