:root{
    --wp-pink:#E5177E;
    --wp-pink-dark:#B8106A;
    --wp-blue:#159BD7;
    --wp-blue-dark:#0E7EAF;
    --wp-ink:#1B2733;
    --wp-cream:#FFF7FB;
    --wp-line:#F0DDE9;
  }
  body{
    font-family:'Poppins',sans-serif;
    color:var(--wp-ink);
    background:var(--wp-cream);
  }
  h1,h2,h3,.brand-font{ font-family:'Playfair Display',serif; }

  /* ---- Navbar ---- */
  .navbar{ background:#fff; box-shadow:0 2px 12px rgba(27,39,51,.06); }
  .navbar-brand{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.5rem; color:var(--wp-ink)!important; }
  .navbar-brand span.pic{ color:var(--wp-blue); }
  .navbar-brand span.wed{ color:var(--wp-pink); }
  .nav-link{ font-weight:500; color:var(--wp-ink)!important; }
  .btn-brand{
    background:linear-gradient(90deg,var(--wp-pink),var(--wp-blue));
    color:#fff; border:none; font-weight:600; border-radius:50px; padding:.55rem 1.4rem;
  }
  .btn-brand:hover{ filter:brightness(0.94); color:#fff; }

  /* ---- Hero ---- */
  .hero{
    background:
      radial-gradient(circle at 15% 20%, rgba(229,23,126,.10), transparent 45%),
      radial-gradient(circle at 85% 30%, rgba(21,155,215,.12), transparent 45%),
      #fff;
    border-bottom:1px solid var(--wp-line);
    padding:4.5rem 0 3.5rem;
  }
  .eyebrow{
    letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; font-weight:700;
    color:var(--wp-pink);
  }
  .hero h1{ font-size:2.7rem; font-weight:700; line-height:1.15; }
  .hero h1 em{ font-style:normal; color:var(--wp-blue); }
  .hero p.lead{ color:#51606d; }

  /* ---- Ranked cards ---- */
  .rank-card{
    background:#fff; border:1px solid var(--wp-line); border-radius:18px;
    padding:1.9rem; height:100%; position:relative; transition:transform .2s ease, box-shadow .2s ease;
  }
  .rank-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(27,39,51,.08); }
  .rank-num{
    font-family:'Playfair Display',serif; font-weight:700; font-size:2.1rem;
    background:linear-gradient(135deg,var(--wp-pink),var(--wp-blue));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    line-height:1;
  }
  .rank-card h3{ font-size:1.2rem; font-weight:700; margin:.5rem 0 .35rem; }
  .rank-card .tag{
    display:inline-block; font-size:.72rem; font-weight:600; color:var(--wp-blue-dark);
    background:rgba(21,155,215,.10); border-radius:50px; padding:.2rem .7rem; margin-bottom:.6rem;
  }
  .rank-card p{ color:#5b6a77; font-size:.94rem; margin-bottom:0; }
  .featured{
    border:2px solid var(--wp-pink);
    background:linear-gradient(180deg,#fff, #FFF1F8);
  }
  .featured .tag{ background:rgba(229,23,126,.12); color:var(--wp-pink-dark); }
  .featured .badge-top{
    position:absolute; top:-12px; right:18px; background:var(--wp-pink); color:#fff;
    font-size:.72rem; font-weight:700; padding:.3rem .8rem; border-radius:50px;
  }

  /* ---- Section styling ---- */
  section.content{ padding:3.2rem 0; }
  section.content h2{ font-size:1.9rem; font-weight:700; margin-bottom:.6rem; }
  .accent-underline{ width:56px; height:4px; background:linear-gradient(90deg,var(--wp-pink),var(--wp-blue)); border-radius:4px; margin-bottom:1.4rem; }
  ul.tips li{ margin-bottom:.5rem; color:#41505c; }

  /* ---- CTA ---- */
  .cta{
    background:linear-gradient(120deg,var(--wp-pink),var(--wp-blue));
    border-radius:24px; padding:3rem 2.2rem; color:#fff;
  }
  .cta h2{ font-family:'Playfair Display',serif; font-weight:700; }
  .cta .btn-light{ font-weight:700; border-radius:50px; padding:.6rem 1.6rem; }

  footer{ background:var(--wp-ink); color:#c9d2da; padding:2.4rem 0; font-size:.9rem; }
  footer .pic{ color:var(--wp-blue); }
  footer .wed{ color:var(--wp-pink); }
  footer a{ color:#c9d2da; text-decoration:none; }
  footer a:hover{ color:#fff; }