:root{
      /* Romantic, light palette */
      --teal:#86C2A6;    /* links/focus/success */
      --pink:#F6C2CB;    /* primary soft */
      --coral:#FF7A6E;   /* CTA pop */
      --lav:#EDE2F6;     /* lilac tint */
      --ink:#2B2B2F;     /* body text */
    }

    html, body { color: var(--ink); }
    body {
      font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, #fff 0%, #fff7f9 40%, #f6fafe 100%);
    }
    .font-serif { font-family: Lora, Georgia, serif; }

    /* Chips / cards / buttons */
    .chip {
      display:inline-flex; align-items:center; gap:.4rem;
      border:1px solid rgba(26,179,148,.18);
      background: rgba(26,179,148,.10);
      color:#0f766e;
      border-radius:999px; padding:.25rem .65rem; font-size:.875rem;
    }
    .card-romance {
      border:1px solid rgba(0,0,0,.06);
      background:#fff;
      border-radius:1.25rem;
      box-shadow:0 8px 32px rgba(17,24,39,.06);
    }
    .btn-romantic {
      background: var(--pink);
      color:#fff;
      border:none;
      border-radius:999px;
      padding:.8rem 1.2rem;
      font-weight:700;
      box-shadow:0 8px 24px rgba(26,179,148,.10);
    }
    .btn-romantic:hover { background: var(--teal); color:#fff; box-shadow:0 12px 30px rgba(26,179,148,.25); }
    .btn-outline-teal {
      border:1.5px solid var(--teal);
      color: var(--teal);
      border-radius:999px;
      padding:.8rem 1.2rem;
      background:transparent;
      font-weight:700;
    }
    .btn-outline-teal:hover { background: rgba(26,179,148,.08); color: var(--teal); }

    /* Soft shapes */
    .shape-pink { position:absolute; width:18rem; height:18rem; border-radius:50%; background: var(--pink); filter: blur(60px); opacity:.28; z-index:0; animation: floatPink 9s ease-in-out infinite alternate; }
    .shape-teal { position:absolute; width:20rem; height:20rem; border-radius:50%; background: var(--teal); filter: blur(70px); opacity:.22; z-index:0; animation: floatTeal 11s ease-in-out infinite alternate; }
    @keyframes floatPink { from { transform: translate(0,0); } to { transform: translate(10px, -6px); } }
    @keyframes floatTeal { from { transform: translate(0,0); } to { transform: translate(-12px, 8px); } }
    @media (prefers-reduced-motion: reduce) { .shape-pink, .shape-teal { animation: none !important; } }

    /* Utility */
    .blurred { filter: blur(6px); }
    .heart-dot { width:10px; height:10px; background:var(--pink); border-radius:50%; display:inline-block; }
    .clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.25; min-height: calc(1.25em * 3); }
    .clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.2; min-height: calc(1.2em * 1); }
    .clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.25; min-height: calc(1.25em * 2); }
    .skeleton { position: relative; }
    .skeleton::after {
      content: ""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.04) 63%);
      animation: shimmer 1.2s infinite; background-size: 400% 100%; border-radius: 1rem;
    }
    .skeleton img.photo { opacity: 0; }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* Sections */
    header.navbar-sticky { position:sticky; top:0; z-index:1030; backdrop-filter: saturate(180%) blur(8px); background:rgba(255,255,255,.85); border-bottom:1px solid #ffe3ea; }
    .hero-title { font-weight:800; letter-spacing:.2px; }
    .romance-link { color: var(--teal); text-decoration: none; }
    .romance-link:hover { text-decoration: underline; }

    /* --- Feature icon pill --- */
    .feature-icon {
      width: 44px; height: 44px;
      border-radius: 999px;
      background: rgba(134,194,166,.15);
      border: 1px solid rgba(134,194,166,.30);
      color: var(--teal);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .feature-icon .bi { font-size: 1.05rem; line-height: 1; }

    /* --- Profile photo box --- */
    .photo-box {
      position: relative;
      border-radius: 1rem;
      overflow: hidden;                     /* stops blur bleeding past corners */
      background:
        radial-gradient(120px 120px at 50% 40%, rgba(246,194,203,.55), rgba(134,194,166,.35)) ,
        var(--lav);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    }

    /* Ensure normal links use theme color; preserve button colors */
    .card-romance a:not(.btn) { color: var(--ink); text-decoration: none; }
    .card-romance a:not(.btn):hover { color: var(--ink); text-decoration: none; }

    .photo-box img.photo {
      position: absolute;
      inset: 0;
      z-index: 1;
      width:100%; height:100%; object-fit:cover;
      transform: scale(1.02);               /* fills edges cleanly */
      transition: transform .25s ease, filter .25s ease;
    }
    .photo-box .blur-pill {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--pink), var(--teal));
      filter: blur(10px);
      position: relative;
      z-index: 0;
    }
    .photo-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(0,0,0,.20));
      color: #fff;
      font-weight: 700;
      letter-spacing: .2px;
      opacity: 0;
      transition: .15s ease;
      text-shadow: 0 2px 8px rgba(0,0,0,.35);
      pointer-events: none;
    }
    .photo-private .photo-overlay { opacity: 1; }
    .profile-tile { position: relative; overflow: hidden; border-radius: 1rem; }
    .tile-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: .35rem;
      padding: .7rem .75rem;
      color: #fff;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(15,23,42,.00) 30%, rgba(15,23,42,.34) 62%, rgba(15,23,42,.84) 100%);
      z-index: 4;
    }
    .tile-name {
      font-weight: 700;
      font-size: 1.05rem;
      line-height: 1.2;
      text-shadow: 0 2px 8px rgba(0,0,0,.45);
    }
    .tile-meta,
    .tile-quote {
      font-size: .9rem;
      line-height: 1.2;
      color: rgba(255,255,255,.94);
      text-shadow: 0 2px 8px rgba(0,0,0,.45);
    }
    .tile-quote { font-size: .84rem; color: rgba(255,255,255,.92); }
    .tile-verify {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      width: fit-content;
      font-size: .72rem;
      border-radius: 999px;
      background: rgba(134,194,166,.28);
      color: #e9fff5;
      border: 1px solid rgba(233,255,245,.45);
      padding: .12rem .45rem;
      text-shadow: none;
    }
    .tile-details {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(8px);
      transition: max-height .24s ease, opacity .2s ease, transform .2s ease;
    }
    .profile-card-link:hover .tile-details,
    .profile-card-link:focus .tile-details,
    .profile-card-link:focus-visible .tile-details {
      max-height: 5.2rem;
      opacity: 1;
      transform: translateY(0);
    }
    .profile-card-link:hover .photo-box img.photo,
    .profile-card-link:focus .photo-box img.photo,
    .profile-card-link:focus-visible .photo-box img.photo {
      transform: scale(1.06);
    }
    @media (hover: none) {
      .tile-details { max-height: 2.2rem; opacity: 1; transform: none; }
      .tile-quote { -webkit-line-clamp: 1; min-height: calc(1.2em * 1); }
    }
    .photo--blurred { filter: blur(6px); }   /* keep for privacy mode */
    .card-romance { transition: transform .25s ease, box-shadow .25s ease; }
    .card-romance:hover { transform: translateY(-2px); box-shadow:0 12px 36px rgba(17,24,39,.10); }
    @media (prefers-reduced-motion: reduce) {
      .card-romance, .card-romance:hover, .photo-box img.photo { transition: none !important; transform: none !important; }
    }

    /* “How it works” step number */
    .step-no { color: var(--coral); font-weight:800; font-size:1.4rem; }

    /* Verified pill */
    .pill-verify { font-size:.75rem; border-radius:999px; background:rgba(134,194,166,.15); color:var(--teal); border:1px solid rgba(134,194,166,.35); padding:.15rem .5rem; }

    /* Footer */
    footer { background:#fff; border-top:1px solid #f0e7ee; }

        .romance-link {
            color: var(--teal);
            text-decoration: none;
        }

            .romance-link:hover {
                text-decoration: underline;
            }