/* ALN Hub — public profile runtime. Everything is scoped under .hp so the same
   markup renders on the public page and inside the dashboard preview. */
@font-face { font-family: 'Sora'; src: url('/assets/fonts/sora.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/fonts/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

.hp-page { margin: 0; min-height: 100%; background: #0b0b12; }
.hp { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; color: var(--hp-text); font-family: var(--hp-font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; --hp-radius: 18px; --hp-gap: 12px; }
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp a { color: inherit; text-decoration: none; }
.hp img { max-width: 100%; display: block; }
.hp button, .hp input { font: inherit; color: inherit; }
.hp :focus-visible { outline: 3px solid var(--hp-primary); outline-offset: 3px; border-radius: 12px; }
.hp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Background layer ---------- */
.hp-bg { position: fixed; inset: 0; z-index: -2; background: var(--hp-base); overflow: hidden; pointer-events: none; }
.hp-preview .hp-bg { position: absolute; }
.hp-bg i { position: absolute; display: block; border-radius: 50%; }
.hp-has-custom-bg .hp-bg { background: var(--hp-custom-bg, var(--hp-base)); }
.hp-has-custom-bg .hp-bg i { display: none; }
.hp-bg-logo { position: fixed; z-index: -1; top: 50%; left: 50%; width: min(70vw, 420px); transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
.hp-preview .hp-bg-logo { position: absolute; width: 70%; }

/* midnight */
.hp-scene-midnight .hp-bg { background: radial-gradient(120% 70% at 50% -10%, rgba(var(--hp-secondary-rgb), .38), transparent 60%), radial-gradient(80% 50% at 100% 100%, rgba(var(--hp-primary-rgb), .16), transparent 70%), var(--hp-base); }
.hp-scene-midnight .hp-bg i:nth-child(1) { width: 2px; height: 2px; top: 18%; left: 22%; box-shadow: 120px 40px rgba(var(--hp-text-rgb),.5), 260px 120px rgba(var(--hp-text-rgb),.35), 40px 260px rgba(var(--hp-text-rgb),.3), 320px 300px rgba(var(--hp-text-rgb),.45), 200px 520px rgba(var(--hp-text-rgb),.3), 600px 80px rgba(var(--hp-text-rgb),.4), 760px 380px rgba(var(--hp-text-rgb),.3), 900px 160px rgba(var(--hp-text-rgb),.4), 1100px 460px rgba(var(--hp-text-rgb),.35); background: rgba(var(--hp-text-rgb),.6); }
/* aurora */
.hp-scene-aurora .hp-bg i { filter: blur(70px); opacity: .55; animation: hp-float 18s ease-in-out infinite alternate; }
.hp-scene-aurora .hp-bg i:nth-child(1) { width: 60vmax; height: 60vmax; left: -20vmax; top: -25vmax; background: var(--hp-secondary); }
.hp-scene-aurora .hp-bg i:nth-child(2) { width: 50vmax; height: 50vmax; right: -18vmax; top: 10vmax; background: var(--hp-primary); opacity: .32; animation-delay: -6s; }
.hp-scene-aurora .hp-bg i:nth-child(3) { width: 46vmax; height: 46vmax; left: 10vmax; bottom: -30vmax; background: var(--hp-secondary); opacity: .35; animation-delay: -12s; }
/* minimal */
.hp-scene-minimal .hp-bg { background: var(--hp-base); }
/* dots */
.hp-scene-dots .hp-bg { background: radial-gradient(rgba(var(--hp-text-rgb), .16) 1.2px, transparent 1.4px) 0 0 / 22px 22px, radial-gradient(90% 60% at 50% 0%, rgba(var(--hp-secondary-rgb), .28), transparent 70%), var(--hp-base); }
/* signal */
.hp-scene-signal .hp-bg { background: linear-gradient(rgba(var(--hp-text-rgb), .06) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(var(--hp-text-rgb), .06) 1px, transparent 1px) 0 0 / 44px 44px, radial-gradient(60% 45% at 50% 18%, rgba(var(--hp-primary-rgb), .22), transparent 70%), var(--hp-base); }
.hp-scene-signal .hp-bg i:nth-child(1) { inset: auto 0 0 0; height: 40%; border-radius: 0; background: linear-gradient(transparent, rgba(var(--hp-secondary-rgb), .25)); }
/* mesh */
.hp-scene-mesh .hp-bg { background: radial-gradient(at 12% 18%, rgba(var(--hp-primary-rgb), .55) 0, transparent 45%), radial-gradient(at 88% 12%, rgba(var(--hp-secondary-rgb), .65) 0, transparent 50%), radial-gradient(at 80% 88%, rgba(var(--hp-primary-rgb), .35) 0, transparent 50%), radial-gradient(at 10% 92%, rgba(var(--hp-secondary-rgb), .45) 0, transparent 50%), var(--hp-base); }
/* sunrise */
.hp-scene-sunrise .hp-bg { background: linear-gradient(180deg, var(--hp-base) 0%, rgba(var(--hp-secondary-rgb), .55) 62%, rgba(var(--hp-primary-rgb), .75) 100%), var(--hp-base); }
.hp-scene-sunrise .hp-bg i:nth-child(1) { width: 90vmin; height: 90vmin; left: 50%; bottom: -55vmin; transform: translateX(-50%); background: radial-gradient(circle, rgba(var(--hp-primary-rgb), .9), rgba(var(--hp-primary-rgb), 0) 68%); }
/* orbit */
.hp-scene-orbit .hp-bg { background: repeating-radial-gradient(circle at 50% 22%, transparent 0 46px, rgba(var(--hp-text-rgb), .07) 47px 48px), radial-gradient(50% 40% at 50% 22%, rgba(var(--hp-secondary-rgb), .4), transparent 70%), var(--hp-base); }
.hp-scene-orbit .hp-bg i:nth-child(1) { width: 10px; height: 10px; top: 22%; left: 50%; background: var(--hp-primary); box-shadow: 0 0 24px var(--hp-primary); transform-origin: -120px 0; animation: hp-spin 14s linear infinite; }
/* prism */
.hp-scene-prism .hp-bg { background: conic-gradient(from 210deg at 50% 30%, rgba(var(--hp-secondary-rgb), .7), rgba(var(--hp-primary-rgb), .55), var(--hp-base) 40%, var(--hp-base) 70%, rgba(var(--hp-secondary-rgb), .7)), var(--hp-base); }
.hp-scene-prism .hp-bg i:nth-child(1) { inset: 0; border-radius: 0; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); background: rgba(var(--hp-base-rgb), .35); }
/* velvet */
.hp-scene-velvet .hp-bg { background: radial-gradient(130% 90% at 0% 0%, rgba(var(--hp-secondary-rgb), .65), transparent 55%), radial-gradient(120% 80% at 100% 100%, rgba(var(--hp-primary-rgb), .3), transparent 60%), radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,.45)), var(--hp-base); }
/* synthwave */
.hp-scene-synth .hp-bg { background: linear-gradient(180deg, var(--hp-base) 0%, rgba(var(--hp-secondary-rgb), .45) 55%, var(--hp-base) 56%); }
.hp-scene-synth .hp-bg i:nth-child(1) { left: -50%; right: -50%; bottom: -10%; height: 50%; border-radius: 0; background: linear-gradient(rgba(var(--hp-primary-rgb), .7) 2px, transparent 2px) 0 0 / 60px 60px, linear-gradient(90deg, rgba(var(--hp-primary-rgb), .7) 2px, transparent 2px) 0 0 / 60px 60px; transform: perspective(300px) rotateX(62deg); transform-origin: 50% 0; mask-image: linear-gradient(transparent, #000 40%); -webkit-mask-image: linear-gradient(transparent, #000 40%); animation: hp-grid 3s linear infinite; }
.hp-scene-synth .hp-bg i:nth-child(2) { width: min(70%, 380px); height: auto; aspect-ratio: 1; left: 50%; top: 14%; transform: translateX(-50%); background: linear-gradient(var(--hp-primary), var(--hp-secondary)); mask-image: repeating-linear-gradient(#000 0 14px, transparent 14px 20px); -webkit-mask-image: repeating-linear-gradient(#000 0 14px, transparent 14px 20px); opacity: .55; }
/* bokeh */
.hp-scene-bokeh .hp-bg i { filter: blur(2px); opacity: .5; animation: hp-float 16s ease-in-out infinite alternate; }
.hp-scene-bokeh .hp-bg i:nth-child(1) { width: 140px; height: 140px; left: 8%; top: 12%; background: rgba(var(--hp-primary-rgb), .5); box-shadow: 60vw 20vh 0 30px rgba(var(--hp-secondary-rgb), .45), 30vw 60vh 0 10px rgba(var(--hp-primary-rgb), .35), 70vw 75vh 0 -20px rgba(var(--hp-secondary-rgb), .5); }
.hp-scene-bokeh .hp-bg i:nth-child(2) { width: 70px; height: 70px; right: 14%; top: 40%; background: rgba(var(--hp-secondary-rgb), .55); box-shadow: -50vw 30vh 0 6px rgba(var(--hp-primary-rgb), .4), -20vw -25vh 0 -10px rgba(var(--hp-text-rgb), .2); animation-delay: -8s; }
.hp-scene-bokeh .hp-bg { background: radial-gradient(80% 60% at 50% 20%, rgba(var(--hp-secondary-rgb), .25), transparent), var(--hp-base); }
/* stripes */
.hp-scene-stripes .hp-bg { background: repeating-linear-gradient(-45deg, rgba(var(--hp-primary-rgb), .09) 0 18px, transparent 18px 42px), radial-gradient(70% 50% at 50% 0%, rgba(var(--hp-secondary-rgb), .35), transparent 70%), var(--hp-base); }
/* halo */
.hp-scene-halo .hp-bg { background: radial-gradient(circle at 50% 120px, rgba(var(--hp-primary-rgb), .0) 0 70px, rgba(var(--hp-primary-rgb), .55) 72px, rgba(var(--hp-secondary-rgb), .25) 160px, transparent 320px), var(--hp-base); }
.hp-scene-halo .hp-bg i:nth-child(1) { width: 560px; height: 560px; left: 50%; top: 120px; transform: translate(-50%, -50%); border: 1px solid rgba(var(--hp-text-rgb), .12); box-shadow: 0 0 0 90px rgba(var(--hp-text-rgb), .02), 0 0 0 180px rgba(var(--hp-text-rgb), .02); }
/* liquid */
.hp-scene-liquid .hp-bg i:nth-child(1) { width: 150vmax; height: 150vmax; left: 50%; top: 50%; margin: -75vmax 0 0 -75vmax; background: conic-gradient(from 0deg, var(--hp-secondary), var(--hp-base), var(--hp-primary), var(--hp-base), var(--hp-secondary)); filter: blur(60px); opacity: .7; animation: hp-spin 40s linear infinite; }
/* waves */
.hp-scene-waves .hp-bg { background: linear-gradient(180deg, var(--hp-base), rgba(var(--hp-secondary-rgb), .35)); }
.hp-scene-waves .hp-bg i { left: -10%; right: -10%; height: 40%; bottom: 0; border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 80 C 200 10 400 150 600 80 S 1000 10 1200 80 V200 H0Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 80 C 200 10 400 150 600 80 S 1000 10 1200 80 V200 H0Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat; animation: hp-wave 12s ease-in-out infinite alternate; }
.hp-scene-waves .hp-bg i:nth-child(1) { background: rgba(var(--hp-secondary-rgb), .45); bottom: 6%; }
.hp-scene-waves .hp-bg i:nth-child(2) { background: rgba(var(--hp-primary-rgb), .35); height: 30%; animation-delay: -4s; }
.hp-scene-waves .hp-bg i:nth-child(3) { background: rgba(var(--hp-base-rgb), .55); height: 18%; animation-delay: -8s; }
/* grain */
.hp-scene-grain .hp-bg { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(160deg, rgba(var(--hp-secondary-rgb), .7), var(--hp-base) 55%, rgba(var(--hp-primary-rgb), .45)); }
/* paper */
.hp-scene-paper .hp-bg { background: linear-gradient(rgba(var(--hp-text-rgb), .05) 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, transparent 52px, rgba(var(--hp-primary-rgb), .25) 52px 53px, transparent 53px), var(--hp-base); }
/* glass */
.hp-scene-glass .hp-bg i:nth-child(1) { width: 46vmax; height: 46vmax; left: -10vmax; top: -8vmax; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; background: linear-gradient(135deg, var(--hp-primary), var(--hp-secondary)); animation: hp-morph 20s ease-in-out infinite alternate; }
.hp-scene-glass .hp-bg i:nth-child(2) { width: 38vmax; height: 38vmax; right: -12vmax; bottom: -6vmax; border-radius: 62% 38% 46% 54% / 60% 50% 50% 40%; background: linear-gradient(135deg, var(--hp-secondary), var(--hp-primary)); animation: hp-morph 24s ease-in-out infinite alternate-reverse; }
.hp-scene-glass .hp-bg i:nth-child(3) { inset: 0; border-radius: 0; backdrop-filter: blur(60px) saturate(1.3); -webkit-backdrop-filter: blur(60px) saturate(1.3); background: rgba(var(--hp-base-rgb), .38); }
/* spotlight */
.hp-scene-spotlight .hp-bg { background: conic-gradient(from 160deg at 50% -10%, transparent 0deg, rgba(var(--hp-primary-rgb), .35) 18deg, transparent 36deg, transparent 324deg, rgba(var(--hp-secondary-rgb), .35) 342deg, transparent 360deg), radial-gradient(60% 40% at 50% 0%, rgba(var(--hp-text-rgb), .12), transparent 70%), var(--hp-base); }

@keyframes hp-float { to { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); } }
@keyframes hp-spin { to { transform: rotate(360deg); } }
@keyframes hp-grid { to { background-position: 0 60px, 0 0; } }
@keyframes hp-wave { to { transform: translateX(-6%); } }
@keyframes hp-morph { to { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(3vmax, 4vmax) rotate(20deg); } }

/* ---------- Toolbar ---------- */
.hp-toolbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 16px 0; max-width: 680px; margin: 0 auto; pointer-events: none; }
.hp-tool { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 42px; min-width: 42px; justify-content: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hp-border); background: rgba(var(--hp-base-rgb), .55); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); color: var(--hp-text); font-weight: 700; font-size: 14px; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.hp-tool:hover { transform: translateY(-1px); background: rgba(var(--hp-base-rgb), .75); }
.hp-tool[data-hp-qr] { padding: 0; width: 42px; }
.hp-ico { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.hp-main { position: relative; width: 100%; max-width: 620px; margin: 0 auto; padding: 18px 18px max(36px, env(safe-area-inset-bottom)); }
.hp-head { text-align: center; display: grid; justify-items: center; gap: 6px; padding: 18px 0 22px; animation: hp-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.hp-avatar { position: relative; width: 112px; height: 112px; margin-bottom: 10px; border-radius: 30px; padding: 3px; }
.hp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: rgba(var(--hp-text-rgb), .08); border: 3px solid var(--hp-base); }
.hp-avatar-round, .hp-avatar-round img { border-radius: 50%; }
.hp-ring-gradient { background: conic-gradient(from 210deg, var(--hp-primary), var(--hp-secondary), var(--hp-primary)); }
.hp-ring-glow { background: var(--hp-primary); box-shadow: 0 0 0 6px rgba(var(--hp-primary-rgb), .15), 0 0 46px rgba(var(--hp-primary-rgb), .55); }
.hp-ring-solid { background: var(--hp-text); }
.hp-ring-none { padding: 0; }
.hp-ring-none img { border: 0; }
.hp-name { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--hp-font-heading); font-size: clamp(24px, 6vw, 32px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.hp-verified { width: 24px; height: 24px; flex: none; }
.hp-handle { margin: 0; font-size: 14px; font-weight: 700; color: var(--hp-primary); letter-spacing: .01em; }
.hp-handle span { color: rgba(var(--hp-text-rgb), .62); font-weight: 600; }
.hp-bio { margin: 6px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: rgba(var(--hp-text-rgb), .82); text-wrap: pretty; }
.hp-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.hp-social { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--hp-surface); border: 1px solid var(--hp-border); color: var(--hp-text); transition: transform .2s ease, background .2s ease, color .2s ease; }
.hp-social:hover { transform: translateY(-2px); background: var(--hp-primary); color: var(--hp-on-primary); }
.hp-mark { width: 20px; height: 20px; }

/* ---------- Blocks ---------- */
.hp-blocks { display: grid; gap: var(--hp-gap); }
.hp-blocks > * { animation: hp-rise .6s cubic-bezier(.2,.8,.2,1) both; }
.hp-blocks > *:nth-child(2) { animation-delay: .05s; } .hp-blocks > *:nth-child(3) { animation-delay: .1s; } .hp-blocks > *:nth-child(4) { animation-delay: .15s; } .hp-blocks > *:nth-child(5) { animation-delay: .2s; } .hp-blocks > *:nth-child(n+6) { animation-delay: .25s; }
@keyframes hp-rise { from { opacity: 0; transform: translateY(14px); } }
.hp-header { margin: 14px 0 0; text-align: center; font-family: var(--hp-font-heading); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--hp-text-rgb), .7); display: grid; gap: 4px; }
.hp-header small { font-family: var(--hp-font-body); letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 500; color: rgba(var(--hp-text-rgb), .6); }
.hp-empty { text-align: center; opacity: .7; }

.hp-link { position: relative; display: grid; grid-template-columns: 52px 1fr 32px; align-items: center; gap: 14px; min-height: 72px; padding: 10px 14px 10px 10px; border-radius: var(--hp-radius); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .22s ease, border-color .22s ease; overflow: hidden; }
.hp-thumb { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: rgba(var(--hp-text-rgb), .08); color: var(--hp-text); }
.hp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-thumb .hp-mark { width: 24px; height: 24px; }
.hp-link-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
.hp-link-copy strong { font-family: var(--hp-font-heading); font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hp-link-copy small { font-size: 13px; line-height: 1.35; opacity: .72; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hp-link-go { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; transition: transform .22s ease, background .22s ease; }
.hp-link:hover { transform: translateY(-2px); }
.hp-link:hover .hp-link-go { transform: rotate(45deg); }
.hp-link:active { transform: scale(.985); }
.hp-link-featured { grid-template-columns: 1fr; padding: 0; min-height: 0; }
.hp-link-featured .hp-thumb { width: 100%; height: auto; aspect-ratio: 16/8; border-radius: 0; }
.hp-link-featured .hp-thumb .hp-mark { width: 40px; height: 40px; }
.hp-link-featured .hp-link-copy { padding: 4px 16px 14px; }
.hp-link-featured .hp-link-go { position: absolute; top: 12px; right: 12px; background: rgba(var(--hp-base-rgb), .6); backdrop-filter: blur(10px); }

/* brand tints on thumbs without images */
.hp-thumb.hp-brand-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; }
.hp-thumb.hp-brand-youtube { background: #ff0033; color: #fff; }
.hp-thumb.hp-brand-whatsapp { background: #25d366; color: #fff; }
.hp-thumb.hp-brand-linkedin { background: #0a66c2; color: #fff; }
.hp-thumb.hp-brand-facebook { background: #1877f2; color: #fff; }
.hp-thumb.hp-brand-tiktok, .hp-thumb.hp-brand-x, .hp-thumb.hp-brand-threads, .hp-thumb.hp-brand-github { background: #000; color: #fff; }
.hp-thumb.hp-brand-spotify { background: #1db954; color: #000; }
.hp-thumb.hp-brand-telegram { background: #229ed9; color: #fff; }
.hp-thumb.hp-brand-pinterest { background: #e60023; color: #fff; }
.hp-thumb.hp-brand-kwai { background: #ff7a00; color: #fff; }
.hp-thumb.hp-brand-behance { background: #1769ff; color: #fff; }

/* ---- Button styles ---- */
.hp-btn-glass .hp-link, .hp-btn-glass .hp-product, .hp-btn-glass .hp-lead { background: var(--hp-surface); border: 1px solid var(--hp-border); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.06); }
.hp-btn-glass .hp-link:hover { border-color: rgba(var(--hp-primary-rgb), .55); box-shadow: 0 18px 44px rgba(var(--hp-primary-rgb), .18); }
.hp-btn-glass .hp-link-go { background: rgba(var(--hp-text-rgb), .08); }
.hp-btn-solid .hp-link, .hp-btn-solid .hp-product, .hp-btn-solid .hp-lead { background: var(--hp-primary); color: var(--hp-on-primary); border: 0; box-shadow: 0 14px 30px rgba(var(--hp-primary-rgb), .28); }
.hp-btn-solid .hp-thumb { background: rgba(0,0,0,.12); color: inherit; }
.hp-btn-solid .hp-link-go { background: rgba(0,0,0,.1); }
.hp-btn-solid .hp-lead input:not([type=checkbox]) { background: rgba(255,255,255,.9); color: #111; }
.hp-btn-solid .hp-lead .hp-btn-cta { background: var(--hp-on-primary); color: var(--hp-primary); }
.hp-btn-outline .hp-link, .hp-btn-outline .hp-product, .hp-btn-outline .hp-lead { background: transparent; border: 2px solid rgba(var(--hp-text-rgb), .85); }
.hp-btn-outline .hp-link:hover { background: var(--hp-text); color: var(--hp-base); }
.hp-btn-outline .hp-link:hover .hp-thumb:not([class*=hp-brand-]) { background: rgba(var(--hp-base-rgb), .15); color: var(--hp-base); }
.hp-btn-pill .hp-link { border-radius: 999px; background: var(--hp-text); color: var(--hp-base); padding-right: 18px; }
.hp-btn-pill .hp-thumb { border-radius: 50%; }
.hp-btn-pill .hp-product, .hp-btn-pill .hp-lead { background: var(--hp-surface); border: 1px solid var(--hp-border); }
.hp-btn-pill .hp-link-featured { border-radius: 28px; }
.hp-btn-soft .hp-link, .hp-btn-soft .hp-product, .hp-btn-soft .hp-lead { background: rgba(var(--hp-primary-rgb), .16); border: 1px solid rgba(var(--hp-primary-rgb), .3); border-radius: 26px; }
.hp-btn-soft .hp-thumb { border-radius: 18px; background: rgba(var(--hp-primary-rgb), .22); color: var(--hp-primary); }
.hp-btn-brutal .hp-link, .hp-btn-brutal .hp-product, .hp-btn-brutal .hp-lead { background: var(--hp-text); color: var(--hp-base); border: 2px solid var(--hp-text); border-radius: 10px; box-shadow: 6px 6px 0 var(--hp-primary); }
.hp-btn-brutal .hp-link:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--hp-primary); }
.hp-btn-brutal .hp-link:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--hp-primary); }
.hp-btn-brutal .hp-thumb { border-radius: 6px; }
.hp-btn-brutal .hp-lead input:not([type=checkbox]) { color: #111; }
.hp-btn-neon .hp-link, .hp-btn-neon .hp-product, .hp-btn-neon .hp-lead { background: rgba(var(--hp-base-rgb), .55); border: 1.5px solid var(--hp-primary); box-shadow: 0 0 0 1px rgba(var(--hp-primary-rgb), .2), 0 0 22px rgba(var(--hp-primary-rgb), .35), inset 0 0 18px rgba(var(--hp-primary-rgb), .12); }
.hp-btn-neon .hp-link-copy strong { text-shadow: 0 0 12px rgba(var(--hp-primary-rgb), .6); }
.hp-btn-neon .hp-link:hover { box-shadow: 0 0 0 1px rgba(var(--hp-primary-rgb), .4), 0 0 38px rgba(var(--hp-primary-rgb), .6), inset 0 0 22px rgba(var(--hp-primary-rgb), .2); }

/* ---- Highlight effects (Pro+) ---- */
.hp-fx-pulse { animation: hp-pulse 2.4s ease-in-out infinite !important; }
@keyframes hp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--hp-primary-rgb), .55); } 50% { box-shadow: 0 0 0 10px rgba(var(--hp-primary-rgb), 0); } }
.hp-fx-shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); transform: translateX(-120%); animation: hp-shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes hp-shine { 60%, 100% { transform: translateX(120%); } }
.hp-fx-wiggle { animation: hp-wiggle 4s ease-in-out infinite !important; }
@keyframes hp-wiggle { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(-2deg); } 92% { transform: rotate(2deg); } 96% { transform: rotate(-1deg); } }

/* ---- Grid layout (Premium) ---- */
.hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-grid > .hp-header, .hp-grid > .hp-embed, .hp-grid > .hp-lead, .hp-grid > .hp-product { grid-column: 1 / -1; }
.hp-grid .hp-link { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px 12px; min-height: 150px; align-content: center; }
.hp-grid .hp-link-copy { text-align: center; }
.hp-grid .hp-thumb { width: 60px; height: 60px; }
.hp-grid .hp-link-go { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; }
.hp-grid .hp-link-go .hp-ico { width: 14px; height: 14px; }

/* ---- Product ---- */
.hp-product { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 10px; border-radius: calc(var(--hp-radius) + 4px); overflow: hidden; transition: transform .22s ease; }
.hp-product:hover { transform: translateY(-2px); }
.hp-product-media { aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: rgba(var(--hp-text-rgb), .08); }
.hp-product-media img { width: 100%; height: 100%; object-fit: cover; }
.hp-product-media .hp-mark { width: 34px; height: 34px; opacity: .8; }
.hp-product-body { display: grid; align-content: center; gap: 4px; min-width: 0; padding-right: 6px; }
.hp-product-body strong { font-family: var(--hp-font-heading); font-size: 16px; line-height: 1.25; }
.hp-product-body small { font-size: 13px; opacity: .72; line-height: 1.35; }
.hp-badge { justify-self: start; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--hp-primary); color: var(--hp-on-primary); }
.hp-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.hp-product-foot b { font-family: var(--hp-font-heading); font-size: 18px; }
.hp-product-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--hp-primary); color: var(--hp-on-primary); font-weight: 800; font-size: 13px; }
.hp-btn-solid .hp-product-cta { background: var(--hp-on-primary); color: var(--hp-primary); }

/* ---- Embeds ---- */
.hp-embed { margin: 0; border-radius: var(--hp-radius); overflow: hidden; background: rgba(0,0,0,.35); border: 1px solid var(--hp-border); }
.hp-embed iframe { display: block; width: 100%; border: 0; }
.hp-embed-video iframe, .hp-embed-video .hp-embed-placeholder { aspect-ratio: 16/9; }
.hp-embed-track iframe, .hp-embed-track .hp-embed-placeholder { height: 152px; }
.hp-embed-list iframe, .hp-embed-list .hp-embed-placeholder { height: 352px; }
.hp-embed figcaption { padding: 10px 14px; font-size: 13px; font-weight: 700; }
.hp-embed-placeholder { display: grid; place-items: center; align-content: center; gap: 8px; color: var(--hp-text); background: linear-gradient(135deg, rgba(var(--hp-secondary-rgb), .5), rgba(var(--hp-primary-rgb), .25)); font-weight: 700; }
.hp-embed-placeholder .hp-mark { width: 40px; height: 40px; }

/* ---- Lead form ---- */
.hp-lead { display: grid; gap: 10px; padding: 18px; border-radius: calc(var(--hp-radius) + 4px); }
.hp-lead-head { display: grid; gap: 2px; text-align: center; margin-bottom: 4px; }
.hp-lead-head strong { font-family: var(--hp-font-heading); font-size: 17px; }
.hp-lead-head small { opacity: .75; font-size: 13px; }
.hp-lead input:not([type=checkbox]) { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hp-border); background: rgba(var(--hp-base-rgb), .5); color: var(--hp-text); font-size: 16px; }
.hp-lead input::placeholder { color: rgba(var(--hp-text-rgb), .55); }
.hp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; opacity: .85; text-align: left; }
.hp-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--hp-primary); flex: none; }
.hp-btn-cta { height: 50px; border: 0; border-radius: 12px; background: var(--hp-primary); color: var(--hp-on-primary); font-weight: 800; font-size: 15px; cursor: pointer; transition: filter .2s ease, transform .2s ease; }
.hp-btn-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hp-btn-cta:disabled { opacity: .7; cursor: default; }
.hp-lead-msg { margin: 0; min-height: 1em; font-size: 13px; text-align: center; font-weight: 700; }
.hp-lead-msg.is-error { color: #ff8a8a; }
.hp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- Branding ---- */
.hp-brandline { display: flex; justify-content: center; margin-top: 34px; }
.hp-brandline a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 16px; border-radius: 999px; background: rgba(var(--hp-base-rgb), .5); border: 1px solid var(--hp-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 13px; }
.hp-brandline b { font-family: 'Sora', sans-serif; }
.hp-brandline i { font-style: normal; opacity: .7; }

/* ---- Demo customizer + modals ---- */
.hp-demo-fab { white-space: nowrap; position: fixed; z-index: 20; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--hp-primary), var(--hp-secondary)); color: var(--hp-on-primary); font-weight: 800; font-size: 15px; box-shadow: 0 18px 50px rgba(0,0,0,.4); cursor: pointer; animation: hp-rise .6s .6s both; }
.hp-sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(5,5,10,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; align-items: end; justify-items: center; animation: hp-fade .2s ease; }
@keyframes hp-fade { from { opacity: 0; } }
.hp-sheet { width: min(560px, 100%); max-height: 82vh; overflow: auto; background: #13131c; color: #f4f4f8; border-radius: 26px 26px 0 0; padding: 18px 18px max(22px, env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.5); animation: hp-up .35s cubic-bezier(.2,.8,.2,1); font-family: 'Manrope', system-ui, sans-serif; }
@media (min-width: 720px) { .hp-sheet-backdrop { align-items: center; } .hp-sheet { border-radius: 26px; } }
@keyframes hp-up { from { transform: translateY(40px); opacity: 0; } }
.hp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hp-sheet-head strong { font-family: 'Sora', sans-serif; font-size: 18px; }
.hp-sheet-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hp-sheet h3 { margin: 16px 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hp-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.hp-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.hp-chip[aria-pressed="true"] { border-color: #dafa73; background: rgba(218,250,115,.12); }
.hp-chip-sw { display: inline-flex; }
.hp-chip-sw i { width: 18px; height: 18px; border-radius: 50%; margin-left: -6px; border: 2px solid #13131c; }
.hp-chip-sw i:first-child { margin-left: 0; }
.hp-chip.no-sw { padding-left: 14px; }
.hp-sheet-cta { display: flex; gap: 10px; margin-top: 18px; }
.hp-sheet-cta a { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 48px; border-radius: 14px; background: #dafa73; color: #0b0b12; font-weight: 800; }
.hp-sheet-cta a + a { background: rgba(255,255,255,.08); color: #fff; }
.hp-qr-card { display: grid; justify-items: center; gap: 14px; text-align: center; }
.hp-qr-card svg { width: min(260px, 70vw); height: auto; background: #fff; padding: 14px; border-radius: 20px; }
.hp-qr-card p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; word-break: break-all; }
.hp-qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hp-qr-actions button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font-weight: 700; cursor: pointer; }
.hp-qr-actions button:first-child { background: #dafa73; color: #0b0b12; border: 0; }
.hp-toast { position: fixed; z-index: 60; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%); padding: 12px 18px; border-radius: 999px; background: #13131c; color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.4); animation: hp-up .3s ease; font-family: 'Manrope', system-ui, sans-serif; }

/* ---- Preview mode (inside dashboard phone) ---- */
.hp-preview { min-height: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.hp-preview::-webkit-scrollbar { display: none; }
.hp-preview .hp-main { padding: 26px 14px 30px; }
.hp-preview .hp-avatar { width: 92px; height: 92px; }
.hp-preview .hp-name { font-size: 22px; }
.hp-preview .hp-bio { font-size: 13.5px; }
.hp-preview .hp-link { min-height: 62px; grid-template-columns: 44px 1fr 26px; gap: 10px; }
.hp-preview .hp-thumb { width: 44px; height: 44px; border-radius: 12px; }
.hp-preview .hp-link-copy strong { font-size: 14px; }
.hp-preview .hp-link-copy small { font-size: 12px; }
.hp-preview .hp-social { width: 36px; height: 36px; border-radius: 11px; }
.hp-preview .hp-mark { width: 17px; height: 17px; }
.hp-preview .hp-product { grid-template-columns: 84px 1fr; }
.hp-preview .hp-grid .hp-link { min-height: 120px; }
.hp-preview a { pointer-events: none; }

@media (min-width: 900px) {
  .hp-main { padding-top: 34px; }
  .hp-avatar { width: 128px; height: 128px; }
  .hp-preview .hp-avatar { width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp *, .hp *::before, .hp *::after, .hp-demo-fab, .hp-sheet { animation: none !important; transition: none !important; }
}
.hp-thumb-logo { background: #0b0b12; }
.hp-thumb-logo img { object-fit: contain; }
.hp-sheet-backdrop, .hp-sheet-backdrop *, .hp-toast { box-sizing: border-box; }
.hp-sheet a { text-decoration: none; }
.hp-sheet button { font-family: inherit; }
.hp h2.hp-header { font-size: 13px; line-height: 1.3; letter-spacing: .14em; margin: 14px 0 0; }
.hp-preview .hp-scene-sunrise .hp-bg i:nth-child(1) { width: 140%; height: auto; aspect-ratio: 1; bottom: -70%; }
.hp-preview .hp-scene-halo .hp-bg i:nth-child(1) { width: 140%; height: auto; aspect-ratio: 1; top: 92px; }
/* Leave room so the floating demo button never covers the last block. */
.hp-has-demo .hp-main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* =====================================================================
   Exclusive theme · Oxóssi (orixá da mata) + atabaque da curimba
   Night forest, moonlight, fireflies, golden ofá and drum-beat pulses.
   ===================================================================== */
.hp-x-oxossi { --ox-gold: #e8c36a; --ox-gold-2: #f6e3a8; --ox-leaf: #2bd38a; --ox-teal: #19c3b0; }
.hp-x-oxossi .hp-bg { background: radial-gradient(90% 55% at 50% 0%, rgba(25,195,176,.18), transparent 70%), radial-gradient(70% 50% at 50% 100%, rgba(43,211,138,.14), transparent 70%), linear-gradient(180deg, #03140d 0%, #052417 55%, #020d08 100%); }
.hp-x-oxossi .hp-bg i { display: none; }
.hp-ox-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hp-preview .hp-ox-scene { position: absolute; }
.hp-ox-moon { position: absolute; top: 7%; right: 12%; width: clamp(56px, 12vmin, 110px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fffbe9, #f2dfa2 55%, #d9b45f 100%); box-shadow: 0 0 40px rgba(246,227,168,.45), 0 0 120px rgba(246,227,168,.18); opacity: .9; }
.hp-ox-rays { position: absolute; inset: -20% -10% 30% -10%; background: conic-gradient(from 200deg at 82% 8%, transparent 0deg, rgba(246,227,168,.10) 10deg, transparent 22deg, rgba(246,227,168,.07) 34deg, transparent 46deg, rgba(246,227,168,.06) 60deg, transparent 72deg); animation: ox-rays 14s ease-in-out infinite alternate; transform-origin: 82% 8%; }
@keyframes ox-rays { to { transform: rotate(4deg); opacity: .7; } }
.hp-ox-canopy { position: absolute; top: -6px; left: -40px; width: min(62vw, 560px); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); animation: ox-sway 9s ease-in-out infinite alternate; transform-origin: 0 0; }
.hp-ox-canopy-r { left: auto; right: -40px; transform: scaleX(-1); animation-name: ox-sway-r; transform-origin: 50% 0; }
@keyframes ox-sway { to { transform: rotate(1.6deg); } }
@keyframes ox-sway-r { to { transform: scaleX(-1) rotate(1.6deg); } }
.hp-ox-forest { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30vh; min-height: 160px; }
.hp-preview .hp-ox-forest { height: 22%; min-height: 0; }
.hp-preview .hp-ox-canopy { width: 70%; }
.hp-ox-flies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #e6ff9a; box-shadow: 0 0 10px 3px rgba(214,255,120,.55); opacity: 0; animation: ox-fly 9s ease-in-out infinite; }
.hp-ox-flies i:nth-child(1) { left: 8%; top: 62%; animation-delay: 0s; }
.hp-ox-flies i:nth-child(2) { left: 18%; top: 78%; animation-delay: -2s; }
.hp-ox-flies i:nth-child(3) { left: 27%; top: 54%; animation-delay: -4s; animation-duration: 11s; }
.hp-ox-flies i:nth-child(4) { left: 36%; top: 84%; animation-delay: -6s; }
.hp-ox-flies i:nth-child(5) { left: 47%; top: 70%; animation-delay: -1s; animation-duration: 12s; }
.hp-ox-flies i:nth-child(6) { left: 58%; top: 88%; animation-delay: -3s; }
.hp-ox-flies i:nth-child(7) { left: 66%; top: 60%; animation-delay: -5s; animation-duration: 10s; }
.hp-ox-flies i:nth-child(8) { left: 74%; top: 80%; animation-delay: -7s; }
.hp-ox-flies i:nth-child(9) { left: 83%; top: 66%; animation-delay: -2.5s; }
.hp-ox-flies i:nth-child(10) { left: 92%; top: 86%; animation-delay: -4.5s; animation-duration: 12s; }
.hp-ox-flies i:nth-child(11) { left: 12%; top: 40%; animation-delay: -6.5s; }
.hp-ox-flies i:nth-child(12) { left: 88%; top: 44%; animation-delay: -1.5s; }
.hp-ox-flies i:nth-child(13) { left: 52%; top: 46%; animation-delay: -8s; animation-duration: 13s; }
.hp-ox-flies i:nth-child(14) { left: 4%; top: 90%; animation-delay: -3.5s; }
@keyframes ox-fly { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .95; } 50% { opacity: .35; transform: translate(14px, -26px); } 75% { opacity: .9; } 100% { opacity: 0; transform: translate(-10px, -48px); } }

/* Header: ofá crest, rotating saudação and drum-beat pulses */
.hp-x-oxossi .hp-head { padding-top: 6px; }
.hp-ox-crest { display: block; color: var(--ox-gold); filter: drop-shadow(0 0 12px rgba(232,195,106,.45)); margin-bottom: -2px; animation: ox-glow 4.8s ease-in-out infinite; }
.hp-ox-ofa { width: 92px; height: auto; display: block; }
@keyframes ox-glow { 50% { filter: drop-shadow(0 0 22px rgba(232,195,106,.75)); } }
.hp-x-oxossi .hp-avatar { width: 124px; height: 124px; margin: 44px 0 26px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--ox-gold), var(--ox-leaf), var(--ox-teal), var(--ox-gold)); box-shadow: 0 0 0 6px rgba(3,20,13,.6), 0 0 50px rgba(43,211,138,.35); }
.hp-x-oxossi .hp-avatar img { border-radius: 50%; border-color: #03140d; position: relative; z-index: 1; }
.hp-ox-ring { position: absolute; inset: -38px; width: calc(100% + 76px); height: calc(100% + 76px); color: var(--ox-gold); animation: ox-spin 48s linear infinite; z-index: 0; }
@keyframes ox-spin { to { transform: rotate(360deg); } }
.hp-ox-beat { position: absolute; inset: 0; z-index: 0; }
.hp-ox-beat i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(232,195,106,.7); opacity: 0; animation: ox-beat 2.4s cubic-bezier(.2,.7,.3,1) infinite; }
.hp-ox-beat i:nth-child(2) { animation-delay: .3s; border-color: rgba(43,211,138,.7); }
.hp-ox-beat i:nth-child(3) { animation-delay: 1.2s; border-color: rgba(25,195,176,.6); }
@keyframes ox-beat { 0% { opacity: .9; transform: scale(1); } 70% { opacity: 0; transform: scale(1.75); } 100% { opacity: 0; transform: scale(1.75); } }
.hp-x-oxossi .hp-name { background: linear-gradient(180deg, #fff6d9 0%, var(--ox-gold-2) 45%, var(--ox-gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 14px rgba(232,195,106,.25)); font-size: clamp(26px, 7vw, 36px); }
.hp-x-oxossi .hp-handle { color: var(--ox-leaf); letter-spacing: .04em; }
.hp-x-oxossi .hp-bio { color: rgba(243,239,225,.86); }
.hp-ox-eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 14px; font-family: var(--hp-font-heading); font-size: 11.5px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--ox-gold); }
.hp-ox-eyebrow span { flex: 1; max-width: 90px; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,195,106,.7)); }
.hp-ox-eyebrow span:last-child { background: linear-gradient(270deg, transparent, rgba(232,195,106,.7)); }

/* Links: dark mata glass with a golden blade */
.hp-x-oxossi .hp-link, .hp-x-oxossi .hp-product { position: relative; background: linear-gradient(135deg, rgba(8,46,30,.72), rgba(3,22,15,.72)) !important; border: 1px solid rgba(232,195,106,.24) !important; border-radius: 20px; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(246,227,168,.08) !important; color: #f3efe1 !important; overflow: hidden; }
.hp-x-oxossi .hp-link::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--ox-gold), var(--ox-leaf)); opacity: .85; }
.hp-x-oxossi .hp-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(246,227,168,.14) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s ease; pointer-events: none; }
.hp-x-oxossi .hp-link:hover { border-color: rgba(232,195,106,.55) !important; box-shadow: 0 18px 44px rgba(43,211,138,.18), inset 0 1px 0 rgba(246,227,168,.12) !important; }
.hp-x-oxossi .hp-link:hover::after { transform: translateX(120%); }
.hp-x-oxossi .hp-link-copy strong { font-size: 16.5px; letter-spacing: -.005em; }
.hp-x-oxossi .hp-link-copy small { color: rgba(243,239,225,.72); opacity: 1; }
.hp-x-oxossi .hp-link-go { background: rgba(232,195,106,.12); color: var(--ox-gold); }
.hp-x-oxossi .hp-thumb { border-radius: 50%; box-shadow: 0 0 0 2px rgba(232,195,106,.35); }
.hp-x-oxossi .hp-blocks { gap: 14px; }

/* Footer: atabaque + rhythm */
.hp-ox-footer { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 34px auto 6px; padding: 14px 20px; width: fit-content; max-width: 100%; border-radius: 999px; background: rgba(3,20,13,.6); border: 1px solid rgba(232,195,106,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hp-ox-drum { width: 28px; height: 40px; flex: none; transform-origin: 50% 100%; animation: ox-drum 2.4s ease-in-out infinite; }
@keyframes ox-drum { 0%, 12.5%, 50%, 100% { transform: scale(1); } 6% { transform: scale(1.08, .94); } 18% { transform: scale(1.06, .95); } 56% { transform: scale(1.1, .92); } }
.hp-ox-footer div { display: grid; line-height: 1.25; }
.hp-ox-footer strong { font-family: var(--hp-font-heading); color: var(--ox-gold-2); font-size: 15px; letter-spacing: .02em; }
.hp-ox-footer small { color: rgba(243,239,225,.66); font-size: 12px; }
.hp-ox-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.hp-ox-bars i { width: 3px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--ox-gold), var(--ox-leaf)); transform-origin: bottom; animation: ox-bar 1.2s ease-in-out infinite; }
.hp-ox-bars i:nth-child(2) { animation-delay: -.3s; } .hp-ox-bars i:nth-child(3) { animation-delay: -.6s; } .hp-ox-bars i:nth-child(4) { animation-delay: -.15s; } .hp-ox-bars i:nth-child(5) { animation-delay: -.45s; }
@keyframes ox-bar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.hp-preview.hp-x-oxossi .hp-avatar { width: 96px; height: 96px; margin: 36px 0 22px; }
.hp-preview .hp-ox-ofa { width: 70px; }
@media (max-width: 360px) { .hp-ox-ring { inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); } .hp-ox-footer { padding: 12px 14px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .hp-ox-scene *, .hp-ox-ring, .hp-ox-beat i, .hp-ox-crest, .hp-ox-drum, .hp-ox-bars i { animation: none !important; } .hp-ox-flies i { opacity: .6; } .hp-ox-beat { display: none; } }
body.hp-page:has(.hp-x-oxossi) { background: #020d08; }

/* =====================================================================
   Exclusive theme · Yggdrasil (ALN Digital) — "Das raízes aos frutos"
   ===================================================================== */
.hp-x-yggdrasil { --yg-lime: #d6ff62; --yg-ink: #f2f3ed; --yg-muted: #a3aaa7; --yg-bg: #090b0c; --yg-surface: #111415; }
.hp-x-yggdrasil .hp-bg { background: radial-gradient(70% 45% at 50% 58%, rgba(214,255,98,.07), transparent 70%), linear-gradient(rgba(242,243,237,.025) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(242,243,237,.025) 1px, transparent 1px) 0 0 / 48px 48px, var(--yg-bg); }
.hp-x-yggdrasil .hp-bg i { display: none; }
.hp-yg-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hp-preview .hp-yg-scene { position: absolute; }
.hp-yg-tree { position: absolute; left: 50%; top: 50%; width: min(1100px, 150vw); height: auto; transform: translate(-50%, -46%); opacity: .5; }
.hp-yg-line { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: yg-draw 3.6s cubic-bezier(.4,.1,.2,1) .2s forwards; filter: drop-shadow(0 0 6px rgba(214,255,98,.35)); }
.hp-yg-roots { animation-delay: .9s; filter: none; }
@keyframes yg-draw { to { stroke-dashoffset: 0; } }
.hp-yg-nodes circle { fill: var(--yg-lime); opacity: 0; transform-box: fill-box; transform-origin: center; animation: yg-node .6s ease forwards, yg-pulse 3.2s ease-in-out infinite; animation-delay: calc(1.6s + var(--i) * .12s), calc(2.4s + var(--i) * .2s); }
.hp-yg-nodes circle:nth-child(n+12) { fill: var(--yg-ink); }
@keyframes yg-node { from { opacity: 0; transform: scale(.2); } to { opacity: .95; transform: scale(1); } }
@keyframes yg-pulse { 50% { transform: scale(1.5); opacity: .55; } }
.hp-yg-heart { fill: var(--yg-lime); filter: drop-shadow(0 0 14px rgba(214,255,98,.9)); transform-box: fill-box; transform-origin: center; animation: yg-pulse 2.4s ease-in-out infinite; }
.hp-yg-hud { position: absolute; font: 600 10.5px/1.6 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--yg-muted); text-transform: uppercase; }
.hp-yg-hud b { color: var(--yg-ink); font-weight: 700; }
.hp-yg-hud-tl { left: max(18px, env(safe-area-inset-left)); top: 70px; }
.hp-yg-hud-br { right: max(18px, env(safe-area-inset-right)); bottom: 22px; text-align: right; }
.hp-yg-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--yg-lime); box-shadow: 0 0 10px var(--yg-lime); animation: yg-pulse 2s ease-in-out infinite; vertical-align: 1px; }
.hp-yg-bar { display: block; width: 130px; height: 2px; margin: 6px 0 0 auto; background: rgba(242,243,237,.12); overflow: hidden; }
.hp-yg-bar i { display: block; height: 100%; width: 100%; background: var(--yg-lime); transform-origin: left; animation: yg-bar 3.6s cubic-bezier(.4,.1,.2,1) .4s both; }
@keyframes yg-bar { from { transform: scaleX(0); } }
.hp-preview .hp-yg-hud, .hp-preview .hp-yg-hud-br { display: none; }
@media (max-width: 720px) { .hp-yg-hud-br { display: none; } .hp-yg-hud-tl { top: 66px; font-size: 9.5px; } .hp-yg-tree { width: 190vw; opacity: .42; } }

/* Header */
.hp-yg-crest-wrap { display: block; color: var(--yg-lime); filter: drop-shadow(0 0 12px rgba(214,255,98,.45)); }
.hp-yg-crest { width: 46px; height: 46px; display: block; }
.hp-x-yggdrasil .hp-head { padding-top: 10px; }
.hp-x-yggdrasil .hp-avatar { width: 120px; height: 120px; margin: 40px 0 26px; border-radius: 30px; padding: 2px; background: linear-gradient(140deg, var(--yg-lime), rgba(214,255,98,.15) 50%, var(--yg-lime)); box-shadow: 0 0 0 6px rgba(9,11,12,.8), 0 0 60px rgba(214,255,98,.22); }
.hp-x-yggdrasil .hp-avatar img { border-radius: 28px; border-color: var(--yg-bg); position: relative; z-index: 1; background: var(--yg-surface); }
.hp-yg-ring { color: var(--yg-lime); }
.hp-yg-beat i { border-radius: 30px; border-color: rgba(214,255,98,.55) !important; animation-duration: 3s; }
.hp-yg-beat i:nth-child(2) { animation-delay: .5s; }
.hp-x-yggdrasil .hp-name { color: var(--yg-ink); font-size: clamp(28px, 7vw, 38px); letter-spacing: -.035em; }
.hp-x-yggdrasil .hp-handle { color: var(--yg-lime); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .06em; }
.hp-x-yggdrasil .hp-handle span { color: var(--yg-muted); }
.hp-x-yggdrasil .hp-bio { color: rgba(242,243,237,.8); }
.hp-x-yggdrasil .hp-social { background: rgba(17,20,21,.8); border-color: rgba(242,243,237,.12); }
.hp-x-yggdrasil .hp-social:hover { background: var(--yg-lime); color: #090b0c; }
.hp-yg-eyebrow { color: var(--yg-lime); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .22em; }
.hp-yg-eyebrow span { background: linear-gradient(90deg, transparent, rgba(214,255,98,.6)) !important; }
.hp-yg-eyebrow span:last-child { background: linear-gradient(270deg, transparent, rgba(214,255,98,.6)) !important; }

/* Links: graphite cards with a lime pulse */
.hp-x-yggdrasil .hp-link { position: relative; background: linear-gradient(135deg, rgba(17,20,21,.88), rgba(9,11,12,.88)) !important; border: 1px solid rgba(242,243,237,.1) !important; border-radius: 18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(0,0,0,.45) !important; color: var(--yg-ink) !important; overflow: hidden; }
.hp-x-yggdrasil .hp-link::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--yg-lime), transparent); opacity: .7; }
.hp-x-yggdrasil .hp-link::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 140% at 0% 50%, rgba(214,255,98,.12), transparent 45%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.hp-x-yggdrasil .hp-link:hover { border-color: rgba(214,255,98,.45) !important; }
.hp-x-yggdrasil .hp-link:hover::after { opacity: 1; }
.hp-x-yggdrasil .hp-thumb { border-radius: 14px; background: #0b0d0e !important; box-shadow: inset 0 0 0 1px rgba(242,243,237,.1); }
.hp-x-yggdrasil .hp-link-go { background: rgba(214,255,98,.1); color: var(--yg-lime); }
.hp-x-yggdrasil .hp-link-copy small { color: var(--yg-muted); opacity: 1; }
.hp-yg-tag { display: inline-block; justify-self: start; margin-bottom: 2px; font: 700 9.5px/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--yg-lime); padding: 4px 7px; border: 1px solid rgba(214,255,98,.3); border-radius: 999px; }
.hp-yg-footer { display: grid; justify-items: center; gap: 4px; margin: 38px auto 0; text-align: center; }
.hp-yg-footer strong { font-family: var(--hp-font-heading); font-size: 20px; color: var(--yg-ink); letter-spacing: -.02em; }
.hp-yg-footer small { max-width: 34ch; color: var(--yg-muted); font-size: 12.5px; line-height: 1.5; }

/* Signature shown on every exclusive edition: discreet, elegant, converts */
.hp-signature { display: grid; justify-items: center; gap: 8px; margin: 30px auto 4px; text-align: center; }
.hp-signature-line { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--hp-text-rgb), .45), transparent); }
.hp-signature p { margin: 0; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--hp-text-rgb), .6); }
.hp-signature p b { color: rgba(var(--hp-text-rgb), .9); font-family: 'Sora', sans-serif; letter-spacing: .08em; }
.hp-signature a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(var(--hp-primary-rgb), .45); color: var(--hp-primary); font-size: 13px; font-weight: 700; letter-spacing: .02em; background: rgba(var(--hp-base-rgb), .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s ease, color .25s ease, transform .25s ease; }
.hp-signature a:hover { background: var(--hp-primary); color: var(--hp-on-primary); transform: translateY(-1px); }
body.hp-page:has(.hp-x-yggdrasil) { background: #090b0c; }
.hp-preview.hp-x-yggdrasil .hp-avatar { width: 96px; height: 96px; margin: 34px 0 22px; }
@media (prefers-reduced-motion: reduce) { .hp-yg-line { stroke-dashoffset: 0; animation: none; } .hp-yg-nodes circle { opacity: .9; animation: none; } .hp-yg-heart, .hp-yg-dot, .hp-yg-bar i { animation: none; } }
.hp-yg-tree { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, rgba(0,0,0,.28) 38%, rgba(0,0,0,.28) 62%, #000 78%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, #000 22%, rgba(0,0,0,.28) 38%, rgba(0,0,0,.28) 62%, #000 78%, #000 100%); }
@media (max-width: 720px) { .hp-yg-tree { -webkit-mask-image: radial-gradient(ellipse 34% 40% at 50% 46%, rgba(0,0,0,.35), #000 75%); mask-image: radial-gradient(ellipse 34% 40% at 50% 46%, rgba(0,0,0,.35), #000 75%); } }