/* ============================================
   MyFans V2 — MOBILE-FIRST CSS
   Base = mobile, min-width = desktop
   ============================================ */
:root {
    --pink: #D20D93;
    --pink-light: #E91EA3;
    --pink-dark: #B00A7D;
    --magenta: #DB2777;
    --bg: #09090B;
    --bg2: #111113;
    --bg3: #18181B;
    --card: #1C1C20;
    --card-hover: #232328;
    --border: rgba(255,255,255,.08);
    --border-pink: rgba(210,13,147,.25);
    --white: #FFFFFF;
    --gray: #A1A1AA;
    --gray-light: #D4D4D8;
    --gray-dark: #52525B;
    --green: #22C55E;
    --gradient: linear-gradient(135deg, #D20D93 0%, #DB2777 50%, #E91EA3 100%);
    --glow: 0 0 40px rgba(210,13,147,.2);
    --radius: .75rem;
    --radius-lg: 1.25rem;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(.4,0,.2,1);
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:var(--font);background:var(--bg);color:var(--gray-light);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

/* === Layout === */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.container-sm{max-width:720px}
.highlight{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* === Buttons (mobile base) === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;border-radius:99px;transition:all .3s var(--ease);border:2px solid transparent;white-space:nowrap;text-align:center}
.btn-sm{padding:.5rem 1.15rem;font-size:.85rem}
.btn-lg{padding:.8rem 1.75rem;font-size:1rem}
.btn-primary{background:var(--gradient);color:var(--white)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow);filter:brightness(1.1)}
.btn-outline{background:transparent;color:var(--pink);border-color:var(--pink)}
.btn-outline:hover{background:var(--pink);color:var(--white)}
.btn-white{background:var(--white);color:var(--bg);font-weight:800}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(255,255,255,.15)}

/* ============================
   NAVBAR — mobile base
   ============================ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:.6rem 0;background:rgba(9,9,11,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.navbar-container{display:flex;align-items:center;justify-content:space-between}
.logo img{height:26px}
.navbar-right{display:flex;align-items:center;gap:.5rem}
.nav-btn-login{font-size:.82rem;color:var(--gray);font-weight:500;padding:.4rem .6rem;transition:color .2s}
.nav-btn-login:hover{color:var(--white)}
.nav-cta{font-size:.8rem;padding:.45rem 1rem}

/* ============================
   HERO — mobile base (stacked)
   ============================ */
.hero{position:relative;padding:5rem 0 2rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.1}
.orb-1{width:350px;height:350px;background:var(--pink);top:-150px;right:-100px}
.orb-2{width:250px;height:250px;background:var(--magenta);bottom:-80px;left:-100px}
.orb-3{width:200px;height:200px;background:#8B5CF6;top:40%;left:30%;opacity:.06}

.hero-grid{display:flex;flex-direction:column;gap:2rem;position:relative;z-index:2}

.hero-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .85rem;background:rgba(210,13,147,.08);border:1px solid rgba(210,13,147,.2);border-radius:99px;font-size:.75rem;font-weight:600;color:var(--pink-light);margin-bottom:1rem}
.badge-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{opacity:.8;box-shadow:0 0 0 6px rgba(34,197,94,0)}}

.hero h1{font-size:1.65rem;font-weight:900;color:var(--white);line-height:1.12;margin-bottom:1rem;letter-spacing:-.02em}
.hero-sub{font-size:.92rem;color:var(--gray);line-height:1.6;margin-bottom:1.25rem}
.hero-sub strong{color:var(--white)}

/* Trust row */
.trust-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:.75rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.25rem}
.trust-avatars{display:flex}
.t-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.65rem;color:white;margin-right:-6px;border:2px solid var(--bg)}
.trust-stars{font-size:.82rem;color:var(--pink);letter-spacing:1px}
.trust-stars span{color:var(--white);font-weight:700;margin-left:.25rem}
.trust-count{font-size:.72rem;color:var(--gray)}

/* Perks */
.hero-perks{display:flex;flex-direction:column;gap:.45rem}
.perk{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--gray-light)}
.perk svg{width:16px;height:16px;color:var(--green);flex-shrink:0}

/* ============================
   FORM CARD — mobile base
   ============================ */
.form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.4)}
.form-tabs{display:flex;border-bottom:1px solid var(--border)}
.form-tab{flex:1;padding:.75rem;font-size:.85rem;font-weight:600;color:var(--gray);text-align:center;transition:all .2s;position:relative}
.form-tab:hover{color:var(--white)}
.form-tab.active{color:var(--white)}
.form-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--gradient)}
.form-panel{display:none;padding:1.25rem}
.form-panel.active{display:block}
.form-intro{font-size:.85rem;color:var(--gray);margin-bottom:.75rem;text-align:center}
.form-footer{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem;background:rgba(255,255,255,.02);border-top:1px solid var(--border);font-size:.72rem;color:var(--gray-dark)}
.form-footer svg{width:13px;height:13px;color:var(--green)}
.form-loading{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.5rem 0;color:var(--gray);font-size:.82rem}
.spinner{width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Form input styling for injected forms */
#register input,#login input,#register select,#login select,#register textarea,#login textarea{width:100%!important;padding:.7rem .85rem!important;background:var(--bg2)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;color:var(--white)!important;font-size:.88rem!important;font-family:var(--font)!important;transition:border-color .2s!important;margin-bottom:.65rem!important;box-sizing:border-box!important}
#register input:focus,#login input:focus,#register select:focus,#login select:focus{outline:none!important;border-color:var(--pink)!important;box-shadow:0 0 0 3px rgba(210,13,147,.15)!important}
#register input::placeholder,#login input::placeholder{color:var(--gray-dark)!important}
#register button[type="submit"],#login button[type="submit"],#register input[type="submit"],#login input[type="submit"]{width:100%!important;padding:.8rem!important;background:var(--gradient)!important;color:var(--white)!important;border:none!important;border-radius:99px!important;font-size:.95rem!important;font-weight:700!important;cursor:pointer!important;transition:all .3s var(--ease)!important;font-family:var(--font)!important;margin-top:.4rem!important}
#register button[type="submit"]:hover,#login button[type="submit"]:hover,#register input[type="submit"]:hover,#login input[type="submit"]:hover{filter:brightness(1.1)!important;box-shadow:var(--glow)!important}
#register label,#login label{display:block!important;font-size:.78rem!important;font-weight:600!important;color:var(--gray-light)!important;margin-bottom:.3rem!important}
#register a,#login a{color:var(--pink-light)!important;font-size:.82rem!important}

/* ============================
   TICKER
   ============================ */
.ticker-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;padding:.55rem 0}
.ticker-track{overflow:hidden}
.ticker-content{display:flex;gap:2.5rem;animation:scroll-ticker 30s linear infinite;width:max-content}
.ticker-item{white-space:nowrap;font-size:.78rem;color:var(--gray)}
@keyframes scroll-ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============================
   SECTIONS — mobile base
   ============================ */
.section{padding:3rem 0}
.section-dark{background:var(--bg2)}
.section-header{text-align:center;margin-bottom:2rem}
.section-header h2{font-size:1.4rem;font-weight:800;color:var(--white);line-height:1.2;letter-spacing:-.01em}
.section-sub{font-size:.9rem;color:var(--gray);margin-top:.4rem}

/* ============================
   PROFILES — mobile base
   ============================ */
.profiles-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.profile-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s var(--ease)}
.profile-card:hover{border-color:var(--border-pink)}
.profile-img-wrap{position:relative;aspect-ratio:3/4;overflow:hidden}
.profile-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.profile-card:hover .profile-img-wrap img{transform:scale(1.05)}
.profile-badge-online{position:absolute;top:.6rem;left:.6rem;display:flex;align-items:center;gap:.35rem;padding:.2rem .6rem;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border-radius:99px;font-size:.68rem;font-weight:600;color:var(--green)}
.profile-badge-online .badge-dot{width:5px;height:5px}
.profile-info{padding:.75rem .85rem .35rem}
.profile-info h3{font-size:.95rem;font-weight:700;color:var(--white);margin-bottom:.15rem}
.profile-info p{font-size:.75rem;color:var(--gray)}
.profile-cta{margin:.5rem .85rem .85rem;width:calc(100% - 1.7rem)}

/* Blurred profiles */
.profile-blurred .profile-img-wrap img{filter:blur(12px) brightness(.7);transform:scale(1.1)}
.profile-blurred:hover .profile-img-wrap img{filter:blur(12px) brightness(.75);transform:scale(1.15)}
.profile-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.profile-lock svg{width:40px;height:40px;color:rgba(255,255,255,.6);drop-shadow:0 2px 8px rgba(0,0,0,.5)}
.blurred-name{filter:blur(4px);user-select:none;pointer-events:none}
.profiles-cta{text-align:center;margin-top:2rem}

/* ============================
   BENTO GRID — 1 col mobile
   ============================ */
.bento-grid{display:flex;flex-direction:column;gap:1rem}
.bento-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:all .3s var(--ease);position:relative;overflow:hidden}
.bento-card::before{content:'';position:absolute;inset:0;background:var(--gradient);opacity:0;transition:opacity .3s;border-radius:inherit}
.bento-card:hover{border-color:var(--border-pink)}
.bento-card:hover::before{opacity:.04}
.bento-card>*{position:relative;z-index:1}
.bento-icon{width:40px;height:40px;background:rgba(210,13,147,.1);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:.85rem}
.bento-icon svg{width:20px;height:20px;color:var(--pink)}
.bento-card h3{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.35rem}
.bento-card p{font-size:.85rem;color:var(--gray);line-height:1.6}
.bento-stat{display:inline-block;margin-top:.75rem;padding:.3rem .75rem;background:rgba(210,13,147,.08);border:1px solid rgba(210,13,147,.15);border-radius:99px;font-size:.72rem;font-weight:600;color:var(--pink-light)}

/* ============================
   STEPS — vertical mobile
   ============================ */
.steps{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.step{text-align:center;max-width:280px;position:relative}
.step-num{width:36px;height:36px;background:var(--gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:var(--white);margin:0 auto .75rem}
.step-line{display:none}
.step h3{font-size:.95rem;font-weight:700;color:var(--white);margin-bottom:.25rem}
.step p{font-size:.82rem;color:var(--gray)}
.steps-cta{text-align:center;margin-top:2rem}

/* ============================
   STATS — 2 col mobile
   ============================ */
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1rem;justify-items:center}
.stat{text-align:center}
.stat-val{font-size:2.25rem;font-weight:900;color:var(--white);display:inline;line-height:1}
.stat-suffix{font-size:1.25rem;font-weight:800;color:var(--white);display:inline}
.stat-label{font-size:.78rem;color:var(--gray);margin-top:.15rem}
.stat-divider{display:none}

/* ============================
   REVIEWS — 1 col mobile
   ============================ */
.reviews-grid{display:flex;flex-direction:column;gap:1rem}
.review-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;transition:all .3s var(--ease)}
.review-card:hover{border-color:var(--border-pink)}
.review-stars{color:var(--pink);font-size:.85rem;letter-spacing:2px;margin-bottom:.6rem}
.review-card p{font-size:.85rem;color:var(--gray-light);line-height:1.55;margin-bottom:.85rem;font-style:italic}
.review-author{display:flex;align-items:center;gap:.6rem}
.review-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;color:white;flex-shrink:0}
.review-author strong{font-size:.85rem;color:var(--white)}
.review-author small{font-size:.72rem;color:var(--gray)}
.verified{color:var(--green);font-size:.72rem;margin-left:.1rem}

/* ============================
   FAQ — mobile base
   ============================ */
.faq-list{display:flex;flex-direction:column;gap:.5rem}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:var(--border-pink)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.15rem;font-size:.88rem;font-weight:600;color:var(--white);text-align:left;gap:.75rem}
.faq-q:hover{color:var(--pink-light)}
.faq-q svg{width:16px;height:16px;color:var(--gray);transition:transform .3s var(--ease);flex-shrink:0}
.faq-item.open .faq-q svg{transform:rotate(180deg);color:var(--pink)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a p{padding:0 1.15rem 1rem;font-size:.85rem;color:var(--gray);line-height:1.65}
.faq-a strong{color:var(--white)}

/* ============================
   CTA FINAL
   ============================ */
.cta-final{background:var(--gradient);padding:3.5rem 0;text-align:center}
.cta-content{max-width:600px;margin:0 auto}
.cta-logo{margin:0 auto 1.25rem;height:36px;filter:brightness(0) invert(1)}
.cta-content h2{font-size:1.5rem;font-weight:800;color:var(--white);margin-bottom:.6rem}
.cta-content p{color:rgba(255,255,255,.8);font-size:.88rem;margin-bottom:1.5rem}

/* ============================
   FOOTER — 1 col mobile
   ============================ */
.footer{background:var(--bg2);padding:2.5rem 0 1.5rem;border-top:1px solid var(--border)}
.footer-grid{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}
.footer-brand p{color:var(--gray);font-size:.82rem;line-height:1.6;margin-top:.6rem;max-width:280px}
.footer-col h4{color:var(--white);font-size:.82rem;font-weight:700;margin-bottom:.5rem}
.footer-col a{display:block;color:var(--gray);font-size:.82rem;padding:.25rem 0;transition:color .2s}
.footer-col a:hover{color:var(--pink-light)}
.footer-bottom{padding-top:1.5rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--gray-dark);text-align:center}

/* ============================
   TOAST
   ============================ */
.toast{position:fixed;bottom:1rem;left:.75rem;right:.75rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.65rem 1rem;display:flex;align-items:center;gap:.6rem;z-index:998;transform:translateY(120px);opacity:0;transition:all .4s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{transform:translateY(0);opacity:1}
.toast-avatar{font-size:1.15rem}
.toast-body{display:flex;flex-direction:column}
.toast-name{font-size:.8rem;color:var(--white)}
.toast-action{font-size:.72rem;color:var(--gray)}
.toast-time{font-size:.68rem;color:var(--gray-dark);white-space:nowrap;margin-left:auto}

/* ============================
   SCROLL REVEAL
   ============================ */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* ============================================================
   TABLET — min-width: 640px
   ============================================================ */
@media(min-width:640px){
    .container{padding:0 1.5rem}
    .hero h1{font-size:2rem}
    .hero{padding:6rem 0 3rem}
    .trust-row{flex-direction:row;text-align:left;gap:1rem;padding:.85rem 1.15rem}

    .profiles-grid{grid-template-columns:repeat(4,1fr)}

    .bento-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
    .bento-lg{grid-column:span 2}

    .steps{flex-direction:row;gap:0}
    .step{flex:1;padding:0 1rem}
    .step-line{display:block;position:absolute;top:18px;left:calc(50% + 24px);width:calc(100% - 48px);height:2px;background:var(--border)}
    .step:last-child .step-line{display:none}

    .reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}

    .toast{left:1rem;right:auto;max-width:310px}
}

/* ============================================================
   DESKTOP — min-width: 1024px
   ============================================================ */
@media(min-width:1024px){
    .container{padding:0 2rem}
    .logo img{height:32px}
    .nav-cta{font-size:.85rem;padding:.5rem 1.25rem}

    .hero{padding:7rem 0 4rem}
    .hero-grid{flex-direction:row;gap:3.5rem;align-items:center}
    .hero-left{flex:1}
    .hero-right{flex:0 0 420px}
    .hero h1{font-size:2.75rem}
    .hero-sub{font-size:1.05rem}
    .form-card{box-shadow:0 25px 60px rgba(0,0,0,.5),var(--glow)}

    .section{padding:5rem 0}
    .section-header h2{font-size:2.25rem}

    .bento-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
    .bento-card{padding:2rem}
    .bento-card:hover{transform:translateY(-4px)}

    .stats-row{display:flex;justify-content:center;align-items:center;gap:3rem}
    .stat-divider{display:block;width:1px;height:48px;background:var(--border)}
    .stat-val{font-size:3rem}
    .stat-suffix{font-size:1.5rem}

    .reviews-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem}
    .review-card:hover{transform:translateY(-4px)}

    .cta-final{padding:5rem 0}
    .cta-content h2{font-size:2.5rem}
    .cta-logo{height:48px}

    .footer{padding:3.5rem 0 2rem}
}

/* ============================================================
   LARGE DESKTOP — min-width: 1280px
   ============================================================ */
@media(min-width:1280px){
    .hero h1{font-size:3.25rem}
    .hero-right{flex:0 0 460px}
    .hero-grid{gap:4rem}
}