/* QuickTapID Premium Profile System v61
   Clean, conversion-focused profile stylesheet.
   Built to make NFC tap pages feel better than Linktree-style pages.
*/

:root{
  --qp-text:#10283f;
  --qp-muted:#506478;
  --qp-soft:#6c7f91;
  --qp-line:rgba(16,40,63,.12);
  --qp-blue:#18a8d8;
  --qp-blue-dark:#176b8f;
  --qp-green:#20c58f;
  --qp-accent:#18a8d8;
  --qp-accent-2:#20c58f;
  --qp-accent-dark:#176b8f;
  --qp-bg:#f6fbff;
  --qp-bg2:#edf7fb;
  --qp-card:#ffffff;
  --qp-shadow:0 18px 50px rgba(31,79,118,.12);
  --qp-shadow-soft:0 10px 28px rgba(31,79,118,.08);
  --qp-wrap:1080px;
}

body.qt-brand-honey{
  --qp-accent:#ffb020;
  --qp-accent-2:#ffcf66;
  --qp-accent-dark:#9a5d00;
}

body.qt-brand-greg{
  --qp-accent:#2563eb;
  --qp-accent-2:#18a8d8;
  --qp-accent-dark:#174ea6;
}

body.qt-brand-ben{
  --qp-accent:#18a8d8;
  --qp-accent-2:#20c58f;
  --qp-accent-dark:#176b8f;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  background:var(--qp-bg);
}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--qp-text);
  background:
    radial-gradient(860px 520px at 14% 0%, color-mix(in srgb, var(--qp-accent) 16%, transparent), transparent 58%),
    radial-gradient(720px 460px at 88% 8%, color-mix(in srgb, var(--qp-accent-2) 12%, transparent), transparent 58%),
    linear-gradient(180deg,#fbfdff 0%,var(--qp-bg) 48%,var(--qp-bg2) 100%);
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit}
img,video{max-width:100%;height:auto;display:block}

.wrap{
  width:min(calc(100% - 32px),var(--qp-wrap));
  margin-inline:auto;
  padding:0;
}

main{
  padding:32px 0 92px;
}

h1,h2,h3,h4,h5,h6{
  color:var(--qp-text);
  letter-spacing:-.04em;
  line-height:1.06;
  margin:0;
}

p,li,span,small,.muted,.sub,.headline,.tag,.note,.bio,.description{
  color:var(--qp-muted);
  opacity:1;
}

b,strong{color:var(--qp-text)}

.bg-glow,
.bg-grid,
.bg-noise,
.bg-blur{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}

.bg-glow,
.bg-blur{
  background:
    radial-gradient(900px 520px at 18% 6%, color-mix(in srgb, var(--qp-accent) 14%, transparent), transparent 60%),
    radial-gradient(840px 520px at 88% 12%, color-mix(in srgb, var(--qp-accent-2) 10%, transparent), transparent 55%);
}

.bg-grid{
  opacity:.16;
  background:
    linear-gradient(to right, rgba(16,40,63,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,40,63,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(620px 420px at 30% 18%, rgba(0,0,0,.85), transparent 70%);
}

.bg-noise{display:none}

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(16,40,63,.10);
  box-shadow:0 10px 28px rgba(31,79,118,.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.topbar-inner{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-weight:1000;
  color:var(--qp-text);
  min-width:0;
}

.brand img,
.brand-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(31,79,118,.10);
}

.brand-text{min-width:0}

.brand .name,
.brand-name{
  font-size:1.2rem;
  font-weight:1000;
  color:var(--qp-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand .tag,
.brand-sub{
  display:block;
  margin-top:2px;
  font-size:.88rem;
  font-weight:750;
  color:var(--qp-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(560px,52vw);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--qp-accent-dark);
  font-size:.78rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.eyebrow .dot,
.dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:var(--qp-accent);
  box-shadow:0 0 16px color-mix(in srgb, var(--qp-accent) 36%, transparent);
}

.nav{
  display:flex;
  align-items:center;
  gap:4px;
}

.nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  font-weight:850;
  color:var(--qp-text);
}

.nav a:hover{
  background:color-mix(in srgb, var(--qp-accent) 9%, transparent);
  color:var(--qp-accent-dark);
}

.top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

.mini-pill,
.badge,
.meta,
.pill,
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  color:var(--qp-accent-dark);
  border:1px solid color-mix(in srgb, var(--qp-accent) 24%, transparent);
  box-shadow:var(--qp-shadow-soft);
  font-weight:900;
}

.mini-pill svg,
.badge svg,
.meta svg{
  width:16px;
  height:16px;
  fill:currentColor;
}

/* Profile directory */
.profile-directory-page main{padding-top:36px}

.profile-directory-hero{
  padding:34px 0 28px;
  text-align:center;
}

.profile-directory-logo{
  width:min(230px,68vw);
  margin:0 auto 18px;
  object-fit:contain;
}

.profile-directory-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--qp-accent) 22%, transparent);
  color:var(--qp-accent-dark);
  font-weight:950;
  box-shadow:var(--qp-shadow-soft);
  margin-bottom:14px;
}

.profile-directory-kicker::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:99px;
  background:var(--qp-accent);
}

.profile-directory-hero h1{
  font-size:clamp(2.4rem,7vw,4.6rem);
  letter-spacing:-.07em;
  margin-bottom:10px;
}

.profile-directory-hero p{
  max-width:760px;
  margin:0 auto;
  font-size:clamp(1rem,2vw,1.2rem);
  font-weight:650;
}

.profile-directory-tools{
  margin:20px auto 0;
  max-width:880px;
  padding:16px;
  border-radius:28px;
  border:1px solid var(--qp-line);
  background:
    radial-gradient(420px 220px at 12% 0%, color-mix(in srgb, var(--qp-accent) 10%, transparent), transparent 62%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,255,.96));
  box-shadow:var(--qp-shadow);
}

.profile-search{
  width:100%;
  min-height:54px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(16,40,63,.12);
  color:var(--qp-text);
  box-shadow:var(--qp-shadow-soft);
  font-weight:750;
}

.profile-filter-row,
.profile-link-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.profile-filter-btn,
.profile-link-row a{
  border:1px solid color-mix(in srgb, var(--qp-accent) 22%, transparent);
  background:#fff;
  color:var(--qp-accent-dark);
  padding:9px 12px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(31,79,118,.06);
  cursor:pointer;
}

.profile-filter-btn.is-active{
  background:linear-gradient(135deg,var(--qp-accent),var(--qp-accent-2));
  color:#fff;
  border-color:transparent;
}

.profile-directory-section{margin-top:30px}

.profile-directory-section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin-bottom:14px;
}

.profile-directory-section-head h2{
  font-size:clamp(1.5rem,3vw,2.15rem);
}

.profile-count{
  color:var(--qp-soft);
  font-weight:900;
}

.profile-grid,
.cards,
.directory-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.profile-card,
.card,
.directory-card{
  background:
    radial-gradient(420px 220px at 12% 0%, color-mix(in srgb, var(--qp-accent) 10%, transparent), transparent 62%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,255,.96));
  border:1px solid var(--qp-line);
  box-shadow:var(--qp-shadow);
  border-radius:28px;
  padding:20px;
  color:var(--qp-text);
}

.profile-card-top{
  display:flex;
  gap:12px;
  align-items:center;
}

.profile-card-photo,
.card img{
  width:58px;
  height:58px;
  border-radius:18px;
  object-fit:cover;
  background:#fff;
  border:1px solid rgba(16,40,63,.10);
  box-shadow:0 10px 22px rgba(31,79,118,.10);
}

.profile-card-name{
  font-weight:1000;
  color:var(--qp-text);
  letter-spacing:-.025em;
}

.profile-card-meta{
  color:var(--qp-muted);
  font-weight:750;
  margin-top:2px;
}

.profile-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}

.profile-tag{
  padding:6px 9px;
  border-radius:999px;
  background:#fff;
  color:var(--qp-accent-dark);
  border:1px solid color-mix(in srgb, var(--qp-accent) 18%, transparent);
  font-size:.82rem;
  font-weight:900;
}

.profile-card-actions{
  display:flex;
  gap:8px;
  margin-top:14px;
}

.profile-card-actions a,
.copy-profile-link{
  min-height:42px;
  padding:10px 12px;
  border-radius:999px;
  font-weight:950;
  text-decoration:none;
  border:1px solid rgba(16,40,63,.13);
  background:#fff;
  color:var(--qp-text);
  box-shadow:var(--qp-shadow-soft);
  cursor:pointer;
}

.profile-card-actions a:first-child{
  background:linear-gradient(135deg,var(--qp-accent),var(--qp-accent-2));
  color:#fff;
  border-color:transparent;
}

/* Client hero */
.hero{
  padding-top:18px;
  padding-bottom:92px;
}

.hero-shell{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  border:1px solid var(--qp-line);
  background:
    radial-gradient(720px 320px at 14% 0%, color-mix(in srgb, var(--qp-accent) 13%, transparent), transparent 62%),
    radial-gradient(620px 300px at 90% 12%, color-mix(in srgb, var(--qp-accent-2) 11%, transparent), transparent 62%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,255,.96));
  box-shadow:0 24px 70px rgba(31,79,118,.14);
  padding:clamp(18px,3vw,30px);
}

.hero-shell::before,
.profile::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:7px;
  background:linear-gradient(90deg,var(--qp-accent),var(--qp-accent-2));
}

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:clamp(22px,4vw,38px);
  align-items:start;
}

.profile-media{
  display:grid;
  gap:16px;
}

.profile-media .pfp,
.pfp{
  width:100%;
  max-width:300px;
  margin:0 auto;
  border-radius:30px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(16,40,63,.10);
  box-shadow:0 18px 42px rgba(31,79,118,.14);
  aspect-ratio:4/5;
}

.pfp img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.proof-card{
  padding:18px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(16,40,63,.12);
  box-shadow:var(--qp-shadow-soft);
}

.proof-title{
  margin:0 0 10px;
  color:var(--qp-text);
  font-weight:1000;
}

.proof-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.proof-list li{
  display:flex;
  gap:9px;
  align-items:flex-start;
  color:var(--qp-muted);
  font-weight:780;
}

.proof-list svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
  fill:var(--qp-accent-dark);
  margin-top:3px;
}

.hero-copy{
  min-width:0;
  display:grid;
  gap:16px;
}

.hero-badges,
.verified-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hero-copy h1,
.who h1,
.profile h1{
  font-size:clamp(2.25rem,5vw,4.5rem);
  line-height:1;
  letter-spacing:-.072em;
}

.hero-lead,
.headline{
  font-size:clamp(1.05rem,2vw,1.28rem);
  line-height:1.62;
  font-weight:700;
  max-width:760px;
}

/* Older profile block support */
.profile{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:22px;
  position:relative;
  overflow:hidden;
  padding:clamp(18px,2.8vw,28px);
  border-radius:32px;
  border:1px solid var(--qp-line);
  background:
    radial-gradient(520px 260px at 12% 0%, color-mix(in srgb, var(--qp-accent) 12%, transparent), transparent 62%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,255,.96));
  box-shadow:var(--qp-shadow);
}

.who{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  min-width:0;
}

.loc{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--qp-soft);
  font-weight:850;
}

.loc .pin,
.pill .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--qp-accent);
  box-shadow:0 0 16px color-mix(in srgb, var(--qp-accent) 28%, transparent);
}

/* Conversion hub */
.profile-conversion-hub{
  margin:18px 0 0;
  border-radius:32px;
  padding:clamp(20px,3vw,30px);
  border:1px solid var(--qp-line);
  background:
    radial-gradient(620px 280px at 12% 0%, color-mix(in srgb, var(--qp-accent) 12%, transparent), transparent 62%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,255,.96));
  box-shadow:0 22px 62px rgba(31,79,118,.13);
}

.profile-conversion-hub .hub-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.profile-conversion-hub .hub-kicker{
  display:inline-flex;
  width:fit-content;
  padding:8px 11px;
  border-radius:999px;
  background:#fff;
  color:var(--qp-accent-dark);
  border:1px solid color-mix(in srgb, var(--qp-accent) 22%, transparent);
  box-shadow:var(--qp-shadow-soft);
  font-size:.78rem;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.profile-conversion-hub h2{
  font-size:clamp(1.65rem,3.4vw,2.6rem);
  margin:0 0 6px;
}

.profile-conversion-hub p{
  max-width:720px;
  font-weight:700;
}

.hub-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.hub-action{
  min-height:112px;
  padding:16px;
  border-radius:22px;
  background:#fff;
  color:var(--qp-text);
  border:1px solid rgba(16,40,63,.12);
  box-shadow:var(--qp-shadow-soft);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  font-weight:900;
}

.hub-action strong{
  display:block;
  color:var(--qp-text);
  font-size:1.05rem;
  letter-spacing:-.025em;
}

.hub-action span{
  display:block;
  color:var(--qp-muted);
  font-size:.9rem;
  font-weight:750;
}

.hub-action .hub-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:color-mix(in srgb, var(--qp-accent) 12%, white);
  color:var(--qp-accent-dark);
  border:1px solid color-mix(in srgb, var(--qp-accent) 22%, transparent);
  font-size:1.15rem;
}

.hub-action.primary{
  background:linear-gradient(135deg,var(--qp-accent),var(--qp-accent-2));
  border-color:transparent;
  box-shadow:0 18px 44px color-mix(in srgb, var(--qp-accent) 18%, transparent);
}

.hub-action.primary strong,
.hub-action.primary span,
.hub-action.primary .hub-icon{
  color:#fff;
}

body.qt-brand-honey .hub-action.primary strong,
body.qt-brand-honey .hub-action.primary span,
body.qt-brand-honey .hub-action.primary .hub-icon{
  color:#221100;
}

.hub-action.primary .hub-icon{
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.30);
}

/* Service/info/link sections */
.service-strip,
.quick-grid,
.site-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.service-card,
.info-card,
.site-card{
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(16,40,63,.12);
  box-shadow:var(--qp-shadow-soft);
}

.service-card .icon,
.link-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:color-mix(in srgb, var(--qp-accent) 12%, white);
  color:var(--qp-accent-dark);
  border:1px solid color-mix(in srgb, var(--qp-accent) 22%, transparent);
  margin-bottom:10px;
}

.service-card svg,
.link-icon svg{
  width:21px;
  height:21px;
  fill:currentColor;
}

.service-card h2,
.site-card h4{
  margin:0 0 7px;
  color:var(--qp-text);
  font-size:1.05rem;
  letter-spacing:-.03em;
}

.service-card p,
.site-card p{
  color:var(--qp-muted);
  font-weight:700;
}

.site-card a{
  display:inline-flex;
  margin-top:12px;
  color:var(--qp-accent-dark);
  font-weight:1000;
  text-decoration:none;
}

.website-highlight,
.highlight{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px;
  border-radius:24px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--qp-accent) 22%, transparent);
  box-shadow:var(--qp-shadow-soft);
}

.website-highlight .label,
.highlight .label{
  color:var(--qp-accent-dark);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.82rem;
}

.website-highlight .main-link,
.highlight .link{
  color:var(--qp-text);
  font-weight:1000;
  font-size:1.35rem;
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
}

.website-highlight .sub{
  color:var(--qp-muted);
  font-weight:750;
}

.cta-row,
.btnrow,
.actions,
.contact,
.links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.cta-row.secondary{margin-top:-4px}

.btn,
a.btn,
button.btn,
.btnrow a,
.actions a,
.contact a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:54px;
  padding:14px;
  border-radius:18px;
  font-weight:950;
  letter-spacing:-.01em;
  text-align:center;
  background:#fff;
  color:var(--qp-text);
  border:1px solid rgba(16,40,63,.14);
  box-shadow:var(--qp-shadow-soft);
  text-decoration:none;
}

.btn.primary,
a.btn.primary,
button.btn.primary,
.btnrow a:first-child,
.actions a:first-child,
.contact a:first-child{
  background:linear-gradient(135deg,var(--qp-accent),var(--qp-accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 16px 38px color-mix(in srgb, var(--qp-accent) 18%, transparent);
}

body.qt-brand-honey .btn.primary,
body.qt-brand-honey a.btn.primary,
body.qt-brand-honey .btnrow a:first-child,
body.qt-brand-honey .actions a:first-child,
body.qt-brand-honey .contact a:first-child{
  color:#221100;
}

.ico,
.out,
.cta-row .btn svg,
.website-highlight .btn svg,
.actionbar svg,
.abtn svg{
  width:18px;
  height:18px;
  fill:currentColor;
  opacity:.95;
  flex:0 0 auto;
}

.section{
  margin-top:18px;
  background:
    radial-gradient(420px 220px at 12% 0%, color-mix(in srgb, var(--qp-accent) 10%, transparent), transparent 62%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,255,.96));
  border:1px solid var(--qp-line);
  border-radius:30px;
  box-shadow:var(--qp-shadow);
  overflow:hidden;
  color:var(--qp-text);
}

.section .inner,
.section-inner{
  padding:clamp(18px,2.7vw,26px);
}

.section h2,
.section h3,
.section-head h3{
  font-size:clamp(1.4rem,3vw,2rem);
  margin-bottom:10px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

.section-head p{
  max-width:760px;
  font-weight:700;
}

.info-label{
  color:var(--qp-accent-dark);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.78rem;
}

.info-value{
  margin-top:5px;
  color:var(--qp-text);
  font-weight:950;
  overflow-wrap:anywhere;
}

.info-value a{
  color:var(--qp-text);
  text-decoration:none;
}

.linkcard,
.links a,
.site-links a,
.socials a,
.action-links a,
.quick-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(16,40,63,.12);
  box-shadow:var(--qp-shadow-soft);
  color:var(--qp-text);
  text-decoration:none;
}

.link-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.link-meta{min-width:0}

.link-title,
.linkcard .title,
.links a .title{
  margin:0;
  color:var(--qp-text);
  font-weight:1000;
}

.link-url,
.linkcard .url,
.links a small,
.site-links a small{
  margin:2px 0 0;
  color:var(--qp-soft);
  font-weight:750;
  overflow-wrap:anywhere;
}

.arrow{
  width:19px;
  height:19px;
  fill:var(--qp-accent-dark);
  flex:0 0 auto;
}

.feature,
.feature-media{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(16,40,63,.12);
  background:#fff;
  box-shadow:var(--qp-shadow-soft);
}

.feature img,
.feature-media img{
  width:100%;
  max-height:360px;
  object-fit:cover;
}

.feature .cap,
.feature-caption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(16,40,63,.10);
  box-shadow:0 12px 32px rgba(31,79,118,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.cap .kicker,
.feature-caption strong{
  color:var(--qp-accent-dark);
  font-weight:1000;
}

.cap .line,
.feature-caption span{
  color:var(--qp-muted);
  font-weight:800;
}

/* Sticky actionbar */
.actionbar{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  width:min(var(--qp-wrap),calc(100% - 20px));
  z-index:90;
  padding:10px;
  border-radius:24px;
  background:rgba(255,255,255,.95);
  color:var(--qp-text);
  border:1px solid rgba(16,40,63,.12);
  box-shadow:0 18px 48px rgba(31,79,118,.16);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.actionbar-inner,
.actionbar .row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.abtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 10px;
  border-radius:18px;
  border:1px solid rgba(16,40,63,.14);
  background:#fff;
  color:var(--qp-text);
  font-weight:950;
  text-decoration:none;
  box-shadow:var(--qp-shadow-soft);
  white-space:nowrap;
}

.abtn.primary{
  background:linear-gradient(135deg,var(--qp-accent),var(--qp-accent-2));
  color:#fff;
  border-color:transparent;
}

body.qt-brand-honey .abtn.primary{
  color:#221100;
}

footer{
  margin-top:18px;
  padding:28px 0 92px;
  text-align:center;
  color:var(--qp-soft);
}

footer a{
  color:var(--qp-accent-dark);
  font-weight:900;
}

/* Hide marketing clutter on profiles */
.conversion-sticky-cta,
.mobile-cta,
.footer-buy-path,
.footer-explore,
.soft-cta-panel,
.qt-internal-links{
  display:none!important;
}

/* Small helpers */
.idline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}

.hr{
  height:1px;
  width:100%;
  margin:18px 0;
  background:linear-gradient(90deg,transparent,rgba(16,40,63,.14),transparent);
}

/* Mobile */
@media (max-width:960px){
  .top-actions{display:none}

  .hero-grid,
  .profile{
    grid-template-columns:1fr;
  }

  .profile-media .pfp,
  .pfp{
    max-width:360px;
    aspect-ratio:1/1;
  }

  .hero-copy,
  .profile{
    text-align:center;
  }

  .hero-badges,
  .verified-row,
  .idline{
    justify-content:center;
  }

  .service-strip,
  .quick-grid,
  .site-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .cta-row,
  .btnrow,
  .actions,
  .contact,
  .links,
  .hub-actions{
    grid-template-columns:1fr;
  }

  .website-highlight,
  .highlight{
    flex-direction:column;
    text-align:center;
  }

  .website-highlight .btn{
    width:100%;
  }

  .section-head{
    display:block;
    text-align:center;
  }

  .profile-conversion-hub .hub-head{
    display:block;
    text-align:center;
  }

  .profile-conversion-hub .hub-kicker{
    margin-inline:auto;
  }
}

@media (max-width:720px){
  .wrap{
    width:min(calc(100% - 24px),var(--qp-wrap));
  }

  .profile-directory-logo{
    width:min(210px,66vw);
  }

  .hero-shell,
  .profile-conversion-hub{
    border-radius:28px;
    padding:18px;
  }

  .hero-copy h1,
  .who h1,
  .profile h1{
    font-size:clamp(2.05rem,10vw,3.2rem);
  }

  .hero-lead,
  .headline{
    font-size:1rem;
  }

  .service-strip,
  .quick-grid,
  .site-grid{
    grid-template-columns:1fr;
  }

  .service-card,
  .info-card,
  .site-card,
  .proof-card,
  .hub-action{
    border-radius:20px;
  }

  .feature .cap,
  .feature-caption{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin:12px;
  }

  .actionbar{
    left:10px;
    right:10px;
    width:auto;
    transform:none;
    bottom:10px;
  }

  .actionbar-inner,
  .actionbar .row{
    gap:8px;
  }

  .abtn span{
    display:none;
  }

  body{
    padding-bottom:88px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}

/* =========================================================
   QuickTapID Template Preview Polish v61
   Clean demo layout for /profile/template/
   ========================================================= */

body.qt-template-profile{
  --qp-accent:#18a8d8;
  --qp-accent-2:#20c58f;
  --qp-accent-dark:#176b8f;
}

.template-hero{
  padding:28px 0 18px;
}

.template-shell{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  border:1px solid var(--qp-line);
  background:
    radial-gradient(720px 320px at 14% 0%, color-mix(in srgb, var(--qp-accent) 14%, transparent), transparent 62%),
    radial-gradient(620px 300px at 90% 12%, color-mix(in srgb, var(--qp-accent-2) 12%, transparent), transparent 62%),
    linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,252,255,.96));
  box-shadow:0 24px 70px rgba(31,79,118,.14);
  padding:clamp(20px,3.5vw,34px);
}

.template-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:7px;
  background:linear-gradient(90deg,var(--qp-accent),var(--qp-accent-2));
}

.template-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,420px);
  gap:clamp(24px,5vw,48px);
  align-items:start;
}

.template-copy{
  display:grid;
  gap:16px;
  align-content:start;
}

.template-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  color:var(--qp-accent-dark);
  border:1px solid color-mix(in srgb, var(--qp-accent) 22%, transparent);
  box-shadow:var(--qp-shadow-soft);
  font-weight:1000;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.template-kicker::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:99px;
  background:var(--qp-accent-2);
  box-shadow:0 0 16px color-mix(in srgb, var(--qp-accent-2) 38%, transparent);
}

.template-copy h1{
  font-size:clamp(2.45rem,6vw,5.25rem);
  line-height:.98;
  letter-spacing:-.08em;
}

.template-lead{
  color:var(--qp-muted);
  font-size:clamp(1.05rem,2vw,1.28rem);
  line-height:1.65;
  font-weight:700;
  max-width:760px;
}

.template-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}

.template-proof-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}

.template-proof{
  padding:15px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(16,40,63,.12);
  box-shadow:var(--qp-shadow-soft);
}

.template-proof b{
  display:block;
  color:var(--qp-text);
  margin-bottom:4px;
}

.template-proof span{
  color:var(--qp-muted);
  font-size:.93rem;
  font-weight:750;
}

.template-phone{
  position:relative;
  border-radius:38px;
  padding:14px;
  background:#10283f;
  box-shadow:0 28px 70px rgba(16,40,63,.22);
}

.template-phone-screen{
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(420px 220px at 20% 0%, rgba(75,195,238,.18), transparent 62%),
    linear-gradient(180deg,#ffffff,#f6fbff);
  border:1px solid rgba(255,255,255,.24);
  min-height:620px;
}

.template-demo-top{
  padding:20px;
  text-align:center;
  background:
    radial-gradient(360px 180px at 50% 0%, color-mix(in srgb, var(--qp-accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg,#ffffff,#f8fcff);
  border-bottom:1px solid rgba(16,40,63,.08);
}

.template-demo-logo{
  width:82px;
  height:82px;
  border-radius:26px;
  object-fit:contain;
  margin:0 auto 12px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(16,40,63,.10);
  box-shadow:var(--qp-shadow-soft);
}

.template-demo-top h2{
  font-size:1.55rem;
  letter-spacing:-.045em;
}

.template-demo-top p{
  margin-top:6px;
  font-weight:750;
}

.template-demo-badges{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}

.template-demo-badges span{
  padding:6px 9px;
  border-radius:999px;
  background:#fff;
  color:var(--qp-accent-dark);
  border:1px solid color-mix(in srgb, var(--qp-accent) 20%, transparent);
  box-shadow:0 6px 16px rgba(31,79,118,.06);
  font-size:.78rem;
  font-weight:900;
}

.template-demo-actions{
  display:grid;
  gap:10px;
  padding:16px;
}

.template-demo-btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:#fff;
  color:var(--qp-text);
  text-decoration:none;
  border:1px solid rgba(16,40,63,.11);
  box-shadow:0 8px 22px rgba(31,79,118,.07);
}

.template-demo-btn.primary{
  background:linear-gradient(135deg,var(--qp-accent),var(--qp-accent-2));
  color:#fff;
  border-color:transparent;
}

.template-demo-icon{
  width:40px;
  height:40px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--qp-accent) 12%, white);
  color:var(--qp-accent-dark);
  flex:0 0 auto;
  font-size:1.12rem;
}

.template-demo-btn.primary .template-demo-icon{
  background:rgba(255,255,255,.22);
  color:#fff;
}

.template-demo-btn strong{
  display:block;
  color:inherit;
  line-height:1.1;
}

.template-demo-btn span span{
  display:block;
  margin-top:3px;
  color:currentColor;
  opacity:.74;
  font-size:.9rem;
  font-weight:750;
}

.template-mini-section{
  padding:16px;
  border-top:1px solid rgba(16,40,63,.08);
}

.template-mini-section h3{
  font-size:1rem;
  margin-bottom:10px;
}

.template-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.template-mini-card{
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(16,40,63,.10);
  box-shadow:0 6px 16px rgba(31,79,118,.05);
}

.template-mini-card b{
  display:block;
  color:var(--qp-text);
  font-size:.9rem;
}

.template-mini-card span{
  display:block;
  margin-top:2px;
  color:var(--qp-muted);
  font-size:.82rem;
  font-weight:750;
}

.template-section{
  margin-top:24px;
}

.template-section-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.template-section-card{
  padding:22px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--qp-line);
  box-shadow:var(--qp-shadow);
}

.template-section-card h3{
  font-size:1.2rem;
  margin-bottom:8px;
}

.template-section-card p{
  font-weight:700;
}

.template-cta-panel{
  margin-top:24px;
  border-radius:30px;
  padding:clamp(22px,4vw,34px);
  text-align:center;
  background:
    radial-gradient(520px 260px at 50% 0%, color-mix(in srgb, var(--qp-accent) 13%, transparent), transparent 62%),
    linear-gradient(145deg,#ffffff,#f7fcff);
  border:1px solid var(--qp-line);
  box-shadow:var(--qp-shadow);
}

.template-cta-panel h2{
  font-size:clamp(1.8rem,4vw,3rem);
}

.template-cta-panel p{
  max-width:720px;
  margin:10px auto 0;
  font-weight:700;
}

.template-cta-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

/* Hide old template structures if any remain */
body.qt-template-profile .profile-conversion-hub,
body.qt-template-profile .qt-card,
body.qt-template-profile .qt-wrap{
  display:none!important;
}

@media (max-width:980px){
  .template-grid{
    grid-template-columns:1fr;
  }

  .template-copy{
    text-align:center;
  }

  .template-kicker{
    margin-inline:auto;
  }

  .template-actions{
    justify-content:center;
  }

  .template-phone{
    width:min(430px,100%);
    margin-inline:auto;
  }

  .template-proof-grid,
  .template-section-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:620px){
  .template-shell{
    border-radius:28px;
    padding:18px;
  }

  .template-copy h1{
    font-size:clamp(2.15rem,11vw,3.45rem);
  }

  .template-actions .btn,
  .template-cta-actions .btn{
    width:100%;
  }

  .template-phone{
    border-radius:30px;
    padding:10px;
  }

  .template-phone-screen{
    min-height:0;
    border-radius:23px;
  }

  .template-mini-grid{
    grid-template-columns:1fr;
  }
}