/* Quick Registration, Complete Profiles (Figma 11285:2) */
.profiles {
  position: relative;
  padding: 120px 0 120px;
  overflow: hidden;
}

/* Background blobs */
.profiles::before,
.profiles::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.profiles::before {
  width: 720px; height: 720px;
  left: -80px; top: -40px;
  background: radial-gradient(closest-side, rgba(0,240,193,0.35), rgba(0,240,193,0.15) 40%, rgba(255,255,255,0) 70%);
}
.profiles::after {
  width: 720px; height: 720px;
  right: -160px; top: 120px;
  background: radial-gradient(closest-side, rgba(53,116,207,0.35), rgba(53,116,207,0.15) 40%, rgba(255,255,255,0) 70%);
}

.profiles__container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--container-padding); position: relative; }

.profiles__heading { text-align: center; position: relative; }
.profiles__title { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; color: #020817; letter-spacing: 0; }
.profiles__title .accent { color: #00b894; position: relative; display: inline-block; }

/* Underlines anchored to specific words inside the title */
.profiles__underline-left,
.profiles__underline-right {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  height: 18px;
  opacity: 0.9;
  pointer-events: none;
}
.profiles__underline-left { width: 350px; }
.profiles__underline-right { width: 217px; }

.profiles__description { margin: 30px auto 0; max-width: 820px; text-align: center; color: rgba(0,0,0,0.7); font-size: 18px; line-height: 28px; }

/* Floating badge */
.profiles__badge { position: absolute; right: 3%; top: 32%; transform: translateY(-50%); background: #fff; border-radius: 10px; box-shadow: 13px 14px 40px rgba(39,98,131,0.15); width: 180px; height: 80px; display: grid; place-items: center; text-align: center; z-index: 3; }
.profiles__badge-title { font-weight: 700; font-size: 20px; color: #020817; line-height: 28px; letter-spacing: 0.6px; }
.profiles__badge-sub { font-size: 15px; color: #4b4d4c; text-transform: capitalize; letter-spacing: 0.6px; margin-top: 2px; }
.profiles__badge-icon { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 42px; height: 42px; }

/* Visuals */
.profiles__visual { position: relative; margin-top: 72px; }
.profiles__frame-main { 
  position: relative; 
  width: 868px; 
  max-width: 90vw; 
  border-radius: 12px; 
  border: 20px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)) padding-box, linear-gradient(135deg, #0DCEA8 0%, rgba(255, 255, 255, 0) 90%) border-box;
  /* box-shadow: 13px 14px 40px rgba(39,98,131,0.15);  */
  overflow: visible; 
  aspect-ratio: 16 / 10; }
.profiles__frame-main > img:not(.profiles__frame-main-decor) { width: 100%; height: 100%; display: block; border-radius: 12px; object-fit: cover; object-position: top; }

/* Decorative icon at top-left of main frame */
.profiles__frame-main-decor {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 120px;
  height: 120px;
  transform: scaleX(-1) scaleY(-1);
  z-index: 2;
  pointer-events: none;
  border-radius: 0;
}

.profiles__frame-sub { position: absolute; right: 0%; bottom: -48px; width: min(720px, 60vw); border-radius: 12px; box-shadow: 13px 14px 40px rgba(39,98,131,0.15); }
.profiles__frame-sub > img:not(.profiles__frame-sub-decor) { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Decorative arrow centered above the sub frame */
.profiles__frame-sub img.profiles__frame-sub-decor,
.profiles__frame-sub-decor {
  position: absolute;
  top: -70px;
  left: 70%;
  transform: scaleX(-1) rotate(180deg);
  width: 80px;
  height: 80px;
  z-index: -2;
  pointer-events: none;
  border-radius: 0;
}

/* Small rotating glyph near title */
.profiles__glyph {
  position: static;
  display: inline-block;
  width: 42px;
  height: 60px;
  margin-right: 8px;
  transform: rotate(-15deg);
  opacity: 0.9;
  vertical-align: middle;
}

@media (max-width: 1200px) {
  .profiles { padding: 96px 0; }
  .profiles__badge { right: 12%; }
}
@media (max-width: 992px) {
  .profiles__badge { display: none; }
  .profiles__frame-sub { position: relative; right: auto; bottom: auto; margin: 24px auto 0; width: min(640px, 92vw); }
  .profiles { 
    padding-bottom: 50px !important;  }
  .profiles__frame-main-decor {
    display: none !important  ;
  }
  /* Adjust spacing for mobile */
  .profiles__description { margin: 20px auto 0; }
  .profiles__visual { margin-top: 30px; }
  .profiles__frame-sub-decor { display: none !important; }

  /* Reduce title size for mobile */
  .profiles__title { font-size: 36px !important; }
}
@media (max-width: 640px) {
  .profiles { padding: 72px 0; }
  .profiles__glyph { display: none; }
  /* Hide decorative underlines on small screens */
  .profiles__underline-left,
  .profiles__underline-right { display: none !important; }
  
}