/* =========================================================
   HOME — EXECUTION ENTRY CONTENT
========================================================= */

/* =========================================================
   HOME TOKENS — ZOMNIVERSE HERO
========================================================= */

:root {

  /* Hero text */
  --home-hero-title: rgba(235,245,255,0.95);
  --home-hero-description: rgba(200,215,230,0.75);

  /* Panel background (glass style) */
  --home-panel-bg-top: rgba(12,18,28,0.55);
  --home-panel-bg-bottom: rgba(10,14,22,0.82);

  /* Panel border glow */
  --home-panel-border: rgba(120,170,255,0.18);

  /* CTA button base */
  --home-btn-bg-top: rgba(20,26,36,0.9);
  --home-btn-bg-bottom: rgba(14,18,26,0.96);
  --home-btn-text: #ffffff;

  /* Hero links */
  --home-link-bg-top: rgba(22,28,38,0.9);
  --home-link-bg-bottom: rgba(16,20,28,0.95);
  --home-link-border: rgba(140,180,255,0.18);

  /* Ghost gradient */
  --home-ghost-a: #5cc8ff;
  --home-ghost-b: #8b9cff;
  --home-ghost-c: #2bd9a8;

  /* Separator */
  --home-separator: rgba(120,170,255,0.25);

  /* Sky CTA */
  --home-sky-a: #6bc8ff;
  --home-sky-b: #3ea6ff;
  --home-sky-text: #07131f;

  /* Hint text */
  --home-hint-text: rgba(210,225,240,0.55);

  /* Shadows */
  --home-shadow-deep: rgba(0,0,0,0.65);
  --home-shadow-soft: rgba(0,0,0,0.35);

  /* Glow */
  --home-glow: rgba(120,170,255,0.25);
  --home-pulse-glow: rgba(80,160,255,0.45);

}


/* =========================================================
   CONTEXT (LEFT SIDE)
========================================================= */
.execution-context {

  position: relative;

  padding: 34px 36px;

  border-radius: 18px;
  max-width: 640px;
}
.execution-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--home-hero-title);

  text-shadow:
    0 2px 20px rgba(0,0,0,0.6),
    0 0 24px rgba(100,160,255,0.25);
}

.execution-description {
  margin-top: 20px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--home-hero-description);
}


/* =========================================================
   EXECUTION PANEL (CITY CARD)
========================================================= */

.execution-panel {

  background: linear-gradient(
    180deg,
    rgba(12,18,28,0.85),
    rgba(8,12,18,0.95)
  );

  border-radius: 18px;

  padding: 34px 38px;

  border: 1px solid rgba(140,180,255,0.25);

  backdrop-filter: blur(14px);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.75),
    0 0 30px rgba(100,160,255,0.25);

  transition:
    transform .25s ease,
    box-shadow .3s ease;
}

.execution-panel:hover {

  transform: translateY(-6px);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.85),
    0 0 40px rgba(100,160,255,0.35);
}

/* subtle lift on hover */

.execution-panel:hover {

  transform: translateY(-4px);

  box-shadow:
    0 24px 70px rgba(0,0,0,0.75),
    0 0 40px var(--home-glow),
    inset 0 1px 0 rgba(255,255,255,0.08);
}


/* =========================================================
   PANEL CONTENT
========================================================= */

.panel-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gb-text-primary);
  margin-bottom: 18px;
}

.step-text {
  margin: 6px 0 10px;
  font-size: 14px;
  color: var(--gb-text-secondary);
}


/* =========================================================
   HERO LINKS
========================================================= */

.execution-links-hero {
  display: flex;
  gap: 14px;
  margin-top: 28px;
}

.hero-link {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 20px;

  font-size: 14px;
  font-weight: 500;

  color: var(--gb-text-primary);
  text-decoration: none;

  background: rgba(20,28,40,0.6);

  border-radius: 999px;
  border: 1px solid rgba(140,180,255,0.2);

  backdrop-filter: blur(8px);

  box-shadow:
    0 8px 24px var(--home-shadow-soft),
    inset 0 1px 0 rgba(255,255,255,0.08);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.hero-link:hover {

  transform: translateY(-2px);

  box-shadow:
    0 12px 30px var(--home-shadow-soft),
    0 0 20px var(--home-glow);
}


/* =========================================================
   GHOST TRACE
========================================================= */

.hero-link--ghost {
  position: relative;
  z-index: 0;
}

.hero-link__ghost {

  position: absolute;
  inset: -2px;

  border-radius: inherit;

  background: linear-gradient(
    120deg,
    var(--home-ghost-a),
    var(--home-ghost-b),
    var(--home-ghost-c),
    var(--home-ghost-a)
  );

  background-size: 300% 300%;

  opacity: 0;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding: 1px;

  transition: opacity 0.25s ease;

  z-index: -1;
}

.hero-link--ghost:hover .hero-link__ghost {

  opacity: 0.6;
  animation: ghost-flow 3.5s linear infinite;
}


/* =========================================================
   PANEL SEPARATOR
========================================================= */

.panel-separator {

  height: 1px;
  margin: 14px 0 18px;

  background: linear-gradient(
    to right,
    transparent,
    var(--home-separator),
    transparent
  );
}


/* =========================================================
   SKY CTA BUTTON
========================================================= */

.btn-primary-sky {

  background: linear-gradient(
    180deg,
    rgba(120,170,230,0.85),
    rgba(70,140,210,0.9)
  );

  color: #0a1a2a;

  padding: 11px 22px;

  border-radius: 999px;

  border: 1px solid rgba(150,200,255,0.25);

  box-shadow:
    0 6px 18px rgba(40,90,160,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35);

  transition:
    transform .15s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.btn-primary-sky:hover {

  transform: translateY(-1px);

  filter: brightness(1.05);

  box-shadow:
    0 18px 42px rgba(80,159,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

.btn-primary-sky:active {

  transform: translateY(0);

  box-shadow:
    0 8px 20px rgba(80,160,255,0.35);
}

.btn-primary-sky:hover {

  transform: translateY(-1px);

  box-shadow:
    0 18px 50px rgba(70,150,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55);
}


/* =========================================================
   PANEL HINT
========================================================= */

.panel-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--home-hint-text);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes ghost-flow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

  .execution-panel {
    max-width: 100%;
    justify-self: stretch;
  }

}