/* ============================================================
   GAPress page (glass + clean GA style)
   Colori base: bg #F8F9FB, accent #111827 (dark) + blue (var(--blue))
   ============================================================ */

.gp-hero__shell,
.gp-card,
.gp-final__shell{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(2,6,23,.08);
  backdrop-filter: blur(10px);
}

.gp-badge{
  padding: 8px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,249,251,1);
}
.gp-badge__dot{
  width: 10px; height: 10px;
  border-radius: 9999px;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(36,86,216,.12);
}
.gp-badge__txt{
  font-weight: 900;
  font-size: .85rem;
  color: rgba(17,24,39,.78);
  letter-spacing: .2px;
}

/* Buttons */
.gp-btn{
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: .3px;
  user-select: none;
}
.gp-btn--primary{
  background: var(--blue);
  color: #fff;
  box-shadow: 0 12px 25px rgba(36,86,216,.22);
}
.gp-btn--primary:hover{ filter: brightness(.98); }

.gp-btn--ghost{
  background: rgba(255,255,255,.78);
  color: rgba(17,24,39,.78);
  border: 1.5px solid rgba(15,23,42,.18);
}
.gp-btn--ghost:hover{ background: rgba(255,255,255,.92); }

/* Pills small */
.gp-pill{
  padding: 14px;
  border-radius: 16px;
  background: rgba(248,249,251,1);
  border: 1px solid rgba(15,23,42,.08);
}
.gp-pill__t{
  font-weight: 900;
  color: rgba(17,24,39,.86);
  font-size: .98rem;
}
.gp-pill__d{
  margin-top: 6px;
  color: rgba(17,24,39,.62);
  font-size: .92rem;
  line-height: 1.55;
}

/* Big grid cards */
.gp-box{
  padding: 16px;
  border-radius: 18px;
  background: rgba(248,249,251,1);
  border: 1px solid rgba(15,23,42,.08);
}
.gp-box__t{
  font-weight: 900;
  color: rgba(17,24,39,.90);
  font-size: 1rem;
}
.gp-box__d{
  margin-top: 7px;
  color: rgba(17,24,39,.62);
  font-size: .95rem;
  line-height: 1.6;
}

/* Visual area */
.gp-visual__glow{
  position: absolute;
  inset: -40px -40px -40px -40px;
  background: radial-gradient(circle at 30% 25%, rgba(36,86,216,.18), transparent 55%),
              radial-gradient(circle at 70% 60%, rgba(17,24,39,.10), transparent 55%);
  filter: blur(6px);
  z-index: 0;
}
.gp-visual__frame{
  position: relative;
  z-index: 1;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
  box-shadow: 0 20px 60px rgba(2,6,23,.10);
}
.gp-visual__img{
  width: 100%;
  height: auto;
  display: block;
}

/* floating minis (like the reference) */
.gp-mini{
  position: absolute;
  z-index: 2;
  width: 240px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 45px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
}
.gp-mini--a{ right: 18px; top: 56%; transform: translateY(-50%); }
.gp-mini--b{ left: 18px; bottom: 18px; }

.gp-mini__title{
  font-weight: 900;
  color: rgba(17,24,39,.88);
  font-size: .98rem;
}
.gp-mini__row{
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-top: 10px;
  color: rgba(17,24,39,.70);
  font-weight: 800;
  font-size: .9rem;
}
.gp-mini__dot{
  width: 10px; height: 10px;
  border-radius: 9999px;
  background: rgba(36,86,216,1);
  box-shadow: 0 0 0 4px rgba(36,86,216,.12);
}
.gp-mini__big{
  margin-top: 10px;
  font-weight: 900;
  font-size: 1.6rem;
  color: rgba(17,24,39,.92);
}
.gp-mini__sub{
  margin-top: 2px;
  font-weight: 800;
  font-size: .9rem;
  color: rgba(17,24,39,.55);
}

/* Responsive */
@media (max-width: 980px){
  .gp-mini{ display:none; }
}

@media (max-width: 720px){
  .gp-hero__shell{ padding: 18px; }
  .gp-card{ padding: 18px; }
  .gp-pill{ --mw:100% !important; }
  .gp-box{ --mw:100% !important; }
}