/* ============================================================
   PRICING — dark section. Premium = clean static card.
   Elite = hero card styled after huly.io: an electric-blue
   glowing frame with a gap to an inset navy card, jagged
   lightning arcs crackling around it, ambient bloom, and a
   traveling current. Dan Martell offer framework inside.
   ============================================================ */
@property --pa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --pb { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.pricing-blk { position: relative; background: #02040a; color: #fff; }

/* fade from the light section above (#f2f2f2) into near-black, and back */
.pricing-fade-top { height: clamp(130px, 15vw, 210px); background: linear-gradient(to bottom, #ffffff 0%, #060a12 78%, #02040a 100%); }
.pricing-fade-bot { height: clamp(130px, 15vw, 210px); background: linear-gradient(to bottom, #02040a 0%, #060a12 22%, #f2f2f2 100%); }

.pricing-inner { position: relative; z-index: 1; padding: var(--section-pad-y) 5% 4.5rem; max-width: 74rem; margin: 0 auto; }
.pricing-glow { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); width: 920px; height: 560px; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 45%, rgba(40,110,235,0.26) 0%, rgba(31,111,214,0.12) 46%, rgba(0,0,0,0) 72%); }

/* intro */
.pricing-head { position: relative; z-index: 1; text-align: center; max-width: 46rem; margin: 0 auto 3.5rem; }

/* money-back guarantee — sits above the header */
.pricing-guarantee { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 0.55rem; font-size: 0.86rem; font-weight: 500; line-height: 1.3;
  color: #e7d7a6; padding: 0.55rem 1.05rem; border-radius: 999px; margin: 0 auto 1.6rem;
  background: rgba(231,196,107,0.08); box-shadow: inset 0 0 0 1px rgba(231,196,107,0.28); }
.pricing-guarantee svg { width: 16px; height: 16px; color: #e7c46b; flex: none; }

.pricing-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #a9d4ff; padding: 0.42rem 0.9rem; border-radius: 999px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.pricing-kicker svg { width: 14px; height: 14px; }
.pricing-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.015em; margin: 1.25rem 0 0; color: #fff; }
.pricing-sub { font-size: var(--text-medium); line-height: 1.55; color: rgba(255,255,255,0.62); max-width: 34rem; margin: 1.1rem auto 0; }

/* card grid */
.pcards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem; align-items: stretch; max-width: 60rem; margin: 0 auto; }

/* reassurance line under the cards — quiet, addresses the monthly commitment */
.pricing-reassure { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  margin: 2.4rem auto 0; font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.62); }
.pricing-reassure svg { width: 16px; height: 16px; color: rgba(255,255,255,0.5); flex: none; }

.pcard { position: relative; border-radius: 26px; isolation: isolate;
  opacity: 0; transform: translateY(46px) scale(.965); transition: opacity .75s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.pcards.in .pcard { opacity: 1; transform: none; }
.pcards.in .pcard:nth-child(1) { transition-delay: .05s; }
.pcards.in .pcard:nth-child(2) { transition-delay: .22s; }
.pcard.elite { padding: 14px; }
.pcard.premium { padding: 14px; }

/* hover — lift + intensify */
.pcard:hover { transform: translateY(-16px) scale(1.015); }
.pcard-inner { transition: box-shadow .35s ease, background .35s ease; }
.pcard.premium:hover .pcard-inner { background: linear-gradient(180deg, #131715 0%, #0c0f0d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 26px 54px -26px rgba(0,0,0,0.85); }
.wframe { transition: box-shadow .4s ease; }
.pcard.premium:hover .wframe {
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.8),
    inset 0 0 20px rgba(255,255,255,0.18),
    0 0 2px rgba(255,255,255,0.9),
    0 0 26px rgba(255,255,255,0.32),
    0 0 64px rgba(255,255,255,0.20); }
.eframe, .eglow-bloom, .eframe-run, .eframe-run2 { transition: opacity .4s ease, filter .4s ease, box-shadow .4s ease; }
.pcard.elite:hover .eglow-bloom { opacity: 1; filter: blur(32px) saturate(1.55); }
.pcard.elite:hover .eframe-run { filter: blur(0.6px) saturate(1.5) brightness(1.8); }
.pcard.elite:hover .eframe-run2 { opacity: 1; }
.pcard.elite:hover .eframe {
  box-shadow:
    inset 0 0 0 1.5px rgba(216,238,255,0.95),
    inset 0 0 20px rgba(120,190,255,0.55),
    0 0 2px rgba(222,240,255,1),
    0 0 24px rgba(90,160,255,0.7),
    0 0 66px rgba(50,120,245,0.55); }

/* ---- card body ---- */
.pcard-inner { position: relative; z-index: 4; height: 100%; border-radius: 20px; padding: 2.4rem 2.2rem;
  display: flex; flex-direction: column; gap: 1.1rem; }
.pcard.premium .pcard-inner { border-radius: 16px; background: linear-gradient(180deg, #0e110f 0%, #0a0c0b 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.pcard.elite .pcard-inner { border-radius: 16px; background: linear-gradient(180deg, #0d1826 0%, #060a12 100%); box-shadow: inset 0 0 0 1px rgba(130,185,255,0.12); }

/* header */
.pcard-head { display: flex; flex-direction: column; gap: 0.55rem; }
.pcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pcard-name { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-grotesque); font-weight: 800; font-size: 1.85rem; letter-spacing: -0.01em; line-height: 1; }
.pcard-tag { display: inline-flex; align-items: center; gap: 5px; line-height: 1; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #04122a; background: linear-gradient(110deg, #cfeaff, #7fb8ff); padding: 5px 9px; border-radius: 999px; white-space: nowrap; transform: translateY(-1px); }
.pcard-tag svg { width: 11px; height: 11px; display: block; }
.pcard-tag-txt { display: block; line-height: 1; transform: translateY(1px); }
.pcard-blurb { font-size: 0.92rem; color: #8fc4a9; line-height: 1.45; max-width: 22rem; }
.pcard.elite .pcard-blurb { color: #9fcfb6; }

/* price — prominent, shopify style */
.pcard-price { display: inline-flex; align-items: baseline; gap: 0.18rem; white-space: nowrap; }
.pcard-amt { font-family: var(--font-serif); font-weight: 600; font-size: 2.35rem; line-height: 0.9; color: #fff; }
.pcard-amt-unit { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.6); }

/* CTA launch note — small accent line under the button */
.pcard-launch { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.7); margin: 0.7rem 0 0.15rem; }
.pcard-launch svg { width: 15px; height: 15px; color: #8fd0ff; flex: none; }
.pcard.premium .pcard-launch svg { color: #8fd0ff; }

/* feature list — plain rows split by hairlines (no checkmarks) */
.pcard-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pcard-feat { font-size: 0.92rem; line-height: 1.45; color: rgba(255,255,255,0.82); padding: 0.95rem 0; border-top: 1px solid rgba(255,255,255,0.09); }
.pcard.elite .pcard-feat { border-top-color: rgba(130,185,255,0.16); }
.pcard-feat.is-first { font-weight: 600; color: #fff; }

/* CTA — white pill (huly style) */
.pcard-cta { margin-top: auto; padding-top: 0.5rem; }
.pcard-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; padding: 0.95rem 1.5rem; border-radius: 999px; border: 0;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.pcard-btn svg { width: 17px; height: 17px; transition: transform .2s ease; }
.pcard-btn:hover svg { transform: translateX(3px); }
.pcard.premium .pcard-btn { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
.pcard.premium .pcard-btn:hover { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }
.pcard.elite .pcard-btn { background: #fff; color: #08111f; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.pcard.elite .pcard-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(127,184,255,0.6); }

/* ============================================================
   PREMIUM — subtle static white glow ring (quiet sibling to
   Elite's electric frame; same footprint, far less obvious)
   ============================================================ */
.wglow { position: absolute; border-radius: inherit; pointer-events: none; }
.wframe { inset: 0; z-index: 2; border-radius: 26px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.55),
    inset 0 0 16px rgba(255,255,255,0.12),
    0 0 2px rgba(255,255,255,0.7),
    0 0 18px rgba(255,255,255,0.22),
    0 0 48px rgba(255,255,255,0.13); }

/* ============================================================
   ELITE — blue smoke billowing out from behind on hover
   ============================================================ */
.esmoke { position: absolute; inset: -80px; z-index: 0; border-radius: 80px; pointer-events: none;
  opacity: 0; transition: opacity .15s ease; }
.pcard.elite:hover .esmoke { opacity: 1; }

/* ambient cloud hugging the frame — the dense core of the plume */
.smoke-base { position: absolute; inset: 50px; border-radius: 40px; mix-blend-mode: screen; filter: blur(34px);
  background:
    radial-gradient(60% 55% at 50% 92%, rgba(96,165,255,0.55) 0%, rgba(56,124,240,0.30) 42%, rgba(40,110,235,0) 74%),
    radial-gradient(70% 80% at 50% 50%, rgba(70,140,250,0.38) 0%, rgba(40,110,235,0) 70%); }
.pcard.elite:hover .smoke-base { animation: smokeBreathe 6s ease-in-out infinite; }

/* turbulent billowing puffs */
.puff { position: absolute; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle at 50% 50%, rgba(170,210,255,0.62) 0%, rgba(74,144,255,0.40) 36%, rgba(40,110,235,0) 70%);
  filter: blur(32px); mix-blend-mode: screen; }
.pcard.elite:hover .puff { animation: billow var(--dur, 5s) ease-in-out var(--del, 0s) infinite; }

/* distributed around the perimeter, bottom-heavy like the Huly plume.
   negative delays start each puff mid-billow so the plume is fully
   formed the instant the card is hovered. */
.puff.p1 { left: 12%;  bottom: -50px; --tx: -60px; --ty: -170px; --rot: -14deg; --dur: 5.2s; --del: -2.1s; width: 260px; height: 260px; }
.puff.p2 { left: -40px; top: 44%;     --tx: -180px; --ty: -50px;  --rot: 12deg;  --dur: 5.8s; --del: -3.4s; width: 220px; height: 220px; }
.puff.p3 { right: -40px; top: 40%;    --tx: 180px; --ty: -60px;  --rot: -10deg; --dur: 5.4s; --del: -1.2s; width: 230px; height: 230px; }
.puff.p4 { left: 28%;  top: -50px;    --tx: -40px; --ty: -150px; --rot: 16deg;  --dur: 6.2s; --del: -4.1s; width: 240px; height: 240px; }
.puff.p5 { right: 20%; bottom: -50px; --tx: 80px;  --ty: -165px; --rot: -18deg; --dur: 5.6s; --del: -2.7s; width: 250px; height: 250px; }
.puff.p6 { right: 24%; top: -40px;    --tx: 60px;  --ty: -135px; --rot: 10deg;  --dur: 6.4s; --del: -0.8s; width: 210px; height: 210px; }
.puff.p7 { left: 40%;  bottom: -60px; --tx: -10px; --ty: -190px; --rot: -8deg;  --dur: 5.9s; --del: -3.9s; width: 280px; height: 280px; }
.puff.p8 { left: -30px; bottom: 20%;  --tx: -150px; --ty: -90px; --rot: 14deg;  --dur: 6.1s; --del: -1.6s; width: 200px; height: 200px; }
.puff.p9 { right: -30px; bottom: 24%; --tx: 155px; --ty: -85px;  --rot: -12deg; --dur: 5.5s; --del: -4.5s; width: 205px; height: 205px; }

@keyframes billow {
  0%   { transform: translate(0,0) scale(0.4) rotate(0deg); opacity: 0; }
  12%  { opacity: 0.9; }
  55%  { opacity: 0.55; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.65) rotate(var(--rot)); opacity: 0; }
}
@keyframes smokeBreathe {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.85; }
  50%      { transform: scale(1.12) translateY(-14px); opacity: 1; }
}

/* ============================================================
   ELITE — electric-blue glowing frame + lightning (huly look)
   ============================================================ */
.eglow { position: absolute; border-radius: inherit; pointer-events: none; }

/* ambient bloom behind everything */
.eglow-bloom { inset: -8px; z-index: 0; border-radius: 30px; filter: blur(26px) saturate(1.35); opacity: 0.85;
  background: conic-gradient(from var(--pa),
    rgba(31,90,200,0.30) 0deg, #2f78e6 70deg, #8fd0ff 140deg, #4a90ff 210deg, #2f78e6 290deg, rgba(31,90,200,0.30) 360deg);
  animation: pSpinA 6s linear infinite; }

/* the bright glowing frame (rounded-rect tube of light) */
.eframe { inset: 0; z-index: 2; border-radius: 26px;
  box-shadow:
    inset 0 0 0 1.5px rgba(196,228,255,0.8),
    inset 0 0 16px rgba(95,170,255,0.4),
    0 0 1px rgba(214,238,255,0.95),
    0 0 16px rgba(74,144,255,0.5),
    0 0 46px rgba(40,110,235,0.4); }

/* electrical current racing around the frame:
   .eframe-run = crisp bright current head(s); .eframe-run2 = soft glowing trail/body (synced) */
.eframe-run, .eframe-run2 { inset: 0; z-index: 3; border-radius: 26px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.eframe-run { padding: 2.5px; filter: blur(0.6px) saturate(1.4) brightness(1.45);
  background: conic-gradient(from var(--pa),
    rgba(47,120,230,0) 0deg, rgba(74,144,255,0) 34deg,
    #4a90ff 62deg, #bfe3ff 82deg, #ffffff 90deg, #cfeaff 98deg, #5aa8ff 118deg, rgba(47,120,230,0) 152deg,
    rgba(47,120,230,0) 232deg,
    #4a90ff 262deg, #aee0ff 282deg, #7fc4ff 300deg, rgba(47,120,230,0) 332deg, rgba(47,120,230,0) 360deg);
  animation: pSpinA 5s linear infinite; }
.eframe-run2 { padding: 5px; filter: blur(5px) brightness(1.2); mix-blend-mode: screen; opacity: 0.9;
  background: conic-gradient(from var(--pa),
    rgba(47,120,230,0) 0deg, #3f8ee8 56deg, #9fd6ff 90deg, #3f8ee8 128deg, rgba(47,120,230,0) 178deg,
    rgba(47,120,230,0) 238deg, #3f8ee8 282deg, #8fd0ff 300deg, rgba(47,120,230,0) 340deg, rgba(47,120,230,0) 360deg);
  animation: pSpinA 5s linear infinite; }

@keyframes pSpinA { to { --pa: 360deg; } }
@keyframes pSpinB { to { --pb: 360deg; } }

@media (max-width: 820px) {
  .pcards { grid-template-columns: 1fr; max-width: 28rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard { opacity: 1; transform: none; transition: none; }
  .eframe-run, .eframe-run2, .eglow-bloom, .puff { animation: none; }
  .puff { display: none; }
}

/* ============================================================
   TESTIMONIALS — continues the black backdrop from pricing,
   then fades to white just before the footer.
   ============================================================ */
.testi-blk { position: relative; background: #02040a; color: #fff; padding: 5.5rem 5% 6.5rem; }
.testi-inner { position: relative; z-index: 1; max-width: 74rem; margin: 0 auto; }
.testi-head { text-align: center; max-width: 40rem; margin: 0 auto 4rem; }
.testi-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8fc4a9; margin-bottom: 1rem; }
.testi-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; color: #fff; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.testi-card { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0; }
.testi-stars { display: flex; gap: 0.3rem; margin-bottom: 1.5rem; color: #8fc4a9; }
.testi-stars svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
.testi-quote { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; line-height: 1.45; color: rgba(255,255,255,0.92); }
.testi-author { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-top: 2rem; }
.testi-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden; display: block; }
.testi-avatar .ph { width: 100%; height: 100%; border-radius: 50%; }
.testi-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.testi-name { font-weight: 600; color: #fff; }
.testi-role { font-size: 0.9rem; color: rgba(255,255,255,0.55); }

@media (max-width: 820px) {
  .testi-grid { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; }
}

/* ===== Pricing header reveal (uniform with the other section headers) ===== */
.pricing-head > * { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.pricing-head > *:nth-child(2) { transition-delay: .1s; }
.pricing-head > *:nth-child(3) { transition-delay: .2s; }
.pricing-head > *:nth-child(4) { transition-delay: .3s; }
.pricing-blk.in .pricing-head > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pricing-head > * { opacity: 1 !important; transform: none !important; } }

/* ===== signup flow: anchor buttons + secondary demo link ===== */
a.pcard-btn { text-decoration: none; box-sizing: border-box; }
.pcard-demo-link { display: block; text-align: center; margin-top: -0.55rem; font-weight: 600; font-size: var(--text-small); color: #fff; text-decoration: none; transition: opacity .2s ease; }
.pcard-demo-link:hover { opacity: 0.82; }
.pcard-demo-link:hover { color: #fff; }

/* "Not sure what's right for you?" consultation prompt under the pricing cards */
.pricing-consult { position: relative; z-index: 1; text-align: center; margin: 2.25rem auto 0.5rem; max-width: none; font-size: var(--text-medium); color: rgba(255,255,255,0.72); }
.pricing-consult a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; white-space: nowrap; }
.pricing-consult a:hover { color: #cfeaff; }

/* ============================================================
   PRICING — mobile swipe carousel (huly-style). Premium shows
   first with Elite just peeking on the right; swipe to Elite
   and its smoke/glow ignites. Phones only — tablet/desktop keep
   the stacked / 2-up grid above.
   ============================================================ */
@media (max-width: 640px) {
  /* full-bleed scroller so each card centers in the viewport with the next
     card peeking — like huly.io / Shopify mobile pricing */
  .pcards {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 50px 7vw 58px;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* A horizontal scroller must clip the y-axis, which cuts the cards' glow at
       the top/bottom into a hard line. Fade those edges so the glow tapers off. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 50px, #000 calc(100% - 58px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 50px, #000 calc(100% - 58px), transparent 100%);
  }
  .pcards::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 86vw; min-width: 0; scroll-snap-align: center; }

  /* Soft glow pool behind the cards so their frames blend into the section
     (on desktop the cards sit in .pricing-glow; on mobile that glow is up over
     the header, leaving the cards floating on flat dark — this restores it). */
  .pricing-inner::after {
    content: ""; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
    width: 116vw; height: 86vw; z-index: 0; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(40,110,235,0.22) 0%, rgba(31,111,214,0.10) 45%, rgba(0,0,0,0) 72%);
  }

  /* tighten the card so its content fits the narrower width; stack the
     name/price header so the price can't run off the card edge */
  .pcard-inner { padding: 1.7rem 1.2rem; gap: 0.95rem; }
  .pcard-top { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
  .pcard-name { font-size: 1.55rem; }
  .pcard-amt { font-size: 2rem; }
  /* keep every feature on a single line */
  .pcard-feat { font-size: 0.84rem; padding: 0.85rem 0; }

  /* Elite smoke/glow ignites when it's swiped into view (mirrors :hover) */
  .pcard.elite.is-active .esmoke { opacity: 1; }
  .pcard.elite.is-active .smoke-base { animation: smokeBreathe 6s ease-in-out infinite; }
  .pcard.elite.is-active .puff { animation: billow var(--dur, 5s) ease-in-out var(--del, 0s) infinite; }
  .pcard.elite.is-active .eglow-bloom { opacity: 1; filter: blur(32px) saturate(1.55); }
  .pcard.elite.is-active .eframe-run { filter: blur(0.6px) saturate(1.5) brightness(1.8); }
  .pcard.elite.is-active .eframe-run2 { opacity: 1; }
  .pcard.elite.is-active .eframe {
    box-shadow:
      inset 0 0 0 1.5px rgba(216,238,255,0.95),
      inset 0 0 20px rgba(120,190,255,0.55),
      0 0 2px rgba(222,240,255,1),
      0 0 24px rgba(90,160,255,0.7),
      0 0 66px rgba(50,120,245,0.55);
  }
}