<link href="https://fplreview.com/wp-content/uploads/aos.css" rel="stylesheet" />
  <style>
    /* Reset and base styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: #0e142f; /* Dark background */
      color: #cccccc;           /* Light grey default text */
      line-height: 1.6;
    }
    a {
      text-decoration: none;
      color: #ffffff;
    }
    ul {
      list-style: none;
    }
    h1, h2, h3, h4 {
      color: #ffffff;
      line-height: 1.2;
      margin: 0;
    }
    p {
      font-size: 1rem;
      margin-bottom: 1rem;
    }
    /* Headings sizes */
    h1 {
      font-weight: 800;
      font-size: clamp(2.5rem, 6vw, 4rem);
      margin-bottom: 1rem;
    }
    h2 {
      font-weight: 700;
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    h3 {
      font-weight: 700;
      font-size: 1.5rem;
      margin: 1rem 0 0.5rem;
    }
    h4 {
      font-weight: 600;
      font-size: 1.1rem;
      margin: 1rem 0 0.5rem;
    }
    /* Accent color for highlights and buttons */
    :root {
      --accent-color: #ff4664;
    }
	.ast-plain-container.ast-no-sidebar #primary {
         margin-top: unset;
        margin-bottom: unset;
    }
    .accent {
      color: var(--accent-color);
    }
    .container {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 2rem;
    }

    .brand {
      font-size: 1.25rem;
      font-weight: 700;
      color: #ffffff;
    }
    .brand .accent {
      color: var(--accent-color);
    }

    /* Hero Section */
    .hero-section {
    /* display: flex; */
    /* align-items: center; */
    justify-content: center;
    padding: 4rem 2rem;
    /* float: left; */
    text-align: left;
    /* min-height: 80vh; */
    /* background-image: url(https://fplreview.com/wp-content/uploads/Frame-266.png); */
    /* background-size: cover;*/
    }
    .hero-text {
      padding: 10%;
    }
    .hero-text p {
      font-size: 1.1rem;
      color: #dddddd;
      margin-bottom: 2rem;
      max-width: 500px;
    }
    .hero-actions {
      display: flex;
      gap: 1rem;
    }
    /* Join Section & Cards */
	
	html {
	/* ie. click on scroll */
      scroll-behavior: smooth;
    }
	
    .join-section {
      padding: 4rem 2rem;
      text-align: center;
      background: #070d1d;
      background-image: url(https://fplreview.com/wp-content/uploads/grid_effect.svg);
      background-repeat: no-repeat;
      background-position: bottom;
    }
    .join-section p {
      color: #cccccc;
      max-width: 600px;
      margin: 0 auto 20px;
    }
	
	.join-section .login-cta
	{
		margin-bottom: 30px;
	}
	
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, 340px);
      gap: 2rem;
      justify-content: center;
    }
    .card {
      background-color: #070D1D;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid #151c3e;
      text-align: left;
      width: 340px;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    }
    /* Removed static card header background images – replaced by avatar animations */
    /* #massive-card { background-image: url(https://fplreview.com/wp-content/uploads/pred_kits.jpg); } */
    /* #review-card { background-image: url(https://fplreview.com/wp-content/uploads/sr_spi_image.jpg); } */
    /* #elite-card  { background-image: url(https://fplreview.com/wp-content/uploads/giffaces2.gif); } */
    .card-header {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-color: #181B3D;
      height: 220px;
      border-radius: 4px;
      margin-bottom: 1rem;
      position: relative;  /* added for avatar animations */
      overflow: hidden;    /* added for avatar animations */
      /* display: flex;        (removed to allow custom positioning of avatars) */
      /* align-items: center;  (removed) */
      /* justify-content: center; (removed) */
      color: #ffffff;
      /* opacity: 0.8;         (removed to show avatars clearly) */
      font-size: 0.9rem;
    }
    .card h3 {
      margin-bottom: 0.5rem;
      color: #ffffff;
    }
    .card p {
      font-size: 0.95rem;
      color: #cccccc;
      margin-bottom: 1.5rem;
    }
    .card-links {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: auto;
    }
    .card-links a, .video-text a, .demo-btn, .readmore-btn {
      font-size: 14px;
      padding: 6px 12px;
      border: 1px solid #455771;
      border-radius: 6px;
      color: #ffffff;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }
    .card-links a:hover, .video-text a:hover, .demo-btn:hover, .readmore-btn:hover {
      opacity: 0.75;
      /* transform: scale(1.05); */
    }
    .card-links a img, .video-text a img, .demo-btn img, .readmore-btn img {
      padding-right: 8px;
    }

    /* --- Animations for card headers --- */

    /* — Projection Table Styles & Pulse — */
    .proj-card {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
    }
    .proj-table {
      width: 100%;
      border-spacing: 2px;
      font-size: 0.75rem;
      color: #ffffff;
      opacity: 0;
      animation: fadeIn 1s ease-in-out 0.5s forwards;
    }
    .proj-table th, .proj-table td {
      padding: 4px;
      text-align: center;
      border-radius: 4px;
	  color: white;
    }
    .proj-table th {
      background: #1e2540;
      font-weight: 600;
    }
    .proj-table td {
      background: #273657;
      animation: pulse 3s ease-in-out infinite var(--delay);
    }
    .proj-table td.low  { background: #404083; }
    .proj-table td.mid  { background: #5061BA; }
    .proj-table td.high { background: #5c8ef4; }

	table.proj-table tr {
		background: transparent;
	}
	
    @keyframes fadeIn {
      to { opacity: 1; }
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.6; }
    }
	
	
	/* clear out background & pulse on the crest column */
	.proj-table th.crest-col,
	.proj-table td.crest-col {
	  background: transparent;
	  animation: none;      /* turn off the pulse */
	  padding: 4px;         /* match your other cells */
	}

	.proj-table th.name-col,
	.proj-table td.name-col {
		  animation: none;      /* turn off the pulse */
	}
	
	
	/* style the crest images */
	.crest-img {
	  display: block;
	  height: 24px;         /* adjust as needed */
	  width: auto;
	  margin: 0 auto;       /* center in the cell */
	}

	/* — Disintegrate & Reconstruct Animation — */
	.proj-table td { 
	  /* use the per-cell variables set in JS */
	  animation: disintegrate 8s ease-in-out infinite;
	  animation-delay: var(--delay);
	}

	@keyframes disintegrate {
	  /* 0–25%: intact; 25–30%: break away; 30–60%: disappeared; 60–65%: reassemble; 65–100% intact */
	  0%, 25%, 65%, 100% {
		transform: translate(0,0) rotate(0);
		opacity: 1;
	  }
	  30%, 60% {
		transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
		opacity: 0;
	  }
	}

	
	
	
    /* Card 3: Cross-fading avatar slideshow (Projection Models card) */
    .crossfade-img {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      max-height: 100%;
      width: auto;
      opacity: 0;
    }
    @keyframes fadeCycle {
      0%   { opacity: 0; }
      5%   { opacity: 1; }
      20%  { opacity: 1; }
      25%  { opacity: 0; }
      100% { opacity: 0; }
    }
    .slide1 { animation: fadeCycle 16s infinite; animation-delay: 0s; }
    .slide2 { animation: fadeCycle 16s infinite; animation-delay: 4s; }
    .slide3 { animation: fadeCycle 16s infinite; animation-delay: 8s; }
    .slide4 { animation: fadeCycle 16s infinite; animation-delay: 12s; }

/* — Strategy Analysis: “Spie” Chart — */
#review-card .spie-chart {
  width: 100%; height: 100%;
}
/* — Grow spie on load — */
#review-card .spie-segments {
  transform-origin: 0 0;
  transform: scale(0);
  animation: growSpie 1.5s ease-out forwards;
}
@keyframes growSpie {
  to { transform: scale(1); }
}


/* — Spie Grid Styles — */
#review-card .spie-grid circle,
#review-card .spie-grid line {
  fill: none;
  stroke: #273657;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}



    /* Video Guides Section (styles unchanged) */
    .video-section {
      padding: 4rem 2rem;
      background-color: #070D1D;
    }
    .video-section .container {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      gap: 2rem;
    }
    .video-text {
      max-width: 500px;
    }
    .video-text p {
      color: #dddddd;
    }
    .video-text a {
      /* intentionally left blank (anchor styles handled above) */
    }
	
	.video-section .video-frame {
		padding: 10px;
		border: 1px solid #151c3e;
		border-radius: 12px;
	}
	
    .video-placeholder {
      max-width: 500px;
      border-radius: 12px;
      border: 1px solid #151c3e;
	  vertical-align: middle;
    }
    .video-placeholder::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      border-style: solid;
      border-width: 25px 0 25px 40px;
      border-color: transparent transparent transparent #ffffff;
      opacity: 0.8;
    }
    /* Multi-Period Solver Section (styles unchanged) */
    .solver-section {
      padding: 4rem 2rem;
      background: #191E3A;
    }
    .solver-section .container {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      gap: 2rem;
    }
    .solver-text {
      max-width: 500px;
    }
    .solver-text p {
      color: #dddddd;
      margin-bottom: 1.5rem;
    }
    .solver-image img {
      width: 520px;
      height: auto;
      margin-left: auto;
      vertical-align: middle;
    }
    /* Membership via Patreon Section (styles unchanged) */
    .patreon-section {
      padding: 4rem 2rem;
      text-align: left;
      background-image: url(https://fplreview.com/wp-content/uploads/numbers_back.png);
      background-position: center;
      background-size: cover;
      min-height: 550px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .patreon-section h2 {
      text-align: center;
    }
    .patreon-section ol {
      margin: 1rem 1.5rem 2rem;
    }
    .patreon-section ol li {
      max-width: 500px;
      margin: auto;
      text-align: center;
    }
    .patreon-section ol li a {
      color: #ffffff;
      text-decoration: underline;
    }
    .login-cta {
      text-align: center;
      margin-top: 1rem;
    }
    .login-cta a, .solver-text a {
      padding: 0.6rem 1.2rem;
      background-color: var(--accent-color);
      color: #ffffff;
      border-radius: 30px;
      font-weight: 600;
      text-decoration: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .login-cta a:hover, .solver-text a:hover {
      opacity: 0.75;
      transform: scale(1.05);
    }
   
   @media (min-width: 1000px) {
    .ast-plain-container.ast-no-sidebar #primary {
         margin-top: unset;
        margin-bottom: unset;
    }
}
   
    /* Responsive (Mobile) Styles */
    @media (max-width: 1000px) {
    
      .hero-section {
        flex-direction: column;
        text-align: center;
        padding: 10rem 1.5rem;
      }
      .hero-text {
        max-width: 100%;
        padding: 0;
      }
      .hero-actions {
        justify-content: center;
      }
      .video-section .container {
        flex-direction: column;
        text-align: left;
      }
      .video-text {
        max-width: 100%;
        margin-bottom: 1.5rem;
      }
      .solver-section .container {
        flex-direction: column;
        text-align: left;
      }
      .solver-text {
        max-width: 100%;
        margin-bottom: 1.5rem;
      }
      .solver-image, .video-placeholder {
        display: none;
      }
     
    }
    @media (min-width: 1600px) {
      .container {
        padding: 0 3rem;
      }
      h1 {
        font-size: 4.5rem;
      }
      h2 {
        font-size: 2.25rem;
      }
      h3 {
        font-size: 1.65rem;
      }
      h4 {
        font-size: 1.2rem;
      }
      p {
        font-size: 1.1rem;
      }
    }
  </style>