/* ==========================================================================
   Shared profile scaffold
   All templates reuse this exact markup; each template class below only
   changes layout (grid-template-areas/columns), color and type.
   ========================================================================== */
.fp-profile{
  /* Card-scoped colour tokens. Every block inside the card reads these, so a
     dark template only has to redefine them once and all text, borders and
     surfaces follow. Defaults match the light palette. */
  --fpc-text:         var(--fp-ink);
  --fpc-soft:         var(--fp-ink-soft);
  --fpc-dim:          var(--fp-muted);
  --fpc-line:         var(--fp-line);
  --fpc-surface:      var(--fp-paper);
  --fpc-surface-soft: var(--fp-paper-soft);
  --fpc-accent:       var(--fp-brand);
  --fpc-on-accent:    #FFFFFF;

  min-height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  position: relative;
  background: var(--fp-paper);
}
.fp-profile__bg{ position: absolute; inset: 0; z-index: 0; }

.fp-profile__card{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "avatar" "identity" "bio" "socials" "links" "brand";
  justify-items: stretch;
  gap: 16px;
}

.fp-profile__avatar{ grid-area: avatar; justify-self: center; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--fp-paper-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp-profile__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.fp-profile__initial{ font-size: 32px; font-weight: 700; color: var(--fp-muted); }

.fp-profile__identity{ grid-area: identity; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.fp-profile__name{ font-family: var(--fp-font-display); font-size: calc(25px * var(--fp-name-scale, 1)); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.fp-profile__tagline{ font-size: 14px; color: var(--fp-muted); margin: 0; }

.fp-profile__bio{ grid-area: bio; font-size: calc(15px * var(--fp-bio-scale, 1)); line-height: 1.65; color: var(--fp-ink-soft); margin: 0; text-align: center; }


.fp-profile__socials{ grid-area: socials; justify-self: center; display: flex; flex-wrap: wrap; gap: 10px 12px; color: var(--fp-ink-soft); }
.fp-social{ width: calc(36px * var(--fp-icon-scale, 1)); height: calc(36px * var(--fp-icon-scale, 1)); flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--fp-line); transition: border-color .12s, color .12s, background .12s; }
.fp-social svg{ width: calc(15px * var(--fp-icon-scale, 1)); height: calc(15px * var(--fp-icon-scale, 1)); }
.fp-social:hover{ border-color: var(--fp-ink); color: var(--fp-ink); }

.fp-profile__links{ grid-area: links; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.fp-profile__links-title{ display: none; } /* shown only where a template opts in, e.g. Template 1 */
.fp-linkbtn{ display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; border: 1px solid var(--fp-line); border-radius: 10px; font-weight: 600; font-size: 14px; transition: border-color .12s, background .12s, transform .12s; }
.fp-linkbtn:hover{ border-color: var(--fp-brand); background: var(--fp-paper-soft); }
.fp-linkbtn:active{ transform: translateY(1px); }

.fp-profile__brandmark{ grid-area: brand; justify-self: center; margin-top: 4px; font-size: 12px; color: var(--fp-muted); font-weight: 600; }

@media (max-width: 560px){
  .fp-profile__card{ max-width: 100%; }
}

/* ==========================================================================
   Template 1 — Gravatar Card (free)
   A soft floating card on a pale canvas, left-aligned identity block,
   a tight icon row, and a distinct bordered "Links" panel — inspired by
   Gravatar's profile-card layout, redrawn to fit this theme's data.
   ========================================================================== */
.fpt-1.fp-profile{
  background:
    radial-gradient(900px 480px at 50% -10%, #EEF1FC, transparent 60%),
    linear-gradient(180deg, #EEF1FC 0%, #E9ECFB 55%, #E7EAFA 100%);
}

.fpt-1 .fp-profile__card{
  max-width: 440px;
  grid-template-areas: "avatar" "identity" "socials" "bio" "links" "brand";
  justify-items: start;
  gap: 18px;
  background: var(--fp-paper);
  border: 1px solid rgba(20,22,26,.05);
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 20px 40px -20px rgba(36,52,120,.22);
}

.fpt-1 .fp-profile__avatar{
  justify-self: start;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1px solid var(--fp-line);
  background: var(--fp-paper-soft);
}
.fpt-1 .fp-profile__initial{ font-size: 26px; }

.fpt-1 .fp-profile__identity{ align-items: flex-start; text-align: left; gap: 3px; }
.fpt-1 .fp-profile__name{ font-size: calc(24px * var(--fp-name-scale, 1)); letter-spacing: -0.015em; }
.fpt-1 .fp-profile__tagline{ font-size: 13.5px; }

.fpt-1 .fp-badge{ display: none; } /* no tick / badge next to the name */

.fpt-1 .fp-profile__bio{ text-align: left; font-size: calc(14.5px * var(--fp-bio-scale, 1)); }

.fpt-1 .fp-profile__socials{ justify-content: flex-start; gap: 8px; }
.fpt-1 .fp-social{
  width: calc(30px * var(--fp-icon-scale, 1)); height: calc(30px * var(--fp-icon-scale, 1));
  border-color: var(--fp-line);
  background: var(--fp-paper);
  color: var(--fp-ink-soft);
}
.fpt-1 .fp-social:hover{ background: var(--fp-paper-soft); border-color: #c7cdd6; color: var(--fp-ink); }

.fpt-1 .fp-profile__links{
  background: var(--fp-paper-soft);
  border: 1px solid var(--fp-line);
  border-radius: 16px;
  padding: 6px 12px;
  gap: 0;
}
.fpt-1 .fp-profile__links-title{
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fp-muted);
  padding: 12px 4px 8px;
}
.fpt-1 .fp-linkbtn{
  border: none; border-radius: 10px; background: transparent;
  padding: 12px 6px;
}
.fpt-1 .fp-linkbtn + .fp-linkbtn{ border-top: 1px solid var(--fp-line); }
.fpt-1 .fp-linkbtn:hover{ background: rgba(36,81,229,.06); }

.fpt-1 .fp-profile__brandmark{ align-self: center; margin-top: 2px; }

@media (max-width: 480px){
  .fpt-1 .fp-profile__card{ padding: 28px 22px 22px; border-radius: 16px; }
}

/* ==========================================================================
   Template 2 — Framed (free)
   A single restrained line drawn around the content.
   ========================================================================== */
.fpt-2 .fp-profile__card{
  border: 1px solid var(--fp-line);
  border-radius: 18px;
  padding: 44px 34px;
  background: var(--fp-paper);
}

/* ==========================================================================
   Template 3 — Compact List (free)
   Left-aligned, avatar beside the name, links read as a plain list.
   ========================================================================== */
.fpt-3 .fp-profile__card{
  max-width: 440px;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar identity"
    "bio    bio"
    "socials socials"
    "links  links"
    "brand  brand";
  justify-items: start;
  column-gap: 14px;
}
.fpt-3 .fp-profile__avatar{ justify-self: start; width: 56px; height: 56px; }
.fpt-3 .fp-profile__identity{ text-align: left; justify-content: center; }
.fpt-3 .fp-profile__bio{ text-align: left; }
.fpt-3 .fp-profile__linkbtn,
.fpt-3 .fp-linkbtn{ border: none; border-bottom: 1px solid var(--fp-line); border-radius: 0; padding: 12px 2px; }
.fpt-3 .fp-linkbtn:hover{ background: none; border-color: var(--fp-ink); }
.fpt-3 .fp-profile__socials{ justify-content: flex-start; }
/* ==========================================================================
   Template 4 — Editorial Serif (premium)
   Magazine-style name in serif, a single gold hairline as the accent.
   ========================================================================== */
.fpt-4 .fp-profile__name{ font-family: var(--fp-font-serif); font-weight: 600; font-size: calc(34px * var(--fp-name-scale, 1)); }
.fpt-4 .fp-profile__identity{ padding-top: 18px; border-top: 1px solid var(--fp-gold); position: relative; }
.fpt-4 .fp-profile__identity::before{
  content: "";
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 2px; background: var(--fp-gold);
}
.fpt-4 .fp-profile__bio{ font-family: var(--fp-font-serif); font-size: calc(16px * var(--fp-bio-scale, 1)); }
.fpt-4 .fp-linkbtn{ border-radius: 2px; font-family: var(--fp-font-serif); }

/* ==========================================================================
   Template 5 — Midnight Gold (premium)
   Near-black canvas, warm gold as the one accent.
   ========================================================================== */
.fpt-5.fp-profile{ background: #101114; }
.fpt-5 .fp-profile__name{ color: #F5F1E7; }
.fpt-5 .fp-profile__tagline{ color: var(--fp-gold); }
.fpt-5 .fp-profile__bio{ color: #A9ADB4; }
.fpt-5 .fp-profile__avatar{ background: #1B1D22; border: 1px solid rgba(176,138,52,.4); }
.fpt-5 .fp-social{ border-color: #33363D; color: #C7CAD1; }
.fpt-5 .fp-social:hover{ border-color: var(--fp-gold); color: var(--fp-gold); }
.fpt-5 .fp-linkbtn{ background: #1B1D22; border-color: #2B2E35; color: #F5F1E7; }
.fpt-5 .fp-linkbtn:hover{ border-color: var(--fp-gold); background: #202329; }
.fpt-5 .fp-profile__brandmark{ color: #5B5F68; }

/* ==========================================================================
   Template 7 — Aurora Glass (premium)
   Soft gradient mesh behind a frosted panel — the one "loud" template.
   ========================================================================== */
.fpt-7.fp-profile{ background: #0E1020; overflow: hidden; }
.fpt-7 .fp-profile__bg{
  background:
    radial-gradient(600px circle at 15% 10%, rgba(88,101,242,.55), transparent 60%),
    radial-gradient(500px circle at 85% 85%, rgba(176,138,52,.35), transparent 60%),
    radial-gradient(700px circle at 80% 10%, rgba(36,81,229,.4), transparent 55%);
  filter: blur(10px);
}
.fpt-7 .fp-profile__card{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 40px 30px;
}
.fpt-7 .fp-profile__name{ color: #fff; }
.fpt-7 .fp-profile__tagline{ color: rgba(255,255,255,.65); }
.fpt-7 .fp-profile__bio{ color: rgba(255,255,255,.75); }
.fpt-7 .fp-profile__avatar{ border: 2px solid rgba(255,255,255,.35); }
.fpt-7 .fp-social{ border-color: rgba(255,255,255,.25); color: #fff; }
.fpt-7 .fp-social:hover{ background: rgba(255,255,255,.12); }
.fpt-7 .fp-linkbtn{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.fpt-7 .fp-linkbtn:hover{ background: rgba(255,255,255,.16); }
.fpt-7 .fp-profile__brandmark{ color: rgba(255,255,255,.5); }

/* ==========================================================================
   Template 8 — Builder Terminal (premium)
   Monospace, code-block links — built for a technical founder.
   ========================================================================== */
.fpt-8.fp-profile{ background: #0B0D0C; }
.fpt-8 .fp-profile__card{ max-width: 440px; }
.fpt-8 .fp-profile__name{ font-family: var(--fp-font-mono); color: #E9F5EC; font-size: calc(21px * var(--fp-name-scale, 1)); }
.fpt-8 .fp-profile__name::before{ content: "~/ "; color: #4ADE80; }
.fpt-8 .fp-profile__tagline{ font-family: var(--fp-font-mono); color: #7FE3A0; font-size: 13px; }
.fpt-8 .fp-profile__bio{ font-family: var(--fp-font-mono); font-size: calc(13px * var(--fp-bio-scale, 1)); color: #9AA39D; text-align: left; background: #121412; border: 1px solid #23261F; border-radius: 8px; padding: 14px 16px; }
.fpt-8 .fp-profile__avatar{ border-radius: 8px; border: 1px solid #23261F; }
.fpt-8 .fp-social{ border-color: #23261F; color: #9AA39D; border-radius: 6px; }
.fpt-8 .fp-social:hover{ border-color: #4ADE80; color: #4ADE80; }
.fpt-8 .fp-linkbtn{ background: #121412; border: 1px solid #23261F; border-radius: 6px; color: #E9F5EC; font-family: var(--fp-font-mono); }
.fpt-8 .fp-linkbtn::before{ content: "$ "; color: #4ADE80; }
.fpt-8 .fp-linkbtn:hover{ border-color: #4ADE80; }
.fpt-8 .fp-profile__brandmark{ font-family: var(--fp-font-mono); color: #4B534D; }

/* ==========================================================================
   Template 10 — Big Type (premium)
   The name itself is the hero; everything else stays quiet underneath.
   ========================================================================== */
.fpt-10 .fp-profile__card{
  max-width: 520px;
  grid-template-areas: "identity" "avatar" "bio" "socials" "links" "brand";
}
.fpt-10 .fp-profile__name{ font-size: calc(clamp(40px, 8vw, 64px) * var(--fp-name-scale, 1)); line-height: 1; letter-spacing: -0.03em; display: block; }
.fpt-10 .fp-profile__tagline{ font-size: 15px; margin-top: 8px; }
.fpt-10 .fp-profile__avatar{ width: 64px; height: 64px; }


/* ==========================================================================
   NEW PREMIUM DESIGNS (6, 9, 11, 12, 13)
   All single-column, so they hold up in the narrow dashboard preview too.
   ========================================================================== */

/* Shared helper: glass-type templates clip their blurred backgrounds. */
.fpt-6.fp-profile, .fpt-9.fp-profile, .fpt-11.fp-profile, .fpt-12.fp-profile, .fpt-13.fp-profile{ overflow: hidden; }

@keyframes fp-liquid-drift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 4%, 0) scale(1.08); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.03); }
}
@keyframes fp-glow-pulse{
  0%, 100% { box-shadow: 0 0 0 3px rgba(165,180,252,.95), 0 0 26px 6px rgba(99,102,241,.6), 0 0 70px 18px rgba(139,92,246,.35); }
  50%      { box-shadow: 0 0 0 3px rgba(199,210,254,1),   0 0 38px 10px rgba(99,102,241,.75), 0 0 90px 26px rgba(139,92,246,.45); }
}

/* ---------- 6 · Liquid Glass ----------
   Slow-drifting colour "liquid" behind a thick frosted pane with a
   specular highlight along the top edge. */
.fpt-6.fp-profile{ background: #0B1030; }
.fpt-6 .fp-profile__bg{
  background:
    radial-gradient(420px circle at 18% 22%, rgba(34,211,238,.75), transparent 62%),
    radial-gradient(460px circle at 82% 30%, rgba(167,139,250,.75), transparent 62%),
    radial-gradient(480px circle at 55% 88%, rgba(244,114,182,.65), transparent 62%);
  filter: blur(18px) saturate(140%);
  animation: fp-liquid-drift 14s ease-in-out infinite alternate;
}
.fpt-6 .fp-profile__card{
  max-width: 420px;
  padding: 38px 30px 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.07) 55%, rgba(255,255,255,.12));
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 30px 60px -24px rgba(5,8,30,.65);
}
.fpt-6 .fp-profile__avatar{ border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.18); width: 92px; height: 92px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); }
.fpt-6 .fp-profile__initial{ color: #fff; }
.fpt-6 .fp-profile__name{ color: #fff; text-shadow: 0 1px 14px rgba(255,255,255,.25); }
.fpt-6 .fp-profile__tagline{ color: rgba(255,255,255,.78); }
.fpt-6 .fp-profile__bio{ color: rgba(255,255,255,.86); }
.fpt-6 .fp-social{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.fpt-6 .fp-social:hover{ background: rgba(255,255,255,.28); color: #fff; border-color: rgba(255,255,255,.6); }
.fpt-6 .fp-linkbtn{
  color: #fff; border-radius: 999px; padding: 13px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px -12px rgba(0,0,0,.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fpt-6 .fp-linkbtn:hover{ background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.14)); border-color: rgba(255,255,255,.65); }
.fpt-6 .fp-profile__brandmark{ color: rgba(255,255,255,.6); }

/* ---------- 9 · Glass Clear ----------
   Almost fully transparent: a thin bright outline lets the backdrop show
   straight through. */
.fpt-9.fp-profile{
  background:
    radial-gradient(700px circle at 20% 15%, #FFD6A5, transparent 60%),
    radial-gradient(700px circle at 85% 80%, #9BD1FF, transparent 60%),
    linear-gradient(135deg, #FBC2EB 0%, #A6C1EE 100%);
}
.fpt-9 .fp-profile__card{
  max-width: 420px;
  padding: 36px 28px 26px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 18px;
  box-shadow: 0 10px 40px -18px rgba(60,50,120,.35);
}
.fpt-9 .fp-profile__avatar{ background: transparent; border: 2px solid rgba(255,255,255,.85); }
.fpt-9 .fp-profile__initial{ color: #fff; }
.fpt-9 .fp-profile__name{ color: #fff; text-shadow: 0 1px 12px rgba(40,30,90,.35); }
.fpt-9 .fp-profile__tagline{ color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(40,30,90,.3); }
.fpt-9 .fp-profile__bio{ color: #fff; text-shadow: 0 1px 8px rgba(40,30,90,.3); }
.fpt-9 .fp-social{ background: transparent; border: 1.5px solid rgba(255,255,255,.75); color: #fff; }
.fpt-9 .fp-social:hover{ background: rgba(255,255,255,.25); color: #fff; border-color: #fff; }
.fpt-9 .fp-linkbtn{ background: transparent; border: 1.5px solid rgba(255,255,255,.75); border-radius: 12px; color: #fff; text-shadow: 0 1px 6px rgba(40,30,90,.3); }
.fpt-9 .fp-linkbtn:hover{ background: rgba(255,255,255,.22); border-color: #fff; }
.fpt-9 .fp-profile__brandmark{ color: rgba(255,255,255,.85); }

/* ---------- 11 · Glow Bar ----------
   Near-black canvas; identity sits on a neon bar and every link is a
   glowing bar of its own. */
.fpt-11.fp-profile{ background: #07080D; }
.fpt-11 .fp-profile__bg{
  background:
    radial-gradient(520px circle at 50% 0%, rgba(99,102,241,.28), transparent 65%),
    radial-gradient(420px circle at 50% 100%, rgba(34,211,238,.14), transparent 65%);
}
.fpt-11 .fp-profile__card{ max-width: 420px; }
.fpt-11 .fp-profile__avatar{ background: #12131B; border: 1px solid #2A2D3E; }
.fpt-11 .fp-profile__initial{ color: #A5B4FC; }
.fpt-11 .fp-profile__identity{ align-items: center; padding-bottom: 14px; position: relative; width: 100%; }
.fpt-11 .fp-profile__identity::after{
  content: "";
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #6366F1, #22D3EE, transparent);
  box-shadow: 0 0 14px 2px rgba(99,102,241,.7), 0 0 28px 6px rgba(34,211,238,.35);
}
.fpt-11 .fp-profile__name{ color: #F4F5FF; }
.fpt-11 .fp-profile__tagline{ color: #8F94B8; }
.fpt-11 .fp-profile__bio{ color: #A3A8C6; }
.fpt-11 .fp-social{ background: #0E0F17; border-color: #2A2D3E; color: #C7CBEA; }
.fpt-11 .fp-social:hover{ border-color: #6366F1; color: #fff; box-shadow: 0 0 14px rgba(99,102,241,.7); }
.fpt-11 .fp-linkbtn{
  position: relative;
  background: #0E0F17; color: #F4F5FF;
  border: 1px solid rgba(99,102,241,.7);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(99,102,241,.15), 0 0 16px rgba(99,102,241,.45), inset 0 0 14px rgba(99,102,241,.12);
}
.fpt-11 .fp-linkbtn:hover{
  background: rgba(18,19,32,.0); border-color: #22D3EE;
  box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 0 24px rgba(34,211,238,.6), inset 0 0 18px rgba(34,211,238,.14);
}
.fpt-11 .fp-profile__brandmark{ color: #4F5375; }

/* ---------- 12 · Minimal Liquid ----------
   Light and quiet: pale liquid colour behind a soft, milky glass pane. */
.fpt-12.fp-profile{ background: #F6F5FB; }
.fpt-12 .fp-profile__bg{
  background:
    radial-gradient(380px circle at 15% 20%, rgba(196,181,253,.75), transparent 62%),
    radial-gradient(380px circle at 88% 30%, rgba(167,243,208,.7), transparent 62%),
    radial-gradient(420px circle at 50% 95%, rgba(254,215,170,.75), transparent 62%);
  filter: blur(22px);
  animation: fp-liquid-drift 18s ease-in-out infinite alternate;
}
.fpt-12 .fp-profile__card{
  max-width: 400px;
  padding: 38px 30px 26px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 34px;
  box-shadow: inset 0 1px 0 #fff, 0 24px 50px -28px rgba(80,70,140,.35);
}
.fpt-12 .fp-profile__avatar{ background: rgba(255,255,255,.7); border: 3px solid #fff; box-shadow: 0 10px 24px -10px rgba(80,70,140,.4); }
.fpt-12 .fp-profile__name{ font-weight: 600; font-size: calc(23px * var(--fp-name-scale, 1)); }
.fpt-12 .fp-profile__tagline{ color: #6B6F82; }
.fpt-12 .fp-profile__bio{ color: #4B4F63; font-size: calc(14.5px * var(--fp-bio-scale, 1)); }
.fpt-12 .fp-social{ background: rgba(255,255,255,.75); border-color: #fff; box-shadow: 0 4px 12px -6px rgba(80,70,140,.35); }
.fpt-12 .fp-social:hover{ background: #fff; border-color: #fff; }
.fpt-12 .fp-linkbtn{
  border-radius: 999px; padding: 13px 20px; font-weight: 500;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  border: 1px solid #fff;
  box-shadow: 0 8px 20px -12px rgba(80,70,140,.45);
}
.fpt-12 .fp-linkbtn:hover{ background: #fff; border-color: #fff; }

/* ---------- 13 · Glow DP ----------
   The avatar is the hero: a big photo with a pulsing indigo halo. */
.fpt-13.fp-profile{ background: #0A0B14; }
.fpt-13 .fp-profile__bg{
  background:
    radial-gradient(360px circle at 50% 14%, rgba(99,102,241,.42), transparent 66%),
    radial-gradient(520px circle at 50% 110%, rgba(139,92,246,.2), transparent 65%);
}
.fpt-13 .fp-profile__card{ max-width: 400px; gap: 20px; }
.fpt-13 .fp-profile__avatar{
  width: 108px; height: 108px;
  background: #14162A; border: none;
  box-shadow: 0 0 0 3px rgba(165,180,252,.95), 0 0 26px 6px rgba(99,102,241,.6), 0 0 70px 18px rgba(139,92,246,.35);
  animation: fp-glow-pulse 4.5s ease-in-out infinite;
  margin-top: 6px;
}
.fpt-13 .fp-profile__initial{ color: #C7D2FE; font-size: 40px; }
.fpt-13 .fp-profile__name{ color: #fff; text-shadow: 0 0 22px rgba(129,140,248,.55); }
.fpt-13 .fp-profile__tagline{ color: #A5B4FC; }
.fpt-13 .fp-profile__bio{ color: #A9AEC9; }
.fpt-13 .fp-social{ background: rgba(255,255,255,.04); border-color: #2C2F52; color: #C7CBEA; }
.fpt-13 .fp-social:hover{ border-color: #818CF8; color: #fff; box-shadow: 0 0 14px rgba(129,140,248,.6); }
.fpt-13 .fp-linkbtn{ background: rgba(255,255,255,.04); border: 1px solid #2C2F52; color: #EEF0FF; border-radius: 14px; }
.fpt-13 .fp-linkbtn:hover{ border-color: #818CF8; background: rgba(99,102,241,.14); box-shadow: 0 0 20px rgba(99,102,241,.4); }
.fpt-13 .fp-profile__brandmark{ color: #4A4E77; }

@media (prefers-reduced-motion: reduce){
  .fpt-6 .fp-profile__bg, .fpt-12 .fp-profile__bg, .fpt-13 .fp-profile__avatar{ animation: none; }
}

/* ==========================================================================
   Banner (image above the avatar) — used when a founder uploads one.
   Drawn across the top of the card; the card gets extra top padding so the
   avatar overlaps the banner's bottom edge. Hidden on Big Type (10), whose
   layout puts the name first.
   ========================================================================== */
.fp-profile{ --fp-banner-h: 120px; --fp-ring: #FFFFFF; }
.fpt-5{ --fp-ring: #101114; }
.fpt-6, .fpt-7, .fpt-9{ --fp-ring: rgba(255,255,255,.35); }
.fpt-8{ --fp-ring: #0B0D0C; }
.fpt-11{ --fp-ring: #07080D; }
.fpt-13{ --fp-ring: #0A0B14; }

.fp-profile__banner{ display: none; }

.has-banner:not(.fpt-10) .fp-profile__banner{
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--fp-banner-h);
  border-radius: 14px;
  background-color: var(--fp-paper-soft);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.has-banner:not(.fpt-10) .fp-profile__card{
  padding-top: calc(var(--fp-banner-h) - 36px) !important;
}
.has-banner:not(.fpt-10) .fp-profile__avatar{
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px var(--fp-ring);
}
/* Glow DP keeps its halo, with a ring underneath. */
.has-banner.fpt-13 .fp-profile__avatar{
  box-shadow: 0 0 0 4px #0A0B14, 0 0 0 6px rgba(165,180,252,.95), 0 0 30px 8px rgba(99,102,241,.55);
  animation: none;
}

/* Everything in the card sits ABOVE the banner, so no text can ever end up
   hidden behind it. */
.has-banner:not(.fpt-10) .fp-profile__identity,
.has-banner:not(.fpt-10) .fp-profile__bio,
.has-banner:not(.fpt-10) .fp-profile__socials,
.has-banner:not(.fpt-10) .fp-profile__links{
  position: relative;
  z-index: 2;
}

/* Template 3 (Compact List) puts the name NEXT to the avatar.
   The card's top padding is banner-height + 14px, so the WHOLE identity block
   (name, tagline, location) always starts below the banner. The avatar is
   pulled up with a negative margin so it still overlaps the banner edge. */
.has-banner.fpt-3 .fp-profile__card{
  padding-top: calc(var(--fp-banner-h) + 14px) !important;
  align-items: start;
}
.has-banner.fpt-3 .fp-profile__avatar{
  align-self: start;
  margin-top: -40px;
}
.has-banner.fpt-3 .fp-profile__identity{
  align-self: start;
  margin-top: 0;
  min-width: 0;
  position: relative;
  z-index: 3;
}
.has-banner.fpt-3 .fp-profile__name,
.has-banner.fpt-3 .fp-profile__tagline{ position: relative; z-index: 3; }

/* Cards with their own rounded surface: banner follows the top corners. */
.has-banner.fpt-1 .fp-profile__banner{ border-radius: 20px 20px 0 0; }
.has-banner.fpt-2 .fp-profile__banner{ border-radius: 17px 17px 0 0; }
.has-banner.fpt-6 .fp-profile__banner{ border-radius: 29px 29px 0 0; }
.has-banner.fpt-7 .fp-profile__banner{ border-radius: 21px 21px 0 0; }
.has-banner.fpt-9 .fp-profile__banner{ border-radius: 16px 16px 0 0; }
.has-banner.fpt-12 .fp-profile__banner{ border-radius: 33px 33px 0 0; }

@media (max-width: 480px){
  .fp-profile{ --fp-banner-h: 96px; }
  .has-banner.fpt-1 .fp-profile__banner{ border-radius: 16px 16px 0 0; }
}

/* ==========================================================================
   Per-template colour tokens
   Every block added on top of a template (tags, projects, testimonials,
   newsletter, share, brandmark, featured link…) reads these, so text stays
   readable on dark, glassy and gradient canvases alike.
   ========================================================================== */

/* 5 · Black & gold */
.fpt-5{
  --fpc-text: #F5F1E7;
  --fpc-soft: #C7CAD1;
  --fpc-dim:  #9096A0;
  --fpc-line: #2F323A;
  --fpc-surface: #1B1D22;
  --fpc-surface-soft: #232630;
  --fpc-accent: #C9A24A;
  --fpc-on-accent: #101114;
}

/* 6 · Liquid Glass */
.fpt-6{
  --fpc-text: #FFFFFF;
  --fpc-soft: rgba(255,255,255,.88);
  --fpc-dim:  rgba(255,255,255,.72);
  --fpc-line: rgba(255,255,255,.42);
  --fpc-surface: rgba(255,255,255,.16);
  --fpc-surface-soft: rgba(255,255,255,.26);
  --fpc-accent: #FFFFFF;
  --fpc-on-accent: #0B1030;
}

/* 7 · Gradient */
.fpt-7{
  --fpc-text: #FFFFFF;
  --fpc-soft: rgba(255,255,255,.84);
  --fpc-dim:  rgba(255,255,255,.66);
  --fpc-line: rgba(255,255,255,.26);
  --fpc-surface: rgba(255,255,255,.10);
  --fpc-surface-soft: rgba(255,255,255,.18);
  --fpc-accent: #FFFFFF;
  --fpc-on-accent: #0E1020;
}

/* 8 · Terminal */
.fpt-8{
  --fpc-text: #E9F5EC;
  --fpc-soft: #A8B2AB;
  --fpc-dim:  #79837C;
  --fpc-line: #2B2F27;
  --fpc-surface: #121412;
  --fpc-surface-soft: #191C18;
  --fpc-accent: #4ADE80;
  --fpc-on-accent: #0B0D0C;
}

/* 9 · Glass Clear */
.fpt-9{
  --fpc-text: #FFFFFF;
  --fpc-soft: rgba(255,255,255,.92);
  --fpc-dim:  rgba(255,255,255,.8);
  --fpc-line: rgba(255,255,255,.7);
  --fpc-surface: rgba(255,255,255,.14);
  --fpc-surface-soft: rgba(255,255,255,.24);
  --fpc-accent: #FFFFFF;
  --fpc-on-accent: #43356F;
}

/* 11 · Glow Bar */
.fpt-11{
  --fpc-text: #F4F5FF;
  --fpc-soft: #B3B8D4;
  --fpc-dim:  #8F94B8;
  --fpc-line: #2F3349;
  --fpc-surface: #0E0F17;
  --fpc-surface-soft: #161829;
  --fpc-accent: #818CF8;
  --fpc-on-accent: #07080D;
}

/* 12 · Minimal Liquid (light glass) */
.fpt-12{
  --fpc-soft: #4B4F63;
  --fpc-dim:  #6B6F82;
  --fpc-line: rgba(84,74,140,.20);
  --fpc-surface: rgba(255,255,255,.72);
  --fpc-surface-soft: rgba(255,255,255,.9);
}

/* 13 · Glow DP */
.fpt-13{
  --fpc-text: #EEF0FF;
  --fpc-soft: #B4B9D6;
  --fpc-dim:  #9096B8;
  --fpc-line: #333764;
  --fpc-surface: rgba(255,255,255,.05);
  --fpc-surface-soft: rgba(255,255,255,.1);
  --fpc-accent: #818CF8;
  --fpc-on-accent: #0A0B14;
}

/* A founder's own background image or video always gets a dark veil, so the
   card switches to the light-on-dark set. */
.fp-profile.has-pagebg{
  --fpc-text: #FFFFFF;
  --fpc-soft: rgba(255,255,255,.88);
  --fpc-dim:  rgba(255,255,255,.7);
  --fpc-line: rgba(255,255,255,.34);
  --fpc-surface: rgba(255,255,255,.12);
  --fpc-surface-soft: rgba(255,255,255,.2);
  --fpc-accent: #FFFFFF;
  --fpc-on-accent: #14161A;
}

/* A founder's own text colour drives the card tokens too. */
.fp-profile.fp-has-text{
  --fpc-text: var(--fp-text);
  --fpc-soft: color-mix(in srgb, var(--fp-text) 82%, transparent);
  --fpc-dim:  color-mix(in srgb, var(--fp-text) 62%, transparent);
  --fpc-line: color-mix(in srgb, var(--fp-text) 26%, transparent);
  --fpc-surface: color-mix(in srgb, var(--fp-text) 8%, transparent);
  --fpc-surface-soft: color-mix(in srgb, var(--fp-text) 14%, transparent);
}
.fp-profile.fp-has-accent{
  --fpc-accent: var(--fp-accent);
}

/* Template 1 · the links panel rows are tight, so the icon sits closer in. */
.fpt-1 .fp-linkbtn{ padding-left: 30px; padding-right: 30px; }
.fpt-1 .fp-linkbtn__icon{ left: 4px; }

/* ==========================================================================
   Centring guards
   Keeps the card itself centred in the page even with a scrollbar present.
   ========================================================================== */
.fp-profile{ width: 100%; }
.fp-profile__card{ margin-inline: auto; }

/* List-style templates keep their socials row left-aligned. */
.fpt-1 .fp-profile__socials,
.fpt-3 .fp-profile__socials,
.fpt-8 .fp-profile__socials{ justify-self: start; justify-content: flex-start; }
.fpt-1 .fp-profile__brandmark{ justify-self: center; }


/* ==========================================================================
   Template 14 — Mono (premium)
   Strictly black and white. A dark strip across the top of a white card,
   an outlined avatar, outlined icon circles and link buttons, and a solid
   black primary button. No colour, no icons on buttons -- nothing to
   distract from the work. An uploaded banner replaces the dark strip.
   ========================================================================== */
.fpt-14{
  --fpc-text:         #0A0A0A;
  --fpc-soft:         #404040;
  --fpc-dim:          #737373;
  --fpc-line:         #D9D9D9;
  --fpc-surface:      #FFFFFF;
  --fpc-surface-soft: #F4F4F5;
  --fpc-accent:       #0A0A0A;
  --fpc-on-accent:    #FFFFFF;
  --fp-ring:          #FFFFFF;
}
.fpt-14.fp-profile{ background: #F4F4F5; }

.fpt-14 .fp-profile__card{
  max-width: 420px;
  /* Flex column, not the shared grid: keeps the order fixed (identity, icons,
     bio, links, buttons, then any extra blocks) and hidden items leave no gap. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 52px 24px 26px;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 48px -28px rgba(0,0,0,.28);
}

/* The dark strip (until the founder uploads their own banner). */
.fpt-14:not(.has-banner) .fp-profile__card::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 44px;
  border-radius: 17px 17px 0 0;
  background: linear-gradient(100deg, #0A0A0A 0%, #0A0A0A 58%, #3A3A3A 100%);
}
.has-banner.fpt-14 .fp-profile__banner{ border-radius: 17px 17px 0 0; }

/* Order: links, then the contact/booking buttons, then everything else. */
.fpt-14 .fp-profile__card > .fp-actions{ order: 1; }
.fpt-14 .fp-profile__card > .fp-block,
.fpt-14 .fp-profile__card > .fp-share,
.fpt-14 .fp-profile__card > .fp-tags,
.fpt-14 .fp-profile__card > .fp-profile__brandmark{ order: 2; }

/* Identity */
.fpt-14 .fp-profile__avatar{
  align-self: flex-start;
  width: 72px; height: 72px;
  background: #fff;
  border: 1.5px solid #0A0A0A;
}
.fpt-14 .fp-profile__initial{ font-family: var(--fp-font-serif); font-weight: 400; font-size: 28px; color: #0A0A0A; }
.fpt-14 .fp-profile__identity{ align-items: flex-start; text-align: left; gap: 2px; }
.fpt-14 .fp-profile__name{ font-size: calc(19px * var(--fp-name-scale, 1)); font-weight: 700; letter-spacing: -0.02em; }
.fpt-14 .fp-profile__tagline{ font-size: 13px; color: #525252; }
.fpt-14 .fp-profile__bio{ text-align: left; font-size: calc(14px * var(--fp-bio-scale, 1)); color: #262626; }

/* Account icons: thin black outline circles. */
.fpt-14 .fp-profile__socials{ align-self: flex-start; justify-content: flex-start; gap: 8px; }
.fpt-14 .fp-social{
  width: calc(32px * var(--fp-icon-scale, 1));
  height: calc(32px * var(--fp-icon-scale, 1));
  border: 1.5px solid #0A0A0A;
  background: #fff;
  color: #0A0A0A;
}
.fpt-14 .fp-social:hover{ background: #F4F4F5; border-color: #0A0A0A; color: #0A0A0A; }

/* Links: outlined rows, left-aligned text, no icons. */
.fpt-14 .fp-profile__links{ gap: 10px; }
.fpt-14 .fp-linkbtn{
  justify-content: flex-start;
  padding: 13px 16px;
  border: 1.5px solid #0A0A0A;
  border-radius: 12px;
  background: #fff;
  color: #0A0A0A;
  font-weight: 600;
  font-size: 13.5px;
}
.fpt-14 .fp-linkbtn__icon{ display: none; }
.fpt-14 .fp-linkbtn__label{ flex: 1; text-align: left; }
.fpt-14 .fp-linkbtn:hover{ background: #F4F4F5; border-color: #0A0A0A; }
.fpt-14 .fp-linkbtn.is-featured{ padding-right: 84px; }

/* Contact / booking / file: one row, solid black primary + outlined others. */
.fpt-14 .fp-actions{ gap: 10px; }
.fpt-14 .fp-action{
  flex: 1 1 130px;
  min-width: 0;
  justify-content: center;
  padding: 13px 12px;
  border-radius: 12px;
  border-width: 1.5px;
  font-weight: 700;
  font-size: 13.5px;
}
.fpt-14 .fp-action svg{ display: none; }
.fpt-14 .fp-action.fp-btn--brand{ background: #0A0A0A; border-color: #0A0A0A; color: #fff; }
.fpt-14 .fp-action.fp-btn--ghost{ background: #fff; border-color: #0A0A0A; color: #0A0A0A; }
.fpt-14 .fp-action.fp-btn--ghost:hover{ background: #F4F4F5; border-color: #0A0A0A; }

.fpt-14 .fp-profile__brandmark{ align-self: center; }

@media (max-width: 480px){
  .fpt-14 .fp-profile__card{ padding-left: 20px; padding-right: 20px; }
}