/* ═══════════════════════════════════════════════════════════════════
   public.css — Stili ISOLATI per le pagine PUBBLICHE (non loggate)
   ═══════════════════════════════════════════════════════════════════

   ⚠️  NON TOCCARE SE NON SI SA QUELLO CHE SI FA  ⚠️
   ⚠️  NON TOCCARE SE NON SI SA QUELLO CHE SI FA  ⚠️
   ⚠️  NON TOCCARE SE NON SI SA QUELLO CHE SI FA  ⚠️

   Questo file è il CSS DEDICATO alle pagine pubbliche del sito
   (non dietro login). È SELF-CONTAINED: contiene tutto ciò che serve
   per renderizzare correttamente:

     • Home                    (/)
     • How It Works            (/Pages/HowItWorks)
     • FAQ                     (/Pages/Faq)
     • Contact                 (/Pages/Contact)
     • Legal (tutti gli anchor (/Pages/Legal#privacy, #terms, ecc.)
     • Guidelines              (/Pages/Guidelines)
     • Seller Terms            (/Pages/SellerTerms)
     • Pagine legacy singole   (Terms.cshtml, Privacy.cshtml, Dmca.cshtml)

   Regole chiave:

     1. Queste pagine usano SOLO public.css — NON devono dipendere da
        site.css, components.css o layout.css.
     2. _Layout.cshtml carica esclusivamente: bootstrap + fontawesome +
        fonts + flag-icons + public.css. Nessun altro CSS del sito.
     3. Prefissi isolati: ff-*, ffl-*, footer-*, + alcune utility custom
        (card-glass, btn-arrow, btn-mobile-sm, stats-section, ecc).
     4. Le pagine dietro login (Buyer, Seller, Admin, Profile, Detail)
        continuano a usare site.css/components.css/layout.css separati.
        NON RIMUOVERE QUEI 3 FILE dalle pagine non-pubbliche.

   Se aggiungi una nuova pagina pubblica:
     a) Verifica che usi SOLO classi già presenti qui (o bootstrap/fa).
     b) Se serve un nuovo pattern, aggiungilo a questo file con prefix
        ff-* o ffl-*, e documenta sopra.

   Sorgente originale: clonato da site.css + components.css + layout.css
   ═══════════════════════════════════════════════════════════════════ */


/* ─── CSS VARIABLES (da site.css :root) ─── */
:root {
    /* --- Colori Primari --- */
    /*--ff-primary: #7945E5;   */      /* Viola principale (come FeetFinder) */
    --ff-primary: #5A189A;
    --ff-secondary: #e91e63;
    /*--ff-secondary: #ff00ba;   */    /* Rosa/Magenta accent */
    --ff-primary-light: #EEE7FC;   /* Viola chiaro per sfondi */
    /*--ff-primary-light: #3F2A6D;   /* Viola scuro per sfondi */
    --ff-primary-dark: #530AA2;    /* Viola scuro */
    --ff-secondary-soft: rgba(233, 30, 99, .35);
    --ff-secondary-glow: rgba(233, 30, 99, .15);
    --ff-scrollbar: #ded1f9;  /*scroolbar*/

    /* --- Colori Testo --- */
    --ff-text-dark: #3A3D3F;       /* Titoli */
    --ff-text-body: #737588;       /* Testo corpo */
    --ff-text-muted: #777777;      /* Testo secondario */
    --ff-text-mutedw: #FFFFFF;      /* Testo bianco pee home page sostituisce mute */
    --ff-text-light: #979797;      /* Placeholder, hint */
    --ff-text-white: #FFFFFF;      /* testo bianco */
    --ff-text-yellow: #c6d211;      /* text giallo per stelline recensioni */
    --ff-text-red: #f110d7;      /* text rosso per il cuore like */
    /*--ff-text-red: #f11053;    oppure cuore rosso*/


    /* --- Sfondi --- */
    --ff-bg-white: #FFFFFF;
    --ff-bg-light: #F6F6F6;        /* Sezioni alternate */
    --ff-bg-card: #FBFBFB;         /* Card background */
    --ff-bg-input: #F3F3F3;        /* Input fields */
    --ff-bg-viola:rgba(43, 30, 75, 0.81); /*#2b1e4b;*/
    --ff-bg-nero: #000000;            /* nero*/

    /* --- Bordi --- */
    --ff-border: #EAEAEA;
    --ff-border-hover: #7945E5;

    /* --- Rating --- */
    --ff-rating: #FFBB00;

    /* --- Errori --- */
    --ff-error: #FF0000;
    --ff-success: #155724;


    --ff-font-family: 'Poppins', sans-serif;
    /* --- Font --- */
    /*--ff-font-family: 'Montserra', sans-serif;*/


    /* --- Border Radius --- */
    --ff-radius-sm: 8px;
    --ff-radius-md: 12px;
    --ff-radius-lg: 20px;
    --ff-radius-pill: 50px;

    /* --- Shadows --- */
    --ff-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --ff-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ff-shadow-primary: 0 4px 15px rgba(121, 69, 229, 0.3);

    /* --- Gradient (per banner, footer, CTA) --- */
    --ff-gradient: linear-gradient(135deg, var(--ff-primary), var(--ff-secondary));
    --ff-gradient-overlay: linear-gradient(135deg, rgba(65, 25, 155, 0.72), rgba(255, 1, 196, 0.72));

    --ff-gradientgold: linear-gradient(135deg, var(--ff-lightgold), var(--ff-darkgold));
}





/* ─── KEYFRAMES (da tutti e 3) ─── */
@keyframes glowPulse {

    0%,100% {
        box-shadow: 0 0 6px var(--ff-secondary-glow);
    }

    50% {
        box-shadow: 0 0 14px var(--ff-secondary-soft);
    }

}

@keyframes ff-shimmer-home {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes ff-cc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}



/* ─────────────────────────────────────────────────────────────
   REGOLE DA site.css
   ───────────────────────────────────────────────────────────── */

.ff-section-lg {
padding: 160px 0;
      margin-bottom: -1px;
}

.ff-section {
padding: 120px 0;
      margin-bottom: -1px;
      overflow-x: hidden;
}

.ff-creators {
padding: 120px 0;
}

.ff-how {
padding: 100px 0;
}

.ff-section + .ff-section {
border-top: 1px solid rgba(255,255,255,0.03);
}

.ff-verified {
display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--ff-primary);
    border-radius: 50%;
    color: white;
    font-size: 10px;
    margin-left: 4px;
}

.ff-btn-sell {
background: var(--ff-gradient);
    color: #fff !important;
    border: none;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: var(--ff-radius-pill);
    transition: opacity .2s ease, transform .15s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.ff-btn-sell:hover {
opacity: .88;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: var(--ff-shadow-primary);
}

.ff-btn-sell:active {
transform: translateY(0);
    opacity: 1;
}

.footer-link {
color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease;
    display: block;
    margin-bottom: 6px;
}

.footer-link:hover {
color: var(--ff-secondary);
    text-decoration: none;
}

.ff-profile-hero {
position: relative;
    margin-bottom: 70px;
}

.ff-profile-cover {
width: 100%;
    height: 280px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}

.ff-profile-avatar-wrap {
position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.ff-profile-avatar {
width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    background: transparent;
    display: block;
}

.ff-profile-avatar--real {
border: 4px solid #fff;
    background: var(--ff-bg-light);
}

.ff-profile-cover--default {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='v2a' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%23ff6ad5'/><stop offset='35%' stop-color='%23d946ef'/><stop offset='70%' stop-color='%238b5cf6'/><stop offset='100%' stop-color='%23c4b5fd'/></linearGradient><linearGradient id='v2b' x1='100%' y1='0%' x2='0%' y2='100%'><stop offset='0%' stop-color='%23ff4fa3' stop-opacity='0.55'/><stop offset='50%' stop-color='%23f0abfc' stop-opacity='0.25'/><stop offset='100%' stop-color='%23e9d5ff' stop-opacity='0.55'/></linearGradient><radialGradient id='v2c' cx='30%' cy='40%' r='55%'><stop offset='0%' stop-color='%23ffb1dc' stop-opacity='0.7'/><stop offset='70%' stop-color='%23ff4fa3' stop-opacity='0.08'/><stop offset='100%' stop-color='%23ff4fa3' stop-opacity='0'/></radialGradient><radialGradient id='v2d' cx='75%' cy='60%' r='55%'><stop offset='0%' stop-color='%23e9d5ff' stop-opacity='0.7'/><stop offset='70%' stop-color='%238b5cf6' stop-opacity='0.1'/><stop offset='100%' stop-color='%238b5cf6' stop-opacity='0'/></radialGradient><radialGradient id='bk1' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23ffd1ea' stop-opacity='0.75'/><stop offset='100%' stop-color='%23ffd1ea' stop-opacity='0'/></radialGradient><radialGradient id='bk2' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23e9d5ff' stop-opacity='0.7'/><stop offset='100%' stop-color='%23e9d5ff' stop-opacity='0'/></radialGradient><radialGradient id='bk3' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23fce7f3' stop-opacity='0.85'/><stop offset='100%' stop-color='%23fce7f3' stop-opacity='0'/></radialGradient><radialGradient id='bk4' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23ff8ac6' stop-opacity='0.55'/><stop offset='100%' stop-color='%23ff8ac6' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='400' fill='url(%23v2a)'/><rect width='1200' height='400' fill='url(%23v2b)'/><rect width='1200' height='400' fill='url(%23v2c)'/><rect width='1200' height='400' fill='url(%23v2d)'/><circle cx='90' cy='70' r='80' fill='url(%23bk1)'/><circle cx='240' cy='220' r='100' fill='url(%23bk3)'/><circle cx='380' cy='90' r='70' fill='url(%23bk4)'/><circle cx='520' cy='260' r='90' fill='url(%23bk2)'/><circle cx='660' cy='100' r='60' fill='url(%23bk3)'/><circle cx='780' cy='310' r='110' fill='url(%23bk1)'/><circle cx='920' cy='120' r='80' fill='url(%23bk2)'/><circle cx='1060' cy='280' r='110' fill='url(%23bk3)'/><circle cx='1150' cy='50' r='50' fill='url(%23bk4)'/><circle cx='150' cy='330' r='60' fill='url(%23bk2)'/><circle cx='450' cy='380' r='50' fill='url(%23bk1)'/><circle cx='830' cy='60' r='45' fill='url(%23bk3)'/><path d='M 0 240 Q 300 120 600 220 T 1200 180' stroke='%23ffe6f6' stroke-width='2.5' fill='none' opacity='0.4'/><path d='M 0 90 Q 400 280 800 140 T 1200 260' stroke='%23f0abfc' stroke-width='2' fill='none' opacity='0.35'/><g fill='%23ffffff'><circle cx='60' cy='80' r='1.6' opacity='0.9'/><circle cx='140' cy='160' r='1.2' opacity='0.75'/><circle cx='220' cy='40' r='1.8' opacity='0.9'/><circle cx='310' cy='210' r='1.3' opacity='0.7'/><circle cx='400' cy='60' r='1.5' opacity='0.85'/><circle cx='490' cy='180' r='1.4' opacity='0.8'/><circle cx='580' cy='50' r='1.2' opacity='0.7'/><circle cx='670' cy='210' r='1.7' opacity='0.9'/><circle cx='760' cy='70' r='1.5' opacity='0.85'/><circle cx='850' cy='180' r='1.2' opacity='0.7'/><circle cx='940' cy='60' r='1.8' opacity='0.9'/><circle cx='1030' cy='200' r='1.3' opacity='0.75'/><circle cx='1120' cy='90' r='1.5' opacity='0.85'/><circle cx='1180' cy='180' r='1.2' opacity='0.7'/><circle cx='80' cy='300' r='1.4' opacity='0.8'/><circle cx='180' cy='370' r='1.2' opacity='0.7'/><circle cx='280' cy='310' r='1.8' opacity='0.9'/><circle cx='380' cy='360' r='1.3' opacity='0.75'/><circle cx='480' cy='310' r='1.5' opacity='0.85'/><circle cx='580' cy='370' r='1.2' opacity='0.7'/><circle cx='680' cy='310' r='1.7' opacity='0.9'/><circle cx='780' cy='370' r='1.3' opacity='0.75'/><circle cx='880' cy='310' r='1.5' opacity='0.85'/><circle cx='980' cy='370' r='1.2' opacity='0.7'/><circle cx='1080' cy='320' r='1.8' opacity='0.9'/><circle cx='1170' cy='360' r='1.3' opacity='0.75'/></g><g stroke='%23ffffff' stroke-width='1.1' opacity='0.9'><line x1='180' y1='110' x2='192' y2='110'/><line x1='186' y1='104' x2='186' y2='116'/><line x1='460' y1='140' x2='472' y2='140'/><line x1='466' y1='134' x2='466' y2='146'/><line x1='720' y1='240' x2='732' y2='240'/><line x1='726' y1='234' x2='726' y2='246'/><line x1='990' y1='110' x2='1002' y2='110'/><line x1='996' y1='104' x2='996' y2='116'/><line x1='320' y1='320' x2='330' y2='320'/><line x1='325' y1='315' x2='325' y2='325'/><line x1='860' y1='340' x2='870' y2='340'/><line x1='865' y1='335' x2='865' y2='345'/></g></svg>");
}

.ff-profile-online-dot {
position: absolute;
    bottom: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: #22c55e;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 8px rgba(34,197,94,0.6);
}

.ff-profile-online-badge {
display: inline-flex;
    align-items: center;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}

.ff-profile-header-body {
padding-top: 8px;
}

.ff-profile-divider {
margin: 2rem 0 1.5rem;
    border-color: var(--ff-border);
    opacity: 0.5;
}

.ff-profile-section-title {
font-size: 1.15rem;
    font-weight: 700;
    color: var(--ff-text-dark);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
}

.ff-physical-grid {
display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}

.ff-phys-card {
border-radius: var(--ff-radius-md);
    border: 1px solid var(--ff-border);
    overflow: hidden;
    background: var(--ff-bg-card);
    box-shadow: var(--ff-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ff-phys-card:hover {
box-shadow: var(--ff-shadow-md);
    transform: translateY(-2px);
}

.ff-phys-card__header {
background: var(--ff-gradient);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ff-phys-card__body {
padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ff-phys-attr {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--ff-border);
    padding-bottom: 6px;
}

.ff-phys-attr:last-child {
border-bottom: none;
    padding-bottom: 0;
}

.ff-phys-attr__label {
color: var(--ff-text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.ff-phys-attr__val {
color: var(--ff-text-dark);
    font-weight: 600;
    text-align: right;
}

.ff-phys-attr__val--yes {
color: #16a34a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ff-phys-attr__val--yes i {
font-size: 0.75rem;
}

.ff-phys-features {
display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--ff-bg-light);
    border-radius: var(--ff-radius-md);
    border: 1px solid var(--ff-border);
}

.ff-phys-features__label {
font-size: 0.82rem;
    font-weight: 700;
    color: var(--ff-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    padding-top: 3px;
}

.ff-phys-features__pills {
display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 768px) {
    .ff-section-lg { padding: 90px 0;
        margin-bottom: -1px; }
}

@media (max-width: 768px) {
    .ff-section { border: none;
    margin-bottom: -1px; }
}

@media (max-width: 768px) {
    .ff-section { padding: 70px 0;
      margin-bottom: -1px; }
}

@media (max-width: 768px) {
    .ff-hero { padding: 110px 0; }
    .ff-early-creators,
  .ff-creators,
  .ff-earnings,
  .ff-safety { padding: 80px 0; }
    .ff-how { padding: 70px 0; }
}

@media (max-width: 768px) {
    .ff-profile-cover { height: 180px; }
    .ff-profile-avatar { width: 96px; height: 96px; }
    .ff-profile-hero { margin-bottom: 58px; }
    .ff-profile-avatar-wrap { bottom: -48px; }
}

@media (max-width: 991px) {
    .ff-physical-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .ff-physical-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────
   REGOLE DA components.css
   ───────────────────────────────────────────────────────────── */

.stats-section {
background: var(--ff-bg-viola); color: #fff;
}

.ff-slider-home {
width: 100%;
  padding: 60px 0;
  background: #0b0b0b;
  overflow-x: hidden;
}

.ff-track-home .swiper-slide {
display: flex;
  justify-content: center;
}

.ff-bg-home {
width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.ff-overlay-home {
position: absolute;
  inset: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  color: white;
  z-index: 2;
}

.ff-price-home {
position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ff-secondary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.ff-name-home {
font-weight: bold;
}

.ff-description-home {
font-size: 12px;
  max-height: 0;
  overflow: hidden;
  transition: 0.3s;
}

.ff-stats-home {
display: flex;
  gap: 8px;
  font-size: 12px;
}

.ff-subscribe-btn-home {
margin-top: 6px;
  padding: 6px;
  background: var(--ff-secondary);
  border: none;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.3s;
}

.ff-controls-home {
display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 100px;
  z-index: 10;
}

.ff-hero__video {
inset: 0;



  background: url("/images/Feetfansly-home-desktop.png") center/cover no-repeat;
}

.ff-nav-btn {
width: 50px;
  height: 50px;
  background: black;
  border: 2px solid white;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.ff-prev-home {
left: 10px;
    display: block;
}

.ff-next-home {
right: 10px;
    display: block;
}

.ff-nav-btn:hover {
background: var(--ff-secondary);
  border: none;
  color: black;
}

.ff-slider-home {
overflow: hidden;
  position: relative;
}

.ff-track-home {
display: flex;
  gap: 20px;
 width: 100%;
  will-change: transform;
}

.ff-live-activity-section {
background: linear-gradient(180deg, #0a0a0a 0%, #111 100%);
}

.ff-live-title {
color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
}

.ff-live-stats {
margin-top: 10px;
}

.ff-live-item {
min-width: 110px;
}

.ff-live-number {
font-size: 2rem;
    font-weight: 700;
    color: #ff2d75;
}

.ff-live-label {
font-size: 0.85rem;
    color: #aaa;
}

.ff-live-note {
font-size: 0.8rem;
    color: #777;
}

.ff-early {
    background: #0f0f0f;
}

.ff-early-card {

    border-radius: 18px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.ff-early-card1 {
    background: rgba(227,13,98,0.05);


}
.ff-early-card2 {
  background: rgba(51,242,118,0.05);

}.ff-early-card3 {
    background: rgba(142,21,234,0.05);

}

.ff-early-card:hover {
    transform: translateY(-5px);
    background: rgba(0,0,0,0.06);
}

.ff-early-icon {
    font-size: 1.8rem;
}

.ff-early-creators {
position: relative;
    padding: 140px 0;
    backdrop-filter: blur(12px);
}

.ff-slider-nav {
display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 50px;
}

.ff-slider-btn {
width: 50px;
    height: 50px;

    background: rgba(0,0,0,0.05);
    border: 1px solid white;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: all 0.3s ease;


    backdrop-filter: blur(10px);
}

.ff-slider-btn:hover {
background: var(--ff-secondary);
  border: none;
  color: black;
}

.ff-prev-home {
left: 10px;
    display: block;
}

.ff-next-home {
right: 10px;
    display: block;
}


/* TRACK SLIDER */


.ff-early-track {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}



.ff-creator-card {
flex: 1;
    display: flex;
    flex-direction: column;
    width: 90%;
    height: 90%;

    background: var(--ff-bg-dark);
    border-radius: var(--ff-radius-md);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(50,50,50,0.06);
    transition: all 0.3s ease;
    cursor: pointer;
}

.ff-creator-card:hover {
transform: translateY(-6px);
    box-shadow: var(--ff-shadow-lg);
    border-color: var(--ff-primary);
}

.ff-creator-card:hover .creator-img img {
transform: scale(1.05);
}

background: rgba(50, 50, 50, 0.65);


.ff-creator-card__header {
display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ff-creator-card__avatar {
width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.ff-creator-card__name {
font-size: 16px;
    font-weight: 600;
    color: var(--ff-text-light);
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.ff-creator-card__name span {
margin-right: 6px;
}

.ff-creator-card__stats {
font-size: 13px;
    color: var(--ff-text-light);
    margin-bottom: 8px;
}

.ff-creator-card__cover {
height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--ff-primary-light);
    position: relative;
}

.ff-creator-card__meta-row {
display: block;
    justify-content: space-between;
    align-items: left;
    margin-bottom: 8px;
    font-size: 11px;
}

.ff-meta-item {
color: var(--ff-text-white);
    font-weight: 500;
}

.ff-meta-item-cat {
color: var(--ff-text-dark);
    background: var(--ff-bg-light);
    border-radius: 50px;
    padding: 1px 10px 1px 10px;
    font-weight: 400;
}

.ff-creator-card__stats {
font-size: 13px;
    color: var(--ff-text-muted);
    margin-bottom: 8px;
}

.ff-creator-card__price {
display: inline-block;
    background: var(--ff-primary-light);
    color: var(--ff-primary);
    font-weight: 600;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: var(--ff-radius-pill);
}

.ff-content-card {
background: var(--ff-bg-card);
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.ff-content-card:hover {
transform: translateY(-2px);
    box-shadow: var(--ff-shadow-md);
}

.ff-content-card__media {
position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.ff-content-card__media img {
width: 100%;
    height: 100%;
    object-fit: cover;

    transition: filter 0.3s ease;
}

.ff-content-card__media img.blurred {
filter: blur(15px);
}

.ff-content-card__overlay {
position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.ff-content-card__price {
background: var(--ff-secondary);
    color: white;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: var(--ff-radius-pill);
}

.ff-content-card__price.free {
background: #28a745;
}

.ff-content-card__type-badge {
background: rgba(255,255,255,0.2);
    color: white;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: var(--ff-radius-sm);
    backdrop-filter: blur(4px);
}

.ff-content-card__body {
padding: 12px;
}

.ff-content-card__title {
font-size: 14px;
    font-weight: 500;
    color: var(--ff-text-dark);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-content-card__meta {
display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--ff-text-muted);
}

.ff-content-card__meta i {
margin-right: 3px;
}

.ff-tag {
display: inline-block;
    background: var(--ff-bg-light);
    color: var(--ff-text-dark);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--ff-radius-pill);
    border: 1px solid var(--ff-border);
    transition: all 0.2s ease;
    cursor: pointer;
}

.ff-tag:hover, .ff-tag.active {
background: var(--ff-primary);
    color: white;
    border-color: var(--ff-primary);
}

.ff-section-title {
font-size: clamp(26px, 4vw, 40px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.5px;

  color: var(--ff-text-white);
    margin-bottom: 8px;
}

.ff-section-subtitle {
font-size: 16px;
    font-weight: 500;

    color:var(--ff-text-white);
    margin-bottom: 32px;
}

.ff-h1 {
font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.ff-h2 {
font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
}

.ff-h3 {
font-size: clamp(20px, 3vw, 28px);
  font-weight: 600;
}

.ff-body {
font-size: 16px;
  line-height: 1.6;
  color: #ddd;
}

.ff-subtext {
font-size: 14px;
  color: #aaa;
}

.ff-micro {
font-size: 13px;
  color: #888;
}

.ff-cta {
font-size: 16px;
  font-weight: 600;
}

.ff-highlight {
background: linear-gradient(90deg, #ff2d75, #ff6a9a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ff-number {
font-size: 1.8rem;
  font-weight: 700;
  color: #ff2d75;
}

.ff-buyer-card {
background: rgba(255,255,255,0.03);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.ff-buyer-card:hover {
transform: translateY(-5px);
  background: rgba(255,255,255,0.06);
}

.ff-pagination .page-link {
color: var(--ff-primary);
    border-radius: var(--ff-radius-sm);
    margin: 0 2px;
    border: 1px solid var(--ff-border);
}

.ff-pagination .page-item.active .page-link {
background-color: var(--ff-primary);
    border-color: var(--ff-primary);
    color: white;
}

.ff-badge-icon-creator {
width: 26px;
    height: 26px;
    border-radius: 14px;
    margin: 8px 4px;
    background: rgba(255,255,255,0.05);
    color: var(--ff-text-white);
}

.ff-new-icon-creator {
width: 26px;
    height: 26px;
    border-radius: 50%;
    margin: 8px 4px;
    background: rgba(255,255,255,0.05);
    color: var(--ff-text-white);
}

.ff-icon-svg {
width: 64px;
    height: 64px;
    display: block;
    margin: 0 auto 12px;
    transition: all 0.3s ease;
    color: var(--ff-secondary);
}

.ff-step__bg-number {
position: absolute;
    top: -10px;
    right: 15px;

    font-size: 5rem;
    font-weight: 800;

    color: rgba(255,255,255,0.06);

    pointer-events: none;
    user-select: none;

    z-index: 0;
}

.ff-step > *:not(.ff-step__bg-number) {
position: relative;
    z-index: 2;
}

.ff-step__bg-number {
text-shadow: 0 0 20px rgba(255,255,255,0.05);
}

.ff-step:hover .ff-step__bg-number {
color: rgba(255,255,255,0.1);
}

.ff-cta-text {
line-height: 2.2!important;
}

.ff-cc {
display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;

   margin-bottom: 0px;
   margin-top: 0px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);

    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    height: 100%;
}

.ff-cc__badge {
position: absolute;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ff-cc__badge--verified {
left: 10px;
    background: var(--ff-primary, #e91e63);
    color: #fff;
}

.ff-cc__badge--early {
right: 10px;
    background: linear-gradient(135deg, #f7971e, #ffd200);
    color: #111;
}

.ff-cc__online-dot {
position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.6rem;
    color: #22c55e;
    filter: drop-shadow(0 0 4px #22c55e);
    animation: ff-cc-pulse 1.8s infinite;
}

.ff-cc__body {
padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.ff-cc__body--minimal {
padding: 6px 4px 6px;
  display: inline-block;
  gap: 6px;
  flex-wrap: wrap;
}

.ff-cc__icon-verified {
color: var(--ff-primary, #e91e63);
    font-size: 0.85rem;
}

.ff-cc__icon-early {
color: #ffd200;
    font-size: 0.85rem;
}

.ff-cc__heart {
color: #ff0000;
       font-size: 0.78rem;
}

.ff-rating {
color: var(--ff-rating);
    font-size: 14px;
}

.ff-rating .empty {
color: #ddd;
}

.ff-cc__rating {
display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
}

.ff-cc__rating-star {
color: #ffd200;
    font-size: 0.78rem;
}

.ff-cc__rating-value {
color: #fff;
    font-weight: 600;
}

.ff-cc__rating-count {
color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
}

.ff-cc__stats {
display: flex;
    gap: 14px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.65);
}

.ff-cc__stat {
display: flex;
    align-items: center;
    gap: 4px;
}

.ff-cc__stat i {
font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
}

.ff-cc__categories {
display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ff-cc__pill {
display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
}

.ff-cc__pill--more {
background: rgba(233,30,99,0.15);
    border-color: rgba(233,30,99,0.3);
    color: #ffffff;
}

.ff-cc__price-row {
margin-top: auto;
}

.ff-cc__price {
font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ff-cc__price--free {
color: #22c55e;
}

.ff-cc__price--paid {
color: rgba(255,255,255,0.75);
}

.ff-cc__cta {
margin-top: 4px;
    font-size: 0.85rem;
}

.ffl-gallery-hero,.ffl-gallery-filters,.ffl-gallery-grid-section,.ffl-hiw-page {
background:#0a0818;color:#fff;position:relative
}

.ffl-gallery-hero::before,.ffl-hiw-page::before {
content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 55% at 50% -5%,rgba(139,92,246,0.28) 0%,transparent 68%),radial-gradient(ellipse 50% 35% at 80% 25%,rgba(233,30,99,0.1) 0%,transparent 60%);pointer-events:none;z-index:0
}

.ffl-gallery-hero .container,.ffl-hiw-page>.container {
position:relative;z-index:1
}

.ffl-gallery-hero {
padding:6rem 0 3rem;text-align:center
}

.ffl-hero-title {
font-family:'Poppins',sans-serif!important;font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;line-height:1.1;margin-bottom:1rem;letter-spacing:-0.3px
}

.ffl-hero-subtitle {
font-size:1rem;color:rgba(255,255,255,0.5);max-width:520px;margin:0 auto;line-height:1.6
}

.ffl-search-bar {
max-width:600px;margin:0 auto
}

.ffl-search-bar__inner {
display:flex;align-items:center;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.14);border-radius:50px;padding:.35rem .35rem .35rem 1.1rem;gap:.5rem;backdrop-filter:blur(10px);transition:border-color .2s
}

.ffl-search-bar__inner:focus-within {
border-color:#e91e63;box-shadow:0 0 0 3px rgba(233,30,99,0.12)
}

.ffl-search-bar__icon {
color:rgba(255,255,255,0.35);font-size:.95rem;flex-shrink:0
}

.ffl-search-bar__input {
flex:1;border:none;outline:none;font-size:.95rem;background:transparent;color:#fff;min-width:0
}

.ffl-search-bar__input::placeholder {
color:rgba(255,255,255,0.3)
}

.ffl-search-bar__btn {
flex-shrink:0;border-radius:50px;padding:.5rem 1.5rem;font-size:.9rem;font-weight:600;background:linear-gradient(135deg,#e91e63,#c2185b);color:#fff;border:none;cursor:pointer;transition:opacity .15s
}

.ffl-search-bar__btn:hover {
opacity:.88
}

.ffl-gallery-filters {
padding:.5rem 0 1.5rem;border-bottom:1px solid rgba(255,255,255,0.06)
}

.ffl-tag-scroll {
display:flex;flex-wrap:wrap;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none
}

.ffl-tag-scroll::-webkit-scrollbar {
display:none
}

.ffl-tag-pill {
display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .9rem;border-radius:50px;border:1.5px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);font-size:.8rem;font-weight:500;color:rgba(255,255,255,0.55);text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s
}

.ffl-tag-pill:hover {
border-color:#e91e63;color:#e91e63;background:rgba(233,30,99,0.1);text-decoration:none
}

.ffl-tag-pill--active {
background:#e91e63!important;border-color:#e91e63!important;color:#fff!important
}

.ffl-tag-count {
font-size:.7rem;opacity:.65
}

.ffl-gallery-grid-section {
padding:2rem 0 5rem;min-height:50vh
}

.ffl-gallery-count {
font-size:.82rem;color:rgba(255,255,255,0.4)!important
}

.ffl-gallery-grid-section .ff-cc {
background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.09)
}

.ffl-gallery-grid-section .ff-content-card {
background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:14px;transition:transform .25s,box-shadow .25s
}

.ffl-gallery-grid-section .ff-content-card:hover {
transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,0.5)
}

.ffl-gallery-grid-section .ff-content-card__body {
background:transparent;padding:10px 12px 12px
}

.ffl-gallery-grid-section .ff-content-card__title {
color:#fff;font-size:.88rem;font-weight:600
}

.ffl-gallery-grid-section .ff-content-card__meta {
color:rgba(255,255,255,0.45);font-size:.75rem
}

.ffl-gallery-grid-section .ff-content-card__meta .fa-heart {
color:#e91e63
}

.ff-content-card__creator {
max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

.ffl-pagination {
display:flex;justify-content:center;padding-top:2.5rem
}

.ffl-pagination__list {
display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0;flex-wrap:wrap
}

.ffl-pagination__btn {
display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 .5rem;border-radius:10px;border:1.5px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.55);font-size:.85rem;font-weight:500;text-decoration:none;transition:border-color .15s,color .15s,background .15s
}

.ffl-pagination__btn:hover {
border-color:#e91e63;color:#e91e63;background:rgba(233,30,99,0.1);text-decoration:none
}

.ffl-pagination__btn--active {
background:#e91e63!important;border-color:#e91e63!important;color:#fff!important;font-weight:700
}

.ffl-pagination__btn--nav {
color:rgba(255,255,255,0.35)
}

.ffl-pagination__ellipsis {
color:rgba(255,255,255,0.25);font-size:.9rem;padding:0 4px;user-select:none
}

.ffl-empty-state {
display:flex;flex-direction:column;align-items:center;padding:5rem 1rem;text-align:center
}

.ffl-empty-state__icon {
font-size:3.5rem;color:rgba(255,255,255,0.1);margin-bottom:1.25rem
}

.ffl-empty-state__title {
font-size:1.2rem;font-weight:600;color:rgba(255,255,255,0.55);margin-bottom:.5rem
}

.ffl-empty-state__sub {
color:rgba(255,255,255,0.3);font-size:.88rem;max-width:360px;margin:0 auto
}

.ffl-hiw-page {
min-height:60vh;padding-top:0
}

.ffl-hiw-nav {
position:sticky;top:70px;z-index:100;background:rgba(10,8,30,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.07)
}

.ffl-hiw-nav__list {
display:flex;align-items:center;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;justify-content:center
}

.ffl-hiw-nav__list::-webkit-scrollbar {
display:none
}

.ffl-hiw-nav__link {
display:block;padding:.85rem 1.2rem;font-size:.82rem;font-weight:500;color:rgba(255,255,255,0.45);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s
}

.ffl-hiw-nav__link:hover,.ffl-hiw-nav__link.active {
color:#fff;border-bottom-color:#e91e63;text-decoration:none
}

.ffl-hiw-section {
padding:5rem 0;position:relative;z-index:1
}

.ffl-hiw-divider {
height:1px;background:rgba(255,255,255,0.06);margin:0 auto;max-width:860px
}

.ffl-hiw-heading {
font-family:'Poppins',sans-serif;font-size:1.45rem;font-weight:700;color:#fff;display:flex;align-items:center
}

.ffl-hiw-heading--hero {
font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;justify-content:center;letter-spacing:-0.3px
}

.ffl-hiw-sub {
font-size:1rem;color:rgba(255,255,255,0.5);max-width:540px;margin:.75rem auto 0;line-height:1.6
}

.ffl-hiw-card {
display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.25rem;border-radius:14px;border:1px solid rgba(255,255,255,0.07);height:100%;transition:transform .2s,box-shadow .2s
}

.ffl-hiw-card:hover {
transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.4)
}

.ffl-hiw-card--buyer {
background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.18)
}

.ffl-hiw-card--creator {
background:rgba(233,30,99,0.08);border-color:rgba(233,30,99,0.18)
}

.ffl-hiw-card__icon {
width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem
}

.ffl-hiw-card__title {
font-weight:600;color:#fff;margin-bottom:4px;font-size:.93rem
}

.ffl-hiw-card__desc {
color:rgba(255,255,255,0.5);font-size:.83rem;line-height:1.55
}

.ffl-hiw-pricing-card {
border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);height:100%;display:flex;flex-direction:column
}

.ffl-hiw-pricing-card__header {
padding:1rem 1.5rem;font-size:.9rem;font-weight:700;color:#fff;display:flex;align-items:center
}

.ffl-hiw-pricing-card__body {
padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;flex:1
}

.ffl-hiw-pricing-card__big {
font-size:1.8rem;font-weight:800;color:#fff
}

.ffl-hiw-pricing-card__desc {
font-size:.84rem;color:rgba(255,255,255,0.5);line-height:1.55;margin:0;flex:1
}

.ffl-hiw-btn {
display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.6rem;border-radius:50px;font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;transition:opacity .15s,transform .1s;border:2px solid transparent
}

.ffl-hiw-btn:hover {
opacity:.88;text-decoration:none
}

.ffl-hiw-btn--primary {
background:linear-gradient(135deg,#e91e63,#c2185b);color:#fff
}

.ffl-hiw-btn--outline {
background:transparent;color:#e91e63;border-color:#e91e63
}

.ffl-hiw-btn--outline:hover {
background:rgba(233,30,99,0.08)
}

.ffl-hiw-faq {
padding:1.1rem 1.25rem;border-radius:12px;background:rgba(255,255,255,0.04);border-left:3px solid #e91e63;margin-bottom:.65rem
}

.ffl-hiw-faq__q {
font-weight:600;color:#fff;margin-bottom:6px;font-size:.93rem;display:flex;align-items:flex-start;gap:.3rem
}

.ffl-hiw-faq__a {
color:rgba(255,255,255,0.5);font-size:.85rem;line-height:1.55;padding-left:1.3rem
}

.ffl-hiw-rules {
display:flex;flex-direction:column;gap:.65rem
}

.ffl-hiw-rule {
display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);color:rgba(255,255,255,0.8);font-size:.9rem;line-height:1.5
}

.ffl-hiw-rule__icon {
color:#22c55e;font-size:1rem;flex-shrink:0;margin-top:2px
}

.ffl-legal-container {
padding-bottom:5rem
}

.ffl-legal-container aside {
min-height:1px
}

.ffl-legal-sidebar {
padding:1.25rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;max-height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(233,30,99,0.3) transparent
}

.ffl-legal-sidebar::-webkit-scrollbar {
width:3px
}

.ffl-legal-sidebar::-webkit-scrollbar-thumb {
background:rgba(233,30,99,0.3);border-radius:4px
}

.ffl-legal-sidebar__title {
font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:1rem
}

.ffl-legal-sidebar__list {
list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px
}

.ffl-legal-sidebar__link {
display:block;padding:.4rem .65rem;border-radius:8px;font-size:.82rem;color:rgba(255,255,255,0.45);text-decoration:none;transition:color .15s,background .15s;border-left:2px solid transparent
}

.ffl-legal-sidebar__link:hover,.ffl-legal-sidebar__link.active {
color:#fff;background:rgba(233,30,99,0.1);border-left-color:#e91e63;text-decoration:none
}

.ffl-legal-sidebar__contact {
border-top:1px solid rgba(255,255,255,0.07);padding-top:1rem
}

.ffl-legal-sidebar__contact-label {
font-size:.7rem;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px
}

.ffl-legal-sidebar__contact-email {
font-size:.8rem;color:#e91e63;text-decoration:none;word-break:break-all
}

.ffl-legal-content {
padding-left:1.5rem
}

.ffl-legal-intro {
padding-top:5rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,0.07)
}

.ffl-legal-section {
padding:3rem 0 1rem;border-bottom:1px solid rgba(255,255,255,0.06)
}

.ffl-legal-section:last-of-type {
border-bottom:none
}

.ffl-legal-section__title {
font-family:'Poppins',sans-serif;font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:2px solid #e91e63;display:inline-block
}

.ffl-legal-block {
margin-bottom:1.5rem
}

.ffl-legal-block__heading {
font-size:.9rem;font-weight:600;color:rgba(255,255,255,0.9);margin-bottom:.4rem
}

.ffl-legal-block p {
font-size:.84rem;color:rgba(255,255,255,0.5);line-height:1.7;margin:0
}

.ffl-legal-list {
margin:.5rem 0 0 0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.3rem
}

.ffl-legal-list li {
font-size:.84rem;color:rgba(255,255,255,0.5);line-height:1.6
}

.ffl-legal-link {
color:#e91e63;text-decoration:none
}

.ffl-legal-link:hover {
color:#ff4081;text-decoration:underline
}

.ffl-legal-contact-box {
margin-top:3rem;padding:1.25rem 1.5rem;border-radius:12px;background:rgba(233,30,99,0.07);border:1px solid rgba(233,30,99,0.2);font-size:.85rem;color:rgba(255,255,255,0.6);line-height:1.7
}

.ffl-contact-card {
background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
}

.ffl-contact-field {
display: flex; flex-direction: column;
}

.ffl-contact-label {
font-size: .85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-bottom: 6px;
}

.ffl-contact-required {
color: #e91e63; margin-left: 2px;
}

.ffl-contact-required-note {
font-size: .78rem; color: rgba(255,255,255,0.35);
}

.ffl-contact-input {
background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: .65rem 1rem;
    color: #fff;
    font-size: .9rem;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    outline: none;
}

.ffl-contact-input::placeholder {
color: rgba(255,255,255,0.3);
}

.ffl-contact-input:focus {
border-color: #e91e63;
    box-shadow: 0 0 0 3px rgba(233,30,99,0.12);
    background: rgba(255,255,255,0.08);
}

.ffl-contact-textarea {
resize: vertical; min-height: 130px;
}

.ffl-contact-info-row {
display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.ffl-contact-info-icon {
width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(233,30,99,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e91e63;
    flex-shrink: 0;
    font-size: .9rem;
}

.ffl-contact-info-label {
font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,0.35);
    margin-bottom: 3px;
}

.ffl-contact-info-value {
font-size: .88rem;
    color: rgba(255,255,255,0.7);
}

.ffl-contact-alert {
padding: 1rem 1.25rem;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 500;
}

.ffl-contact-alert--success {
background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    color: #86efac;
}

.ffl-contact-alert--error {
background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    color: #fca5a5;
}

.footer-social {
opacity:.7;transition:opacity .15s,transform .15s
}

.footer-social:hover {
opacity:1;transform:translateY(-2px)
}

.ff-cc__cover {
width: 100%;
  aspect-ratio: 1 / 1;

  display: block;

  border-radius: 14px;

  overflow: hidden;
  position: relative;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
}

.ff-cc__covercontent {
width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: 14 0 14 0px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    isolation: isolate;
}

.ff-cc__overlay {
position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
  border-radius: inherit;
  color: #fff;
}

.ff-cc__inner {
border-radius: 18px;

    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ff-cc:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.45);
}

.ff-cc__cover-link {
display: block;
    text-decoration: none;
    position: relative;
}

.ff-cc__name {
color: #fff;
    margin: 4px;
    display: flex;
    gap: 6px;
    line-height: 1.3;
    font-size: 14px;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 14px;
}

.ff-cc__name:hover {
background-color: var(--ff-primary, #e91e63);
      transition: all 0.3s ease;
}

.ff-cc__arrow {
font-size: 14px;
  opacity: 0.8;
}

.ff-cc__meta {
font-size: 12px;
  opacity: 0.9;
  display: flex;
  gap: 8px;
  padding: 6px;
}

@media (max-width: 768px) {
    .swiper-slide-active .ff-subscribe-btn-home { opacity: 1;
    transform: translateY(0); }
}

@media (max-width: 768px) {
    .swiper-slide-active .ff-subscribe-btn-home { opacity: 1;
    transform: translateY(0); }
}

@media (max-width: 768px) {
    .ff-hero__video { background: url('/images/feetfansly-hero-home-mobile.png') center/cover no-repeat; }
}

@media (max-width: 768px) {
    .ff-controls-home { display: none; }
}

@media (max-width: 768px) {
    .ff-slider-nav .ff-nav-btn { display: none; }
}

@media (max-width: 768px) {
    .ff-section-title { font-size: 22px; }
    .ff-section-subtitle { font-size: 14px; }
}

@media (max-width:991px) {
    .ffl-legal-content { padding-left:0 }
    .ffl-legal-intro { padding-top:2rem }
}

@media (max-width:575px) {
    .ffl-gallery-hero { padding-top:5rem }
    .ffl-hero-title { font-size:1.8rem }
    .ffl-hiw-heading--hero { font-size:1.8rem }
}


/* ─────────────────────────────────────────────────────────────
   REGOLE DA layout.css
   ───────────────────────────────────────────────────────────── */

.ffl-btn {
position:relative;
        display:inline-flex;
        align-items:center;
        justify-content:center;


        padding-left:30px!important;
        padding-right:30px!important;
        padding-top:  16px;
        padding-bottom: 16px;

        font-weight:500;

        overflow:hidden;
        transition:all .25s ease;
}

.ffl-btn .btn-text {
transition:transform .25s ease;
}

.btn-arrow {
margin-left: 12px;
        transition: transform 0.3s ease;
}

.ffl-btn .btn-arrow {
position:absolute;
        right:8px;

        display:flex;
        align-items:center;
        justify-content:center;

        width:24px;
        height:24px;

        border-radius:50%;
        font-size:18px;

        opacity:0;
        transform:translateX(6px);
        transition:all .25s ease;
}

.ffl-btn:hover .btn-text {
transform:translateX(-6px);
}

.ffl-btn:hover .btn-arrow {
opacity:1;

           transform: translateX(4px);
}

.ffl-outline {
background:transparent;
        border:0.8px solid #fff;
        color:#fff;
}

.ffl-outline:hover {
background:transparent;
        border:0.8px solid #fff;
        color:#fff;

        box-shadow:
            0 0 8px rgba(255,255,255,0.25),
            0 0 16px rgba(255,255,255,0.12);
}

.ffl-outline:hover .btn-arrow {
background:var(--ff-secondary);
        color:#000;
}

.ffl-solid {
background:var(--ff-secondary);
        border:0.8px solid var(--ff-secondary);
        color:#fff;
}

.ffl-solid:hover {
background:var(--ff-secondary);
        border:0.8px solid var(--ff-secondary);
        color:#000;

        box-shadow:
            0 0 8px rgba(255,255,255,0.25),
            0 0 16px rgba(255,255,255,0.12);
}

.ffl-solid:hover .btn-arrow {
background:#000;
        color:var(--ff-secondary);
}

.ffl-btnsm {
position:relative;
        display:inline-flex;
        align-items:center;
        justify-content:center;
}

.stats-section {
position: relative;
    z-index: 5;

    padding-top: 5rem;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    color: #fff;
    background: #000000;
}

.ff-hero {
position: relative;
       height: 80vh;
       display: flex;
       align-items: center;
       justify-content: center;

       overflow: hidden;
       text-align: center;
       z-index: 2


       background: url('/images/Feetfansly-home.png') center/cover no-repeat;
}

.ff-hero__video {
position: absolute;
       top: 50%;
       left: 50%;
       width: 100%;
       height: 100%;
       object-fit: cover;
       overflow-x: hidden;
       transform: translate(-50%, -50%);
       z-index: 1;
       pointer-events: none;
}

.ff-hero__overlay {
position: absolute;
       inset: 0;
       background: linear-gradient(
           to bottom,
           rgba(0,0,0,0.6),
           rgba(0,0,0,0.4)
       );
       z-index: 2;
}

.ff-hero__inner {
position: relative;
       z-index: 3;
       color: #fff;
       text-align: center;
}

.ff-hero__title {
font-size: clamp(2rem, 4vw, 3.2rem);
       font-weight: 700;
       line-height: 1.2;
       margin-bottom: 1rem;
}

.ff-hero__subtitle {
font-size: 1.1rem;
       opacity: 0.85;
       margin-bottom: 2rem;
}

.ff-hero__actions .btn {
transition: all 0.25s ease;
}

.ff-hero__actions .btn:hover {
transform: translateY(-2px);
}

.ff-footer {
background:
        linear-gradient(135deg,#2B1E4B 0%,#3F2A6D 50%,#1C1036 100%);

    color: white;
}

.footer-link {
color: rgba(255,255,255,.7);

    font-size: 14px;

    display: block;

    padding: 4px 0;

    transition: all .2s ease;
}

.footer-link:hover {
color: white;

    padding-left: 4px;
}

.ff-profile-cover {
height: 250px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-color: transparent;

    border-radius: 0 0 var(--ff-radius-lg) var(--ff-radius-lg);

    position: relative;
}

.ff-profile-avatar {
width: 120px;
    height: 120px;

    border-radius: 50%;

    border: none;

    box-shadow: var(--ff-shadow-md);

    object-fit: cover;

    margin-top: -60px;

    background-color: transparent;
}

.ff-profile-avatar--real {
border: 4px solid #fff;

    background-color: var(--ff-bg-light);
}

.ff-profile-cover--default {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='v2a' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%23ff6ad5'/><stop offset='35%' stop-color='%23d946ef'/><stop offset='70%' stop-color='%238b5cf6'/><stop offset='100%' stop-color='%23c4b5fd'/></linearGradient><linearGradient id='v2b' x1='100%' y1='0%' x2='0%' y2='100%'><stop offset='0%' stop-color='%23ff4fa3' stop-opacity='0.55'/><stop offset='50%' stop-color='%23f0abfc' stop-opacity='0.25'/><stop offset='100%' stop-color='%23e9d5ff' stop-opacity='0.55'/></linearGradient><radialGradient id='v2c' cx='30%' cy='40%' r='55%'><stop offset='0%' stop-color='%23ffb1dc' stop-opacity='0.7'/><stop offset='70%' stop-color='%23ff4fa3' stop-opacity='0.08'/><stop offset='100%' stop-color='%23ff4fa3' stop-opacity='0'/></radialGradient><radialGradient id='v2d' cx='75%' cy='60%' r='55%'><stop offset='0%' stop-color='%23e9d5ff' stop-opacity='0.7'/><stop offset='70%' stop-color='%238b5cf6' stop-opacity='0.1'/><stop offset='100%' stop-color='%238b5cf6' stop-opacity='0'/></radialGradient><radialGradient id='bk1' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23ffd1ea' stop-opacity='0.75'/><stop offset='100%' stop-color='%23ffd1ea' stop-opacity='0'/></radialGradient><radialGradient id='bk2' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23e9d5ff' stop-opacity='0.7'/><stop offset='100%' stop-color='%23e9d5ff' stop-opacity='0'/></radialGradient><radialGradient id='bk3' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23fce7f3' stop-opacity='0.85'/><stop offset='100%' stop-color='%23fce7f3' stop-opacity='0'/></radialGradient><radialGradient id='bk4' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23ff8ac6' stop-opacity='0.55'/><stop offset='100%' stop-color='%23ff8ac6' stop-opacity='0'/></radialGradient></defs><rect width='1200' height='400' fill='url(%23v2a)'/><rect width='1200' height='400' fill='url(%23v2b)'/><rect width='1200' height='400' fill='url(%23v2c)'/><rect width='1200' height='400' fill='url(%23v2d)'/><circle cx='90' cy='70' r='80' fill='url(%23bk1)'/><circle cx='240' cy='220' r='100' fill='url(%23bk3)'/><circle cx='380' cy='90' r='70' fill='url(%23bk4)'/><circle cx='520' cy='260' r='90' fill='url(%23bk2)'/><circle cx='660' cy='100' r='60' fill='url(%23bk3)'/><circle cx='780' cy='310' r='110' fill='url(%23bk1)'/><circle cx='920' cy='120' r='80' fill='url(%23bk2)'/><circle cx='1060' cy='280' r='110' fill='url(%23bk3)'/><circle cx='1150' cy='50' r='50' fill='url(%23bk4)'/><circle cx='150' cy='330' r='60' fill='url(%23bk2)'/><circle cx='450' cy='380' r='50' fill='url(%23bk1)'/><circle cx='830' cy='60' r='45' fill='url(%23bk3)'/><path d='M 0 240 Q 300 120 600 220 T 1200 180' stroke='%23ffe6f6' stroke-width='2.5' fill='none' opacity='0.4'/><path d='M 0 90 Q 400 280 800 140 T 1200 260' stroke='%23f0abfc' stroke-width='2' fill='none' opacity='0.35'/><g fill='%23ffffff'><circle cx='60' cy='80' r='1.6' opacity='0.9'/><circle cx='140' cy='160' r='1.2' opacity='0.75'/><circle cx='220' cy='40' r='1.8' opacity='0.9'/><circle cx='310' cy='210' r='1.3' opacity='0.7'/><circle cx='400' cy='60' r='1.5' opacity='0.85'/><circle cx='490' cy='180' r='1.4' opacity='0.8'/><circle cx='580' cy='50' r='1.2' opacity='0.7'/><circle cx='670' cy='210' r='1.7' opacity='0.9'/><circle cx='760' cy='70' r='1.5' opacity='0.85'/><circle cx='850' cy='180' r='1.2' opacity='0.7'/><circle cx='940' cy='60' r='1.8' opacity='0.9'/><circle cx='1030' cy='200' r='1.3' opacity='0.75'/><circle cx='1120' cy='90' r='1.5' opacity='0.85'/><circle cx='1180' cy='180' r='1.2' opacity='0.7'/><circle cx='80' cy='300' r='1.4' opacity='0.8'/><circle cx='180' cy='370' r='1.2' opacity='0.7'/><circle cx='280' cy='310' r='1.8' opacity='0.9'/><circle cx='380' cy='360' r='1.3' opacity='0.75'/><circle cx='480' cy='310' r='1.5' opacity='0.85'/><circle cx='580' cy='370' r='1.2' opacity='0.7'/><circle cx='680' cy='310' r='1.7' opacity='0.9'/><circle cx='780' cy='370' r='1.3' opacity='0.75'/><circle cx='880' cy='310' r='1.5' opacity='0.85'/><circle cx='980' cy='370' r='1.2' opacity='0.7'/><circle cx='1080' cy='320' r='1.8' opacity='0.9'/><circle cx='1170' cy='360' r='1.3' opacity='0.75'/></g><g stroke='%23ffffff' stroke-width='1.1' opacity='0.9'><line x1='180' y1='110' x2='192' y2='110'/><line x1='186' y1='104' x2='186' y2='116'/><line x1='460' y1='140' x2='472' y2='140'/><line x1='466' y1='134' x2='466' y2='146'/><line x1='720' y1='240' x2='732' y2='240'/><line x1='726' y1='234' x2='726' y2='246'/><line x1='990' y1='110' x2='1002' y2='110'/><line x1='996' y1='104' x2='996' y2='116'/><line x1='320' y1='320' x2='330' y2='320'/><line x1='325' y1='315' x2='325' y2='325'/><line x1='860' y1='340' x2='870' y2='340'/><line x1='865' y1='335' x2='865' y2='345'/></g></svg>");
}

.ff-content-detail__media {
border-radius: var(--ff-radius-md);

    overflow: hidden;

    max-height: 600px;
}

.ff-content-detail__media img {
width: 100%;

    object-fit: contain;
}

.ff-content-detail__media img.locked {
filter: blur(20px);

    pointer-events: none;

    user-select: none;
}

.ff-unlock-overlay {
position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    z-index: 10;
}

.ff-unlock-btn {
background: var(--ff-gradient);

    color: white;

    border: none;

    border-radius: var(--ff-radius-pill);

    padding: 14px 32px;

    font-weight: 600;

    font-size: 16px;

    box-shadow: var(--ff-shadow-primary);

    transition: all .3s ease;
}

.ff-unlock-btn:hover {
transform: scale(1.05);
}

.ff-step {
text-align: center;

    padding: 8px;
}

.ff-step__icon {
width: 80px;
    height: 80px;

    border-radius: 14px;

background: rgba(255, 255, 255, 0.04);

    color: var(--ff-primary);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 28px;

    margin: 0 auto 16px;
}

.ff-step__number {
font-size: 14px;

    font-weight: 600;

    color: var(--ff-secondary);

    margin-bottom: 8px;
}

.ff-safety-card {
background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);


    border-radius: 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 28px 20px;

    transition: all 0.4s ease;
}

.ff-safety-card:hover {
transform: translateY(-6px);

    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.ff-safety-card h6 {
color: #fff;
}

.ff-safety-card p {
color:#fff;
}

.ff-safety-card__icon {
width: 54px;
    height: 54px;
    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);

    transition: all 0.3s ease;
}

.ff-safety-card__icon i {
font-size: 1.9rem;
    color: #ffffff;
    transition: all 0.3s ease;
}

.ff-categories {
background:#ffffff;
}

.ff-category-card {
display:flex;
    align-items:center;
    justify-content:center;

    height:120px;

    background:#fff;
    border-radius:16px;
    text-decoration:none;

    box-shadow:0 10px 25px rgba(0,0,0,0.06);
    transition:all .25s ease;
}

.ff-category-card:hover {
transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(0,0,0,0.1);
}

.ff-category-name {
font-weight:600;
    font-size:16px;
    color:#333;
}

@media (max-width: 767.98px) {
    .btn-mobile-sm { padding: 0.65rem 0.55rem !important;
        font-size: 0.875rem !important; }
}

@media (max-width: 768px) {
    .stats-section { //  margin-top: -50px; /* riduci lo spostamento su mobile */
        padding-top: 3rem;
      //  transform: translateY(30px); }
}

@media (max-width: 768px) {
    .ff-hero__video { display: none; }
}

@media (max-width:768px) {
    .ff-hero { background-image: url('/images/feetfansly-hero-home-mobile.png') center/cover no-repeat;
        min-height: 80vh; }
    .ff-hero__title { font-size: 2rem; }
    .ff-hero__content { margin-bottom: 40px; }
}

@media (max-width:768px) {
    .ff-profile-cover { height: 180px; }
    .ff-profile-avatar { width: 90px;
        height: 90px;

        margin-top: -45px; }
}



/* ═════════════════════════════════════════════════════════════
   REGOLE UTILITY AGGIUNTIVE
   (classi custom senza prefisso ff-/ffl- ma usate dalle
   pagine pubbliche — clonate da site/components/layout)
   ═════════════════════════════════════════════════════════════ */

/* ─── da site.css ─── */

.saint-george {
font-family: 'Saint George', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.logo-feet {
color: var(--ff-secondary);
    transition: color .3s ease;
}

.logo-fansly {
color: var(--accent-color);
    transition: color .3s ease;
}

.custom-toggler {
border: none;
    background: transparent;
    width: 32px;
    height: 24px;
    position: relative;
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
        transform .45s cubic-bezier(.22,1,.36,1);
}

.custom-toggler:hover {
transform: scale(1.1) rotate(2deg);
}

.custom-toggler:active {
transform: scale(.92) rotate(-2deg);
}

.toggler-line {
position: relative;
    display: block;
    width: 100%;
    height: 3px;
    margin: 6px 0;
    border-radius: 4px;

    background: #ffffff;

    transition:
        background-color .4s cubic-bezier(.22,1,.36,1),
        transform .5s cubic-bezier(.22,1,.36,1),
        opacity .3s ease,
        box-shadow .4s ease;
}

.custom-toggler.active {
transform: rotate(180deg);
}

.custom-toggler.active .toggler-line:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}

.custom-toggler.active .toggler-line:nth-child(2) {
opacity: 0;
    transform: scaleX(.5);
}

.custom-toggler.active .toggler-line:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}

.custom-toggler::after {
content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ff-secondary-soft) 0%, transparent 70%);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}

.custom-toggler:active::after {
opacity: 1;
    transform: scale(1.2);
}

.custom-toggler:focus,
.custom-toggler:active,
.custom-toggler:focus-visible {
outline: none !important;
    box-shadow: none !important;
}

.section-bg-nero {
background: #0b0b0b;
        margin-bottom: -1px;
}

.section-bg-dark {
  min-height: 100vh;
  background: #0B0B0B;
background: linear-gradient(180deg,rgba(11, 11, 11, 1) 0%, rgba(3, 2, 5, 0.93) 3%, rgba(43, 30, 75, 1) 50%, rgba(11, 11, 11, 1) 90%);

}

/* ─── da layout.css ─── */

.logo-img {
height: 56px;
       width: auto;
       background: rgba(255, 255, 255, 0.0);
       padding: 2px;
       border-radius: 50%;
       object-fit: contain;
       display: block;
}

.logo-text {
display: flex;
       align-items: center;
       white-space: nowrap;
}


.toggler-line {
background-color: #ffffff;
    transition: background-color .35s ease, box-shadow .35s ease;
}

.navbar.scrolled .toggler-line {
background-color: var(--ff-secondary);
    box-shadow: 0 0 10px var(--ff-secondary-glow);
}

.navbar.scrolled .custom-toggler:not(.active) .toggler-line {
animation: glowPulse 2.8s ease-in-out infinite;
}

.custom-toggler.toggler-scrolled .toggler-line {
background-color: var(--ff-secondary);
    box-shadow: 0 0 8px rgba(233,30,99,.25);
}

.glass-card::before {
content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.15),
        transparent
    );

    opacity: 0.3;
    pointer-events: none;
}

.reveal {
opacity: 0;
    transform: translateY(30px);
}

.reveal.active {
opacity: 1;
    transform: translateY(0);
    transition: all 0.7s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.delay-1 {
transition-delay: 0.15s;
}

.delay-2 {
transition-delay: 0.3s;
}

/* ─── da components.css ─── */

.glass-card {
position: relative;
    padding: 1.5rem 1rem;
    margin: 0 8px;

    border-radius: 18px;


    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);


    box-shadow: 0 10px 30px rgba(0,0,0,0.4);

    transition: all 0.3s ease;
}

.glass-card:hover {
transform: translateY(-6px) scale(1.02);

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.earlyCreatorsSwiper .glass-card {
height: 100%;
    min-height: 220px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 0.8px solid var(--ff-secondary);
}

.earlyCreatorsSwiper .glass-card:hover {
transform: translateY(-6px) scale(1.02);
    border-color: var(--ff-secondary);
}

.earlyCreatorsSwiper .swiper-slide-active .glass-card {
transform: scale(1.04);
}

.titolo-home {
color: var(--ff-text-white);
     line-height: 1.7;
}

.reveal {
opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

.reveal.active {
opacity: 1;
  transform: translateY(0);
}

.feature-box {
background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
    cursor: pointer;

    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-radius: 18px;

}

.feature-box i {
font-size: 1.9rem;
    color: #ffffff;
    margin-top: 2px;
      margin-right: 8px;

      width: 54px;
      height: 54px;

      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.06);
      transition: all 0.3s ease;
}

.feature-box strong {
display: inline-block;
}

.feature-box:hover {
transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.feature-box:hover i {
transform: scale(1.1);
}

.icon-wrap {
width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;

    text-align: center;

    font-size: 30px;
    color: #7b2cff;
    margin-bottom: 12px;

}

.icon-wrap i {
font-size: 1.9rem;
    color: #ffffff;
    transition: all 0.3s ease;
}

.feature-card:hover .icon-wrap {
background: rgba(255, 255, 255, 0.12);
    transform: scale(1.05);
}

.step-item.active {
border: 1px solid rgba(155, 93, 229, 0.4);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
    .feature-card .icon-wrap { display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    margin-right: 10px; }
}


/* CARD BASE */
/* =========================
   SECTION BASE
========================= */
.ff-early-creators {
    position: relative;
}

.ff-section-title {
    font-size: 2rem;
    font-weight: 700;
}

.ff-section-subtitle {
    font-size: 1rem;
    opacity: 0.85;
}

.ff-highlight {
    color: #7b2cff;
}


/* =========================
   SLIDER WRAPPER
========================= */
.ff-cards-wrapper {
    width: 100%;
    overflow: hidden;
}

/* TRACK */
.ff-slider-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    cursor: grab;
    scrollbar-width: none;
    scroll-padding-left: 12.5%;
    padding: 36px;
}


/* nasconde scrollbar */
.ff-slider-track::-webkit-scrollbar {
    display: none;
}

/* drag state */
.ff-slider-track.dragging {
    cursor: grabbing;
}


/* =========================
   SLIDE
========================= */
.ff-card-slide {
    flex: 0 0 90%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 0 8px;
}

/* desktop: leggero peek */
@media (min-width: 992px) {
    .ff-card-slide {
        flex: 0 0 75%;
    }
}


/* =========================
   CARD
========================= */
.ff-early-card-horizontal {
    border-radius: 18px;

    padding: 32px 24px;
    min-height: 320px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

-webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    }

/* hover solo desktop */
@media (hover: hover) {
    .ff-early-card-horizontal:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.35);
    }
}


/* =========================
   TYPOGRAPHY CARD
========================= */
.ff-early-card-horizontal h5 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.ff-early-card-horizontal p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.75;
}


/* =========================
   DOT INDICATORS
========================= */
.ff-slider-dots {
    margin-top: 16px;
}

.ff-slider-dots .dot {
    display: inline-block;
    height: 8px;
    width: 8px;
    margin: 0 5px;

    background: rgba(123, 44, 255, 0.3);
    border-radius: 50%;

    transition: all 0.3s ease;
}

.ff-slider-dots .dot.active {
    width: 14px;
    height: 14px;
    background: #7b2cff;
}


/* =========================
   CTA MOBILE
========================= */
.ff-cta-mobile {
    margin-top: 20px;
}


/* =========================
   OPTIONAL VISUAL VARIANTS
========================= */
/*.ff-early-card1 {
    border-top: 3px solid #7b2cff;
}

.ff-early-card2 {
    border-top: 3px solid #ff6a00;
}

.ff-early-card3 {
    border-top: 3px solid #00c2ff;
}*/


.big {
  font-size: 24px;
  font-weight: 800;
}


/*proof prova visiva sezione 4 home -*/
.ff-proof-card {

    padding: 25px;
    text-align: center;
    background: rgba(51, 242, 118, 0.07);
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border-radius: 18px!important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 👈 NON center */
    align-items: center;
    height: 100%;
    gap: 6px;

}



/* IMPORTO SEMPRE ALLINEATO */
.ff-proof-card .amount {
    margin-bottom: 8px;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ff-primary);
}

/* TESTO NORMALIZZATO */
.ff-proof-card p {
    min-height: 40px; /* 👈 chiave: stessa altezza per tutti */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.ff-live-box {
  background: rgba(51, 242, 118, 0.07);
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  border-radius: 18px!important;
  padding: 20px;
  max-width: 600px;
  margin: auto;
}

.live-header {
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffffff;
}

.live-header .dot {
  width: 10px;
  height: 10px;
  background:#00ff00;
  display: inline-block;
  border-radius: 50%;
  margin-right: 8px;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0.3; }
}

.live-feed {
  text-align: left;
  font-size: 0.9rem;
  color: #fff;
}

.live-item {
  margin-bottom: 8px;
  color: #fff;

}


























/* =============================================================
   NAVBAR BASE
   ============================================================= */

.navbar {
    padding: 12px 0;
    border-bottom: none;
    transition: background-color .3s ease;
    max-width: 100vw;
}

/* Navbar nera default */
.bg-black {
    background-color: var(--ff-bg-viola) !important;
    backdrop-filter: blur(12px);

}

/* Navbar home scroll */
.navbar-home-solid {
    background-color: rgba(43, 30, 75, 0.8) !important;
    backdrop-filter: blur(12px);
    transition: background-color .35s ease;
}

/* Navbar trasparente */
.bg-transparent {
    background-color: transparent !important;
}

/* Navbar home scroll */
.navbar-home-solid {
    background-color: rgba(43, 30, 75, 0.8) !important;
    backdrop-filter: blur(12px);
    transition: background-color .35s ease;
}



/* =============================================================
   NAVBAR BRAND
   ============================================================= */

.navbar-brand {
    font-size: 1.5rem !important;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.navbar-collapse {
    background-color: inherit;
}


/* =============================================================
   NAVBAR ANIMATED MENU
   ============================================================= */

.nav-animated {
    position: relative;
}


.nav-indicator {

    position: absolute;

    height: 38px;

    top: 50%;
    transform: translateY(-50%);

    border-radius: 999px;

    /* più trasparente
    background: rgba(255,255,255,0.45);*/

    background: linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.05)
);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,0.25);

    box-shadow:
        0 6px 18px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.35);

    transition:
        left .45s cubic-bezier(.22,1,.36,1),
        width .45s cubic-bezier(.22,1,.36,1);

    z-index: 0;
    overflow: hidden;
    /* nascosto finché JS non lo posiziona */
    opacity: 0;
}




   /* link sopra indicatore */

   .nav-animated .nav-link {

       position: relative;

       z-index: 1;

       font-weight: 500;
       font-size: 15px;

       padding: 8px 18px !important;

       letter-spacing: .3px;

       color: rgba(255,255,255,0.5) !important;

       transition: color .25s ease;
       /*AGGIUNTO */
       transform: translate(0,0);
       transition:
               color .25s ease,
               transform .15s ease;

   }


       /* hover elegante */
.nav-animated .nav-link:hover {
  color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
}



   .nav-animated .nav-link.active {
       color: #fff !important;

           background: rgba(255, 255, 255, 0.12);
           border: 1px solid rgba(255, 255, 255, 1);
       }



/* togli il focus se link non active */
   .nav-animated .nav-link:focus {
       outline: none;
       box-shadow: none;
   }

   .nav-animated .nav-link:focus:not(:focus-visible) {
       outline: none;
       box-shadow: none;
   }

   .nav-link i {
       opacity: .5;
   }

   .nav-link:hover i {
    opacity: .5;
    color: var(--ff-secondary);
}




   /* =============================================================
      LOGO
      ============================================================= */

   .logo-img {
       height: 56px;
       width: auto;
       background: rgba(255, 255, 255, 0.0);
       padding: 2px;
       border-radius: 50%;
       object-fit: contain;
       display: block;
   }

   .logo-img-small {
       height: 40px;
       width: 40px;
       background: white;
       padding: 4px;
       border-radius: 50%;
   }

   .logo-text {
       display: flex;
       align-items: center;
       white-space: nowrap;
   }

   /* Logo white when navbar transparent */

   .navbar.bg-transparent .logo-feet,
   .navbar.bg-transparent .logo-fansly {
       color: #ffffff;
   }

/* =============================================================
   NAVBAR TOGGLER
   ============================================================= */

.toggler-line {
    background-color: #ffffff;
    transition: background-color .35s ease, box-shadow .35s ease;
}

/* Scroll state */

.navbar.scrolled .toggler-line {
    background-color: var(--ff-secondary);
    box-shadow: 0 0 10px var(--ff-secondary-glow);
}

/* Glow animation */

@keyframes glowPulse {

    0%,100% {
        box-shadow: 0 0 6px var(--ff-secondary-glow);
    }

    50% {
        box-shadow: 0 0 14px var(--ff-secondary-soft);
    }

}

.navbar.scrolled .custom-toggler:not(.active) .toggler-line {
    animation: glowPulse 2.8s ease-in-out infinite;
}

/* Toggler color after scroll */

.custom-toggler.toggler-scrolled .toggler-line {
    background-color: var(--ff-secondary);
    box-shadow: 0 0 8px rgba(233,30,99,.25);
}

/* Navbar shrink */

.navbar-shrink {
    padding-top: .4rem;
    padding-bottom: .4rem;
}



/* =============================================================
   MOBILE NAVBAR
   ============================================================= */

@media (max-width: 992px) {

    #mainNav {
        background-color: rgba(34,5,70,0.7) !important;
        padding: 20px 10px;
        border-radius: 20px;
    }

}

.fw-boldw {
    font-weight: 700;
        color:var(--ff-text-white);
}

.display2 {
    font-weight: 900;
        color:var(--ff-text-white);
}





























/*========================0*/

/* NAVBAR DEFAULT */
#mainNavbar {

    transition: all .3s ease;
    padding-top: 0.5rem;
    /*padding-bottom: 1rem;*/
     padding: .6rem 0;
     transition: background-color .35s ease, backdrop-filter .35s ease;
}

/* SHRINK STATE */
#mainNavbar.navbar-shrink {
    padding-top: .2rem;
    padding-bottom: .4rem;
    backdrop-filter: blur(10px);
}

/* Logo shrink */
#mainNavbar .navbar-brand img {
    height: 48px;
    transition: height .3s ease;
}

#mainNavbar.navbar-shrink .navbar-brand img {
    height: 40px;
}

/* OFFCANVAS CUSTOM ANIMATION */

.offcanvas.offcanvas-end {
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    opacity: 0;
}

.offcanvas.show {
    transform: translateX(0);
    opacity: 1;
}


/* =============================================================
   OFFCANVAS
   ============================================================= */

.offcanvas {
    backdrop-filter: blur(12px);
}

.offcanvas-dark {
    background-color: rgba(25,25,25,0.55) !important;
    backdrop-filter: blur(20px);
    color: white;
}

.offcanvas-dark .nav-link {
    color: white !important;
}

.offcanvas-dark .nav-link:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--ff-secondary) !important;
}

.offcanvas-dark .btn-close {
    filter: invert(1);
}



/* CUSTOM TOGGLER + animazione*/

.custom-toggler {
    border: none;
    background: transparent;
    width: 32px;
    height: 24px;
    position: relative;
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
        transform .45s cubic-bezier(.22,1,.36,1);

}

/* Hover lift */
.custom-toggler:hover {
    transform: scale(1.1) rotate(2deg);
}

/* Click compression */
.custom-toggler:active {
    transform: scale(.92) rotate(-2deg);
}
.toggler-line {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    margin: 6px 0;
    border-radius: 4px;

    background: #ffffff;

    transition:
        background-color .4s cubic-bezier(.22,1,.36,1),
        transform .5s cubic-bezier(.22,1,.36,1),
        opacity .3s ease,
        box-shadow .4s ease;
}


/* TOGGLER ANIMATED STATE */
.custom-toggler.active {
    transform: rotate(180deg);
}

.custom-toggler.active .toggler-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.custom-toggler.active .toggler-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(.5);
}

.custom-toggler.active .toggler-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.custom-toggler::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ff-secondary-soft) 0%, transparent 70%);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}

.custom-toggler:active::after {
    opacity: 1;
    transform: scale(1.2);
}


/* REMOVE TOGGLER FOCUS BORDER */

.custom-toggler:focus,
.custom-toggler:active,
.custom-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/*===================*/



/*====FIX X SCROLL LATERALE =====*/

/* 🔒 FIX GLOBAL OVERFLOW MOBILE */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 🔒 BOX MODEL CORRETTO */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 🔒 PREVIENE SBORDI DA FLEX / GRID */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 🔒 CONTENITORI */
./*container, .container-fluid {
    max-width: 100%;
    overflow-x: hidden;*/
}

/* 🔒 SLIDER FIX */
.ff-track-home {
    width: auto;          /* 🔴 rimuove max-content */
    max-width: 100%;
}

/* 🔒 HERO FIX */
.ff-hero,
.ff-hero__video {
    overflow: hidden;
}

/* 🔒 GRID FIX */
.ff-physical-grid {
    width: 100%;
}