@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&family=Teko:wght@600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Cinzel:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&family=Syne:wght@600;700;800&family=Montserrat:wght@400;600;700;800;900&family=Bebas+Neue&display=swap');
  :root { --font-main: 'Plus Jakarta Sans', sans-serif; --font-heading: 'Outfit', sans-serif; --btn-radius: 16px; --accent-color: #6366f1; --accent-glow: rgba(99, 102, 241, 0.35); }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: var(--font-main); min-height: 100vh; width: 100%; color: #ffffff; background-color: #07080b; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased; }
  .bg-wrapper { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
  .bg-image { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: blur(2px) brightness(0.45) contrast(1.1); transform: scale(1.03); }
  .bg-video-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.35; filter: contrast(1.1) brightness(0.8); }
  .bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,8,11,0.55) 0%, rgba(7,8,11,0.85) 50%, #07080b 100%); }
  .bg-glow { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 500px; height: 400px; background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%); pointer-events: none; }
  .top-hero-banner { position: relative; width: 100vw; max-width: 480px; height: 180px; overflow: visible; display: flex; justify-content: center; margin-bottom: 2.2rem; }
  .hero-video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 0 0 24px 24px; }
  .hero-banner-video, .hero-banner-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
  .hero-banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,8,11,0.2) 0%, rgba(7,8,11,0.9) 100%); }
  .banner-logo-wrapper { position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%); width: 110px; height: 110px; border-radius: 50%; background: #07080b; padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); border: 3px solid rgba(255, 255, 255, 0.85); z-index: 10; }
  .banner-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .main-container { width: 100%; max-width: 450px; padding: 2.2rem 1.25rem 3rem 1.25rem; display: flex; flex-direction: column; gap: 1.4rem; z-index: 1; }
  .profile-header { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .avatar-container { position: relative; width: 108px; height: 108px; margin-bottom: 0.9rem; }
  .avatar-glow { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); filter: blur(10px); z-index: 0; animation: pulseGlow 3s infinite ease-in-out; }
  @keyframes pulseGlow { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.08); opacity: 0.9; } }
  .profile-avatar { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 30px rgba(0,0,0,0.8); z-index: 1; background: #111; }
  .avatar-shape-square .profile-avatar, .avatar-shape-square .avatar-glow { border-radius: 20px; }
  .avatar-shape-circle .profile-avatar, .avatar-shape-circle .avatar-glow { border-radius: 50%; }
  .logo-spin-3d { animation: slow-spin 12s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; transform-style: preserve-3d; }
  @keyframes slow-spin { 0% { transform: rotateY(0deg); } 25% { transform: rotateY(15deg) translateY(-3px); } 50% { transform: rotateY(0deg); } 75% { transform: rotateY(-15deg) translateY(-3px); } 100% { transform: rotateY(0deg); } }
  .verified-badge { position: absolute; bottom: 2px; right: 2px; width: 25px; height: 25px; background: #ffffff; border-radius: 50%; color: #07080b; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; border: 2px solid #07080b; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.6); }
  .profile-title { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 800; letter-spacing: 2px; color: #ffffff; margin-bottom: 0.35rem; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
  .profile-username { color: #cbd5e1; font-size: 0.84rem; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); margin-bottom: 0.6rem; transition: all 0.2s ease; }
  .profile-username:hover { background: #ffffff; color: #000000; }
  .profile-bio { font-size: 0.86rem; color: #e2e8f0; font-weight: 500; line-height: 1.45; max-width: 360px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
  .artwork-card { border-radius: var(--btn-radius); overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); background: rgba(18, 20, 28, 0.85); transition: all 0.3s ease; }
  .artwork-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.3); }
  .artwork-image { width: 100%; height: auto; display: block; object-fit: cover; }
  .links-section { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; }
  .action-btn { display: flex; align-items: center; padding: 0.85rem 1.1rem; background: rgba(18, 20, 28, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--btn-radius); color: #ffffff; text-decoration: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
  .btn-style-glass .action-btn { background: rgba(18, 20, 28, 0.75); backdrop-filter: blur(16px); }
  .btn-style-solid .action-btn { background: #141721; border-color: rgba(255, 255, 255, 0.18); }
  .btn-style-neon .action-btn { background: rgba(10, 12, 18, 0.9); border-color: var(--accent-color); box-shadow: 0 0 15px var(--accent-glow); }
  .action-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); transform: skewX(-20deg); transition: 0.5s ease; }
  .action-btn:hover::before { left: 140%; }
  .action-btn:hover { transform: translateY(-3px) scale(1.015); background: rgba(28, 32, 45, 0.95); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
  .action-btn:active { transform: translateY(0) scale(0.99); }
  .btn-icon { width: 44px; height: 44px; border-radius: 12px; background: #ffffff; color: #000000; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-right: 0.9rem; flex-shrink: 0; transition: transform 0.2s ease; }
  .action-btn:hover .btn-icon { transform: scale(1.08); }
  .btn-text-content { flex-grow: 1; display: flex; flex-direction: column; text-align: left; min-width: 0; }
  .btn-label { font-size: 0.95rem; font-weight: 700; font-family: var(--font-heading); letter-spacing: 0.3px; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btn-sub { font-size: 0.74rem; color: #94a3b8; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btn-arrow { color: #64748b; font-size: 0.85rem; margin-left: 0.6rem; flex-shrink: 0; transition: all 0.2s ease; }
  .action-btn:hover .btn-arrow { color: #ffffff; transform: translateX(4px); }
  .btn-whatsapp { border-color: rgba(37, 211, 102, 0.4); background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(15, 23, 42, 0.85)); }
  .btn-whatsapp .btn-icon { background: #25d366; color: #ffffff; box-shadow: 0 0 14px rgba(37, 211, 102, 0.4); }
  .btn-whatsapp:hover { border-color: #25d366; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(37, 211, 102, 0.25); }
  .btn-shopee { border-color: rgba(238, 77, 45, 0.4); background: linear-gradient(135deg, rgba(238, 77, 45, 0.18), rgba(15, 23, 42, 0.85)); }
  .btn-shopee .btn-icon { background: #ee4d2d; color: #ffffff; box-shadow: 0 0 14px rgba(238, 77, 45, 0.4); }
  .btn-shopee:hover { border-color: #ee4d2d; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(238, 77, 45, 0.25); }
  .btn-mercadolivre { border-color: rgba(255, 230, 0, 0.4); background: linear-gradient(135deg, rgba(255, 230, 0, 0.15), rgba(15, 23, 42, 0.85)); }
  .btn-mercadolivre .btn-icon { background: #ffe600; color: #2d3277; box-shadow: 0 0 14px rgba(255, 230, 0, 0.4); }
  .btn-mercadolivre:hover { border-color: #ffe600; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 20px rgba(255, 230, 0, 0.25); }
  .btn-site { border-color: rgba(99, 102, 241, 0.4); background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(15, 23, 42, 0.85)); }
  .btn-site .btn-icon { background: #6366f1; color: #ffffff; box-shadow: 0 0 14px rgba(99, 102, 241, 0.4); }
  .location-section { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
  .location-card { background: rgba(18, 20, 28, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--btn-radius); padding: 1.1rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 25px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 0.9rem; }
  .address-info { display: flex; align-items: center; gap: 0.75rem; }
  .address-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1.5px solid rgba(255, 255, 255, 0.2); flex-shrink: 0; background: #000; }
  .address-details { display: flex; flex-direction: column; overflow: hidden; }
  .address-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: #ffffff; text-transform: uppercase; }
  .address-street { font-size: 0.78rem; color: #94a3b8; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-wrapper { width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); line-height: 0; background: #000; }
  .map-wrapper iframe { width: 100%; height: 180px; border: 0; filter: grayscale(90%) invert(90%) hue-rotate(180deg) contrast(1.1); display: block; }
  .btn-location { background: #ffffff; color: #000000; border: 1px solid #ffffff; padding: 0.75rem 1rem; }
  .btn-location .btn-icon { background: #000000; color: #ffffff; }
  .btn-location .btn-label { color: #000000; }
  .btn-location .btn-sub { color: #4b5563; }
  .btn-location .btn-arrow { color: #000000; }
  .btn-location:hover { background: #f1f5f9; border-color: #f1f5f9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2); }
  .profile-footer { text-align: center; padding: 1.5rem 0 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
  .faith-quote { font-size: 0.88rem; font-style: italic; color: #cbd5e1; letter-spacing: 0.3px; }
  .footer-text { font-size: 0.72rem; color: #64748b; letter-spacing: 0.4px; }