/* Billboard Scrolling Text */
.scrolling-text {
  overflow: hidden;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
}
.scrolling-text .rail {
  display: flex;
  min-width: 200vw;
  animation: billboard-marquee 5s linear infinite;
  will-change: transform;
}
@keyframes billboard-marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.scrolling-text .rail h4 {
 white-space: nowrap;
  font-size: 100px;
  font-weight: 900;
  flex-shrink: 0;
  letter-spacing: 0.1em;
  line-height: 1;
  margin: 0 30px 0 0;
  color: #222;
  padding: 0;
}


:root{
  --bg: #f7fafd;
  --panel: #fff;
  --muted: rgba(0,0,0,0.6);
  --accent: #0078d4;
}
*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#f7fafd;
  color:#222;
}

.topbar{display:flex;align-items:center;justify-content:flex-start;padding:16px 24px;background:transparent}

.brand{margin:0;font-size:1.6rem;display:flex;align-items:baseline;gap:8px;margin-left:auto}
.brand small{display:block;font-size:0.6rem;margin-left:6px;color:rgba(255,255,255,0.7)}
.brand letter{font-weight:800;font-size:2rem;line-height:1}

.nav{display:flex;gap:10px;align-items:center;flex:1;background-color: #f7fafd;background-repeat:no-repeat;background-position:center center;background-size:cover;padding:12px 15px;max-height:50px}
.nav a{color:#222;text-decoration:none;padding:8px 12px;border-radius:8px;background:transparent;border:1px solid transparent}
.nav a:hover{background:rgba(0,0,0,0.06)}

.containerMain{
  margin:28px auto;
  padding:0 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  height: auto;
}
.container{
  max-width:1100px;
  margin:28px auto;
  padding:0 18px;
}


.hero{
  padding:28px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent);
  border-radius:12px;
  width:100%;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.headline{margin:0 0 12px 0;font-size:3rem}

.note{color:rgba(0,0,0,0.6)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.features article{background:var(--panel);padding:12px;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}

.footer{padding:18px;text-align:center;color:rgba(0,0,0,0.6)}

/*Bout silver*/
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}

.member{background:var(--panel);padding:14px;border-radius:12px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.member img{width:120px;height:120px;object-fit:cover;border-radius:10px}
.member h4{margin:10px 0 6px}
.member p{color:rgba(0,0,0,0.6);font-size:0.95rem}

/* Join page */
.card{background:var(--panel);padding:20px;border-radius:12px;max-width:600px;margin:18px auto}
.join-card{background:var(--panel);padding:20px;border-radius:12px;margin:18px auto; text-align: center;}
.input-row{display: flex;gap: 10px;max-width: 600px;justify-content: center;margin-left: auto;margin-right: auto;}
.input-row input[type="email"]{flex:1;padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);background:transparent;color:#222}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;background:var(--accent);color:#fff;cursor: pointer;border:none}

.socials{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.socials a, .social-btn{display:flex;align-items:center;gap:10px;color:#222;text-decoration:none;padding:10px;border-radius:8px;background:rgba(0,0,0,0.02);border:1px solid rgba(0,0,0,0.03)}
.social-btn img{width:20px;height:20px;object-fit:cover;border-radius:4px}
.social-btn:hover{background:rgba(0,0,0,0.04)}

/* Gallery & News layout */
.gallery-wrap{display:flex;gap:16px;flex-wrap:wrap}

.sidebar{width:260px;min-width:200px;background:var(--panel);padding:12px;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}

.mainfeed{flex:1;min-width:260px}

.post{display:flex;gap:12px;background:rgba(0,0,0,0.02);padding:12px;border-radius:10px;margin-bottom:12px}
.post img{width:160px;height:100px;object-fit:cover;border-radius:8px}
.post .meta{color:rgba(0,0,0,0.6);font-size:0.85rem}

.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{padding:8px 12px;border-radius:8px;background:transparent;border:1px solid transparent;color:#222;cursor:pointer}
.tab.active{background:rgba(0,0,0,0.06)}

/* Login (Mac-like) */
.login-shell{min-height:70vh;display:flex;align-items:last baseline;justify-content:center; padding: 0px;}
.login-card{width:360px;padding:0px;border-radius:18px;text-align:center}
.login-card h2{margin-top:0}
.login-card input{width:100%;-webkit-backdrop-filter:blur(6px);padding:10px;margin:8px 0;border-radius:8px;border:1px solid rgba(0, 0, 0, 0.08);background:transparent;color:#222;}
.login-btn{padding:10px 14px;border-radius:8px;-webkit-backdrop-filter:blur(6px); background:transparent;color:#222;cursor:pointer;border:none}
.login-card .error{color:#d32f2f;font-size:0.9rem}
.login-image-btn{-webkit-backdrop-filter:blur(6px); background:transparent;color:#222;cursor:pointer;border:none;border-radius: 8px;}
.login-image-btn img{width: 12px; height: 14px; object-fit:contain; border-radius: 4px;}

/* small screens */
@media (max-width:800px){
  .gallery-wrap{flex-direction:column}
  .sidebar{width:100%}
}