* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Tajawal",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:
    linear-gradient(120deg, rgba(56, 189, 248, 0.18) 0%, transparent 38%),
    linear-gradient(240deg, rgba(182, 255, 47, 0.08) 0%, transparent 42%),
    linear-gradient(
      145deg,
      #05070b 0%,
      #07111d 48%,
      #120d18 76%,
      #06080d 100%
    );
}

.exercise-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.11),
      rgba(56, 189, 248, 0.1) 46%,
      rgba(182, 255, 47, 0.045)
    ),
    rgba(12, 17, 23, 0.9);
  box-shadow:
    0 20px 42px rgba(2, 8, 23, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.exercise-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #7dd3fc, #38bdf8, #b6ff2f, #ffb020);
  opacity: 0.9;
  z-index: 0;
}

.exercise-card > * {
  position: relative;
  z-index: 1;
}

.surface-bright {
  background:
    linear-gradient(
      145deg,
      rgba(125, 211, 252, 0.16),
      rgba(255, 255, 255, 0.045)
    ),
    rgba(8, 13, 18, 0.76);
  box-shadow:
    0 20px 55px rgba(2, 8, 23, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.soft-card {
  background:
    linear-gradient(
      145deg,
      rgba(125, 211, 252, 0.105),
      rgba(255, 255, 255, 0.035)
    ),
    rgba(10, 15, 21, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.energy-button {
  background: linear-gradient(
    90deg,
    #7dd3fc 0%,
    #38bdf8 48%,
    #b6ff2f 100%
  );
  box-shadow: 0 12px 26px rgba(56, 189, 248, 0.2);
}

.energy-button:hover {
  filter: brightness(1.05) saturate(1.08);
  box-shadow: 0 16px 32px rgba(125, 211, 252, 0.25);
}

.metric-gradient {
  background: linear-gradient(
    135deg,
    rgba(56, 189, 248, 0.18),
    rgba(125, 211, 252, 0.08)
  );
}

.hero-stat {
  background:
    linear-gradient(
      145deg,
      rgba(125, 211, 252, 0.14),
      rgba(255, 255, 255, 0.045)
    ),
    rgba(8, 13, 18, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 14px 34px rgba(2, 8, 23, 0.24);
}

.tab-scroll::-webkit-scrollbar {
  height: 0;
}

.glass-line {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.video-shell {
  aspect-ratio: 9 / 16;
}

@media (min-width: 640px) {
  .video-shell {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    animation: fadeIn 180ms ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}