/* ============================================================
   Limerly.AI — design system (tema limerly1)
   Estratto dalla grafica .dc.html (grafica_limerly_ai): palette dark
   luxury, Cormorant Garamond + Jost, pill radius, glass header.
   ============================================================ */

:root {
  --bg:        #140b11;   /* fondo principale */
  --bg-alt:    #1a0f16;   /* sezioni alternate */
  --panel:     #1c1018;   /* card / pannelli */
  --panel-2:   #241520;   /* input, bolle "lei" */
  --footer-bg: #100810;
  --text:      #f2e7ed;
  --muted:     #cbb3c0;
  --dim:       #9c8391;
  --faint:     #6e5a65;
  --pink:      #e05a86;
  --pink-dark: #b03d63;
  --gold:      #d4a563;
  --green:     #6fce8f;
  --line:      rgba(255,255,255,0.06);
  --line-2:    rgba(255,255,255,0.09);
  --line-3:    rgba(255,255,255,0.15);
  --grad:      linear-gradient(135deg, #e05a86, #b03d63);
  --serif:     'Cormorant Garamond', serif;
  --sans:      'Jost', sans-serif;
}

html, body { margin: 0; padding: 0; background: var(--bg); }
/* Mai scroll orizzontale: i decori che sbordano (es. il glow della chat mock nella
   home) vengono tagliati invece di allargare la pagina. 'clip' e non 'hidden':
   non crea un contenitore di scroll, quindi l'header sticky continua a funzionare. */
html { overflow-x: clip; }
* { box-sizing: border-box; }
body { color: var(--text); font-family: var(--sans); min-height: 100vh; }
a { text-decoration: none; }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #3a2331; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes msgIn  { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes popIn  { from { opacity: 0; transform: scale(0.94); }      to { opacity: 1; transform: scale(1); } }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- tipografia ---------- */
.serif   { font-family: var(--serif); }
.kicker  { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.h-hero  { font-family: var(--serif); font-size: 72px; font-weight: 500; line-height: 1.04; margin: 0; }
.h-hero em { color: var(--pink); }
.h-sec   { font-family: var(--serif); font-size: 44px; font-weight: 500; margin: 0; }
.h-cta   { font-family: var(--serif); font-size: 52px; font-weight: 500; margin: 0 0 18px; }
.lead    { font-size: 18px; color: var(--muted); line-height: 1.65; }
.note    { font-size: 13px; color: var(--dim); }

/* ---------- bottoni ---------- */
.btn-primary {
  display: inline-block; padding: 15px 34px; background: var(--grad); border: 0;
  border-radius: 999px; color: #fff; font-family: var(--sans); font-size: 15.5px;
  cursor: pointer; box-shadow: 0 6px 28px rgba(224,90,134,0.4);
  white-space: nowrap; text-align: center;   /* il testo di un bottone non va MAI a capo */
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary.sm { padding: 10px 22px; font-size: 14px; box-shadow: 0 4px 18px rgba(224,90,134,0.3); }
.btn-ghost {
  display: inline-block; padding: 15px 34px; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px; color: var(--text); font-size: 15.5px; background: transparent; cursor: pointer;
  white-space: nowrap; text-align: center;
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; padding: 16px 48px;
  background: rgba(20,11,17,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: baseline; gap: 2px; }
.logo .l1 { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--text); }
.logo .l2 { font-family: var(--serif); font-style: italic; font-size: 30px; font-weight: 500; color: var(--pink); }
.logo.sm .l1, .logo.sm .l2 { font-size: 24px; }
.site-nav { display: flex; gap: 32px; align-items: center; }
.site-nav a { color: var(--muted); font-size: 14.5px; }
.site-nav a:hover, .site-nav a.active { color: var(--pink); }
.header-cta { display: flex; gap: 14px; align-items: center; }
.header-cta .login { color: var(--text); font-size: 14.5px; }
.header-cta .login:hover { color: var(--pink); }
/* Loggato: icona account (omino) al posto della scritta; il colore segue .login anche in hover. */
.header-cta .login-ico { display: flex; align-items: center; padding: 4px; }
.lang-select {
  background: transparent; border: 1px solid var(--line-3); border-radius: 999px;
  color: var(--muted); font-family: var(--sans); font-size: 13px; padding: 7px 10px;
  outline: none; cursor: pointer;
}
.lang-select option { background: #241520; }
/* La copia del selettore lingua e la voce "Esci" dentro la nav esistono solo per
   il menu mobile. */
.site-nav .nav-lang, .site-nav .nav-logout { display: none; }
/* Burger del menu mobile: invisibile su desktop, compare (in fondo all'header-cta)
   quando la nav orizzontale viene nascosta dal breakpoint dei 900px. */
.nav-burger { display: none; background: transparent; border: 1px solid var(--line-3);
  border-radius: 10px; color: var(--text); padding: 7px 8px; cursor: pointer; }
.nav-burger:hover { color: var(--pink); border-color: var(--pink); }

/* ---------- footer: logo a sinistra, link al CENTRO, copyright sotto al centro ---------- */
.site-footer { padding: 40px 48px 26px; background: var(--footer-bg); border-top: 1px solid var(--line); }
.site-footer .inner {
  /* griglia 1fr|auto|1fr: la colonna vuota a destra bilancia il logo,
     così i link sono centrati davvero rispetto alla pagina */
  max-width: 1240px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
}
.site-footer .inner .logo { justify-self: start; }
.site-footer nav { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.site-footer nav a { color: var(--dim); font-size: 13.5px; }
.site-footer nav a:hover { color: var(--pink); }
.site-footer .copy { max-width: 1240px; margin: 22px auto 0; text-align: center;
  font-size: 12.5px; color: var(--faint); }
@media (max-width: 700px) {
  .site-footer .inner { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .site-footer .inner .logo { justify-self: center; }
}

/* ---------- contenitori comuni ---------- */
.wrap       { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.card       { background: var(--panel); border: 1px solid var(--line-2); border-radius: 22px; }
.section-alt { border-top: 1px solid rgba(255,255,255,0.05); background: var(--bg-alt); }
.cta-band   {
  padding: 90px 48px; text-align: center;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(224,90,134,0.1), transparent), var(--bg);
}

/* ---------- home: hero + anteprima chat ---------- */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
        max-width: 1240px; margin: 0 auto; padding: 90px 48px 80px; }
.hero-copy { animation: fadeUp 0.8s ease; }
.chat-mock-glow { position: absolute; inset: -40px; border-radius: 50%;
        background: radial-gradient(circle at 60% 40%, rgba(224,90,134,0.12), transparent 70%); }
.chat-mock { position: relative; background: var(--panel); border: 1px solid var(--line-2);
        border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.5); }
.chat-mock .head { padding: 14px 20px; display: flex; align-items: center; gap: 12px;
        border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.avatar-round { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
        justify-content: center; font-family: var(--serif); font-style: italic; font-size: 17px;
        color: rgba(255,255,255,0.9); background: linear-gradient(135deg, #8a2f57, #3d1430); }
.online { font-size: 11.5px; color: var(--green); margin-top: 2px; }
.bubble-her { max-width: 89%; padding: 11px 16px; background: var(--panel-2);
        border: 1px solid var(--line); border-radius: 16px 16px 16px 4px;
        font-size: 14px; line-height: 1.5; color: #ecdde6; }
.bubble-me  { max-width: 89%; padding: 11px 16px;
        background: linear-gradient(135deg, rgba(224,90,134,0.22), rgba(176,61,99,0.18));
        border: 1px solid rgba(224,90,134,0.3); border-radius: 16px 16px 4px 16px;
        font-size: 14px; line-height: 1.5; color: #f7ebf1; }
.msg-row { display: flex; animation: msgIn 0.3s ease; }
.msg-row.me { justify-content: flex-end; }

/* ---------- griglia/filmstrip ragazze (vecchie card compatte, ancora usate altrove) ---------- */
.girls-strip { display: flex; gap: 20px; overflow-x: auto; padding: 6px 48px 20px; }
.girl-card { flex-shrink: 0; width: 240px; color: inherit; border-radius: 18px; overflow: hidden;
        border: 1px solid rgba(255,255,255,0.07); background: var(--panel-2); display: block;
        transition: transform 0.25s ease; }
.girl-card:hover { transform: translateY(-5px); }
.girl-card .portrait { position: relative; height: 240px; display: flex; align-items: center;
        justify-content: center; }
.girl-card .portrait span { font-family: var(--serif); font-style: italic; font-size: 90px;
        color: rgba(255,255,255,0.7); }
.girl-card .meta { padding: 14px 16px 16px; }
.girl-card .meta .name { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.girl-card .meta .tag  { font-size: 12.5px; color: var(--dim); margin-top: 3px; }

/* ---------- card GRANDI delle ragazze (home + galleria), sul design di riferimento:
   foto a tutta card, badge online, nome+età, tratti, descrizione e CTA "Chatta ora" ---------- */
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.gcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
        width: 100%; min-width: 0;   /* la larghezza viene dalla colonna della griglia, non da aspect-ratio+min-height
                                        (altrimenti su mobile le card sborderebbero e si sovrapporrebbero) */
        border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 4.3; min-height: 420px;
        border: 1px solid rgba(255,255,255,0.09); background: var(--panel-2);
        cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.gcard:hover { transform: translateY(-5px); box-shadow: 0 24px 55px rgba(224,90,134,0.18);
        border-color: rgba(224,90,134,0.45); }
.gcard .ph { position: absolute; inset: 0; background-position: center top; background-size: cover;
        display: flex; align-items: center; justify-content: center; transition: transform 0.45s ease; }
.gcard:hover .ph { transform: scale(1.045); }
.gcard .ph span { font-family: var(--serif); font-style: italic; font-size: 110px;
        color: rgba(255,255,255,0.7); }
.gcard .online-badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex;
        align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px;
        background: rgba(10,5,8,0.6); backdrop-filter: blur(6px); font-size: 12.5px;
        font-weight: 500; color: #eee4ea; border: 1px solid rgba(255,255,255,0.08); }
.gcard .online-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
        box-shadow: 0 0 9px rgba(111,206,143,0.95); }
.gcard .gcard-rating { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex;
        align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
        background: rgba(10,5,8,0.6); backdrop-filter: blur(6px); font-size: 12px;
        color: #eee4ea; border: 1px solid rgba(255,255,255,0.08); }
.gcard .gcard-rating .stars { position: relative; display: inline-block; line-height: 1;
        font-size: 14px; letter-spacing: 2px; color: rgba(255,255,255,0.22); }
.gcard .gcard-rating .stars-fg { position: absolute; left: 0; top: 0; overflow: hidden;
        white-space: nowrap; color: #ff3b3b; }
.gcard .gcard-rating .stars-num { letter-spacing: 0; color: #eee4ea; opacity: 0.9; }
.gcard .info { position: relative; z-index: 2; padding: 110px 20px 20px;
        background: linear-gradient(180deg, transparent 0%, rgba(12,6,10,0.35) 30%,
                    rgba(12,6,10,0.85) 55%, rgba(12,6,10,0.97) 100%); }
.gcard .name { font-family: var(--serif); font-size: 30px; font-weight: 700; color: #fff;
        line-height: 1.05; text-shadow: 0 2px 12px rgba(0,0,0,0.55); }
.gcard .name .age { font-family: var(--sans); font-size: 16px; font-weight: 400;
        color: rgba(255,255,255,0.55); margin-inline-start: 8px; }
.gcard .traits { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
        color: var(--pink); margin: 8px 0 6px; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.gcard .desc { font-size: 14px; color: #cfc0c9; line-height: 1.5;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcard .cta { display: flex; margin-top: 16px; }
.gcard .cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
        padding: 13px 0; border-radius: 999px; background: var(--grad); color: #fff;
        font-size: 15px; font-weight: 500; box-shadow: 0 6px 24px rgba(224,90,134,0.4);
        transition: filter 0.2s ease, transform 0.2s ease; }
.gcard .cta a:hover { filter: brightness(1.12); transform: scale(1.02); }
@media (max-width: 700px) { .gcards { grid-template-columns: 1fr 1fr; gap: 14px; }
        .gcard { min-height: 320px; } .gcard .info { padding: 70px 14px 14px; }
        .gcard .name { font-size: 23px; } .gcard .desc { display: none; } }

/* ---------- form (login/register/contact/account) ---------- */
.field label { display: block; font-size: 13px; color: var(--dim); margin: 0 0 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 12px; color: var(--text); font-family: var(--sans); font-size: 14.5px; outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--pink); }
.field { margin-bottom: 18px; }

/* password con icona mostra/nascondi dentro il campo */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px; }
.pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--dim); cursor: pointer;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle .icon-off { display: none; }
.pw-toggle.on .icon-on { display: none; }
.pw-toggle.on .icon-off { display: block; }

/* ---------- responsive base ---------- */
@media (max-width: 900px) {
  .site-header { padding: 14px 20px; }
  /* La nav diventa il pannello del menu mobile, agganciato sotto l'header sticky
     (che è il contenitore posizionato); la apre il burger con la classe .open. */
  .nav-burger { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(20,11,17,0.97); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line); padding: 6px 0 10px; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 24px; font-size: 15.5px; }
  /* L'header stretto deve stare in 344px anche da loggati (lingua, omino, Esci, burger)
     o da ospiti (Entra, Registrati, burger): logo più piccolo, lingua spostata nel
     menu a tendina, niente elementi che sbordano. */
  .logo .l1, .logo .l2 { font-size: 24px; }
  .header-cta .cta-lang, .header-cta .cta-logout { display: none; }
  .site-nav .nav-lang { display: block; padding: 10px 24px 6px; }
  .site-nav .nav-lang .lang-select { width: 100%; }
  /* "Esci" chiude il menu: separato dalle voci di navigazione e in rosa come azione. */
  .site-nav .nav-logout { display: block; margin-top: 6px; border-top: 1px solid var(--line-2);
    padding-top: 14px; color: var(--pink); }
  .hero { grid-template-columns: 1fr; padding: 50px 20px 50px; gap: 40px; }
  .h-hero { font-size: 46px; }
  .h-sec { font-size: 34px; }
  .h-cta { font-size: 36px; }
  .wrap { padding: 0 20px; }
  .girls-strip { padding: 6px 20px 20px; }
  .cta-band { padding: 60px 20px; }
  .site-footer { padding: 30px 20px; }
  /* Bottoni su schermi stretti: meno padding, così il testo (in nowrap) ci sta
     su una riga anche a 344px senza sbordare dal contenitore. */
  .btn-primary, .btn-ghost { padding: 13px 20px; font-size: 14.5px; }
  .btn-primary.sm { padding: 9px 14px; font-size: 13px; }
  .header-cta { gap: 8px; }
}

/* ---------- card "crea la tua fidanzata AI" (griglia gcards, solo aventi diritto) ---------- */
.gcard-create { border: 2px dashed rgba(224,90,134,0.45); background: linear-gradient(180deg,
        rgba(224,90,134,0.05), rgba(212,165,99,0.04)); align-items: center; justify-content: center;
        text-align: center; color: inherit; }
.gcard-create:hover { border-color: rgba(224,90,134,0.8); }
.gcard-create .plus { font-family: var(--serif); font-size: 84px; line-height: 1; color: var(--pink);
        margin-bottom: 14px; }
.gcard-create .txt { display: flex; flex-direction: column; align-items: center; padding: 0 22px; }
.gcard-create .ttl { font-size: 25px; font-weight: 600; line-height: 1.2; margin-bottom: 10px; }
.gcard-create .sub { font-size: 14px; color: var(--muted); line-height: 1.5; }
@media (max-width: 700px) { .gcard-create .plus { font-size: 54px; } .gcard-create .ttl { font-size: 19px; } }

/* ---------- testimonianze home ("Cosa dicono i membri") ---------- */
/* 2 recensioni per riga (2x2): layout stabile a tutte le risoluzioni desktop */
.reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.review { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px;
        border: 1.5px solid rgba(224,90,134,0.30);   /* bordino ben visibile, tinta rosa del brand */
        box-shadow: 0 6px 26px rgba(0,0,0,0.28);
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.review:hover { transform: translateY(-4px); border-color: rgba(224,90,134,0.65);
        box-shadow: 0 16px 42px rgba(224,90,134,0.16); }
.review-stars { color: var(--gold); font-size: 15px; letter-spacing: 3px; }
.review-quote { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.55;
        color: var(--text); font-style: italic; }
.review-quote::before { content: '“'; } .review-quote::after { content: '”'; }
.review-author { margin-top: auto; font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
        color: var(--dim); }
@media (max-width: 700px) { .reviews { grid-template-columns: 1fr; gap: 16px; } }