/* ═══════════════════════════════════════════
   WELCOME / HERO SCREEN
   ═══════════════════════════════════════════ */
.welcome {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: calc(100vh - 160px);
  padding: 48px 24px 24px;
  text-align: center;
  animation: fadeUp .6s ease;
}
.welcome > * { position: relative; z-index: 1; }
.welcome-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .75;
}
.welcome-photo-wrap {
  position: relative;
  margin-bottom: 20px;
}
.photo-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(0,212,170,.12), rgba(0,212,170,.95), rgba(96,165,250,.9), rgba(0,212,170,.12));
  animation: spinRing 7s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
.welcome-photo {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4aa, #0088ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: #000;
  margin-bottom: 0;
  border: 3px solid var(--accent-border);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,212,170,.2), 0 0 80px rgba(0,212,170,.05);
  position: relative;
  z-index: 1;
}
.welcome-photo img { width: 100%; height: 100%; object-fit: cover; }
.welcome h1 {
  font-size: 28px; font-weight: 700;
  color: var(--text); margin-bottom: 8px; letter-spacing: -.02em;
}
.welcome h1 span { color: var(--accent); }

/* Rotating subtitle */
.welcome-sub {
  font-family: var(--mono); font-size: 13px;
  color: var(--text-muted); margin-bottom: 8px;
  min-height: 20px;
}
.rotating-text {
  display: inline-block;
  color: var(--accent);
  font-weight: 500;
  min-width: 180px;
  text-align: left;
}
.type-cursor {
  display: inline-block;
  color: var(--accent2);
  margin-left: 2px;
  animation: cursorBlink .8s infinite;
}

.welcome-desc {
  font-size: 14px; color: var(--text-muted);
  max-width: 480px; line-height: 1.7; margin-bottom: 32px;
}
.welcome-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 36px; }
.welcome-tag {
  font-family: var(--mono); font-size: 11px;
  background: var(--surface2); color: var(--text-muted);
  border: 1px solid var(--border2); border-radius: 20px;
  padding: 4px 10px;
  transition: all .2s;
}
.welcome-tag:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-dim);
}
.welcome-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 580px;
  margin: -10px 0 26px;
}
.stat-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* Suggestion cards */
.suggestions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; width: 100%; max-width: 580px;
}
.suggestion {
  opacity: 0;
  transform: translateY(10px);
  animation: suggestionIn .45s ease forwards;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  cursor: pointer; text-align: left;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  color: var(--text);
  font-family: var(--font);
}
.suggestion:nth-child(1) { animation-delay: .05s; }
.suggestion:nth-child(2) { animation-delay: .12s; }
.suggestion:nth-child(3) { animation-delay: .19s; }
.suggestion:nth-child(4) { animation-delay: .26s; }
@keyframes suggestionIn {
  to { opacity: 1; transform: translateY(0); }
}
.suggestion:hover {
  background: var(--surface2);
  border-color: var(--accent-border);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(0,212,170,.1);
}
.suggestion .s-icon { font-size: 20px; margin-bottom: 6px; display: block; }
.suggestion .s-text { font-weight: 600; font-size: 13px; color: var(--text); }
.suggestion .s-sub { color: var(--text-muted); font-size: 12px; margin-top: 3px; font-family: var(--mono); }

/* Open to work badge */
.otw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3);
  border-radius: 20px; padding: 4px 12px;
  font-family: var(--mono); font-size: 11px; color: #4ade80;
  margin-bottom: 16px;
}
.otw-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 6px #4ade80;
  animation: pulse 2s infinite; display: inline-block;
}