/* style.css — JBFF theme */
:root {
  --primary: #6D5FB5;
  --muted: #666;
  --bg: #f5f5f5;
  --card-bg: #fff;
  --radius: 12px;
  --shadow: 0 6px 22px rgba(45,45,78,0.08);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

body {
  background: var(--bg);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* loader (used by index.html) */
#loader {
  position:fixed;
  inset:0;
  background:var(--card-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  animation: loaderFade 1.4s ease-out forwards;
  animation-delay: 1.2s;
}
#loader img { width:260px; opacity:0; animation: logoIn 1.1s ease forwards; }
@keyframes logoIn { to { opacity:1; } }
@keyframes loaderFade { to { opacity:0; visibility:hidden; } }

/* card container */
.card {
  max-width:720px;
  margin:40px auto;
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

/* profile card (card.html) */
.profile-card {
  max-width:420px;
  margin:36px auto;
  background:var(--card-bg);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:26px;
  text-align:center;
}

.logo-large { width:150px; border-radius:10px; display:block; margin:8px auto 14px; }

.profile-content h1 { margin:6px 0; font-size:22px; color:#222; }
.muted { color:var(--muted); margin:4px 0; }
.company { font-weight:600; color:#333; }

.small-note { margin-top:10px; font-size:14px; color:#555; }

.actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.action {
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(109,95,181,0.12);
  background:linear-gradient(180deg, white, #fbfbff);
  color:var(--primary);
  box-shadow: 0 2px 8px rgba(109,95,181,0.06);
  font-weight:600;
}
.action-btn { padding:10px 14px; border-radius:10px; cursor:pointer; border:0; background:var(--primary); color:white; font-weight:600; }

.share-note { color:var(--muted); font-size:13px; margin-top:12px; }
@media (max-width:480px){
  .action { flex:1 1 100%; justify-content:center; }
}