/* ==========================================================================
   What's Inside section — Figma node 109:87
   Page-level box: left:0; top:3695px; width:1440px; height:686px
   All children below use page-level absolute coordinates
   (Figma local y + 3695) to match the shared page-canvas coordinate system
   established by the hero section (.hero-stage, position:relative, 1440 wide).
   Scope: .whats-inside
   ========================================================================== */

.whats-inside {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

/* ---------- Decorative background glow texture ---------- */
.whats-inside-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.whats-inside-glow {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: overlay;
  background: radial-gradient(ellipse at center, rgba(217, 217, 217, 0.83) 0%, rgba(115, 115, 115, 0) 70%);
}
.whats-inside-glow--1 {
  left: 887px;
  top: 3942px;
  width: 553px;
  height: 397px;
}
.whats-inside-glow--2 {
  left: 0;
  top: 3722px;
  width: 553px;
  height: 397px;
}
.whats-inside-glow--3 {
  left: 971px;
  top: 4000px;
  width: 555.738px;
  height: 317.918px;
}

/* ---------- Heading ---------- */
.whats-inside-heading {
  position: absolute;
  left: 514px;
  top: 3702px;
  width: 475px;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 55px;
  line-height: 1.2;
  text-align: center;
  background-image: linear-gradient(172.325deg, rgb(180, 136, 48) 0.54133%, rgb(228, 190, 91) 36.158%, rgb(255, 225, 135) 59.902%, rgb(228, 190, 91) 83.646%, rgb(159, 113, 35) 119.26%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.whats-inside-heading em {
  font-style: italic;
  font-weight: 400;
}

/* ---------- Glow behind mockup ---------- */
.whats-inside-mockup-glow {
  position: absolute;
  left: 848px;
  top: 3839px;
  width: 502px;
  height: 445px;
  border-radius: 50%;
  mix-blend-mode: overlay;
  background: radial-gradient(ellipse at center, rgba(217, 217, 217, 0.7) 0%, rgba(115, 115, 115, 0) 70%);
  pointer-events: none;
}

/* ---------- Central mockup ---------- */
.whats-inside-mockup {
  position: absolute;
  left: 362px;
  top: 3838px;
  width: 779px;
  height: 453px;
  pointer-events: none;
}
.whats-inside-mockup img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Animated coin ---------- */
.whats-inside-coin {
  position: absolute;
  left: 575px;
  top: 4080px;
  width: 290px;
  height: 163px;
  overflow: hidden;
  box-shadow: -24px 110px 21px -116px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.whats-inside-coin img {
  position: absolute;
  left: -8.25%;
  top: 4.87%;
  width: 100.05%;
  height: 100%;
  max-width: none;
}

/* ---------- Bullet callout cards ---------- */
.bullet-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(212, 181, 98, 0.4);
  box-shadow: 0 0 18px 0 rgba(212, 181, 98, 0.1), 0 10px 24px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  pointer-events: auto;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.icon-badge {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(212, 181, 98, 0.1);
  border: 1px solid rgba(212, 181, 98, 0.4);
}
.icon-badge img {
  display: block;
  width: 18px;
  height: 18px;
}

.bullet-text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bullet-title {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  line-height: 1.25;
  background-image: linear-gradient(90deg, #d4b562 0%, #e4be5b 55%, #ffe187 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bullet-subtitle {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  line-height: normal;
  text-transform: uppercase;
  color: #a1d9fa;
  opacity: 0.9;
}

/* Individual card placement + gradients + pop-in animation timing,
   matching the Figma motion timeline (10s loop, cubic-bezier(0.4,1.75,0.3,1) overshoot). */

.bullet-card--sparkles {
  left: 1009px;
  top: 3768px;
  width: 350px;
  height: 80px;
  background-image: linear-gradient(90.281deg, rgb(0, 51, 122) 18.574%, rgb(5, 34, 73) 44.133%, rgb(1, 27, 56) 100%), linear-gradient(90deg, rgb(11, 31, 58) 0%, rgb(11, 31, 58) 100%);
  animation-name: cardPopSparkles;
}
@keyframes cardPopSparkles {
  0%      { scale: 0 0; }
  34.47%  { scale: 0 0; animation-timing-function: cubic-bezier(0.4, 1.75, 0.3, 1); }
  43.47%  { scale: 1 1; }
  100%    { scale: 1 1; }
}

.bullet-card--users {
  left: 206px;
  top: 3806px;
  width: 409px;
  height: 80px;
  background-image: linear-gradient(90deg, rgb(0, 51, 122) 0%, rgb(10, 42, 92) 48.558%, rgb(1, 27, 56) 100%), linear-gradient(90deg, rgb(11, 31, 58) 0%, rgb(11, 31, 58) 100%);
  animation-name: cardPopUsers;
}
.bullet-card--users .bullet-title { width: 306px; }
@keyframes cardPopUsers {
  0%      { scale: 0 0; }
  26.801% { scale: 0 0; animation-timing-function: cubic-bezier(0.4, 1.75, 0.3, 1); }
  35.801% { scale: 1 1; }
  100%    { scale: 1 1; }
}

.bullet-card--briefcase {
  left: 974px;
  top: 4101px;
  width: 376px;
  height: 85px;
  background-image: linear-gradient(90deg, rgb(0, 51, 122) 0%, rgb(10, 42, 92) 48.077%, rgb(1, 27, 56) 82.692%), linear-gradient(90deg, rgb(11, 31, 58) 0%, rgb(11, 31, 58) 100%);
  animation-name: cardPopBriefcase;
}
.bullet-card--briefcase .bullet-title { font-size: 16px; }
@keyframes cardPopBriefcase {
  0%      { scale: 0 0; }
  26.801% { scale: 0 0; animation-timing-function: cubic-bezier(0.4, 1.75, 0.3, 1); }
  35.801% { scale: 1 1; }
  100%    { scale: 1 1; }
}

.bullet-card--filetext {
  left: 103px;
  top: 4052px;
  width: 346px;
  height: 80px;
  background-image: linear-gradient(90deg, rgb(10, 42, 92) 0%, rgb(0, 51, 122) 51.923%, rgb(1, 27, 56) 100%), linear-gradient(90deg, rgb(11, 31, 58) 0%, rgb(11, 31, 58) 100%);
  animation-name: cardPopFiletext;
}
@keyframes cardPopFiletext {
  0%      { scale: 0 0; }
  29.539% { scale: 0 0; animation-timing-function: cubic-bezier(0.4, 1.75, 0.3, 1); }
  38.539% { scale: 1 1; }
  100%    { scale: 1 1; }
}

.bullet-card--layers {
  left: 574px;
  top: 4256px;
  width: 409px;
  height: 80px;
  background-image: linear-gradient(90deg, rgb(0, 51, 122) 0%, rgb(10, 42, 92) 49.519%, rgb(1, 27, 56) 100%), linear-gradient(90deg, rgb(11, 31, 58) 0%, rgb(11, 31, 58) 100%);
  animation-name: cardPopLayers;
}
.bullet-card--layers .bullet-title { width: 308px; }
@keyframes cardPopLayers {
  0%      { scale: 0 0; }
  31.539% { scale: 0 0; animation-timing-function: cubic-bezier(0.4, 1.75, 0.3, 1); }
  40.539% { scale: 1 1; }
  100%    { scale: 1 1; }
}