:root{
  --bg1:#6B4EFF;
  --bg2:#8B6CFF;
  --text:#ffffff;
  --muted:rgba(255,255,255,.85);
  --stroke:rgba(255,255,255,.16);
  --card:rgba(0,0,0,.16);
  --btn:#ffffff;
  --btnText:#6B4EFF;
  --shadow: rgba(0,0,0,.25);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family: Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(1000px 650px at 90% 30%, rgba(0,0,0,.22), transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  min-height:100vh;
}

/* ===== WRAP ===== */

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:0 18px 70px;
}

/* ===== NAV ===== */

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 8px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:white;
  font-weight:900;
}

.brandText{
  font-size:1.1rem;
}

.brandLogo{
  width:62px;
  height:62px;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}

.brandLogo img{
  width:46px;
  height:46px;
  object-fit:contain;
}

.navRight{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===== MARKETING NAV ===== */

.marketingNav{
  margin:10px 0 6px;
}

.marketingLinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}

.navLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  white-space:nowrap;
}

.marketingTextLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 14px;
  border-radius:999px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font-weight:800;
  background:transparent;
  border:1px solid transparent;
  white-space:nowrap;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    color .18s ease,
    opacity .18s ease;
}

.marketingTextLink:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.14);
  color:#fff;
  transform:translateY(-1px);
}

/* opzionale: non serve se rimuovi il link corrente, ma lo lasciamo */
.activeMarketingTextLink{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

/* ===== PILLS ===== */

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  color:rgba(255,255,255,.85);
}

/* ===== PANELS ===== */

.panel{
  border-radius:22px;
  padding:26px;
  background:var(--card);
  border:1px solid var(--stroke);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 45px var(--shadow);
}

/* ===== TYPO ===== */

h1{
  margin:10px 0;
  font-size:clamp(2.2rem, 4vw, 3rem);
}

h2{
  margin:0 0 8px;
}

.sub{
  margin:0;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.55;
}

/* ===== BUTTONS ===== */

.btnRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  background:var(--btn);
  color:var(--btnText);
  text-decoration:none;
  font-weight:900;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition:
    transform .18s ease,
    opacity .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:white;
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
  transition:
    transform .18s ease,
    opacity .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.ghost:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.16);
}

/* ===== HERO ===== */

.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
}

/* ===== STACK ===== */

.cardsStack{
  margin-top:16px;
  display:grid;
  gap:14px;
}

.card{
  border-radius:22px;
  padding:18px;
  background:rgba(255,255,255,.09);
  border:1px solid var(--stroke);
}

.mini{
  margin-top:18px;
  border-radius:22px;
  padding:16px;
  background:rgba(0,0,0,.14);
  border:1px solid var(--stroke);
  font-size:14px;
  text-align:center;
}

/* ===== BRAND IMAGE ===== */

.brandImage{
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--stroke);
  padding:14px;
  text-align:center;
}

.brandImage img{
  width:100%;
  max-width:420px;
  border-radius:16px;
  display:block;
  margin:0 auto;
}

/* ===== AUTH ===== */

.authMsg{
  margin-top:10px;
  font-size:13px;
  color:rgba(255,255,255,.85);
  min-height:18px;
}

.note{
  margin-top:16px;
  font-size:13px;
  color:rgba(255,255,255,.78);
}

.hint{
  margin-top:8px;
  font-size:13px;
  color:rgba(255,255,255,.75);
}

/* ===== FOOTER ===== */

.globalFooter{
  text-align:center;
  padding:30px 20px;
  font-size:14px;
}

.globalFooter a{
  color:white;
  text-decoration:none;
}

.globalFooter a:hover{
  text-decoration:underline;
}

/* ===== FEED ===== */

.searchRow{
  margin-top:16px;
}

.search{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  color:white;
}

.search::placeholder{
  color:rgba(255,255,255,.65);
}

.creatorList{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin-top:14px;
}

.creatorCard{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}

.avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* ===== POSTS ===== */

.posts{
  display:grid;
  gap:16px;
  margin-top:16px;
}

.postCard{
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

.postTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.postCreatorPill{
  font-size:13px;
  background:rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:999px;
}

.badge{
  font-size:12px;
  background:rgba(0,0,0,.35);
  padding:5px 8px;
  border-radius:999px;
}

.mediaWrap{
  margin-top:10px;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16/9;
}

.mediaWrap img,
.mediaWrap video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:black;
}

/* ===== DEBUG ===== */

.debug{
  margin-top:10px;
  font-size:12px;
  color:#ffdede;
}

/* ===== MEDIA MODAL ===== */

.mediaModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.mediaModalInner{
  max-width:900px;
  width:90%;
}

.mediaModal img,
.mediaModal video{
  width:100%;
  border-radius:12px;
}

.mediaModalClose{
  position:absolute;
  top:16px;
  right:18px;
  background:none;
  border:none;
  font-size:28px;
  color:white;
  cursor:pointer;
}

/* ===== TABLET / MOBILE ===== */

@media (max-width:920px){
  .hero{
    grid-template-columns:1fr;
  }
}

@media (max-width:820px){
  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .navRight{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .marketingLinks{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }

  .navLink{
    min-width:auto;
  }

  .marketingTextLink{
    height:40px;
    padding:0 12px;
  }
}