@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* ============================================================
   ABOUT — THEME 5 (Brutalist Archive Ledger)
   Identity: Archive Rose, Charcoal Black, Bone & Ink Stamps
             (matches ebsrv15-5 Pearl Rose family)
   Layout:   Neo-Brutalist — File-Folder Tabs Header, Hard
             Offset Shadows, Diagonal Split Visual, Punched
             Ticket Stats, Stamp Badges, Heavy Border Grid
   Fonts:    El Messiri (brutalist oversized weights)
   ============================================================ */

.ebabt4-section {
  --ebabt4-font-family: 'El Messiri', sans-serif;
  --ebabt4-font-family-accent: 'El Messiri', sans-serif;

  --ebabt4-animation-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ebabt4-animation-infinite: infinite;
  --ebabt4-animation-alternate: alternate;

  --ebabt4-blur-glass: 0px;
  --ebabt4-radius-card: 0px;
  --ebabt4-radius-pill: 0px;

  --ebabt4-transition-duration: 0.4s;

  /* ---------- SECTION (Archive Concrete) ---------- */
  --ebabt4-section-background: #0d0d12;
  --ebabt4-section-padding-top: 6.5rem;
  --ebabt4-section-padding-bottom: 6.5rem;
  --ebabt4-section-padding-x: clamp(1.25rem, 4vw, 3rem);
  --ebabt4-section-max-width: 1280px;

  --ebabt4-orb-1-bg: rgba(244, 63, 94, 0.2);
  --ebabt4-orb-1-size: 520px;
  --ebabt4-orb-2-bg: rgba(251, 113, 133, 0.14);
  --ebabt4-orb-2-size: 420px;
  --ebabt4-orb-3-bg: rgba(63, 63, 78, 0.3);
  --ebabt4-orb-3-size: 300px;
  --ebabt4-shape-ring-color: rgba(244, 63, 94, 0.35);
  --ebabt4-shape-ring-size: 400px;
  --ebabt4-shape-grid-color: rgba(251, 113, 133, 0.08);

  --ebabt4-red: #f43f5e;
  --ebabt4-red-bright: #fb7185;
  --ebabt4-bone: #fdf2f4;
  --ebabt4-ink: #1b1b23;
  --ebabt4-charcoal: #17171e;
  --ebabt4-offset: 8px;

  /* ---------- SIDE / CORNER ---------- */
  --ebabt4-side-color: rgba(244, 234, 216, 0.6);
  --ebabt4-corner-border: #fb7185;
  --ebabt4-corner-size: 22px;

  /* ---------- KICKER ---------- */
  --ebabt4-kicker-color: #fdf2f4;
  --ebabt4-kicker-border: 3px solid #fb7185;
  --ebabt4-kicker-bg: #f43f5e;

  /* ---------- TITLE / SUB ---------- */
  --ebabt4-title-color: #fdf2f4;
  --ebabt4-title-hl-color: #fb7185;
  --ebabt4-title-hl-glow: none;
  --ebabt4-title-font-size: clamp(2.5rem, 5vw, 4.1rem);
  --ebabt4-sub-color: rgba(244, 234, 216, 0.72);
  --ebabt4-sub-font-size: 1rem;

  /* ---------- VISUAL ---------- */
  --ebabt4-img-radius: 0px;
  --ebabt4-img-border: 3px solid var(--ebabt4-ink);
  --ebabt4-img-shadow: 12px 12px 0 0 var(--ebabt4-red);
  --ebabt4-img-overlay: linear-gradient(180deg, rgba(13, 13, 18, 0) 55%, rgba(13, 13, 18, 0.5) 100%);
  --ebabt4-img-zoom: 1.05;
  --ebabt4-imgspot-color: rgba(220, 38, 38, 0.22);
  --ebabt4-frame-color: #fdf2f4;
  --ebabt4-frame-ghost: #fb7185;

  /* ---------- LEAD ---------- */
  --ebabt4-lead-bg: transparent;
  --ebabt4-lead-border: 3px solid #fb7185;
  --ebabt4-lead-ico-color: #fb7185;
  --ebabt4-lead-txt-color: rgba(244, 234, 216, 0.92);
  --ebabt4-lead-txt-size: 1.02rem;

  /* ---------- TABS ---------- */
  --ebabt4-tab-btn-color: rgba(244, 234, 216, 0.7);
  --ebabt4-tab-btn-bg: #17171e;
  --ebabt4-tab-btn-border: 3px solid var(--ebabt4-ink);
  --ebabt4-tab-active-color: #1b1b23;
  --ebabt4-tab-active-bg: #fdf2f4;
  --ebabt4-tab-active-border: 3px solid var(--ebabt4-ink);
  --ebabt4-tab-active-shadow: #fb7185;
  --ebabt4-pane-desc-color: rgba(244, 234, 216, 0.9);
  --ebabt4-point-ico-color: #fb7185;
  --ebabt4-point-txt-color: rgba(244, 234, 216, 0.88);

  /* ---------- STATS (Punched Tickets) ---------- */
  --ebabt4-stat-bg: #fdf2f4;
  --ebabt4-stat-border: 3px solid var(--ebabt4-ink);
  --ebabt4-stat-num-color: #f43f5e;
  --ebabt4-stat-num-accent: #1b1b23;
  --ebabt4-stat-num-font: var(--ebabt4-font-family-accent);
  --ebabt4-stat-lbl-color: #17171e;

  /* ---------- ACTIONS ---------- */
  --ebabt4-btn-solid-bg: #fb7185;
  --ebabt4-btn-solid-color: #fdf2f4;
  --ebabt4-btn-solid-border: 3px solid var(--ebabt4-ink);
  --ebabt4-btn-solid-shadow: 6px 6px 0 0 var(--ebabt4-ink);
  --ebabt4-btn-ghost-color: #fdf2f4;
  --ebabt4-btn-ghost-border: 3px solid #fb7185;
  --ebabt4-btn-ghost-bg: transparent;
  --ebabt4-btn-radius: 0px;

  /* ---------- DECO ---------- */
  --ebabt4-deco-gold: #fb7185;
  --ebabt4-deco-rose: #f43f5e;

  /* ---------- REVEAL ---------- */
  --ebabt4-reveal-duration: 0.6s;
  --ebabt4-reveal-distance: 24px;

  position: relative;
  overflow: hidden;
  font-family: var(--ebabt4-font-family);
  background: var(--ebabt4-section-background);
  padding: var(--ebabt4-section-padding-top) var(--ebabt4-section-padding-x) var(--ebabt4-section-padding-bottom);
  direction: rtl;
  color: var(--ebabt4-bone);
  isolation: isolate;
}

/* ============================ BACKGROUND ============================ */
.ebabt4-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ebabt4-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.ebabt4-orb-1 { width: var(--ebabt4-orb-1-size); height: var(--ebabt4-orb-1-size); background: var(--ebabt4-orb-1-bg); top: -14%; inset-inline-start: -10%; }
.ebabt4-orb-2 { width: var(--ebabt4-orb-2-size); height: var(--ebabt4-orb-2-size); background: var(--ebabt4-orb-2-bg); bottom: -12%; inset-inline-end: -10%; }
.ebabt4-orb-3 { width: var(--ebabt4-orb-3-size); height: var(--ebabt4-orb-3-size); background: var(--ebabt4-orb-3-bg); top: 38%; inset-inline-start: 44%; }
.ebabt4-shape { position: absolute; pointer-events: none; }
.ebabt4-shape-ring { width: var(--ebabt4-shape-ring-size); height: var(--ebabt4-shape-ring-size); border: 2px dashed var(--ebabt4-shape-ring-color); border-radius: 50%; top: 6%; inset-inline-end: -14%; }
.ebabt4-shape-grid { inset: 0; background-image: linear-gradient(var(--ebabt4-shape-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--ebabt4-shape-grid-color) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 82%); }

/* ============================ SIDE / CORNER ============================ */
.ebabt4-side { position: absolute; font-weight: 700; color: var(--ebabt4-side-color); letter-spacing: 0.18em; z-index: 1; font-size: 0.76rem; }
.ebabt4-side-num { top: 1.8rem; inset-inline-start: 1.4rem; }
.ebabt4-side-label { bottom: 1.8rem; inset-inline-end: 1.4rem; transform: rotate(180deg); writing-mode: vertical-rl; }
.ebabt4-corner { position: absolute; width: var(--ebabt4-corner-size); height: var(--ebabt4-corner-size); border-color: var(--ebabt4-corner-border); z-index: 1; pointer-events: none; }
.ebabt4-corner-tl { top: 1rem; inset-inline-start: 1rem; border-top: 3px solid; border-inline-start: 3px solid; }
.ebabt4-corner-tr { top: 1rem; inset-inline-end: 1rem; border-top: 3px solid; border-inline-end: 3px solid; }
.ebabt4-corner-bl { bottom: 1rem; inset-inline-start: 1rem; border-bottom: 3px solid; border-inline-start: 3px solid; }
.ebabt4-corner-br { bottom: 1rem; inset-inline-end: 1rem; border-bottom: 3px solid; border-inline-end: 3px solid; }

/* ============================ SHELL ============================ */
.ebabt4-shell { max-width: var(--ebabt4-section-max-width); margin-inline: auto; position: relative; }

/* ============================ HEADER (File-Folder Tabs) ============================ */
.ebabt4-header { display: flex; align-items: flex-end; gap: 1.4rem; margin-bottom: 3.4rem; position: relative; padding-inline-start: 0.4rem; }
.ebabt4-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.2rem;
  border: var(--ebabt4-kicker-border);
  background: var(--ebabt4-kicker-bg);
  color: var(--ebabt4-kicker-color);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 6px 6px 0 0 var(--ebabt4-ink);
  margin-bottom: 0.6rem;
  order: 1;
}
.ebabt4-kicker-ico { color: var(--ebabt4-bone); }
.ebabt4-title { margin: 0; font-size: var(--ebabt4-title-font-size); font-weight: 700; color: var(--ebabt4-title-color); line-height: 1.15; order: 2; }
.ebabt4-title-hl { color: var(--ebabt4-title-hl-color); -webkit-text-stroke: 2px var(--ebabt4-ink); }
.ebabt4-sub { margin: 0; font-size: var(--ebabt4-sub-font-size); color: var(--ebabt4-sub-color); line-height: 1.9; order: 3; max-width: 420px; border-inline-start: 3px solid var(--ebabt4-red); padding-inline-start: 1rem; margin-bottom: 0.5rem; }

/* ============================ STAGE (Diagonal Split) ============================ */
.ebabt4-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "content visual"; gap: 3rem; align-items: center; }

/* ============================ VISUAL (Punched Card) ============================ */
.ebabt4-visual { grid-area: visual; position: relative; }
.ebabt4-canvas { position: relative; width: 100%; aspect-ratio: 4 / 4.4; }
.ebabt4-imgwrap {
  position: relative;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 84% 100%, 0 100%);
  border: var(--ebabt4-img-border);
  box-shadow: var(--ebabt4-img-shadow);
  transform: perspective(1000px) rotateX(var(--ebabt4-rx, 0deg)) rotateY(var(--ebabt4-ry, 0deg)) rotateZ(-1.2deg);
  transition: transform 0.4s var(--ebabt4-animation-ease);
}
.ebabt4-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 4.4; transform: scale(var(--ebabt4-img-zoom)); }
.ebabt4-visual:hover .ebabt4-img { transform: scale(calc(var(--ebabt4-img-zoom) + 0.05)); }
.ebabt4-imgwrap::after { content: ""; position: absolute; inset: 0; background: var(--ebabt4-img-overlay); }
.ebabt4-imgspot { position: absolute; inset: 0; background: radial-gradient(340px circle at var(--ebabt4-mx, 50%) var(--ebabt4-my, 50%), var(--ebabt4-imgspot-color), transparent 65%); opacity: 0; transition: opacity 0.4s; z-index: 1; pointer-events: none; }
.ebabt4-visual:hover .ebabt4-imgspot { opacity: 1; }
.ebabt4-frame {
  position: absolute;
  inset: 0.8rem;
  border: 2px solid var(--ebabt4-frame-color);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 84% 100%, 0 100%);
  opacity: 0.85;
  pointer-events: none;
}

/* ============================ CONTENT ============================ */
.ebabt4-content { grid-area: content; display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.ebabt4-content-left { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }

.ebabt4-lead {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0 0 1.1rem;
  border-bottom: 3px solid var(--ebabt4-red);
  border-inline-start: 3px solid var(--ebabt4-red);
  padding-inline-start: 1.1rem;
}
.ebabt4-lead-ico { color: var(--ebabt4-lead-ico-color); font-size: 1.5rem; }
.ebabt4-lead-txt { margin: 0; font-size: var(--ebabt4-lead-txt-size); line-height: 1.9; color: var(--ebabt4-lead-txt-color); }

.ebabt4-tabs { display: flex; flex-direction: column; gap: 1rem; }
.ebabt4-tabsnav { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ebabt4-tab-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.62rem 1.15rem;
  border: var(--ebabt4-tab-btn-border);
  background: var(--ebabt4-tab-btn-bg);
  color: var(--ebabt4-tab-btn-color);
  font-family: var(--ebabt4-font-family); font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background var(--ebabt4-transition-duration) var(--ebabt4-animation-ease), color var(--ebabt4-transition-duration) var(--ebabt4-animation-ease);
}
.ebabt4-tab-btn:hover { color: var(--ebabt4-bone); background: var(--ebabt4-red); }
.ebabt4-tab-btn.ebabt4-tab-active { background: var(--ebabt4-tab-active-bg); border: var(--ebabt4-tab-active-border); color: var(--ebabt4-tab-active-color); box-shadow: 5px 5px 0 0 var(--ebabt4-tab-active-shadow); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 12px)); }

.ebabt4-tabpanes { position: relative; }
.ebabt4-tab-panel { display: none; }
.ebabt4-tab-panel.ebabt4-panel-active { display: block; animation: ebabt4-stamp 0.35s var(--ebabt4-animation-ease); }
@keyframes ebabt4-stamp { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.ebabt4-pane-desc { margin: 0; font-size: 0.94rem; line-height: 1.95; color: var(--ebabt4-pane-desc-color); }
.ebabt4-points { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.ebabt4-points li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--ebabt4-point-txt-color); border-inline-start: 3px solid var(--ebabt4-red); padding-inline-start: 0.8rem; }
.ebabt4-points i { color: var(--ebabt4-point-ico-color); font-size: 0.95rem; }

/* ============================ STATS (Punched Tickets) ============================ */
.ebabt4-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.ebabt4-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.1rem;
  border: var(--ebabt4-stat-border);
  background: var(--ebabt4-stat-bg);
  color: var(--ebabt4-ink);
  box-shadow: 7px 7px 0 0 var(--ebabt4-red);
}
.ebabt4-stat::before, .ebabt4-stat::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--ebabt4-section-background); border-radius: 50%; top: -9px; }
.ebabt4-stat::before { inset-inline-start: -8px; }
.ebabt4-stat::after { inset-inline-end: -8px; }
.ebabt4-stat-num { display: block; font-family: var(--ebabt4-stat-num-font); font-size: 1.9rem; font-weight: 700; color: var(--ebabt4-stat-num-color); line-height: 1.15; }
.ebabt4-stat-lbl { display: block; margin-top: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--ebabt4-stat-lbl-color); }

/* ============================ ACTIONS ============================ */
.ebabt4-actions { grid-area: actions; display: flex; justify-content: flex-start; gap: 1rem; flex-wrap: wrap; }
.ebabt4-btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--ebabt4-btn-radius);
  font-family: var(--ebabt4-font-family); font-size: 0.95rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform var(--ebabt4-transition-duration) var(--ebabt4-animation-ease), box-shadow var(--ebabt4-transition-duration) var(--ebabt4-animation-ease);
}
.ebabt4-btn:hover { transform: translate(-3px, -3px); }
.ebabt4-btn-solid { background: var(--ebabt4-btn-solid-bg); border: var(--ebabt4-btn-solid-border); color: var(--ebabt4-btn-solid-color); box-shadow: var(--ebabt4-btn-solid-shadow); }
.ebabt4-btn-solid:hover { box-shadow: 3px 3px 0 0 var(--ebabt4-ink); }
.ebabt4-btn-ghost { background: var(--ebabt4-btn-ghost-bg); border: var(--ebabt4-btn-ghost-border); color: var(--ebabt4-btn-ghost-color); }
.ebabt4-btn-ghost:hover { background: var(--ebabt4-red); color: var(--ebabt4-bone); }

/* ============================ REVEAL ============================ */
.ebabt4-reveal { opacity: 0; transform: translateY(var(--ebabt4-reveal-distance)); transition: opacity var(--ebabt4-reveal-duration) var(--ebabt4-animation-ease), transform var(--ebabt4-reveal-duration) var(--ebabt4-animation-ease); }
.ebabt4-reveal.ebabt4-in { opacity: 1; transform: translateY(0); }

/* =========================================================
   RESPONSIVE — standard 12 blocks
   Note: split collapses to stacked; note overhang clipped
   ========================================================= */
@media (max-width: 320px) {
  .ebabt4-section { --ebabt4-section-padding-x: 1rem; --ebabt4-title-font-size: 1.75rem; }
  .ebabt4-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .ebabt4-stage { grid-template-columns: 1fr; grid-template-areas: "visual" "content"; gap: 2.4rem; }
  .ebabt4-canvas { aspect-ratio: 4 / 4.6; }
  .ebabt4-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (min-width: 321px) and (max-width: 375px) {
  .ebabt4-section { --ebabt4-section-padding-x: 1rem; --ebabt4-title-font-size: 1.9rem; }
  .ebabt4-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .ebabt4-stage { grid-template-columns: 1fr; grid-template-areas: "visual" "content"; gap: 2.4rem; }
  .ebabt4-canvas { aspect-ratio: 4 / 4.5; }
  .ebabt4-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (min-width: 376px) and (max-width: 425px) {
  .ebabt4-section { --ebabt4-section-padding-x: 1.1rem; --ebabt4-title-font-size: 2rem; }
  .ebabt4-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .ebabt4-stage { grid-template-columns: 1fr; grid-template-areas: "visual" "content"; gap: 2.5rem; }
  .ebabt4-canvas { aspect-ratio: 4 / 4.4; }
  .ebabt4-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 426px) and (max-width: 480px) {
  .ebabt4-section { --ebabt4-section-padding-x: 1.2rem; --ebabt4-title-font-size: 2.1rem; }
  .ebabt4-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .ebabt4-stage { grid-template-columns: 1fr; grid-template-areas: "visual" "content"; gap: 2.6rem; }
  .ebabt4-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 481px) and (max-width: 600px) {
  .ebabt4-section { --ebabt4-section-padding-x: 1.3rem; --ebabt4-title-font-size: 2.2rem; }
  .ebabt4-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .ebabt4-stage { grid-template-columns: 1fr; grid-template-areas: "visual" "content"; gap: 2.7rem; }
  .ebabt4-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 601px) and (max-width: 768px) {
  .ebabt4-section { --ebabt4-section-padding-x: 1.5rem; --ebabt4-title-font-size: 2.3rem; }
  .ebabt4-header { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .ebabt4-stage { grid-template-columns: 1fr; grid-template-areas: "visual" "content"; gap: 2.8rem; }
  .ebabt4-canvas { width: min(560px, 100%); margin-inline: auto; }
  .ebabt4-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ebabt4-section { --ebabt4-section-padding-x: 1.6rem; --ebabt4-title-font-size: 2.5rem; }
  .ebabt4-stage { grid-template-columns: 1fr; grid-template-areas: "visual" "content"; gap: 2.8rem; }
  .ebabt4-canvas { width: min(640px, 100%); margin-inline: auto; }
  .ebabt4-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .ebabt4-section { --ebabt4-section-padding-x: 1.6rem; --ebabt4-title-font-size: 2.6rem; }
  .ebabt4-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 2.4rem; }
  .ebabt4-canvas { aspect-ratio: 4 / 4.4; }
}
@media (min-width: 1281px) and (max-width: 1440px) {
  /* base */
}
@media (min-width: 1441px) and (max-width: 1920px) {
  /* base */
}
@media (min-width: 1921px) {
  /* base */
}

@media (prefers-reduced-motion: reduce) {
  .ebabt4-orb,
  .ebabt4-shape-ring,
  .ebabt4-img,
  .ebabt4-reveal {
    animation: none !important;
    transition: none !important;
  }
  .ebabt4-reveal { opacity: 1 !important; transform: none !important; }
  .ebabt4-tab-panel.ebabt4-panel-active { animation: none !important; }
}