body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #0a0a0a;
  color: white;
  min-height: 100vh;
  display: block;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

main {
  flex: 1;
  padding: 4rem 2rem;
  text-align: center;
}

footer {
  text-align: center;
  padding: 2rem;
  font-size: 0.7rem;
  color: #999;
  margin-top: 29rem;
}

.pricing-section {
  text-align: center;
  padding: 2rem;
}

.title {
  font-size: 3rem;
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.card {
  background: #111;
  border: 2px solid #222;
  border-radius: 15px;
  padding: 2rem;
  width: 250px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
  transition: 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.562);
}

.card h2 {
  color: rgb(255, 255, 255);
}

.card.pro h2 {
  background: linear-gradient(90deg, #001844, #0066ff, #00fff0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.card.elite h2 {
  background: linear-gradient(90deg, #7a4e00, #ffcc00, #ffe066, #ffcc00, #7a4e00);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 12px rgba(255, 200, 100, 0.5);
  animation: goldShine 6s ease-in-out infinite;
}

@keyframes goldShine {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.price {
  font-size: 2rem;
  margin: 1rem 0;
}

.card ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.card li {
  margin: 0.5rem 0;
}

button {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 30px;
  background: linear-gradient(90deg, #00f0ff, #ff00ff, #00ff99);
  color: black;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

.download {
  margin-top: 25px;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 30px;
  background: linear-gradient(90deg, #00f0ff, #ff00ff, #00ff99);
  color: black;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

button:hover {
  filter: brightness(1.2);
}

@keyframes glow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}


/*Glowing around card*/
/*Basic card*/
.card.basic {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}
.card.basic:hover {
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.589);
}

/*Pro card*/
.card.pro {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  animation: glowPro 5s ease-in-out infinite;
}

@keyframes glowPro {
  0% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  }
}

/*elite Card*/
.card.elite {
  box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
  animation: glowElite 5s ease-in-out infinite;
}

@keyframes glowElite {
  0% {
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 220, 100, 0.6);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.2);
  }
}
/*--------------*/

/*Card button color*/

/*Basic Card*/
.card.basic a {
  background: linear-gradient(90deg, #ccc, #fff, #eee);
  color: black;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  text-decoration: none;
}
.card.basic a:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/*Pro Card*/
.card.pro .pro-a {
  background: linear-gradient(90deg, #001844, #00aaff, #00ffe7);
  color: black;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  animation: btnGlowPro 6s ease-in-out infinite;
  text-decoration: none;
}

@keyframes btnGlowPro {
  0% { box-shadow: 0 0 8px rgba(0, 255, 255, 0.3); }
  50% { box-shadow: 0 0 16px rgba(0, 170, 255, 0.6); }
  100% { box-shadow: 0 0 8px rgba(0, 255, 255, 0.3); }
}


/*Elite Card*/
.card.elite a {
  background: linear-gradient(90deg, #7a4e00, #ffcc00, #ffe066);
  color: black;
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
  animation: btnGlowElite 6s ease-in-out infinite;
  text-decoration: none;
}

@keyframes btnGlowElite {
  0% { box-shadow: 0 0 8px rgba(255, 204, 0, 0.3); }
  50% { box-shadow: 0 0 16px rgba(255, 220, 100, 0.6); }
  100% { box-shadow: 0 0 8px rgba(255, 204, 0, 0.3); }
}


/*header css*/

/* Header de base */
header {
  background-color: #2c2c2c;
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 2px solid #444;
  position: relative;
  font-family: 'Press Start 2P', monospace;
}

/* Navigation */
.nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-left,
.nav-right {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-right {
  justify-content: end;
}

/* Liens dans nav */
header a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s;
}

header a:hover {
  color: #fff;
}

/* Logo */
.logo {
  font-size: 1rem;
  color: #fff;
  text-align: center;
  width: 100px;
  height: 100px;
}

.logo img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

/* Boutons spéciaux */
.button {
  line-height: 1;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.75em 1em;
  padding-right: 1.25em;
  color: #fff;
  border: 1px solid transparent;
  font-weight: 700;
  border-radius: 2em;
  font-size: 1rem;
  box-shadow: 0 0.7em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
  transition: transform 0.3s;

  background: linear-gradient(
    90deg,
    rgba(77, 54, 208, 1) 0%,
    rgba(132, 116, 254, 1) 100%
  );
}

.button__icon {
  width: 1.5em;
  height: 1.5em;
}

.button:hover {
  border-color: #f4f5f2;
}

.button:active {
  transform: scale(0.98);
  box-shadow: 0 0.5em 1.5em -0.5em hsla(249, 62%, 51%, 0.745);
}

/* Bouton "one-button" */
.one-button {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.one-button:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.one-button:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}