:root{
      --bg:#ffffff;
      --card:#ffffffcc;
      --stroke: rgba(10,20,40,.10);
      --stroke2: rgba(10,20,40,.14);
      --text:#0b1426;
      --muted: rgba(11,20,38,.65);
      --muted2: rgba(11,20,38,.52);
      --brand:#ffb85b;
      --brand2:#ffd36d;
      --blue:#2563eb;
      --shadow: 0 18px 40px rgba(10,20,40,.10);
      --shadow2: 0 10px 26px rgba(10,20,40,.08);
      --r: 22px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(420px 240px at 20% 10%, rgba(255,184,91,.20), transparent 60%),
        radial-gradient(420px 240px at 82% 22%, rgba(37,99,235,.14), transparent 60%),
        radial-gradient(520px 300px at 45% 95%, rgba(255,211,109,.22), transparent 62%),
        linear-gradient(180deg, #ffffff, #f7f9ff);
      overflow-x:hidden;
    }

    /* Mobile-only layout: center column + max width */
    .wrap{
      max-width: 460px;
      margin: 0 auto;
      padding: 16px 14px 34px;
      position:relative;
    }

    /* soft animated blobs */
    .blob{
      position:fixed;
      width:360px; height:360px;
      border-radius:50%;
      filter: blur(36px);
      opacity:.28;
      pointer-events:none;
      transform: translateZ(0);
      mix-blend-mode: multiply;
    }
    .blob.one{ left:-160px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(255,184,91,.95), transparent 62%); animation: b1 10s ease-in-out infinite; }
    .blob.two{ right:-170px; top:140px; background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.75), transparent 64%); animation: b2 12s ease-in-out infinite; }
    .blob.three{ left:20px; bottom:-180px; background: radial-gradient(circle at 30% 30%, rgba(255,211,109,.85), transparent 64%); animation: b3 13s ease-in-out infinite; }
    @keyframes b1{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(18px, 14px) scale(1.08);} }
    @keyframes b2{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-16px, -12px) scale(1.10);} }
    @keyframes b3{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(10px, -16px) scale(1.07);} }

    header{
      display:flex;
      align-items:center;
      gap:12px;
      padding: 10px 6px 14px;
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.60));
      border-bottom: 1px solid rgba(10,20,40,.06);
    }

    .logoBox{
      width:52px; height:52px;
      border-radius: 18px;
      overflow:hidden;
      background: rgba(255,255,255,.75);
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow2);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
    }
    /* replace with <img src="logo.png"> */
    .logoBox img{ width:100%; height:100%; object-fit:cover; display:block; }
    .logoPlaceholder{
      font-weight: 950;
      font-size: 11px;
      color: rgba(11,20,38,.55);
      text-align:center;
      line-height:1.05;
      user-select:none;
      padding: 0 6px;
    }

    .headText{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
    .headText .t{
      font-weight: 980;
      letter-spacing:.2px;
      font-size: 14px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .headText .s{
      margin-top: 3px;
      font-weight: 900;
      font-size: 12px;
      color: var(--muted);
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.80);
      border: 1px solid var(--stroke);
      box-shadow: 0 8px 20px rgba(10,20,40,.06);
      color: rgba(11,20,38,.70);
      font-size: 12px;
      font-weight: 900;
      white-space:nowrap;
    }

    .card{
      border-radius: var(--r);
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      overflow:hidden;
      position:relative;
    }
    .card::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(460px 260px at 18% 0%, rgba(255,184,91,.18), transparent 55%),
        radial-gradient(420px 260px at 95% 25%, rgba(37,99,235,.12), transparent 60%);
      pointer-events:none;
      opacity: .95;
    }
    .card > *{ position:relative; z-index:1; }

    .hero{
      padding: 16px;
      margin-top: 10px;
    }

    h1{
      margin: 6px 0 8px;
      font-size: 24px;
      line-height: 1.10;
      letter-spacing:.2px;
      font-weight: 990;
    }

    .jppl{
      display:inline-block;
      background: linear-gradient(180deg, var(--brand2), var(--brand));
      color: #2a1d0f;
      padding: 4px 10px;
      border-radius: 14px;
      font-size: 12px;
      margin-left: 8px;
      transform: translateY(-2px);
      white-space:nowrap;
      border: 1px solid rgba(255,184,91,.35);
    }

    .lead{
      margin:0;
      color: var(--muted);
      font-weight: 850;
      font-size: 13px;
      line-height:1.6;
    }

    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(10,20,40,.10), transparent);
      margin: 14px 0;
    }

    .stack{
      display:flex;
      flex-direction:column;
      gap: 10px;
    }

    .rowLink{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.82);
      border: 1px solid var(--stroke);
      text-decoration:none;
      color: var(--text);
      box-shadow: 0 10px 22px rgba(10,20,40,.06);
      transition: transform .14s ease, filter .14s ease;
    }
    .rowLink:active{ transform: translateY(1px) scale(.995); }
    .rowLink .left{
      display:flex; align-items:center; gap:12px; min-width:0;
    }
    .ic{
      width:42px; height:42px;
      border-radius: 16px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.90);
      border: 1px solid var(--stroke2);
      flex: 0 0 auto;
      font-size: 18px;
    }
    .rowLink .txt{ min-width:0; }
    .rowLink .txt .t{
      margin:0;
      font-weight: 980;
      font-size: 13px;
      line-height:1.2;
    }
    .rowLink .txt .s{
      margin:4px 0 0;
      color: var(--muted2);
      font-weight: 850;
      font-size: 12px;
      line-height:1.35;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .go{
      width:36px; height:36px;
      border-radius: 14px;
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.88);
      display:grid; place-items:center;
      font-weight: 990;
      color: rgba(11,20,38,.70);
      flex: 0 0 auto;
    }

    .contactBox{
      padding: 14px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.82);
      border: 1px solid var(--stroke);
      box-shadow: 0 10px 22px rgba(10,20,40,.06);
    }
    .contactHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 8px;
    }
    .contactHead .h{
      font-weight: 980;
      font-size: 13px;
      margin:0;
    }
    .contactHead .tag{
      font-size: 12px;
      font-weight: 950;
      color: rgba(11,20,38,.62);
      border: 1px solid var(--stroke2);
      background: rgba(255,255,255,.85);
      padding: 6px 10px;
      border-radius: 999px;
    }
    .contacts{
      display:flex;
      flex-direction:column;
      gap: 8px;
    }
    .contactRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 16px;
      background: rgba(255,255,255,.75);
      border: 1px solid rgba(10,20,40,.08);
    }
    .contactRow .name{
      font-weight: 950;
      font-size: 13px;
    }
    .contactRow a{
      text-decoration:none;
      font-weight: 980;
      font-size: 13px;
      color: var(--blue);
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(37,99,235,.18);
      background: rgba(37,99,235,.06);
    }
    .contactRow a:active{ transform: translateY(1px); }

    .btn{
      width:100%;
      border:0;
      border-radius: 18px;
      padding: 14px 16px;
      font-weight: 990;
      letter-spacing:.2px;
      cursor:none;
      user-select:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      text-decoration:none;
      transition: transform .14s ease, filter .14s ease;
    }
    .btn:active{ transform: translateY(1px) scale(.99); }
    .btn.primary{
      background: linear-gradient(180deg, var(--brand2), var(--brand));
      color: #2a1d0f;
      box-shadow: 0 16px 34px rgba(255,184,91,.22);
      border: 1px solid rgba(255,184,91,.38);
    }
    .btn.primary:hover{ filter: brightness(1.02); }

    .note{
      margin-top: 10px;
      text-align:center;
      font-size: 12px;
      font-weight: 850;
      color: rgba(11,20,38,.52);
    }

    .reveal{
      opacity:0;
      transform: translateY(10px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .reveal.show{ opacity:1; transform: translateY(0); }

    footer{
      margin-top: 14px;
      padding: 8px 6px 0;
      text-align:center;
      color: rgba(11,20,38,.55);
      font-weight: 850;
      font-size: 12px;
    }

    @media (min-width: 760px){
      .wrap{ max-width: 460px; }
    }

    .profileRow{
  display:flex;
  align-items:center;
  gap:30px;
  padding:10px;
  justify-content: left;
}

.avatar{
  width:48px;
  height:48px;
  border-radius:16px;
  overflow:hidden;
  background:#f1f3f9;
  border:1px solid rgba(10,20,40,.12);
  flex:0 0 auto;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.profileRow .info{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.profileRow .name{
  font-weight:980;
  font-size:14px;
  color:#0b1426;
}

.profileRow .phone{
  font-size:13px;
  font-weight:900;
  color:#2563eb;
  text-decoration:none;
}