:root{
  --ppic-bg: #050610;

  /* sampled-ish from your logo */
  --ppic-blue-hot:  #0C74FC;
  --ppic-blue-ice:  #94DCFC;
  --ppic-blue-deep: #1F4FB8;

  --ppic-orange-hot:#FCA434;
  --ppic-orange-warm:#FCBC44;
  --ppic-orange-deep:#C85B2A;

  --ppic-text: rgba(234,243,255,0.88);
}

/* Kill the random visited-purple, keep links “brand blue” */
a, a:visited { color: var(--ppic-blue-hot); }
a:hover { color: var(--ppic-blue-ice); text-decoration: underline; }

/* Base card: darker + glass + vignette */
.hero, .hero-callout{
  border-radius: 18px;
  padding: 2rem;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(120% 180% at 50% 120%,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.85) 55%,
      rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.01));

  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter: blur(10px);
}

/* Plasma hotspot layer (blue/orange variants below) */
.hero::before, .hero-callout::before{
  content:"";
  position:absolute;
  inset:-40%;
  filter: blur(2px);
  opacity: 0.95;
  pointer-events:none;
}

/* Rim glow + subtle inner edge */
.hero::after, .hero-callout::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* --- BLUE CARD: localized glow in top-left + faint streak --- */
.hero::before{
  background:
    radial-gradient(55% 55% at 18% 16%,
      color-mix(in srgb, var(--ppic-blue-hot) 92%, transparent) 0%,
      color-mix(in srgb, var(--ppic-blue-hot) 55%, transparent) 28%,
      color-mix(in srgb, var(--ppic-blue-deep) 30%, transparent) 55%,
      rgba(0,0,0,0) 74%),
    radial-gradient(45% 60% at 70% 32%,
      color-mix(in srgb, var(--ppic-blue-ice) 22%, transparent) 0%,
      rgba(0,0,0,0) 72%);
}


.hero{
  border-color: rgba(79,172,253,0.55);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    0 0 28px rgba(79,172,253,0.22),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero::after{
  box-shadow:
    inset 0 0 0 1px rgba(79,172,253,0.18),
    0 0 0 1px rgba(79,172,253,0.18);
}

/* --- ORANGE CARD: hotspot + warm rim --- */
.hero-callout::before{
  background:
    radial-gradient(55% 55% at 20% 20%,
      color-mix(in srgb, var(--ppic-orange-hot) 92%, transparent) 0%,
      color-mix(in srgb, var(--ppic-orange-hot) 55%, transparent) 30%,
      color-mix(in srgb, var(--ppic-orange-deep) 28%, transparent) 58%,
      rgba(0,0,0,0) 76%),
    radial-gradient(45% 60% at 70% 34%,
      color-mix(in srgb, var(--ppic-orange-warm) 20%, transparent) 0%,
      rgba(0,0,0,0) 72%);
}
.hero-callout{
  border-color: rgba(252,175,87,0.58);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    0 0 28px rgba(252,175,87,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-callout::after{
  box-shadow:
    inset 0 0 0 1px rgba(252,175,87,0.16),
    0 0 0 1px rgba(252,175,87,0.16);
}

/* Text: slightly brighter to sit on darker core */
.hero, .hero-callout{
  color: rgba(234,243,255,0.88);
}

/* --- Fix hero/callout text hugging the border (bootstrap/theme overrides) --- */

/* 1) Make sure our padding beats `.container` rules from the theme */
div.container.hero,
div.container.hero-callout,
.hero,
.hero-callout{
  box-sizing: border-box;
  padding: 2.0rem 2.0rem !important;   /* more breathing room */
}

/* 2) Ensure content sits above the glow layers */
.hero > *,
.hero-callout > *{
  position: relative;
  z-index: 1;
}

/* 3) Kill any sneaky asymmetric margins on first-level children */
.hero > :is(p, ul, ol, dl, blockquote, h1, h2, h3, .hero-actions),
.hero-callout > :is(p, ul, ol, dl, blockquote, h1, h2, h3, .hero-actions){
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Optional: nicer line length so it doesn’t feel cramped even on wide screens */
.hero p,
.hero-callout p{
  max-width: 75ch;
}