/* ---- css/hero.css ---- */
.stHero {
  --st-ink: #1e2a5a;
  --st-purple: #4fc1c4;
  --st-purple-deep: #394b8c;
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(111, 224, 218, 0.72) 0%, rgba(79, 193, 196, 0.18) 28%, transparent 48%),
    radial-gradient(circle at 10% 92%, rgba(57, 75, 140, 0.9) 0%, transparent 42%),
    linear-gradient(125deg, #162354 0%, #263b7b 42%, #347fa0 72%, #4fc1c4 100%);
  color: #ffffff;
  isolation: isolate;
}

.stHero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 0.8px, transparent 0.8px);
  background-size: 25px 25px;
  mask-image: linear-gradient(to right, black, transparent 65%);
}

.stGlow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(3px);
}

.stGlowOne {
  width: 520px;
  height: 520px;
  top: -190px;
  right: -120px;
  background: rgba(133, 242, 231, 0.32);
}

.stGlowTwo {
  width: 330px;
  height: 330px;
  bottom: -150px;
  left: -160px;
  background: rgba(79, 193, 196, 0.28);
}

.stHeroInner {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  align-items: center;
  gap: 60px;
  padding: 72px 0;
}

.stHeroCopy {
  position: relative;
  z-index: 2;
}

.stEyebrow {
  margin: 0 0 20px;
  color: #9af1eb;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.stHero h1 {
  max-width: 690px;
  margin: 0;
  font-size: clamp(52px, 5.5vw, 78px);
  font-weight: 780;
  line-height: 0.99;
  letter-spacing: -0.055em;
}

.stHero h1 span {
  color: #7ee3df;
  font-weight: 520;
}

.stIntro {
  max-width: 610px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 19px;
  line-height: 1.65;
}

.stActions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 36px;
}

.stStoreButton {
  min-width: 178px;
  height: 59px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 14px;
  background: #ffffff;
  color: #1e2a5a;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(10, 25, 65, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.stStoreButton:hover {
  background: #dff3f2;
  box-shadow: 0 18px 38px rgba(10, 25, 65, 0.34);
  transform: translateY(-3px);
}

.stStoreButton svg {
  width: 27px;
  height: 27px;
  flex: none;
  fill: currentColor;
}

.stStoreButton span {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.stStoreButton small {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.stTrust {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
}

.stTrust span { color: #8cf1eb; }

.stVisual {
  position: relative;
  min-height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stVisual::before {
  content: "";
  position: absolute;
  width: 510px;
  height: 510px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(223, 243, 242, 0.68) 0%, rgba(79, 193, 196, 0.5) 45%, rgba(30, 42, 90, 0.42) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 40px 90px rgba(10, 25, 65, 0.32);
}

.stOrbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
}

.stOrbitLarge { width: 600px; height: 600px; }
.stOrbitSmall { width: 555px; height: 555px; border-style: dashed; animation: stSpin 28s linear infinite; }
.stMockGlow { position: absolute; z-index: 1; width: 280px; height: 470px; background: rgba(30, 42, 90, 0.3); filter: blur(35px); transform: translate(22px, 38px); }

.stPhone {
  position: relative;
  z-index: 2;
  width: min(278px, 70%);
  aspect-ratio: 9 / 19.5;
  padding: 9px;
  box-sizing: border-box;
  border: 2px solid #687184;
  border-radius: 52px;
  background: linear-gradient(145deg, #303640 0%, #080a0e 48%, #252b35 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 3px rgba(0, 0, 0, 0.72),
    0 38px 45px rgba(10, 19, 52, 0.35);
  transform: rotate(1.5deg);
}

.stPhoneScreen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 42px;
  background: #071023;
}

.stMock {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.stDynamicIsland {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 50%;
  width: 31%;
  height: 25px;
  border-radius: 999px;
  background: #030406;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.07);
  transform: translateX(-50%);
}

.stPhoneButton {
  position: absolute;
  display: block;
  width: 4px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(to left, #161a21, #59616e);
}

.stPhoneMute {
  top: 94px;
  left: -5px;
  height: 27px;
}

.stPhoneVolumeUp {
  top: 138px;
  left: -5px;
  height: 51px;
}

.stPhoneVolumeDown {
  top: 199px;
  left: -5px;
  height: 51px;
}

.stPhonePower {
  top: 153px;
  right: -5px;
  height: 76px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to right, #161a21, #59616e);
}
.stMilestone { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 13px 17px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 14px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 15px 35px rgba(30, 42, 90, 0.14); backdrop-filter: blur(12px); color: #1e2a5a; font-size: 13px; }
.stMilestone span { color: var(--st-purple); font-size: 18px; }
.stMilestoneTop { top: 18%; right: -1%; }
.stMilestoneBottom { bottom: 17%; left: -2%; }

@keyframes stSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
  .stHeroInner { grid-template-columns: 1fr; gap: 30px; padding-top: 76px; text-align: center; }
  .stEyebrow, .stActions, .stTrust { justify-content: center; }
  .stIntro { margin-right: auto; margin-left: auto; }
  .stVisual { min-height: 570px; }
  .stMilestoneTop { right: 6%; }
  .stMilestoneBottom { left: 5%; }
}

@media (max-width: 560px) {
  .stHeroInner { width: min(calc(100% - 30px), 480px); padding: 62px 0 45px; }
  .stHero h1 { font-size: clamp(43px, 13vw, 61px); }
  .stIntro { font-size: 17px; line-height: 1.55; }
  .stActions { flex-direction: column; align-items: stretch; }
  .stStoreButton { width: 100%; box-sizing: border-box; }
  .stVisual { min-height: 485px; }
  .stVisual::before { width: 390px; height: 390px; }
  .stOrbitLarge { width: 440px; height: 440px; }
  .stOrbitSmall { width: 410px; height: 410px; }
  .stPhone { width: min(258px, 68%); border-radius: 45px; }
  .stPhoneScreen { border-radius: 36px; }
  .stDynamicIsland { top: 8px; height: 21px; }
  .stMilestone { padding: 10px 12px; font-size: 11px; }
  .stMilestoneTop { top: 15%; right: 0; }
  .stMilestoneBottom { bottom: 14%; left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stOrbitSmall { animation: none; }
  .stStoreButton { transition: none; }
}

/* ---- css/user-reviews.css ---- */
.tpReviews {
  --review-ink: #241d32;
  --review-purple: #7658c9;
  --review-purple-deep: #543a9b;
  --review-lavender: #eee9ff;
  --review-muted: #6f687b;
  position: relative;
  overflow: hidden;
  padding: 96px 0 92px;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 192, 210, 0.2), transparent 25%),
    radial-gradient(circle at 92% 88%, rgba(118, 88, 201, 0.15), transparent 26%),
    linear-gradient(180deg, #fff 0%, #fbf9ff 100%);
}

.tpReviews::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  pointer-events: none;
  background-image: radial-gradient(rgba(118, 88, 201, 0.2) 0.75px, transparent 0.75px);
  background-size: 25px 25px;
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
}

.tpReviews .tpContainer {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.tpReviewsHeader {
  max-width: 690px;
  margin: 0 auto 46px;
  text-align: center;
}

.tpReviewsEyebrow {
  display: block;
  margin-bottom: 15px;
  color: var(--review-purple-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.tpReviewsHeader h2 {
  margin: 0;
  color: var(--review-ink);
  font-size: clamp(2.25rem, 4vw, 3.65rem);
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.tpReviewsHeader p {
  margin: 17px 0 0;
  color: var(--review-muted);
  font-size: 17px;
  line-height: 1.6;
}

.tpReviewsCarousel { display: block; }
.tpReviewsGrid { display: none; }
.tpReviewsWrap { position: relative; }

.tpReviewsTrack {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 10px 2px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tpReviewsTrack::-webkit-scrollbar { display: none; }
.tpReviewCard { display: flex; flex-direction: column; scroll-snap-align: center; }

.tpReviewBubble {
  position: relative;
  flex: 1;
  min-height: 245px;
  padding: 25px 25px 24px;
  border: 1px solid rgba(118, 88, 201, 0.13);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 45px rgba(54, 39, 91, 0.09);
  backdrop-filter: blur(12px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.tpReviewCard:hover .tpReviewBubble {
  transform: translateY(-5px);
  border-color: rgba(118, 88, 201, 0.28);
  box-shadow: 0 24px 55px rgba(84, 58, 155, 0.14);
}

.tpReviewTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tpReviewQuoteMark {
  height: 31px;
  color: var(--review-purple);
  font-family: Georgia, serif;
  font-size: 48px;
  line-height: 0.9;
  opacity: 0.4;
}

.tpReviewStars {
  color: #e5aa37;
  font-size: 16px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.tpReviewStarsEmpty { color: rgba(36, 29, 50, 0.14); }

.tpReviewText {
  margin: 0;
  color: #514a5d;
  font-size: 14.5px;
  line-height: 1.72;
}

.tpReviewTail {
  position: absolute;
  bottom: -9px;
  left: 29px;
  width: 17px;
  height: 17px;
  border-right: 1px solid rgba(118, 88, 201, 0.11);
  border-bottom: 1px solid rgba(118, 88, 201, 0.11);
  background: #fff;
  transform: rotate(45deg);
}

.tpReviewMeta { margin-top: 20px; padding-left: 8px; }
.tpReviewName { color: var(--review-ink); font-size: 14px; font-weight: 750; }
.tpReviewLocation { margin-top: 3px; color: #898291; font-size: 12.5px; }

.tpReviewsDots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.tpReviewDot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(118, 88, 201, 0.24);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}

.tpReviewDot.active { width: 28px; background: var(--review-purple); }
.tpReviewsArrow { display: none; }

@media (min-width: 640px) {
  .tpReviewsTrack { grid-auto-columns: 56%; }
}

@media (min-width: 980px) {
  .tpReviewsCarousel { display: none; }
  .tpReviewsGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
  }
  .tpReviewCard { scroll-snap-align: unset; }
  .tpReviewBubble { min-height: 260px; }
}

@media (max-width: 560px) {
  .tpReviews { padding: 72px 0 68px; }
  .tpReviews .tpContainer { width: min(100% - 30px, 480px); }
  .tpReviewsHeader { margin-bottom: 30px; }
  .tpReviewsHeader p { font-size: 15.5px; }
  .tpReviewBubble { min-height: 270px; padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tpReviewBubble, .tpReviewDot { transition: none; }
}

/* ---- css/features-section.css ---- */
.stFeatures {
  --st-navy: #1e2a5a;
  --st-indigo: #394b8c;
  --st-cyan: #4fc1c4;
  --st-aqua: #dff3f2;
  padding: clamp(88px, 10vw, 150px) 24px;
  overflow: hidden;
  background: #fff;
  color: var(--st-navy);
}

.stFeaturesIntro {
  width: min(700px, 100%);
  margin: 0 auto clamp(55px, 7vw, 90px);
  text-align: center;
}

.stFeaturesEyebrow {
  margin: 0 0 16px !important;
  color: var(--st-cyan) !important;
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stFeaturesIntro h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.stFeaturesIntro > p:last-child {
  max-width: 590px;
  margin: 22px auto 0;
  color: #65708a;
  font-size: 18px;
  line-height: 1.7;
}

.stFeaturesList {
  width: min(1000px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 0;
}

.stFeature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(280px, 0.78fr);
  align-items: center;
  gap: clamp(38px, 6vw, 76px);
}

.stFeature + .stFeature { margin-top: -105px; }
.stFeature:nth-child(1) { z-index: 3; }
.stFeature:nth-child(2) { z-index: 2; }
.stFeature:nth-child(3) { z-index: 1; }

.stFeature:nth-child(even) .stFeatureVisual { order: 2; }
.stFeature:nth-child(even) .stFeatureCopy { order: 1; text-align: right; }

.stFeatureVisual {
  position: relative;
  min-height: 570px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(145deg, var(--st-indigo), var(--st-navy) 58%, var(--st-cyan));
  box-shadow: 0 28px 70px rgba(30, 42, 90, 0.18);
  isolation: isolate;
}

.stFeatureVisual2 {
  background: linear-gradient(155deg, #dff3f2 0%, #75d5d3 36%, #394b8c 100%);
}

.stFeatureVisual3 {
  background: linear-gradient(145deg, #1e2a5a 0%, #394b8c 45%, #65d5d1 100%);
}

.stFeatureOrb {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(1px);
}

.stFeatureOrbOne {
  width: 340px;
  height: 340px;
  top: -150px;
  right: -90px;
  background: rgba(223, 243, 242, 0.4);
}

.stFeatureOrbTwo {
  width: 260px;
  height: 260px;
  bottom: -120px;
  left: -70px;
  background: rgba(79, 193, 196, 0.5);
}

.stIphone {
  position: relative;
  width: min(268px, 64%);
  aspect-ratio: 0.492;
  padding: 14px;
  border: 3px solid #172044;
  border-radius: 48px;
  background: #0c1534;
  box-shadow: 0 35px 55px rgba(8, 18, 50, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transform: rotate(-2deg);
}

.stFeature:nth-child(even) .stIphone { transform: rotate(2deg); }

.stIphoneScreen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: #fff;
}

.stIphoneImage { object-fit: cover; object-position: top center; }

.stIphoneSpeaker {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 50%;
  width: 74px;
  height: 22px;
  border-radius: 999px;
  background: #0c1534;
  transform: translateX(-50%);
}

.stIphoneHome {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 50%;
  width: 88px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(-50%);
}

.stFeatureCopy { max-width: 390px; }

.stFeatureNumber {
  display: block;
  margin-bottom: 18px;
  color: var(--st-cyan);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.stFeatureCopy h3 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.stFeatureCopy p {
  margin: 24px 0 0;
  color: #65708a;
  font-size: 18px;
  line-height: 1.7;
}

@media (max-width: 800px) {
  .stFeatures { padding-inline: 18px; }
  .stFeature { grid-template-columns: 1fr; gap: 42px; }
  .stFeature + .stFeature { margin-top: -35px; }
  .stFeature:nth-child(even) .stFeatureVisual,
  .stFeature:nth-child(even) .stFeatureCopy { order: initial; }
  .stFeature:nth-child(even) .stFeatureCopy { text-align: left; }
  .stFeatureVisual { min-height: 530px; }
  .stFeatureCopy {
    position: relative;
    z-index: 3;
    max-width: calc(100% - 28px);
    margin: -72px auto 0;
    padding: 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 45px rgba(30, 42, 90, 0.1);
  }
}

@media (max-width: 480px) {
  .stFeaturesIntro { margin-bottom: 62px; }
  .stFeature + .stFeature { margin-top: 34px; }
  .stFeatureVisual { min-height: 470px; border-radius: 25px; }
  .stIphone { width: min(225px, 66%); border-radius: 41px; }
  .stIphoneScreen { border-radius: 28px; }
  .stFeatureCopy {
    max-width: calc(100% - 20px);
    margin-top: -58px;
    padding: 23px 20px;
  }
  .stFeatureCopy h3 { font-size: 34px; }
  .stFeatureCopy p { font-size: 17px; }
}

@media (prefers-reduced-motion: no-preference) {
  .stIphone { transition: transform 0.35s ease; }
  .stFeatureVisual:hover .stIphone { transform: rotate(0deg) translateY(-7px); }
}

/* ---- css/stats-section.css ---- */
.stStats {
  --st-navy: #1e2a5a;
  --st-indigo: #394b8c;
  --st-cyan: #4fc1c4;
  --st-aqua: #dff3f2;
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 6vw, 78px) 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(79, 193, 196, 0.23), transparent 32%),
    radial-gradient(circle at 8% 100%, rgba(57, 75, 140, 0.85), transparent 38%),
    linear-gradient(135deg, #121c44 0%, var(--st-navy) 48%, #233a70 100%);
  color: #fff;
  isolation: isolate;
}

.stStats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.28) 0.8px, transparent 0.8px);
  background-size: 27px 27px;
  mask-image: linear-gradient(115deg, black, transparent 72%);
}

.stStatsInner {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.stStatsHeading {
  width: min(760px, 100%);
  margin-bottom: 34px;
}

.stStatsEyebrow {
  margin: 0 0 12px;
  color: #7ee3df;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stStatsHeading h2 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.stStatsIntro {
  max-width: 650px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.55;
}

.stStatsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stStatCard {
  position: relative;
  min-height: 145px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
  box-shadow: 0 22px 45px rgba(5, 12, 36, 0.2);
  backdrop-filter: blur(14px);
}

.stStatCard::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -94px;
  right: -74px;
  border-radius: 50%;
  background: rgba(79, 193, 196, 0.22);
}

.stStatCard:nth-child(even)::after { background: rgba(223, 243, 242, 0.16); }

.stStatIndex {
  position: absolute;
  top: 18px;
  left: 21px;
  color: rgba(126, 227, 223, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.stStatCard strong {
  display: block;
  color: #fff;
  font-size: clamp(34px, 3.3vw, 44px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.055em;
}

.stStatCard p {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.35;
}

.stStatsFootnote {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.stStatsShape {
  position: absolute;
  z-index: -1;
  border-radius: 48% 52% 63% 37% / 42% 38% 62% 58%;
  pointer-events: none;
}

.stStatsShapeOne {
  width: 520px;
  height: 280px;
  top: -170px;
  right: -90px;
  background: rgba(79, 193, 196, 0.18);
  transform: rotate(-12deg);
}

.stStatsShapeTwo {
  width: 460px;
  height: 220px;
  bottom: -145px;
  left: -100px;
  background: rgba(79, 193, 196, 0.25);
  transform: rotate(16deg);
}

.stStatsShapeThree {
  width: 210px;
  height: 210px;
  right: 10%;
  bottom: 8%;
  border: 1px solid rgba(223, 243, 242, 0.14);
  background: transparent;
  transform: rotate(28deg);
}

@media (max-width: 900px) {
  .stStatsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .stStats { padding: 58px 18px; }
  .stStatsHeading h2 { font-size: 36px; }
  .stStatsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stStatCard { min-height: 125px; }
  .stStatCard strong { font-size: clamp(31px, 9vw, 40px); }
  .stStatCard p { font-size: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .stStatCard { transition: transform 0.25s ease, border-color 0.25s ease; }
  .stStatCard:hover {
    border-color: rgba(126, 227, 223, 0.48);
    transform: translateY(-5px);
  }
}

/* ---- css/addictions-section.css ---- */
.stAddictions {
  --st-navy: #1e2a5a;
  --st-indigo: #394b8c;
  --st-cyan: #4fc1c4;
  --st-aqua: #dff3f2;
  position: relative;
  overflow: hidden;
  padding: clamp(62px, 7vw, 92px) 24px;
  background:
    radial-gradient(circle at 94% 0%, rgba(79, 193, 196, 0.22), transparent 32%),
    radial-gradient(circle at 5% 110%, rgba(57, 75, 140, 0.95), transparent 38%),
    linear-gradient(135deg, #121b40 0%, var(--st-navy) 52%, #24396e 100%);
  color: #fff;
  isolation: isolate;
}

.stAddictions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.3;
  background-image: radial-gradient(rgba(255, 255, 255, 0.25) 0.75px, transparent 0.75px);
  background-size: 27px 27px;
  mask-image: linear-gradient(110deg, black, transparent 70%);
}

.stAddictions::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  left: -28%;
  width: 20%;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(126, 227, 223, 0.1),
    rgba(255, 255, 255, 0.12),
    transparent
  );
  filter: blur(12px);
  transform: rotate(18deg);
}

.stAddictionsInner {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.stAddictionsHeading {
  width: min(720px, 100%);
  margin-bottom: 36px;
}

.stAddictionsEyebrow {
  margin: 0 0 12px;
  color: #7ee3df;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stAddictionsHeading h2 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.stAddictionsIntro {
  max-width: 650px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.55;
}

.stAddictionsGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.stAddictionPill {
  min-height: 39px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.085);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.stAddictionPill:nth-child(3n + 2) {
  background: rgba(79, 193, 196, 0.12);
  border-color: rgba(126, 227, 223, 0.22);
}

.stAddictionDot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--st-cyan);
  box-shadow: 0 0 0 3px rgba(79, 193, 196, 0.1);
}

.stAddictionsShape {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 48% 52% 63% 37% / 42% 38% 62% 58%;
}

.stAddictionsShapeOne {
  width: 480px;
  height: 210px;
  top: -145px;
  right: -120px;
  background: rgba(79, 193, 196, 0.15);
  transform: rotate(-14deg);
}

.stAddictionsShapeTwo {
  width: 420px;
  height: 190px;
  bottom: -135px;
  left: -100px;
  background: rgba(79, 193, 196, 0.17);
  transform: rotate(18deg);
}

@media (max-width: 700px) {
  .stAddictions {
    padding: 60px 0;
  }

  .stAddictionsHeading {
    margin-bottom: 28px;
    padding: 0 18px;
  }

  .stAddictionsHeading h2 {
    font-size: 37px;
  }

  .stAddictionsScroller {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .stAddictionsScroller::-webkit-scrollbar {
    display: none;
  }

  .stAddictionsGrid {
    width: max-content;
    max-width: none;
    height: 91px;
    padding: 2px 18px 12px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 39px);
    grid-auto-columns: max-content;
    align-content: start;
    gap: 8px;
  }

  .stAddictionPill {
    scroll-snap-align: start;
  }
}

@media (max-width: 420px) {
  .stAddictionsIntro {
    font-size: 15px;
  }

  .stAddictionPill {
    min-height: 37px;
    padding: 0 13px;
    font-size: 12px;
  }

  .stAddictionsGrid {
    grid-template-rows: repeat(2, 37px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .stAddictions::after {
    animation: stAddictionsGlint 8s ease-in-out infinite;
  }

  .stAddictionsShapeOne {
    animation: stAddictionsFloatOne 9s ease-in-out infinite alternate;
  }

  .stAddictionsShapeTwo {
    animation: stAddictionsFloatTwo 11s ease-in-out infinite alternate;
  }

  .stAddictionPill {
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }

  .stAddictionPill:hover {
    border-color: rgba(126, 227, 223, 0.5);
    background: rgba(79, 193, 196, 0.19);
    transform: translateY(-2px);
  }
}

@keyframes stAddictionsGlint {
  0%, 24% {
    left: -28%;
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

  58%, 100% {
    left: 118%;
    opacity: 0;
  }
}

@keyframes stAddictionsFloatOne {
  from { transform: rotate(-14deg) translate3d(0, 0, 0); }
  to { transform: rotate(-10deg) translate3d(-22px, 14px, 0); }
}

@keyframes stAddictionsFloatTwo {
  from { transform: rotate(18deg) translate3d(0, 0, 0); }
  to { transform: rotate(14deg) translate3d(24px, -12px, 0); }
}

/* ---- css/more-resources.css ---- */
.stResources {
  background: #f7fafb;
  color: #1e2a5a;
}

.stResourcesInner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(58px, 7vw, 86px) 0;
}

.stResourcesHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.stResourcesHeader p {
  margin: 0 0 7px;
  color: #35aeb4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.stResourcesHeader h2 {
  margin: 0;
  color: #1e2a5a;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.stResourcesHeader > a {
  padding-bottom: 4px;
  color: #394b8c;
  border-bottom: 1px solid rgba(57, 75, 140, 0.35);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.stResourcesHeader > a:hover {
  color: #269ca3;
  border-color: #4fc1c4;
}

.stResourcesGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.stResourceCard {
  min-width: 0;
}

.stResourceCard > a {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2e8ed;
  border-radius: 14px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.stResourceCard > a:hover {
  border-color: rgba(79, 193, 196, 0.75);
  box-shadow: 0 13px 30px rgba(30, 42, 90, 0.09);
  transform: translateY(-3px);
}

.stResourceImage {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eaf1f2;
}

.stResourceImage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.stResourceCard > a:hover img {
  transform: scale(1.025);
}

.stResourceContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 15px 16px;
}

.stResourceContent h3 {
  margin: 0;
  color: #1e2a5a;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.stResourceContent p {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 14px;
  color: #707c91;
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.stResourceContent > span {
  margin-top: auto;
  color: #329da4;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .stResourcesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .stResourcesInner {
    width: calc(100% - 30px);
    padding: 48px 0;
  }

  .stResourcesHeader {
    align-items: flex-start;
  }

  .stResourcesGrid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stResourceCard > a,
  .stResourceImage img {
    transition: none;
  }
}

/* ---- next/image `fill` ----
 * The Next.js <Image fill> wrote these as an inline style on .stIphoneImage. */
.stIphoneImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: transparent;
}