/* Gamer art direction with the spacing and typography of the professional homepage. */
.professional-home {
  --home-bg: #070d17;
  --home-surface: #0d1726;
  --home-border: #213045;
  --home-muted: #a6b3c7;
  --home-accent: #80ceff;
  background-color: var(--home-bg);
  background-image:
    linear-gradient(90deg, rgba(2, 7, 13, .98) 0%, rgba(2, 8, 15, .88) 33%, rgba(2, 8, 15, .34) 64%, rgba(2, 7, 13, .16) 100%),
    linear-gradient(0deg, rgba(2, 7, 13, .8), transparent 42%),
    url("assets/pepeuffmax-profile-simple-bg.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.professional-home::before,
.professional-home::after,
.professional-home #starfield,
.professional-home .scanlines,
.professional-home .topbar::after,
.professional-home .hero::before,
.professional-home .hero-copy::before,
.professional-home h1::after { display: none; }

.professional-home #starfield { display: block; opacity: .16; }
.professional-home .topbar::after { display: block; width: 150px; background: linear-gradient(90deg, #138eff, #65dcff, transparent); box-shadow: 0 0 12px rgba(30, 150, 255, .3); }

.professional-home .site-shell {
  width: min(100%, 1232px);
  min-height: 100svh;
  padding: 0 36px 28px;
  overflow: visible;
}

.professional-home .topbar {
  min-height: 96px;
  padding: 22px 0;
  border-color: var(--home-border);
}

.professional-home .brand { gap: 12px; }
.professional-home .brand img { width: 44px; height: 44px; border: 1px solid #436d95; box-shadow: 0 0 18px rgba(36, 143, 239, .16); }
.professional-home .brand-copy strong { font-size: 20px; font-style: italic; }
.professional-home .brand-copy small { color: var(--home-muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.header-profile { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #cad6e6; font-size: 14px; font-weight: 500; text-decoration: none; }
.header-profile span { color: var(--home-accent); font-size: 20px; }
.header-profile:hover { color: #fff; }
.header-profile:focus-visible { outline: 2px solid var(--home-accent); outline-offset: 5px; border-radius: 4px; }

.professional-home .hero {
  isolation: isolate;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  min-height: 590px;
  padding: 72px 0 80px;
}

.professional-home .hero-copy { width: 100%; min-width: 0; }
.professional-home .eyebrow { color: var(--home-accent); font-size: 12px; font-weight: 600; letter-spacing: .16em; }
.professional-home h1 { max-width: none; margin: 20px 0 22px; color: #f4f7fc; font: 700 clamp(42px, 4.5vw, 64px)/1.04 "Space Grotesk", Inter, sans-serif; letter-spacing: -.045em; text-shadow: 0 6px 24px rgba(0, 0, 0, .22); text-transform: uppercase; text-wrap: balance; }
.professional-home h1 span { color: transparent; background: linear-gradient(105deg, #65d3ff, #388cff 60%, #b3e6ff); background-clip: text; -webkit-background-clip: text; filter: none; }
.professional-home .intro { max-width: 430px; margin: 0; color: var(--home-muted); font-size: 17px; line-height: 1.7; text-shadow: none; }
.professional-home .action-row { display: flex; align-items: center; margin-top: 30px; }
.professional-home .cta { width: 350px; max-width: 100%; min-width: 0; min-height: 76px; padding: 14px 20px 14px 24px; gap: 20px; background: linear-gradient(110deg, #0a9bef, #1a60dd); border: 1px solid #72ceff; border-radius: 9px; box-shadow: 0 8px 28px rgba(17, 114, 225, .24); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); animation: none; transition: background .18s ease, transform .18s ease; }
.professional-home .cta::before { display: none; }
.professional-home .cta:hover { background: linear-gradient(110deg, #19aaff, #286feb); box-shadow: 0 10px 30px rgba(17, 114, 225, .3); filter: none; transform: translateY(-1px); }
.professional-home .cta-label { min-width: 0; gap: 5px; font: 800 14px/1.35 Inter, sans-serif; letter-spacing: .035em; text-align: left; text-shadow: none; }
.professional-home .cta-label small { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.professional-home .cta-arrow { width: 34px; height: 34px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(211, 240, 255, .4); border-radius: 50%; font-size: 25px; }

.collection-facts { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 180px; gap: 12px; margin: 34px 0 0; padding-top: 0; border-top: 0; }
.collection-facts > div { min-width: 0; padding: 14px 16px; border: 1px solid rgba(92, 166, 224, .23); border-radius: 9px; background: rgba(7, 21, 39, .82); }
.collection-facts dt { margin-bottom: 7px; color: var(--home-muted); font-size: 13px; }
.collection-facts dd { margin: 0; color: #e8eef8; font: 600 22px/1.2 "Space Grotesk", Inter, sans-serif; }

.collection-overview { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: stretch; margin-top: 34px; }
.collection-overview .collection-facts { max-width: none; margin: 0; }
.professional-home .home-activity { position: static; z-index: auto; display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 5px 9px; width: auto; min-width: 0; min-height: 78px; margin: 0; padding: 11px 12px; border-radius: 9px; background: rgba(6, 10, 18, .94); box-shadow: none; transform: none; backdrop-filter: none; }
.home-activity .activity-dot { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.home-activity .activity-copy { grid-column: 2; grid-row: 2; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; font-size: 12px; line-height: 1.5; }
.home-activity .activity-copy b { color: #97a8bc; font-weight: 500; }
.professional-home [data-activity-feed] .activity-demo { color: #9badc1; font-size: 12px; line-height: 1.3; letter-spacing: .06em; }
.home-activity .activity-demo { grid-column: 2; grid-row: 1; justify-self: start; padding: 0; background: none; border: 0; }

.professional-home .profile-proof { margin: 0 0 64px; background: linear-gradient(115deg, #081728, var(--home-surface)); border: 1px solid #294767; border-radius: 18px; box-shadow: 0 10px 34px rgba(0, 62, 130, .1); }
.professional-home .profile-proof > a { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); align-items: center; }
.professional-home .profile-proof img { width: 100%; height: auto; border: 0; }
.profile-proof-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px 40px; }
.section-kicker { color: var(--home-accent); font-size: 12px; font-weight: 600; letter-spacing: .13em; }
.profile-proof-copy > strong { color: #f0f5fd; font: 600 clamp(24px, 2.4vw, 30px)/1.15 "Space Grotesk", Inter, sans-serif; letter-spacing: -.035em; }
.profile-proof-description { max-width: 380px; color: var(--home-muted); font-size: 16px; line-height: 1.6; }
.professional-home .profile-proof-action { display: inline-flex; justify-content: flex-start; min-height: 44px; gap: 16px; margin-top: 2px; padding: 8px 0; color: #9dcaff; background: none; border: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-align: left; }
.professional-home .profile-proof-action b { font-size: 20px; }
.professional-home .profile-proof a:hover .profile-proof-action { color: #d1e6ff; filter: none; }

.professional-home .ff-archive { margin: 0 0 64px; padding: 0; overflow: visible; background: none; border: 0; clip-path: none; backdrop-filter: none; }
.professional-home .ff-archive::before { display: none; }
.professional-home .archive-heading { align-items: flex-end; gap: 28px; margin-bottom: 26px; }
.professional-home .archive-heading > div { gap: 12px; }
.professional-home .archive-heading small { color: var(--home-accent); font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.professional-home .archive-heading h2 { max-width: 620px; font: 600 clamp(26px, 2.8vw, 36px)/1.18 "Space Grotesk", Inter, sans-serif; letter-spacing: -.04em; }
.professional-home .archive-heading > span { color: var(--home-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.professional-home .archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 20px; padding: 0; overflow: visible; }
.professional-home .archive-card { aspect-ratio: 1.12; border: 1px solid #294767; border-radius: 14px; clip-path: none; box-shadow: inset 0 1px 0 rgba(117, 212, 255, .08); }
.professional-home .archive-card::after { display: none; }
.professional-home .archive-card::before { background: linear-gradient(transparent 25%, rgba(5, 12, 23, .94)); }
.professional-home .archive-card:hover img { transform: scale(1.025); filter: none; }
.professional-home .archive-overlay { gap: 7px; padding: 22px; }
.professional-home .archive-overlay small { color: #b1d7ff; font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.professional-home .archive-overlay strong { font: 600 clamp(18px, 1.8vw, 23px)/1.15 "Space Grotesk", Inter, sans-serif; letter-spacing: -.02em; }
.professional-home .archive-overlay span { color: #b4c1d3; font-size: 12px; font-weight: 400; letter-spacing: .025em; }
.professional-home footer { align-items: center; padding-top: 24px; border-color: var(--home-border); color: #8e9db2; font-size: 12px; line-height: 1.6; letter-spacing: 0; }
.professional-home footer > span:last-child { max-width: 590px; text-align: right; }

@media (max-width: 900px) {
  .professional-home {
    background-image:
      linear-gradient(90deg, rgba(2, 7, 13, .97), rgba(2, 8, 15, .67) 70%, rgba(2, 7, 13, .42)),
      linear-gradient(0deg, rgba(2, 7, 13, .86), transparent 40%),
      url("assets/pepeuffmax-profile-simple-bg.webp");
    background-position: center, center, 65% center;
  }
  .professional-home .site-shell { padding-inline: 26px; }
  .professional-home .hero { gap: 30px; padding-block: 48px 56px; }
  .professional-home h1 { font-size: clamp(39px, 5vw, 52px); }
  .professional-home .intro { font-size: 16px; }
  .profile-proof-copy { padding: 26px; }
  .professional-home .archive-heading > span { display: none; }
  .professional-home .archive-grid { gap: 14px; }
  .professional-home .archive-overlay { padding: 16px; }
}

@media (max-width: 650px) {
  .collection-overview { grid-template-columns: 86px minmax(0, 1fr); gap: 9px; margin-top: 26px; }
  .professional-home {
    background-image:
      linear-gradient(rgba(2, 7, 13, .78), rgba(2, 7, 13, .97) 68%),
      url("assets/pepeuffmax-profile-simple-bg.webp");
    background-position: center, 78% top;
    background-size: cover, auto 62vh;
    background-attachment: scroll;
  }
  .professional-home #starfield { display: none; }
  .professional-home .site-shell { padding: 0 20px 22px; }
  .professional-home .topbar { min-height: 80px; gap: 16px; padding-block: 17px; }
  .professional-home .brand { gap: 9px; }
  .professional-home .brand img { width: 38px; height: 38px; }
  .professional-home .brand-copy strong { font-size: 17px; }
  .professional-home .brand-copy small { font-size: 12px; letter-spacing: 0; }
  .header-profile { font-size: 13px; gap: 5px; }
  .professional-home .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; padding: 38px 0 42px; }
  .professional-home h1 { margin-block: 16px 18px; font-size: clamp(39px, 9.8vw, 56px); }
  .professional-home .intro { max-width: 460px; font-size: 16px; line-height: 1.6; }
  .professional-home .action-row { margin-top: 24px; }
  .professional-home .cta { width: 100%; min-height: 76px; gap: 16px; padding-inline: 18px; }
  .collection-facts { margin-top: 26px; padding-top: 0; gap: 9px; }
  .collection-facts > div { padding: 12px; }
  .collection-facts dd { font-size: 21px; }
  .professional-home .profile-proof { margin-bottom: 44px; border-radius: 14px; }
  .professional-home .profile-proof > a { grid-template-columns: minmax(0, 1fr); }
  .profile-proof-copy { padding: 24px; }
  .profile-proof-copy > strong { font-size: 28px; }
  .professional-home .ff-archive { margin-bottom: 40px; }
  .professional-home .archive-heading { padding: 0; margin-bottom: 22px; }
  .professional-home .archive-heading h2 { font-size: 28px; }
  .professional-home .archive-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; touch-action: auto; }
  .professional-home .archive-card { aspect-ratio: 1.5; }
  .professional-home .archive-overlay { padding: 22px; }
  .professional-home .archive-overlay strong { font-size: 23px; }
  .professional-home footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .professional-home footer > span:last-child { text-align: left; }
}

@media (max-width: 380px) {
  .professional-home .site-shell { padding-inline: 16px; }
  .professional-home .brand-copy small { display: none; }
  .professional-home .brand-copy strong { font-size: 16px; }
  .header-profile { font-size: 12px; }
  .professional-home h1 { font-size: 38px; }
  .profile-proof-copy { padding: 20px; }
}

/* Professional tutorial dialog: calm hierarchy, clear warning, controlled video size. */
.professional-home .safe-tutorial-dialog {
  width: min(calc(100% - 32px), 520px);
  max-height: min(92svh, 900px);
  margin: auto;
  padding: 30px 28px 24px;
  overflow-y: auto;
  background: linear-gradient(150deg, #0c2238 0%, #071526 52%, #06101d 100%);
  border: 1px solid rgba(105, 191, 255, .46);
  border-radius: 18px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .62), 0 0 42px rgba(23, 143, 236, .14);
}
.professional-home .safe-tutorial-dialog::backdrop { background: rgba(1, 8, 16, .76); backdrop-filter: blur(12px); }
.professional-home .safe-tutorial-dialog .dialog-close { top: 12px; right: 12px; width: 34px; height: 34px; color: #c8d9e8; background: rgba(255, 255, 255, .06); border: 1px solid rgba(159, 210, 248, .18); border-radius: 50%; font-size: 22px; }
.professional-home .safe-tutorial-dialog .dialog-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.professional-home .safe-tutorial-dialog .tutorial-kicker { color: #72ceff; font-size: 10px; letter-spacing: .18em; }
.professional-home .safe-tutorial-dialog h2 { margin: 9px 36px 7px; color: #f3f8ff; font: 700 clamp(24px, 4vw, 31px)/1.05 "Space Grotesk", Inter, sans-serif; letter-spacing: -.035em; text-transform: none; }
.professional-home .safe-tutorial-dialog > .tutorial-intro { margin: 0 auto 18px; color: #a6b9cb; font-size: 13px; line-height: 1.5; }
.professional-home .safe-tutorial-dialog .tutorial-warning { position: relative; gap: 5px 10px; margin: 0 0 14px; padding: 12px 14px 12px 42px; background: rgba(255, 184, 39, .09); border: 1px solid rgba(255, 201, 75, .34); border-left: 3px solid #ffc94d; border-radius: 10px; }
.professional-home .safe-tutorial-dialog .tutorial-warning::before { content: "!"; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; display: grid; place-items: center; transform: translateY(-50%); color: #1b1b16; background: #ffc94d; border-radius: 50%; font: 800 13px/1 Inter, sans-serif; }
.professional-home .safe-tutorial-dialog .tutorial-warning strong { color: #ffd76c; font-size: 10px; letter-spacing: .12em; }
.professional-home .safe-tutorial-dialog .tutorial-warning span { color: #ffeec0; font-size: 12px; line-height: 1.45; }
.professional-home .safe-tutorial-dialog .tutorial-start { min-height: 46px; margin: 0 0 12px; color: #dff5ff; background: rgba(12, 132, 220, .17); border-color: rgba(112, 207, 255, .58); border-radius: 9px; font-size: 11px; letter-spacing: .1em; }
.professional-home .safe-tutorial-dialog .tutorial-start:hover { background: rgba(12, 153, 235, .28); }
.professional-home .safe-tutorial-video-frame { margin-bottom: 16px; border-color: rgba(113, 198, 255, .48); border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, .34); }
.professional-home .safe-tutorial-video-frame video { width: 100%; max-height: 56svh; object-fit: contain; }
.professional-home .safe-tutorial-dialog .tutorial-open { min-height: 56px; border-radius: 9px; box-shadow: 0 10px 24px rgba(0, 119, 255, .24); font-size: 11px; }
.professional-home .safe-tutorial-dialog .tutorial-open:hover { filter: brightness(1.08); }

@media (max-width: 520px) {
  .professional-home .safe-tutorial-dialog { width: calc(100% - 18px); max-height: calc(100dvh - 12px); padding: 25px 16px 16px; border-radius: 14px; }
  .professional-home .safe-tutorial-dialog h2 { margin-inline: 28px; font-size: 24px; }
  .professional-home .safe-tutorial-dialog > .tutorial-intro { font-size: 12px; }
  .professional-home .safe-tutorial-dialog .tutorial-warning { padding-left: 39px; }
  .professional-home .safe-tutorial-dialog .tutorial-warning span { font-size: 11px; }
  .professional-home .safe-tutorial-video-frame video { max-height: 51svh; }
}