:root{
  --accent:#f28c00;         /* orange border + name */
  --text:#1b1b1b;
  --muted:#3a3a3a;
  --bg:#ffffff;
  --card-border:#4b4b4b;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, Arial, sans-serif;
  background:#f3f4f6;
  color:var(--text);
}

/* Center the frame like the image */
.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* Big rounded rectangle with orange border */
.frame{
  width:min(1280px, 96vw);
  height:min(720px, 74vh);
  background:var(--bg);
  border:4px solid var(--accent);
  border-radius:64px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Top menu */
.topbar{
  padding:26px 54px 10px 54px;
}
.menu{
  font-weight:700;
  letter-spacing:.5px;
  font-size:14px;
}
.menu a{
  text-decoration:none;
  color:#111;
}
.menu a:hover{ color:var(--accent); }
.sep{
  margin:0 10px;
  color:#111;
}

/* Main split */
.content{
  flex:1;
  display:grid;
  grid-template-columns: 56% 44%;
  gap:0;
  min-height:0;
}

/* Left section */
.left{
  padding:44px 46px 0 76px;
}
.name{
  margin:40px 0 6px 0;
  color:var(--accent);
  font-size:54px;
  letter-spacing:1px;
  line-height:1.05;
}
.role{
  margin:0 0 22px 0;
  font-weight:800;
  color:#111;
  letter-spacing:.4px;
  font-size:14px;
}

/* About card */
.aboutBox{
  width:min(560px, 92%);
  border:1.6px solid var(--card-border);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.aboutTitle{
  background:var(--accent);
  color:#fff;
  font-weight:800;
  padding:10px 14px;
  width:140px;        /* matches the small orange label */
}
.aboutBody{
  padding:14px 14px 16px 14px;
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}
.aboutBody p{ margin:0 0 10px 0; }

/* Social icons (simple placeholder blocks like screenshot) */
.social{
  display:flex;
  gap:10px;
  margin-top:18px;
  padding-left:200px;  /* position under about like screenshot */
}
.icon{
  width:32px;
  height:32px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  font-size:12px;
}
.icon:nth-child(1){ background:#1877f2; } /* facebook */
.icon:nth-child(2){ background:#0a66c2; } /* linkedin */
.icon:nth-child(3){ background:#25d366; } /* whatsapp */

/* Right section */
/* Portrait with blob edge */
/* --- keep your existing :root, body, page, frame, topbar, menu, left, etc --- */

/* Right section */
.right{
  position:relative;
  background:#fff;
  overflow:hidden; /* important so shape doesn't overflow frame */
}

/* PHOTO WRAPPER with zig/blob edge */
.portrait{
  position:absolute;
  inset:0;
  overflow:hidden;

  /* Zig edge on left side */
  clip-path: polygon(
    18% 0%,
    100% 0%,
    100% 100%,
    18% 100%,
    14% 92%,
    10% 82%,
    16% 72%,
    10% 62%,
    16% 52%,
    10% 42%,
    16% 32%,
    10% 22%,
    16% 12%
  );
}

/* This makes the image truly COVER the right side */
.portrait img{
  position: relative;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform: scale(1.05); /* tiny scale to avoid any edge hairline */
}

/* Copyright OUTSIDE the frame */
.copyright{
  margin-top:10px;
  text-align:center;
  color: var(--accent);
  font-weight:800;
  font-size:12px;
  letter-spacing:.6px;
  display: none;
}

/* Remove the old footer styles if you had .bottom inside .frame */

/* Responsive */
@media (max-width: 980px){
  .frame{ height:auto; }
  .content{ grid-template-columns:1fr; }
  .right{ height:420px; position:relative; }
  .portrait{ position:absolute; inset:0; }
}


/* Footer */
.bottom{
  padding:14px 18px 20px 18px;
  text-align:center;
  color:var(--accent);
  font-weight:800;
  font-size:12px;
  letter-spacing:.6px;
}

/* Responsive */
@media (max-width: 980px){
  .frame{ height:auto; }
  .content{ grid-template-columns:1fr; }
  .right{ height:420px; }
  .left{ padding:28px; }
  .name{ font-size:40px; }
  .social{ padding-left:0; }
}