/* ===== Reset & Base ===== */
* { box-sizing: border-box; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#f7f7f7;
  color:#111;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }

/* ===== Header ===== */
.header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(247,247,247,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid #e5e5e5;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Brand on the left */
.brand{
  font-weight:600;
  letter-spacing:.5px;
}

/* ===== Nav (center the 4 buttons) ===== */
.nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:22px;
  align-items:center;
}

.nav a{
  font-size:12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity:.45;
  transition: opacity .2s ease;
}

.nav a:hover{ opacity:1; }

/* keep the active one slightly stronger, but still not "highlighted" */
.nav a.active{ opacity:.75; }

/* ===== Main ===== */
.main{
  max-width:760px;
  margin:0 auto;
  padding:40px 20px 80px;
}

/* ===== Sections switching ===== */
.section{ display:none; }
.section.active{ display:block; }

/* ===== Cards ===== */
.card{
  background:#fff;
  border-radius:16px;
  padding:32px;
  margin:0 auto 40px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.content h1{
  margin:0 0 12px 0;
  font-size:28px;
  font-weight:600;
}
.muted{
  color:#666;
  font-size:15px;
  margin-bottom:16px;
}

/* ===== Avatar ===== */
.avatar-wrap{ text-align:center; margin-bottom:24px; }
.avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
}

/* ===== Buttons (Instagram/Support default NOT highlighted) ===== */
.buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

/* Default button: subtle (not highlighted) */
.btn{
  padding:10px 18px;
  border-radius:999px;
  background:transparent;
  color:#111;
  border:1px solid #ddd;
  font-size:14px;
  opacity:.7;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
}

/* Only highlight on hover */
.btn:hover{
  transform: translateY(-1px);
  opacity:1;
  border-color:#bbb;
  background:#fff;
}

/* Ghost style kept (if you still use it somewhere later) */
.btn.ghost{
  background:transparent;
  color:#111;
  border:1px solid #ddd;
  opacity:.7;
}

/* ===== Creative Gallery ===== */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  margin-top:24px;
}
.gallery img{
  width:100%;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  transition: transform .25s ease;
}
.gallery img:hover{ transform: scale(1.02); }

/* ===== Footer (make sure it shows) ===== */
.footer{
  text-align:center;
  padding:40px 0 0;
  color:#888;
  font-size:13px;
}
.footer-inner{ padding-bottom:20px; }
.small{ font-size:13px; }

/* ===== Mobile ===== */
@media (max-width: 600px){
  .content h1{ font-size:24px; }

  .header{
    padding:14px 16px;
  }

  /* On mobile, keep nav centered but smaller gaps */
  .nav{
    gap:14px;
  }

  .nav a{
    font-size:11px;
  }
  /* FORCE footer to show even if some section logic hides stuff */

 .footer{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .card{ padding:24px; }
}