:root{
  /* Updated to better match Libya Food Expo purple + Al-Jayed red */
  --blue-950:#2a1b55;   /* deep purple */
  --blue-900:#3b2a74;   /* branded purple */
  --blue-800:#4d3aa0;   /* lighter purple */
  --red:#d61b21;        /* Al-Jayed red */
  --white:#ffffff;
  --ink:#0b1220;
  --muted:#5b667a;
  --green:#18b85a;
  --gold:#d3a53a;
  --shadow: 0 18px 50px rgba(2, 10, 25, .22);
  --shadow-soft: 0 10px 30px rgba(2, 10, 25, .14);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 70% 25%, rgba(77,58,160,.12), transparent 65%),
    radial-gradient(900px 650px at 25% 65%, rgba(24,184,90,.07), transparent 60%),
    linear-gradient(180deg, #fbfcff 0%, #f5f7ff 60%, #fbfcff 100%);
}

.stage{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:28px 18px;
}

.phone{
  width:min(430px, 100%);
  border-radius: 36px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(8, 18, 40, .08);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

/* Wheat outlines background (subtle) */
.phone::before{
  content:"";
  position:absolute;
  inset: -60px -60px -60px -60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200'%3E%3Cg fill='none' stroke='%233b2a74' stroke-opacity='0.14' stroke-width='3'%3E%3Cpath d='M270 1040c30-220 70-400 150-560 58-116 130-210 220-290'/%3E%3Cpath d='M340 1080c20-200 55-360 115-505 55-135 125-238 230-330'/%3E%3Cpath d='M860 1120c-10-210-35-380-90-540-55-160-135-290-255-410'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d3a53a' stroke-opacity='0.10' stroke-width='2'%3E%3Cpath d='M250 780c40-25 70-60 95-105'/%3E%3Cpath d='M290 700c35-18 58-45 72-80'/%3E%3Cpath d='M905 760c-48-22-80-54-105-98'/%3E%3Cpath d='M860 690c-35-14-60-38-78-73'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 900px 900px;
  background-repeat:no-repeat;
  background-position: 65% 55%;
  filter: blur(10px);
  opacity:.55;
  pointer-events:none;
}

.hero{
  background: linear-gradient(145deg, var(--red), var(--blue-950));
  position:relative;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(600px 240px at 20% 20%, rgba(255,255,255,.20), transparent 60%);
  pointer-events:none;
}

.hero__top{
  padding: 18px 18px 68px;
  position:relative;
  z-index:1;
}

.logoGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.logoSlot{
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  padding:10px;
}
.logoSlot__inner{
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(42, 27, 85, .18);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  box-shadow: 0 10px 20px rgba(2, 10, 25, .16);
}
.logoImg{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.content{
  position:relative;
  z-index:1;
  padding: 0 18px 20px;
  margin-top: -52px;
}

.profileRow{
  display:flex;
  justify-content:center;
  padding-bottom: 12px;
}

.avatar{
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 2px solid rgba(211,165,58,.75);
  box-shadow: 0 16px 30px rgba(2, 10, 25, .22);
  position:relative;
  overflow:hidden;
}
.avatar::before{
  content:"";
  position:absolute;
  inset:-30px;
  background: radial-gradient(140px 120px at 50% 35%, rgba(212,175,55,.18), transparent 62%);
}
.avatar__img{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;      /* fill 100% inside the circle */
  object-position: 50% 22%;
}

.identityCard, .bioCard{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(8, 18, 40, .08);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-xl);
}

.identityCard{
  padding: 16px 16px 14px;
}

.name{
  margin:0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 750;
  color: var(--blue-950);
  letter-spacing: .2px;
}
.title{
  margin: 6px 0 12px;
  color: rgba(59,42,116,.80);
  font-weight: 650;
  font-size: 14.5px;
}

.meta{
  margin:0;
  padding:0;
  display:grid;
  gap: 10px;
}
.meta__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(59,42,116,.05), rgba(59,42,116,.02));
  border: 1px solid rgba(59,42,116,.10);
}
.meta__k{
  margin:0;
  font-size: 13px;
  color: rgba(11, 18, 32, .78);
  font-weight: 650;
  display:flex;
  align-items:center;
  gap: 8px;
  white-space:nowrap;
}
.meta__v{
  margin:0;
  font-size: 14px;
  font-weight: 750;
  color: rgba(7, 26, 61, .92);
}
.ltr{ direction:ltr; unicode-bidi: plaintext; }

.ico{
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display:inline-block;
  background: rgba(24,184,90,.11);
  border: 1px solid rgba(24,184,90,.30);
  position:relative;
}
.ico--id{
  background: rgba(211,165,58,.16);
  border-color: rgba(211,165,58,.36);
}
.ico::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(6px 6px at 45% 38%, rgba(7,26,61,.75), transparent 65%),
    radial-gradient(9px 9px at 55% 62%, rgba(7,26,61,.65), transparent 70%);
  opacity:.22;
}

.bioCard{
  margin-top: 12px;
  padding: 14px 16px 16px;
  position:relative;
}
.bioCard::before{
  content:"";
  position:absolute;
  top: 16px;
  inset-inline-start: 16px;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(211,165,58,.35));
  box-shadow: 0 8px 18px rgba(211,165,58,.22);
}

.sectionTitle{
  margin: 0 0 10px;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(42, 27, 85, .88);
}
.bio{
  margin:0;
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(11, 18, 32, .78);
}

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

.btn{
  height: 52px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 14px 26px rgba(2, 10, 25, .20);
  border: 1px solid rgba(255,255,255,.22);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}
.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(140px 60px at 30% 25%, rgba(255,255,255,.22), transparent 60%);
  pointer-events:none;
}
.btn:active{ transform: translateY(1px); }

.btn__ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
}
.btn__txt{
  font-size: 14px;
}

.btn--primary{
  color: #fff;
  background: linear-gradient(180deg, var(--blue-900), var(--blue-950));
}
.btn--wa{
  color:#fff;
  background: linear-gradient(180deg, #22c55e, var(--green));
}

@media (max-width: 390px){
  .logoGrid{ grid-template-columns: 1fr; }
  .content{ padding-inline: 14px; }
  .name{ font-size: 22px; }
  .actions{ grid-template-columns: 1fr; }
}