/* ============================================================
   Instagram Expert Profile Widget — Serenity Toolkit Pro
============================================================ */
.iep {
  font-family: 'DM Sans', sans-serif;
  background-color: #1c1c1c;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.07'/%3E%3C/svg%3E");
  --iep-accent: #aaff00;
}

.iep-outer {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-template-rows: auto auto auto;
  column-gap: 80px;
}

/* ── Blocks ─────────────────────────────────────────────── */
.iep-hero-block {
  grid-column: 1; grid-row: 1;
  padding: 100px 0 80px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.iep-svc-block {
  grid-column: 1; grid-row: 2;
  padding: 80px 0 80px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.iep-about-block {
  grid-column: 1; grid-row: 3;
  padding: 80px 0 100px;
}
.iep-card-col {
  grid-column: 2; grid-row: 1 / 4;
  position: sticky;
  top: 100px;
  align-self: start;
  padding-top: 100px;
}

/* ── Hero text ───────────────────────────────────────────── */
.iep-name-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px; letter-spacing: 0.22em;
  color: #f0f0f0; opacity: 0.55;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.iep-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--iep-accent, #aaff00); flex-shrink: 0;
}
.iep-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(58px, 7vw, 100px);
  line-height: 0.9; color: #f0f0f0;
  letter-spacing: 0.01em; margin-bottom: 22px;
}
.iep-sub {
  font-size: 15px; color: #999;
  font-weight: 300; line-height: 1.7; max-width: 380px;
}

/* ── Section text ────────────────────────────────────────── */
.iep-eyebrow {
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--iep-accent, #aaff00); text-transform: uppercase;
  font-weight: 500; margin-bottom: 14px;
}
.iep-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4.6vw, 58px);
  color: #f0f0f0; line-height: 0.93;
  letter-spacing: 0.02em; margin-bottom: 16px;
}
.iep-desc {
  font-size: 14px; color: #999;
  line-height: 1.75; font-weight: 300;
  max-width: 420px; margin-bottom: 40px;
}

/* ── Stats ───────────────────────────────────────────────── */
.iep-stats {
  display: flex; gap: 40px;
  margin: 32px 0 36px; flex-wrap: wrap;
}
.iep-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--iep-accent, #aaff00);
  line-height: 1; display: block;
}
.iep-stat-label {
  font-size: 13px; color: #999;
  font-weight: 300; margin-top: 4px;
}

/* ── Contact row ─────────────────────────────────────────── */
.iep-contact-row {
  display: flex; gap: 40px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.iep-contact-item strong {
  display: block; font-size: 13px;
  font-weight: 500; color: #f0f0f0; margin-bottom: 2px;
}
.iep-contact-item span {
  font-size: 14px; color: #999; font-weight: 300;
}

/* ── Social icons ────────────────────────────────────────── */
.iep-socials {
  display: flex; gap: 14px; margin-bottom: 32px;
}
.iep-social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #999; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.iep-social-icon:hover {
  border-color: var(--iep-accent, #aaff00);
  color: var(--iep-accent, #aaff00);
}
.iep-social-icon svg { width: 16px; height: 16px; }

/* ── CTA button ──────────────────────────────────────────── */
.iep-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid #f0f0f0; color: #f0f0f0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px; letter-spacing: 0.12em;
  padding: 12px 28px; border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.iep-btn:hover {
  background: var(--iep-accent, #aaff00);
  border-color: var(--iep-accent, #aaff00);
  color: #111;
}

/* ── Accordion ───────────────────────────────────────────── */
.iep-list { list-style: none; }
.iep-item { border-top: 0.5px solid rgba(255,255,255,0.08); cursor: pointer; }
.iep-item:last-child { border-bottom: 0.5px solid rgba(255,255,255,0.08); }
.iep-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 14px; user-select: none;
}
.iep-lft { display: flex; align-items: center; gap: 16px; }
.iep-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px; letter-spacing: 0.1em;
  color: #999; min-width: 20px; transition: color 0.25s;
}
.iep-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(18px, 2.1vw, 26px);
  letter-spacing: 0.04em; color: #f0f0f0; transition: color 0.25s;
}
.iep-item.active .iep-title,
.iep-item:hover  .iep-title { color: var(--iep-accent, #aaff00); }
.iep-item.active .iep-num   { color: var(--iep-accent, #aaff00); }
.iep-chev {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #999; transition: transform 0.3s, color 0.25s; flex-shrink: 0;
}
.iep-item.active .iep-chev { transform: rotate(180deg); color: var(--iep-accent, #aaff00); }
.iep-bd {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s; opacity: 0;
}
.iep-item.active .iep-bd { max-height: 80px; opacity: 1; }
.iep-bd p {
  font-size: 13px; color: #999;
  line-height: 1.7; font-weight: 300; padding: 0 0 16px 36px;
}

/* ── Flip Card ───────────────────────────────────────────── */
.iep-scene {
  width: 100%; height: 460px; perspective: 1000px;
}
.iep-card {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; border-radius: 20px;
  transform: rotate(var(--iep-tilt, -4deg)) rotateX(2deg) rotateY(0deg);
  box-shadow: 0 28px 70px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
  will-change: transform;
}
.iep-face {
  position: absolute; inset: 0; border-radius: 20px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
}
.iep-face-b { transform: rotateY(180deg); }
.iep-face-img {
  width: 100%; height: 100%; object-fit: cover;
}
.iep-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(145deg, #1c1c1c, #2b2b2b); padding: 28px;
}
.iep-ph-icon {
  width: 58px; height: 58px; border-radius: 14px;
  background: rgba(170,255,0,0.1); border: 1px solid rgba(170,255,0,0.2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 20px;
  color: var(--iep-accent, #aaff00); letter-spacing: 0.06em;
}
.iep-ph-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px; letter-spacing: 0.1em;
  color: var(--iep-accent, #aaff00); text-align: center;
}
.iep-ph-sub { font-size: 11px; color: #888; letter-spacing: 0.04em; text-align: center; }
.iep-tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(170,255,0,0.12); border: 0.5px solid rgba(170,255,0,0.25);
  color: var(--iep-accent, #aaff00);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
  font-family: 'DM Sans', sans-serif; font-weight: 500; z-index: 2; white-space: nowrap;
}
.iep-adot {
  position: absolute; bottom: -7px; right: -7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--iep-accent, #aaff00); z-index: 3;
}
.iep-corner {
  position: absolute; bottom: 0; right: 0;
  width: 52px; height: 52px;
  background: #1c1c1c;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 2; border-radius: 0 0 20px 0; pointer-events: none;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .iep-outer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 0; padding: 0 24px;
  }
  .iep-hero-block  { grid-column:1; grid-row:1; padding:56px 0 44px; border-bottom:none; }
  .iep-card-col    { grid-column:1; grid-row:2; position:relative; top:auto; padding-top:44px; padding-bottom:48px; display:flex; justify-content:center; border-top:0.5px solid rgba(255,255,255,0.08); border-bottom:0.5px solid rgba(255,255,255,0.08); }
  .iep-svc-block   { grid-column:1; grid-row:3; padding:44px 0; border-bottom:none; }
  .iep-about-block { grid-column:1; grid-row:4; padding:44px 0 80px; }
  .iep-scene { width: min(280px, 78vw); height: 360px; }
  .iep-h1  { font-size: clamp(50px, 13vw, 78px); }
  .iep-h2  { font-size: clamp(34px, 9vw, 54px); }
  .iep-title { font-size: 20px; }
  .iep-stats { gap: 24px; }
}
@media (max-width: 480px) {
  .iep-outer { padding: 0 18px; }
  .iep-scene { width: 82vw; height: 320px; }
  .iep-h1 { font-size: clamp(44px, 14vw, 68px); }
}