/* Extracted internal CSS from impact.php */
    /* ---- shared keyframes ---- */
    @keyframes grsFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    @keyframes grsFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
    @keyframes grsPulseRing{0%{transform:scale(.7);opacity:.8}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
    @keyframes grsCountBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes grsBlink{0%,100%{opacity:1}50%{opacity:.3}}
    @keyframes grsRise{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}
    @keyframes grsRingSweep{from{stroke-dashoffset:283}to{stroke-dashoffset:var(--grs-off,60)}}
    @keyframes grsTypeCursor{0%,100%{opacity:1}50%{opacity:0}}
    @keyframes grsCountUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

    /* ---- generic browser-chrome frame (light) ---- */
    .grs-frame{width:100%;max-width:560px;max-height:100%;border-radius:1.1rem;background:#fff;border:1px solid #E6ECF5;
      box-shadow:0 12px 30px -14px rgba(17,24,39,.12);overflow:hidden;animation:grsFloatA 6s ease-in-out infinite;}
    .grs-frame-bar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;background:#F7F8FC;border-bottom:1px solid #ECEFF6;min-width:0;}
    .grs-dot{width:10px;height:10px;border-radius:9999px;flex-shrink:0;}
    .grs-frame-url{flex:1;min-width:0;margin-left:.5rem;height:24px;border-radius:9999px;background:#EEF1F8;display:flex;align-items:center;
      padding:0 .75rem;font:600 12px/1 'Inter',monospace;color:#475569;gap:.35rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
    .grs-frame-tag{margin-left:auto;display:flex;align-items:center;gap:.35rem;font:800 10px/1 'Inter',monospace;color:#6A58E4;letter-spacing:.05em;}
    .grs-frame-tag .grs-live-dot{width:7px;height:7px;border-radius:9999px;background:#6A58E4;animation:grsBlink 1.4s ease-in-out infinite;}
    .grs-frame-body{padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,1.9rem) clamp(1.5rem,3.5vw,2.1rem);}

    /* ---- light-theme progress bar dashboard ---- */
    .grs-frame-bar-row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;min-width:0;}
    .grs-bar-label{flex-shrink:0;width:110px;font:700 12px/1.2 'Inter',monospace;color:#475569;}
    .grs-frame-bar-track{flex:1;min-width:0;height:6px;border-radius:9999px;background:#EEF1F8;overflow:hidden;position:relative;}
    .grs-frame-bar-fill{position:absolute;inset:0;border-radius:9999px;background:linear-gradient(90deg,#6A58E4,#4A86F5);transform-origin:left;
      animation:grsCountBar 1.3s cubic-bezier(.2,.8,.2,1) both;}
    .grs-frame-bar-val{flex-shrink:0;width:40px;text-align:right;font:800 13px/1 'Inter',monospace;color:#6A58E4;}
    .grs-frame-footer{margin-top:1.2rem;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;
      border-radius:.95rem;background:rgba(106,88,228,.06);border:1px solid rgba(106,88,228,.18);}
    .grs-frame-footer b{font:700 13px/1 'Inter',sans-serif;color:#111827;}
    .grs-pill-violet{padding:.4rem .85rem;border-radius:9999px;background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;font:700 12px/1 'Inter',monospace;}

    /* ---- generic pill / row list ---- */
    .grs-row-list{display:flex;flex-direction:column;gap:.6rem;}
    .grs-row-item{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border-radius:.85rem;background:#FAFBFF;
      border:1px solid #ECEFF6;animation:grsRise .5s ease-out both;}
    .grs-row-icon{flex-shrink:0;width:34px;height:34px;border-radius:.7rem;display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;}
    .grs-row-text{font:700 13px/1.3 'Inter',sans-serif;color:#1E293B;}

    /* ---- result / list card ---- */
    .grs-result-card{border-radius:1rem;border:1.5px solid transparent;padding:1rem 1.15rem;margin-bottom:.7rem;animation:grsRise .5s ease-out both;}
    .grs-result-card.is-top{border-color:#6A58E4;background:linear-gradient(135deg,rgba(106,88,228,.06),rgba(74,134,245,.04));}
    .grs-result-card:not(.is-top){background:#FAFBFF;border-color:#F1F3F9;}
    .grs-result-top-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem;}
    .grs-badge-choice{font:800 10px/1 'Inter',monospace;color:#6A58E4;background:#EDEBFF;padding:.25rem .6rem;border-radius:9999px;letter-spacing:.03em;}
    .grs-result-title{font:700 15px/1.2 'Inter',sans-serif;color:#111827;}
    .grs-result-title.dim{color:#475569;font-weight:600;font-size:14px;}
    .grs-result-meta{font:600 13px/1.3 'Inter',sans-serif;color:#475569;margin-top:.2rem;}

    /* ---- stat ring dashboard ---- */
    .grs-ring-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;width:100%;max-width:480px;}
    .grs-ring-card{background:#FAFBFF;border:1px solid #ECEFF6;border-radius:1rem;padding:1rem .8rem;text-align:center;
      animation:grsRise .55s ease-out both;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;}
    .grs-ring-svg{transform:rotate(-90deg);width:clamp(48px,7vw,60px);height:clamp(48px,7vw,60px);flex-shrink:0;}
    .grs-ring-svg .track{fill:none;stroke:#EDEFF6;stroke-width:6;}
    .grs-ring-svg .fill{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:283;animation:grsRingSweep 1.3s cubic-bezier(.2,.8,.2,1) both;}
    .grs-ring-card-num{font:800 20px/1 'Inter',sans-serif;color:#111827;}
    .grs-ring-card-label{font:700 11px/1 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.03em;}

    /* ---- process / evolution timeline steps ---- */
    .grs-steps{display:flex;flex-direction:column;gap:1.1rem;width:100%;max-width:560px;}
    .grs-step{display:flex;align-items:center;gap:1.1rem;background:#fff;border:1px solid #E6ECF5;border-radius:1.1rem;
      padding:clamp(1.1rem,2.5vw,1.5rem) clamp(1.2rem,3vw,1.6rem);box-shadow:0 14px 34px -18px rgba(106,88,228,.18);animation:grsRise .55s ease-out both;}
    .grs-step-icon{flex-shrink:0;width:50px;height:50px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;}
    .grs-step-bar{height:5px;border-radius:9999px;background:#EEF1F8;overflow:hidden;margin-top:.45rem;}
    .grs-step-bar span{display:block;height:100%;background:linear-gradient(90deg,#6A58E4,#4A86F5);transform-origin:left;animation:grsCountBar 1.1s ease-out both;}

    /* ---- shared visual outer wrapper: NO box, NO background -just a full-height flex container ---- */
    .grs-visual{position:relative;width:100%;max-width:100%;height:100%;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;}
    .grs-glow{position:absolute;border-radius:9999px;filter:blur(60px);pointer-events:none;z-index:0;}

    /* ---- responsive ---- */
    @media (max-width:480px){
      .grs-visual{min-height:240px;padding:.85rem;}
      .grs-frame-body{padding:.9rem 1rem 1.1rem;}
      .grs-bar-label{width:78px;font-size:10px;}
    }
    @media (prefers-reduced-motion: reduce){
      .grs-visual *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
    }

    /* ---- overflow safety net: grid/flex columns default to min-width:auto, which lets a wide
         child force the whole page wider than the viewport. This resets that for every card. ---- */
    .grid > *{min-width:0;}
    .grs-frame,.grs-terminal{min-width:0;box-sizing:border-box;}
    .grs-frame *, .grs-terminal *{box-sizing:border-box;}


/* ==========================================================
   HERO VISUAL - impact page only (appended)
   ----------------------------------------------------------
   Kept in this file on purpose: impact.css is already loaded
   only by impact.php, so a second stylesheet added nothing but
   a risk of the two being mixed up. Everything above this line
   is the original file, byte-for-byte.

   growth.php is unaffected: it loads growth.css, not this file,
   and every class below is namespaced .imx-* so it cannot touch
   the .grs-* components used by the other sections.
   ========================================================== */

.imx {
  --imx-violet: #6A58E4;
  --imx-blue:   #4A86F5;
  --imx-cyan:   #28A8D9;
  --imx-green:  #10B981;
  --imx-ink:    #111827;
  --imx-slate:  #475569;
  --imx-mute:   #5B6475;
  --imx-line:   #E6ECF5;
  --imx-tint:   #F8FAFF;
  --imx-mono:   'Inter', ui-monospace, monospace;
}

/* ==========================================================
   1. SHELL
   ========================================================== */
.imx-scene {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 580px;
  margin-inline: auto;
  contain: layout paint;
  isolation: isolate;
}

.imx-scene::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(45% 45% at 32% 30%, rgba(106, 88, 228, .18), transparent 70%),
    radial-gradient(45% 45% at 70% 68%, rgba(40, 168, 217, .15), transparent 70%);
  filter: blur(30px);
  animation: imx-aurora 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes imx-aurora {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: .85; }
  33%      { transform: scale(1.12) rotate(7deg);  opacity: 1;   }
  66%      { transform: scale(.94)  rotate(-6deg); opacity: .7;  }
}

.imx-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid var(--imx-line);
  box-shadow: 0 18px 44px -20px rgba(106, 88, 228, .30);
  overflow: hidden;
  animation: imx-float 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes imx-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

.imx-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.05rem;
  background: #F7F8FC;
  border-bottom: 1px solid #ECEFF6;
  min-width: 0;
}

.imx-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.imx-dot.r { background: #EF4444; }
.imx-dot.y { background: #F59E0B; }
.imx-dot.g { background: #10B981; }

.imx-url {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: .45rem;
  height: 24px;
  border-radius: 999px;
  background: #EEF1F8;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .7rem;
  font: 600 11px/1 var(--imx-mono);
  color: var(--imx-slate);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.imx-live {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 800 10px/1 var(--imx-mono);
  letter-spacing: .06em;
  color: var(--imx-violet);
}

.imx-blip {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  animation: imx-blip 1.5s ease-in-out infinite;
}

@keyframes imx-blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .25; transform: scale(.7); }
}

.imx-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(.8rem, 2vw, 1.1rem);
  padding: clamp(1rem, 2.6vw, 1.4rem);
}

/* ==========================================================
   2. THE RADAR - impact radiating out from one strategy
   ========================================================== */
.imx-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
}

.imx-radar {
  position: relative;
  width: min(100%, clamp(180px, 40vw, 240px));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* Static guide rings */
.imx-ring-static {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(106, 88, 228, .20);
}

.imx-ring-static.r1 { inset: 30%; }
.imx-ring-static.r2 { inset: 15%; }
.imx-ring-static.r3 { inset: 0;   }

/* Expanding impact waves - scale + opacity only */
.imx-wave {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  border: 2px solid var(--imx-violet);
  opacity: 0;
  animation: imx-wave 3.6s cubic-bezier(.2, .7, .3, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

.imx-wave:nth-of-type(2) { animation-delay: 1.2s; border-color: var(--imx-blue); }
.imx-wave:nth-of-type(3) { animation-delay: 2.4s; border-color: var(--imx-cyan); }

@keyframes imx-wave {
  0%   { transform: scale(.35); opacity: .85; }
  100% { transform: scale(4.2); opacity: 0; }
}

/* The core - the strategy everything radiates from */
.imx-core {
  position: relative;
  z-index: 2;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  place-items: center;
  gap: .1rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(140deg, var(--imx-violet), var(--imx-blue));
  box-shadow: 0 10px 26px -10px rgba(106, 88, 228, .7);
  animation: imx-core 3.6s ease-in-out infinite;
  will-change: transform;
}

@keyframes imx-core {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.07); }
  20%      { transform: scale(1); }
}

.imx-core i { display: block; }

.imx-core-k {
  font: 800 10px/1.2 var(--imx-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .92;
}

/* Satellites sitting on the outer ring at the diagonals */
.imx-sat {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--imx-line);
  box-shadow: 0 5px 14px -6px rgba(17, 24, 39, .28);
  color: var(--imx-violet);
  z-index: 3;
  animation: imx-sat 3.6s ease-in-out infinite;
  will-change: transform;
}

.imx-sat.nw { top: 8%;  left: 8%;  animation-delay: .35s; }
.imx-sat.ne { top: 8%;  right: 8%; animation-delay: .70s; color: var(--imx-blue); }
.imx-sat.se { bottom: 8%; right: 8%; animation-delay: 1.05s; color: var(--imx-cyan); }
.imx-sat.sw { bottom: 8%; left: 8%;  animation-delay: 1.40s; color: #059669; }

@keyframes imx-sat {
  0%, 60%, 100% { transform: scale(1); }
  12%           { transform: scale(1.28); }
  30%           { transform: scale(1); }
}

/* ==========================================================
   3. OUTCOME CARDS - what the impact actually produced
   ========================================================== */
.imx-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.imx-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .65rem;
  border-radius: .75rem;
  border: 1px solid var(--imx-line);
  background: var(--imx-tint);
  min-width: 0;
  overflow: hidden;
}

/* Pulse that arrives as each wave reaches the card */
.imx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(106, 88, 228, .14), rgba(74, 134, 245, .06));
  opacity: 0;
  animation: imx-lit 3.6s ease-in-out infinite;
  pointer-events: none;
}

.imx-card:nth-child(1)::after { animation-delay: .35s; }
.imx-card:nth-child(2)::after { animation-delay: .70s; }
.imx-card:nth-child(3)::after { animation-delay: 1.05s; }
.imx-card:nth-child(4)::after { animation-delay: 1.40s; }

@keyframes imx-lit {
  0%, 55%, 100% { opacity: 0; }
  10%           { opacity: 1; }
  35%           { opacity: 0; }
}

.imx-card-ico {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: .5rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--imx-violet), var(--imx-blue));
}

.imx-card:nth-child(2) .imx-card-ico { background: linear-gradient(135deg, var(--imx-blue), var(--imx-cyan)); }
.imx-card:nth-child(3) .imx-card-ico { background: linear-gradient(135deg, var(--imx-cyan), var(--imx-green)); }
.imx-card:nth-child(4) .imx-card-ico { background: linear-gradient(135deg, var(--imx-green), #059669); }

.imx-card-main { min-width: 0; flex: 1 1 auto; }

.imx-card-v {
  font: 800 clamp(13px, 2.6vw, 15px)/1 'Inter', sans-serif;
  color: var(--imx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imx-card-k {
  margin-top: .2rem;
  font: 700 12px/1.2 var(--imx-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--imx-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================
   4. FOOTER
   ========================================================== */
.imx-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .85rem;
  border-radius: .75rem;
  background: var(--imx-tint);
  border: 1px solid var(--imx-line);
  font: 700 12.5px/1 'Inter', sans-serif;
  color: var(--imx-ink);
  min-width: 0;
}

.imx-foot > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.imx-pill {
  flex: 0 0 auto;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--imx-violet), var(--imx-blue));
  color: #fff;
  font: 800 10px/1 var(--imx-mono);
  letter-spacing: .05em;
  white-space: nowrap;
  animation: imx-glow 3s ease-in-out infinite;
}

@keyframes imx-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(106, 88, 228, 0); }
  50%      { box-shadow: 0 0 18px 0 rgba(106, 88, 228, .55); }
}

/* ==========================================================
   5. RESPONSIVE
   ========================================================== */
@media (max-width: 1023px) {
  .imx-scene { max-width: 520px; }
}

@media (max-width: 639px) {
  .imx-scene   { max-width: 100%; }
  .imx-body    { padding: .9rem; gap: .75rem; }
  .imx-url     { font-size: 10px; }
  .imx-radar   { width: min(100%, clamp(150px, 46vw, 200px)); }
  .imx-card    { padding: .5rem .55rem; gap: .45rem; }
  .imx-card-ico{ width: 23px; height: 23px; }
  .imx-card-k  { font-size: 10px; letter-spacing: .04em; }
  .imx-foot    { font-size: 10.5px; padding: .6rem .65rem; }
  .imx-pill    { font-size: 10px; padding: .32rem .55rem; }
  .imx-sat     { width: 22px; height: 22px; }
}

@media (max-width: 400px) {
  .imx-grid    { grid-template-columns:1fr; gap: .45rem; }
  .imx-card-v  { font-size: 12px; }
  .imx-radar   { width: min(100%, 160px); }
}

/* ==========================================================
   6. MOTION SAFETY
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .imx *,
  .imx *::before,
  .imx *::after {
    animation: none !important;
    transition: none !important;
  }

  .imx-wave       { opacity: 0; }
  .imx-card::after{ opacity: 0; }
  .imx-core,
  .imx-sat        { transform: none; }
}