@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
--bg0: #050303;
--bg1: #0f0a0c;
--bg-dark: #1a0e12;
--card: rgba(255, 255, 255, 0.08);
--card2: rgba(255, 255, 255, 0.12);
--border: rgba(255, 255, 255, 0.15);
--text: rgba(255, 255, 255, 0.95);
--text-light: rgba(255, 255, 255, 0.7);
--muted: rgba(255, 255, 255, 0.6);
--muted2: rgba(255, 255, 255, 0.5);
--shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 40px 80px rgba(0, 0, 0, 0.6);
--shadow-sm: 0 10px 25px rgba(0, 0, 0, 0.3);

--brand: #d4af37; /* Premium gold */
--brand-light: #ead8b5;
--brand2: #2b1218; /* deep maroon */
--accent: #ffd58a;
--accent-dark: #f0a500;

--radius: 20px;
}

/* * {
box-sizing: border-box;
} */

html,
body {
height: 100%;
}

body {
margin: 0;
color: var(--text);
font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
background: radial-gradient(
    900px 500px at 20% 8%,
    rgba(212, 175, 55, 0.15),
    transparent 60%
    ),
    radial-gradient(
    900px 500px at 80% 12%,
    rgba(255, 213, 138, 0.08),
    transparent 60%
    ),
    radial-gradient(
    1100px 700px at 55% 100%,
    rgba(108, 28, 46, 0.2),
    transparent 62%
    ),
    linear-gradient(160deg, var(--bg0), var(--bg1));
background-attachment: fixed;
}

a {
color: inherit;
text-decoration: none;
transition: color 200ms ease;
}

.wrap {
min-height: 100%;
display: grid;
place-items: center;
padding: 40px 16px 60px;
}

.card {
width: 100%;
max-width: 580px;
border: 1px solid var(--border);
background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.04)
);
backdrop-filter: blur(20px);
border-radius: calc(var(--radius) + 6px);
box-shadow: var(--shadow);
overflow: hidden;
animation: cardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardSlideIn {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.top {
padding: 32px 24px 20px;
display: grid;
gap: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.12),
    rgba(0, 0, 0, 0.2)
    ),
    linear-gradient(
    180deg,
    rgba(43, 18, 24, 0.5),
    rgba(0, 0, 0, 0.1)
    );
}

.brandRow {
display: grid;
grid-template-columns: 100px 1fr;
gap: 18px;
align-items: flex-start;
}

...logo {
width: clamp(200px, 56vw, 320px);
height: clamp(200px, 56vw, 320px);
border-radius: 28px;
background: rgba(255, 255, 255, 0.10);
border: 2px solid rgba(212, 175, 55, 0.18);
display: grid;
place-items: center;
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease, border-color 300ms ease;
}

.logo:hover {
transform: translateY(-6px) scale(1.02);
}

.logo img {
width: 72%;
height: 92%;
object-fit: contain;
}

h1 {
margin: 4px 0 8px;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.5px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #ffffff, var(--brand-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.profileTitleImage {
  display: block;
  width: clamp(220px, 68vw, 320px);
  max-width: 100%;
  height: auto;
  margin: 0;
  margin-bottom: 10px;
}

.profileHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 100%;
  padding: 0 10px;
}

.bio {
  font-size: 14px;
  max-width: 440px;
  width: 100%;
}

.quickActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  max-width: 460px;
}

.actionBtn {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  min-width: 145px;
  flex: 1 1 auto;
  max-width: 220px;
}

.visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tagline {
margin: 0;
color: var(--text-light);
font-size: 13px;
line-height: 1.5;
letter-spacing: 0.3px;
font-weight: 500;
}

.bio {
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
line-height: 1.6;
}

.socialRow {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}

.iconChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: filter 200ms ease;
  cursor: pointer;
}

.iconChip:hover {
  transform: none;
  background: transparent;
  box-shadow: none;
}

.iconChip svg,
.iconChip img {
  width: 20px;
  height: 20px;
  display: block;
  transition: filter 200ms ease, color 200ms ease;
}

.iconChip:hover svg,
.iconChip:hover img {
  filter: brightness(1.12);
  color: var(--brand);
}

.iconChip:focus-visible {
outline: 3px solid rgba(212, 175, 55, 0.5);
outline-offset: 2px;
}

.quickActions {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-top: 14px;
}

.actionBtn {
border: 1px solid var(--border);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
color: var(--text);
border-radius: 12px;
padding: 10px 12px;
display: inline-flex;
gap: 6px;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
}

.actionBtn:hover {
transform: translateY(-2px);
border-color: var(--brand);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
box-shadow: 0 8px 20px rgba(212, 175, 55, 0.2);
}

.actionBtn:active {
transform: translateY(0px);
}

.actionBtn:focus-visible {
outline: 3px solid rgba(212, 175, 55, 0.5);
outline-offset: 2px;
}

.profileHeader{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}

.tagline{
  font-size:14px;
  opacity:0.8;
}

.bio{
  font-size:14px;
  max-width:320px;
}

.socialRow{
  display:flex;
  gap:12px;
  justify-content:center;
}

.quickActions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.actionBtn{
  padding:8px 14px;
  border-radius:8px;
  border:none;
  cursor:pointer;
}
.actionBtn span {
font-weight: 650;
font-size: 12px;
letter-spacing: 0.2px;
}

.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 50px;
border: 1px solid rgba(212, 175, 55, 0.4);
background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.05));
color: rgba(255, 255, 255, 0.85);
width: fit-content;
font-size: 12px;
font-weight: 500;
}

.pillDot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.2);
animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
0%, 100% {
    box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.2);
}
50% {
    box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.1);
}
}

/* Background Effects */
.bg {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}

.blob {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: 0.4;
transform: translate3d(0, 0, 0);
animation: floaty 9s ease-in-out infinite;
}

.blob.b1 {
width: 520px;
height: 520px;
left: -160px;
top: -180px;
animation-delay: 0s;
background: radial-gradient(
    closest-side,
    rgba(212, 175, 55, 0.3),
    rgba(212, 175, 55, 0) 62%
);
}

.blob.b2 {
width: 640px;
height: 640px;
right: -220px;
top: 40px;
opacity: 0.35;
animation-delay: -2.5s;
background: radial-gradient(
    closest-side,
    rgba(108, 28, 46, 0.25),
    rgba(108, 28, 46, 0) 62%
);
}

.blob.b3 {
width: 720px;
height: 720px;
left: 20%;
bottom: -260px;
opacity: 0.25;
animation-delay: -4.7s;
background: radial-gradient(
    closest-side,
    rgba(255, 213, 138, 0.2),
    rgba(255, 213, 138, 0) 62%
);
}

@keyframes floaty {
0% {
    transform: translate3d(0, 0, 0) scale(1);
}
50% {
    transform: translate3d(0, 16px, 0) scale(1.04);
}
100% {
    transform: translate3d(0, 0, 0) scale(1);
}
}

@media (prefers-reduced-motion: reduce) {
.blob {
    animation: none;
}
.btn {
    transition: none;
}
}

.tools {
padding: 16px 20px 0;
display: grid;
gap: 12px;
}

.searchWrap {
display: grid;
grid-template-columns: 20px 1fr;
gap: 12px;
align-items: center;
padding: 12px 16px;
border-radius: 14px;
border: 1px solid var(--border);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
transition: all 200ms ease;
}

.searchWrap:focus-within {
border-color: var(--brand);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
box-shadow: 0 0 25px rgba(212, 175, 55, 0.15);
}

.searchWrap input {
width: 100%;
border: 0;
outline: none;
background: transparent;
color: var(--text);
font-size: 14px;
font-family: 'Inter', sans-serif;
}

.searchWrap input::placeholder {
color: var(--muted2);
}

.links {
padding: 20px;
display: grid;
gap: 12px;
}

.btn {
width: 100%;
display: grid;
grid-template-columns: 24px 1fr 16px;
gap: 14px;
align-items: center;
padding: 16px 18px;
border-radius: var(--radius);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
border: 1px solid var(--border);
transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}

.btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), transparent);
opacity: 0;
transition: opacity 300ms ease;
pointer-events: none;
}

.btn:hover::before {
opacity: 1;
}

.btn:hover {
transform: translateY(-3px);
border-color: var(--brand);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
box-shadow: 0 20px 50px rgba(212, 175, 55, 0.2);
}

.btn:active {
transform: translateY(-1px);
}

.btn:focus-visible {
outline: 3px solid rgba(212, 175, 55, 0.5);
outline-offset: 2px;
}

.groupCard {
  display: grid;
  gap: 8px;
  width: 100%;
}

.groupToggle {
  justify-items: stretch;
  text-align: left;
}

.groupOptions {
  display: grid;
  gap: 8px;
  padding: 8px 0;
}

.groupOptions [class~="btn"] {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.groupOptions [class~="btn"]:hover {
  transform: translateY(0);
  border-color: var(--brand);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: none;
}

.btnTitle {
display: grid;
gap: 3px;
min-width: 0;
text-align: left;
}

.btnTitle strong {
font-weight: 700;
font-size: 15px;
letter-spacing: 0.2px;
color: var(--text);
}

.btnTitle span {
font-size: 12px;
color: var(--muted);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 400;
}

.icon {
width: 24px;
height: 24px;
color: var(--brand);
transition: all 200ms ease;
}

.btn:hover .icon {
filter: brightness(1.2);
}

.chev {
width: 16px;
height: 16px;
color: var(--muted);
transition: all 200ms ease;
}

.btn:hover .chev {
color: var(--brand);
transform: translateX(2px);
}

.footer {
padding: 18px 20px 22px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: grid;
gap: 8px;
background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.15)
);
text-align: center;
}

.footer small {
color: var(--muted);
line-height: 1.5;
font-size: 12px;
}

.footer a {
color: var(--brand);
font-weight: 500;
transition: all 200ms ease;
}

.footer a:hover {
color: var(--brand-light);
text-decoration: underline;
}

.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(120px);
z-index: 10;
border-radius: 50px;
padding: 12px 20px;
border: 1px solid rgba(212, 175, 55, 0.3);
background: linear-gradient(135deg, rgba(15, 11, 13, 0.95), rgba(30, 15, 20, 0.9));
backdrop-filter: blur(15px);
color: var(--text);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
max-width: min(520px, calc(100vw - 32px));
text-align: center;
font-size: 13px;
font-weight: 500;
pointer-events: none;
transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
opacity: 0;
}

.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}

/* Services Section */
.servicesSection {
padding: 28px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sectionTitle {
margin: 0 0 22px 0;
font-size: 20px;
font-weight: 700;
color: var(--text);
text-align: center;
font-family: 'Poppins', sans-serif;
letter-spacing: -0.3px;
}

.servicesGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}

.serviceCard {
padding: 20px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02));
border: 1px solid rgba(212, 175, 55, 0.25);
text-align: center;
transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
}

.serviceCard:hover {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
border-color: var(--brand);
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(212, 175, 55, 0.15);
}

.serviceIcon {
font-size: 36px;
margin-bottom: 10px;
display: block;
}

.serviceCard h3 {
margin: 0 0 8px 0;
font-size: 15px;
font-weight: 700;
color: var(--text);
font-family: 'Poppins', sans-serif;
}

.serviceCard p {
margin: 0;
font-size: 12px;
color: var(--text-light);
line-height: 1.4;
}

/* Features Section */
.featuresSection {
padding: 24px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: grid;
gap: 16px;
}

.featureItem {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(212, 175, 55, 0.1);
transition: all 200ms ease;
}

.featureItem:hover {
background: rgba(212, 175, 55, 0.08);
border-color: rgba(212, 175, 55, 0.2);
}

.featureDot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
flex-shrink: 0;
margin-top: 6px;
box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.featureContent h3 {
margin: 0 0 4px 0;
font-size: 15px;
font-weight: 700;
color: var(--text);
}

.featureContent p {
margin: 0;
font-size: 12px;
color: var(--text-light);
}

@media (max-width: 640px) {
.wrap {
    padding: 28px 14px 40px;
}

.card {
    max-width: 100%;
}

.logo {
    width: clamp(210px, 66vw, 280px);
    height: clamp(210px, 66vw, 280px);
}

.profileTitleImage {
    width: clamp(200px, 72vw, 260px);
}

.bio {
    max-width: 100%;
    padding: 0 4px;
}

.quickActions {
    gap: 10px;
}

.actionBtn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
}

@media (max-width: 480px) {
.brandRow {
    grid-template-columns: 1fr;
    gap: 16px;
}

.top {
    padding: 24px 12px 24px;
}

.profileTitleImage {
    width: clamp(180px, 80vw, 240px);
}

.tagline,
.bio {
    font-size: 13px;
}

.quickActions {
    gap: 8px;
}
}

/* Instagram - Red/Pink */
.iconChip[data-social="instagram"] {
border-color: #E4405F;
color: #E4405F;
}

.iconChip[data-social="instagram"]:hover {
border-color: #E4405F;
background: rgba(228, 64, 95, 0.15);
box-shadow: 0 0 20px rgba(228, 64, 95, 0.3);
}

.iconChip[data-social="instagram"] svg {
color: #E4405F;
}

.iconChip[data-social="instagram"]:hover svg {
color: #E4405F;
}

/* Facebook - Blue */
.iconChip[data-social="facebook"] {
border-color: #1877F2;
color: #1877F2;
}

.iconChip[data-social="facebook"]:hover {
border-color: #1877F2;
background: rgba(24, 119, 242, 0.15);
box-shadow: 0 0 20px rgba(24, 119, 242, 0.3);
}

.iconChip[data-social="facebook"] svg {
color: #1877F2;
}

.iconChip[data-social="facebook"]:hover svg {
color: #1877F2;
}

/* LinkedIn - Professional Blue */
.iconChip[data-social="linkedin"] {
border-color: #0A66C2;
color: #0A66C2;
}

.iconChip[data-social="linkedin"]:hover {
border-color: #0A66C2;
background: rgba(10, 102, 194, 0.15);
box-shadow: 0 0 20px rgba(10, 102, 194, 0.3);
}

.iconChip[data-social="linkedin"] svg {
color: #0A66C2;
}

.iconChip[data-social="linkedin"]:hover svg {
color: #0A66C2;
}

/* WhatsApp - Green */
.iconChip[data-social="whatsapp"] {
border-color: #25D366;
color: #25D366;
}

.iconChip[data-social="whatsapp"]:hover {
border-color: #25D366;
background: rgba(37, 211, 102, 0.15);
box-shadow: 0 0 20px rgba(37, 211, 102, 0.3);
}

.iconChip[data-social="whatsapp"] svg {
color: #25D366;
}

.iconChip[data-social="whatsapp"]:hover svg {
color: #25D366;
}

/* Email - Gmail Red */
.iconChip[data-social="email"] {
border-color: #EA4335;
color: #EA4335;
}

.iconChip[data-social="email"]:hover {
border-color: #EA4335;
background: rgba(234, 67, 53, 0.15);
box-shadow: 0 0 20px rgba(234, 67, 53, 0.3);
}

.iconChip[data-social="email"] svg {
color: #EA4335;
}

.iconChip[data-social="email"]:hover svg {
color: #EA4335;
}

/* Phone - Blue */
.iconChip[data-social="phone"] {
border-color: #0066FF;
color: #0066FF;
}

.iconChip[data-social="phone"]:hover {
border-color: #0066FF;
background: rgba(0, 102, 255, 0.15);
box-shadow: 0 0 20px rgba(0, 102, 255, 0.3);
}

.iconChip[data-social="phone"] svg {
color: #0066FF;
}

.iconChip[data-social="phone"]:hover svg {
color: #0066FF;
}

/* Location - Google Maps Green */
.iconChip[data-social="location"] {
border-color: #34A853;
color: #34A853;
}

.iconChip[data-social="location"]:hover {
border-color: #34A853;
background: rgba(52, 168, 83, 0.15);
box-shadow: 0 0 20px rgba(52, 168, 83, 0.3);
}

.iconChip[data-social="location"] svg {
color: #34A853;
}

.iconChip[data-social="location"]:hover svg {
color: #34A853;
}