:root{
  --ease: cubic-bezier(.16,1,.3,1);
  --bg: #ffffff;
  --text: #111111;
  --muted: #6a6a6a;
  --border: rgba(0,0,0,.08);
  --card: rgba(0,0,0,.03);
  --nav-bg: rgba(255,255,255,.72);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

.wrap{ max-width: 980px; margin: 0 auto; padding: 0 22px; }

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(180%) blur(14px);
}
.nav-inner{
  height: 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.nav-links{ display:flex; align-items:center; gap:10px; }
.nav-links a{
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.nav-links a:hover{
  color: var(--text);
  background: rgba(0,0,0,.04);
  transform: translateY(-1px);
}

/* Hero */
.hero{ padding: 92px 0 34px; text-align:center; }
.hero h1{
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 720;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero p{ margin: 14px 0 0; color: var(--muted); font-size: 16px; }

.section{ padding: 22px 0 90px; }
.section-title{ font-size: 18px; margin: 0 0 12px; letter-spacing: -0.01em; }

.grid{ display:grid; grid-template-columns: repeat(12,1fr); gap:14px; }
.card{
  grid-column: span 12;
  display:block;
  text-decoration:none;
  color:inherit;
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  transition: transform .25s var(--ease);
}
.card:hover{ transform: translateY(-4px); }
.card h2{ margin: 0 0 6px; font-size: 16px; letter-spacing: -0.01em; }
.card p{ margin: 0; color: var(--muted); font-size: 14px; }

.footer{ padding: 60px 0 80px; text-align:center; color: var(--muted); font-size: 13px; }

/* Forms */
.form{
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.02);
}
.field{ margin-bottom: 12px; }
.label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:focus{
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #111;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); opacity: .9; }

.note{
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
}

.alert{
  max-width: 560px;
  margin: 0 auto 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,.25);
  background: rgba(220,38,38,.06);
  color: #991b1b;
}

/* Smooth UI reveal (Apple-like) */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.active{
  opacity: 1;
  transform: translateY(0);
}
.reveal-group .reveal{
  transition-delay: calc(var(--i) * 80ms);
}

/* Submit overlay */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(11,11,12,.92);
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(245,245,247,.92);
  z-index: 999;
}
.overlay .overlay-card{
  text-align:center;
  padding: 18px 18px;
}
.overlay .title{
  font-weight: 600;
  letter-spacing: .02em;
}
.overlay .sub{
  margin-top: 8px;
  opacity: .6;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
body.submitting .overlay{ display:flex; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none !important; transform: none !important; opacity: 1 !important; }
  .card{ transition:none !important; }
  .nav-links a{ transition:none !important; }
}




/* Language dropdown */
.lang-dd{ display:inline-flex; align-items:center; }
.lang-select{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  font-size: 13px;
  color: inherit;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
  outline: none;
}
.lang-select:hover{ transform: translateY(-1px); background: rgba(255,255,255,.85); }
.lang-select:focus{ box-shadow: 0 0 0 4px rgba(59,130,246,.18); }


.tw-cursor{display:inline-block;transform:translateY(1px);animation:twblink 1s steps(2,end) infinite;color:var(--ink);}
.tw-cursor.done{opacity:0;animation:none;}
@keyframes twblink{0%,49%{opacity:1}50%,100%{opacity:0}}

.container{max-width:1100px;margin:0 auto;padding:0 18px;}

.notice{padding:10px 12px;border-radius:14px;margin:10px 0;font-size:14px;border:1px solid rgba(0,0,0,.08);}
.notice.success{background:rgba(0,255,120,.08);}
.notice.danger{background:rgba(255,0,80,.06);}

.list{display:flex;flex-direction:column;gap:10px;}
.list-item{display:flex;gap:12px;padding:12px 12px;border-radius:16px;border:1px solid rgba(0,0,0,.06);background:#fff;text-decoration:none;color:inherit;}
.list-item:hover{border-color:rgba(0,0,0,.12);}


/* XenForo-ish profile */
.xf-profile .card{border-radius:22px;}
.xf-cover-banner{position:relative;height:190px;background:radial-gradient(800px 300px at 20% 20%, rgba(0,0,0,.08), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.06), transparent 70%);} 
.xf-cover-blur{position:absolute;inset:-30px;background:radial-gradient(500px 240px at 80% 40%, rgba(0,0,0,.10), transparent 70%);filter:blur(18px);opacity:.9;}
.xf-cover-inner{position:relative;display:flex;gap:18px;align-items:flex-end;padding:18px; height:100%;}
.xf-avatar{width:96px;height:96px;border-radius:26px;background:#f1f3f5;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.08);} 
.xf-avatar img{width:100%;height:100%;object-fit:cover;}
.xf-avatar span{font-size:40px;font-weight:900;color:#98a2ad;}
.xf-cover-meta h1{margin:0;font-size:28px;letter-spacing:-.02em;color:var(--text);} 
.xf-stats{margin-top:10px;display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);} 
.xf-stats div{display:flex;gap:8px;align-items:baseline;padding:8px 10px;border-radius:14px;border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.75);backdrop-filter:blur(10px);} 
.xf-stats b{font-size:18px;color:var(--text);} 
.xf-stats span{font-size:12px;}
.xf-cover-actions{margin-left:auto;display:flex;gap:10px;align-items:center;padding-bottom:8px;}
.xf-tabs{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(0,0,0,.06);background:#fff;}
.xf-tab{padding:10px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:700;}
.xf-tab.active{background:rgba(0,0,0,.06);color:var(--text);} 
.xf-grid{display:grid;grid-template-columns: 320px 1fr; gap:16px; margin-top:16px; align-items:start;}
.xf-side h3{margin:0 0 12px;font-size:14px;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;}
.xf-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(0,0,0,.06);} 
.xf-kv:first-of-type{border-top:none;padding-top:0;}
.xf-kv .k{color:var(--muted);}
.xf-kv .v{color:var(--text);font-weight:700;}
.xf-textarea{width:100%;padding:12px;border-radius:16px;border:1px solid #e6e8eb;resize:vertical;color:var(--text);background:#fff;}
@media (max-width: 920px){.xf-grid{grid-template-columns:1fr;}.xf-cover-inner{align-items:center}.xf-cover-actions{margin-left:0;}}

body{color:var(--text) !important;}
*{color:inherit;}