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

/* ============================================================
   ABOUT — THEME 5 (Mint Meadow)
   Identity: organic meadow / soft mint + botanical
   Layout:   Arch — صورة قوسية بيضاوية (arch) + بطاقة بيضاء
             تتداخل على أسفلها + أوراق عائمة (organic)
   Fonts:    El Messiri
   ============================================================ */

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

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

  --ebabt3-blur-glass: 14px;
  --ebabt3-blur-soft: 30px;
  --ebabt3-radius-pill: 999px;
  --ebabt3-radius-card: 26px;
  --ebabt3-radius-arch: 58% 58% 26px 26px / 42% 42% 26px 26px;

  --ebabt3-transition-duration: 0.5s;

  /* ---------- SECTION ---------- */
  --ebabt3-section-background: linear-gradient(180deg, #e4f5ed 0%, #cbead0 40%, #b3e2cd 100%);
  --ebabt3-section-padding-top: 6.5rem;
  --ebabt3-section-padding-bottom: 6.5rem;
  --ebabt3-section-padding-x: 1.5rem;
  --ebabt3-section-max-width: 1240px;

  --ebabt3-orb-1-bg: rgba(63, 174, 131, 0.2);
  --ebabt3-orb-1-size: 460px;
  --ebabt3-orb-2-bg: rgba(47, 138, 104, 0.16);
  --ebabt3-orb-2-size: 380px;
  --ebabt3-orb-3-bg: rgba(255, 253, 250, 0.6);
  --ebabt3-orb-3-size: 300px;
  --ebabt3-shape-ring-color: rgba(47, 138, 104, 0.28);
  --ebabt3-shape-ring-size: 520px;
  --ebabt3-shape-grid-color: rgba(47, 138, 104, 0.12);
  --ebabt3-leaf-color: #3fae83;
  --ebabt3-leaf-size: 16px;

  /* ---------- SIDE / CORNER ---------- */
  --ebabt3-side-color: rgba(47, 122, 94, 0.65);
  --ebabt3-corner-border: #3fae83;
  --ebabt3-corner-size: 20px;

  /* ---------- KICKER ---------- */
  --ebabt3-kicker-color: #2f7a5e;
  --ebabt3-kicker-border: 1px solid rgba(63, 174, 131, 0.45);
  --ebabt3-kicker-bg: rgba(255, 255, 255, 0.8);

  /* ---------- TITLE / SUB ---------- */
  --ebabt3-title-color: #24563f;
  --ebabt3-title-hl-color: #2e8a68;
  --ebabt3-title-hl-glow: none;
  --ebabt3-title-font-size: 2.6rem;
  --ebabt3-sub-color: rgba(47, 122, 94, 0.8);
  --ebabt3-sub-font-size: 1rem;

  /* ---------- VISUAL (ARCH) ---------- */
  --ebabt3-img-radius: var(--ebabt3-radius-arch);
  --ebabt3-img-border: 1px solid rgba(255, 255, 255, 0.8);
  --ebabt3-img-shadow: 0 34px 70px -30px rgba(46, 138, 104, 0.55);
  --ebabt3-img-overlay: linear-gradient(180deg, rgba(36, 86, 63, 0) 40%, rgba(36, 86, 63, 0.35) 66%, rgba(36, 86, 63, 0.86) 100%);
  --ebabt3-img-zoom: 1.05;
  --ebabt3-frame-color: rgba(63, 174, 131, 0.5);
  --ebabt3-tag-color: #24563f;
  --ebabt3-tag-border: 1px solid rgba(63, 174, 131, 0.45);
  --ebabt3-tag-bg: rgba(255, 253, 250, 0.92);

  /* ---------- CHIP ---------- */
  --ebabt3-chip-bg: rgba(255, 253, 250, 0.95);
  --ebabt3-chip-border: 1px solid rgba(255, 255, 255, 0.95);
  --ebabt3-chip-blur: var(--ebabt3-blur-glass);
  --ebabt3-chip-ico-bg: #3fae83;
  --ebabt3-chip-ico-color: #ffffff;
  --ebabt3-chip-num-color: #24563f;
  --ebabt3-chip-num-font: var(--ebabt3-font-family-accent);
  --ebabt3-chip-lbl-color: rgba(47, 122, 94, 0.85);

  /* ---------- NOTE ---------- */
  --ebabt3-note-bg: rgba(255, 253, 250, 0.96);
  --ebabt3-note-border: 1px solid rgba(63, 174, 131, 0.4);
  --ebabt3-note-ico-color: #3fae83;
  --ebabt3-note-txt-color: #24563f;
  --ebabt3-note-sub-color: rgba(47, 122, 94, 0.75);

  /* ---------- LEAD ---------- */
  --ebabt3-lead-bg: rgba(255, 255, 255, 0.75);
  --ebabt3-lead-border: 1px solid rgba(255, 255, 255, 0.9);
  --ebabt3-lead-ico-color: #3fae83;
  --ebabt3-lead-txt-color: #24563f;
  --ebabt3-lead-txt-size: 1.02rem;

  /* ---------- TABS ---------- */
  --ebabt3-tab-btn-color: rgba(47, 122, 94, 0.8);
  --ebabt3-tab-btn-bg: rgba(255, 255, 255, 0.6);
  --ebabt3-tab-btn-border: 1px solid rgba(63, 174, 131, 0.35);
  --ebabt3-tab-active-color: #ffffff;
  --ebabt3-tab-active-bg: linear-gradient(135deg, #3fae83, #2e8a68);
  --ebabt3-tab-active-shadow: 0 14px 30px -14px rgba(46, 138, 104, 0.65);
  --ebabt3-pane-desc-color: rgba(36, 86, 63, 0.88);
  --ebabt3-point-ico-color: #3fae83;
  --ebabt3-point-txt-color: rgba(47, 122, 94, 0.85);

  /* ---------- STATS ---------- */
  --ebabt3-stat-bg: rgba(255, 255, 255, 0.85);
  --ebabt3-stat-border: 1px solid rgba(255, 255, 255, 0.95);
  --ebabt3-stat-num-color: #24563f;
  --ebabt3-stat-num-accent: #2e8a68;
  --ebabt3-stat-num-font: var(--ebabt3-font-family-accent);
  --ebabt3-stat-lbl-color: rgba(47, 122, 94, 0.78);

  /* ---------- ACTIONS ---------- */
  --ebabt3-btn-solid-bg: linear-gradient(135deg, #3fae83, #2e8a68);
  --ebabt3-btn-solid-color: #ffffff;
  --ebabt3-btn-solid-border: 1px solid transparent;
  --ebabt3-btn-solid-shadow: 0 18px 40px -18px rgba(46, 138, 104, 0.7);
  --ebabt3-btn-ghost-color: #24563f;
  --ebabt3-btn-ghost-border: 1px solid rgba(63, 174, 131, 0.55);
  --ebabt3-btn-ghost-bg: rgba(255, 255, 255, 0.7);
  --ebabt3-btn-radius: var(--ebabt3-radius-pill);

  /* ---------- REVEAL ---------- */
  --ebabt3-reveal-duration: 0.7s;
  --ebabt3-reveal-distance: 30px;

  /* ---------- BASE ---------- */
  position: relative;
  overflow: hidden;
  font-family: var(--ebabt3-font-family);
  background: var(--ebabt3-section-background);
  padding: var(--ebabt3-section-padding-top) var(--ebabt3-section-padding-x) var(--ebabt3-section-padding-bottom);
  direction: rtl;
  color: #24563f;
  isolation: isolate;
}

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

@keyframes ebabt3-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ebabt3-float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-14px) rotate(8deg); } }

/* ============================ LEAF DECOR ============================ */
.ebabt3-section::before,
.ebabt3-section::after {
  content: "";
  position: absolute;
  width: var(--ebabt3-leaf-size);
  height: var(--ebabt3-leaf-size);
  background: var(--ebabt3-leaf-color);
  border-radius: 4px 0 4px 0;
  transform: rotate(-45deg);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  animation: ebabt3-float 6s var(--ebabt3-animation-infinite) var(--ebabt3-animation-alternate);
}
.ebabt3-section::before { top: 18%; inset-inline-start: 4%; }
.ebabt3-section::after { bottom: 12%; inset-inline-end: 4%; animation-delay: 2s; }

/* ============================ SIDE / CORNER ============================ */
.ebabt3-side { position: absolute; font-family: var(--ebabt3-font-family-accent); font-style: italic; font-weight: 700; color: var(--ebabt3-side-color); letter-spacing: 0.08em; z-index: 1; }
.ebabt3-side-num { top: 1.6rem; inset-inline-start: 1.2rem; font-size: 0.95rem; }
.ebabt3-side-label { bottom: 1.6rem; inset-inline-end: 1.2rem; font-size: 0.95rem; }
.ebabt3-corner { position: absolute; width: var(--ebabt3-corner-size); height: var(--ebabt3-corner-size); border-color: var(--ebabt3-corner-border); z-index: 1; pointer-events: none; }
.ebabt3-corner-tl { top: 0.9rem; inset-inline-start: 0.9rem; border-top: 2px solid; border-inline-start: 2px solid; border-radius: 8px 0 0 0; }
.ebabt3-corner-tr { top: 0.9rem; inset-inline-end: 0.9rem; border-top: 2px solid; border-inline-end: 2px solid; border-radius: 0 8px 0 0; }
.ebabt3-corner-bl { bottom: 0.9rem; inset-inline-start: 0.9rem; border-bottom: 2px solid; border-inline-start: 2px solid; border-radius: 0 0 0 8px; }
.ebabt3-corner-br { bottom: 0.9rem; inset-inline-end: 0.9rem; border-bottom: 2px solid; border-inline-end: 2px solid; border-radius: 0 0 8px 0; }

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

/* ============================ HEADER ============================ */
.ebabt3-header { text-align: center; margin-bottom: 3.2rem; }
.ebabt3-kicker { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.15rem; border-radius: var(--ebabt3-radius-pill); border: var(--ebabt3-kicker-border); background: var(--ebabt3-kicker-bg); color: var(--ebabt3-kicker-color); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.03em; }
.ebabt3-kicker-ico { color: var(--ebabt3-kicker-ico-color, #3fae83); font-size: 0.9rem; }
.ebabt3-title { margin: 1.1rem 0 0; font-size: var(--ebabt3-title-font-size); font-weight: 700; color: var(--ebabt3-title-color); line-height: 1.35; }
.ebabt3-title-hl { color: var(--ebabt3-title-hl-color); background: linear-gradient(transparent 62%, rgba(126, 208, 182, 0.55) 62%); font-family: var(--ebabt3-font-family-accent); font-style: italic; }
.ebabt3-sub { margin: 1rem auto 0; max-width: 640px; font-size: var(--ebabt3-sub-font-size); color: var(--ebabt3-sub-color); line-height: 1.9; }

/* ============================ STAGE (ARCH) ============================ */
.ebabt3-stage {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  grid-template-areas: "visual visual" "content content";
  gap: 0;
}

/* ============================ VISUAL ============================ */
.ebabt3-visual { grid-area: visual; position: relative; }
.ebabt3-imgwrap { position: relative; height: 480px; border-radius: var(--ebabt3-img-radius); overflow: hidden; border: var(--ebabt3-img-border); box-shadow: var(--ebabt3-img-shadow); transform: perspective(1000px) rotateX(var(--ebabt3-rx, 0deg)) rotateY(var(--ebabt3-ry, 0deg)); transform-style: preserve-3d; transition: transform 0.4s var(--ebabt3-animation-ease); }
.ebabt3-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transform: scale(var(--ebabt3-img-zoom)); transition: transform 0.8s var(--ebabt3-animation-ease); }
.ebabt3-visual:hover .ebabt3-img { transform: scale(calc(var(--ebabt3-img-zoom) + 0.09)); }
.ebabt3-imgwrap::after { content: ""; position: absolute; inset: 0; background: var(--ebabt3-img-overlay); }
.ebabt3-imgspot { position: absolute; inset: 0; background: radial-gradient(340px circle at var(--ebabt3-mx, 50%) var(--ebabt3-my, 50%), rgba(178, 232, 205, 0.4), transparent 65%); opacity: 0; transition: opacity 0.4s; z-index: 1; pointer-events: none; }
.ebabt3-visual:hover .ebabt3-imgspot { opacity: 1; }
.ebabt3-frame { position: absolute; inset: 1.1rem; border: 1px dashed var(--ebabt3-frame-color); border-radius: 50% 50% 20px 20px / 42% 42% 20px 20px; pointer-events: none; z-index: 1; }
.ebabt3-tag { position: absolute; top: 1.5rem; inset-inline-start: 1.5rem; z-index: 3; padding: 0.5rem 1.1rem; border-radius: var(--ebabt3-radius-pill); border: var(--ebabt3-tag-border); background: var(--ebabt3-tag-bg); color: var(--ebabt3-tag-color); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; box-shadow: 0 10px 24px -12px rgba(46, 138, 104, 0.5); }

.ebabt3-chip { position: absolute; bottom: 1.6rem; inset-inline-start: 1.6rem; z-index: 3; display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.2rem; border-radius: 22px; background: var(--ebabt3-chip-bg); border: var(--ebabt3-chip-border); box-shadow: 0 18px 40px -18px rgba(46, 138, 104, 0.55); backdrop-filter: blur(var(--ebabt3-chip-blur)); -webkit-backdrop-filter: blur(var(--ebabt3-chip-blur)); }
.ebabt3-chip-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px 0 14px 0; background: var(--ebabt3-chip-ico-bg); color: var(--ebabt3-chip-ico-color); font-size: 1.1rem; }
.ebabt3-chip-body { display: flex; flex-direction: column; line-height: 1.4; }
.ebabt3-chip-body .ebabt3-num { font-family: var(--ebabt3-chip-num-font); font-size: 1.75rem; font-weight: 700; color: var(--ebabt3-chip-num-color); }
.ebabt3-chip-lbl { font-size: 0.82rem; color: var(--ebabt3-chip-lbl-color); }

.ebabt3-note { position: absolute; top: 52%; inset-inline-end: -1.6rem; z-index: 3; display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.2rem; border-radius: 20px; background: var(--ebabt3-note-bg); border: var(--ebabt3-note-border); box-shadow: 0 22px 46px -20px rgba(46, 138, 104, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ebabt3-note-ico { color: var(--ebabt3-note-ico-color); font-size: 1.2rem; }
.ebabt3-note-body { display: flex; flex-direction: column; line-height: 1.4; }
.ebabt3-note-txt { font-size: 0.95rem; font-weight: 600; color: var(--ebabt3-note-txt-color); }
.ebabt3-note-sub { font-size: 0.8rem; color: var(--ebabt3-note-sub-color); }

/* ============================ CONTENT (WHITE CARD OVERLAP) ============================ */
.ebabt3-content { grid-area: content; position: relative; z-index: 4; display: flex; flex-direction: column; gap: 1.5rem; margin-top: -3.4rem; padding: 2.2rem 2.4rem; border-radius: var(--ebabt3-radius-card); background: var(--ebabt3-content-bg, rgba(255, 253, 250, 0.97)); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 34px 70px -30px rgba(46, 138, 104, 0.5); }
.ebabt3-content::before { content: ""; position: absolute; top: -1px; inset-inline-start: 2.4rem; width: 74px; height: 8px; border-radius: 0 0 10px 10px; background: linear-gradient(90deg, #3fae83, #7ed0b6); }
.ebabt3-content::after { content: ""; position: absolute; bottom: -1px; inset-inline-end: 2.4rem; width: 74px; height: 8px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, #7ed0b6, #3fae83); }

.ebabt3-lead { display: flex; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: 22px; background: var(--ebabt3-lead-bg); border: var(--ebabt3-lead-border); }
.ebabt3-lead-ico { color: var(--ebabt3-lead-ico-color); font-size: 1.4rem; flex-shrink: 0; margin-top: 0.1rem; }
.ebabt3-lead-txt { margin: 0; font-size: var(--ebabt3-lead-txt-size); line-height: 1.9; color: var(--ebabt3-lead-txt-color); }

/* ============================ TABS ============================ */
.ebabt3-tabs { display: flex; flex-direction: column; gap: 1rem; }
.ebabt3-tabsnav { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.ebabt3-tab-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.62rem 1.25rem; border-radius: var(--ebabt3-radius-pill); border: var(--ebabt3-tab-btn-border); background: var(--ebabt3-tab-btn-bg); color: var(--ebabt3-tab-btn-color); font-family: var(--ebabt3-font-family); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background var(--ebabt3-transition-duration) var(--ebabt3-animation-ease), color var(--ebabt3-transition-duration) var(--ebabt3-animation-ease), border-color var(--ebabt3-transition-duration) var(--ebabt3-animation-ease), box-shadow var(--ebabt3-transition-duration) var(--ebabt3-animation-ease); }
.ebabt3-tab-btn:hover { border-color: rgba(63, 174, 131, 0.6); color: #24563f; }
.ebabt3-tab-btn.ebabt3-tab-active { background: var(--ebabt3-tab-active-bg); border-color: transparent; color: var(--ebabt3-tab-active-color); box-shadow: var(--ebabt3-tab-active-shadow); }

.ebabt3-tabpanes { position: relative; }
.ebabt3-tab-panel { display: none; }
.ebabt3-tab-panel.ebabt3-panel-active { display: block; animation: ebabt3-fadeup 0.5s var(--ebabt3-animation-ease); }
@keyframes ebabt3-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.ebabt3-pane-desc { margin: 0; font-size: 0.95rem; line-height: 1.9; color: var(--ebabt3-pane-desc-color); }
.ebabt3-points { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ebabt3-points li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--ebabt3-point-txt-color); }
.ebabt3-points i { color: var(--ebabt3-point-ico-color); font-size: 0.95rem; }

/* ============================ STATS ============================ */
.ebabt3-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.ebabt3-stat { padding: 1rem 0.6rem; text-align: center; border-radius: 20px; background: var(--ebabt3-stat-bg); border: var(--ebabt3-stat-border); box-shadow: 0 14px 30px -18px rgba(46, 138, 104, 0.35); }
.ebabt3-stat-num { display: block; font-family: var(--ebabt3-stat-num-font); font-size: 1.75rem; font-weight: 700; color: var(--ebabt3-stat-num-accent); line-height: 1.2; }
.ebabt3-stat-lbl { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: var(--ebabt3-stat-lbl-color); }

/* ============================ ACTIONS ============================ */
.ebabt3-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.3rem; }
.ebabt3-btn { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.6rem; border-radius: var(--ebabt3-btn-radius); font-family: var(--ebabt3-font-family); font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--ebabt3-transition-duration) var(--ebabt3-animation-ease), box-shadow var(--ebabt3-transition-duration) var(--ebabt3-animation-ease), background var(--ebabt3-transition-duration) var(--ebabt3-animation-ease); }
.ebabt3-btn:hover { transform: translateY(-3px); }
.ebabt3-btn-solid { background: var(--ebabt3-btn-solid-bg); border: var(--ebabt3-btn-solid-border); color: var(--ebabt3-btn-solid-color); box-shadow: var(--ebabt3-btn-solid-shadow); }
.ebabt3-btn-ghost { background: var(--ebabt3-btn-ghost-bg); border: var(--ebabt3-btn-ghost-border); color: var(--ebabt3-btn-ghost-color); }

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

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 320px) {
  .ebabt3-section { --ebabt3-section-padding-x: 1rem; --ebabt3-title-font-size: 1.7rem; }
  .ebabt3-imgwrap { height: 250px; }
  .ebabt3-content { margin-top: -1.6rem; padding: 1.5rem 1.2rem; }
  .ebabt3-stats { grid-template-columns: repeat(2, 1fr); }
  .ebabt3-tag { top: 0.6rem; inset-inline-start: 0.6rem; padding: 0.35rem 0.65rem; font-size: 0.7rem; }
  .ebabt3-note { top: 0.6rem; inset-inline-end: 0.5rem; bottom: auto; padding: 0.55rem 0.7rem; }
  .ebabt3-chip { bottom: 0.6rem; inset-inline-start: 0.6rem; padding: 0.55rem 0.75rem; }
  .ebabt3-frame { inset: 0.6rem; }
  .ebabt3-tabsnav { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ebabt3-tab-btn { justify-content: center; padding: 0.5rem 0.3rem; font-size: 0.8rem; }
}
@media (min-width: 321px) and (max-width: 375px) {
  .ebabt3-section { --ebabt3-section-padding-x: 1rem; --ebabt3-title-font-size: 1.8rem; }
  .ebabt3-imgwrap { height: 260px; }
  .ebabt3-content { margin-top: -1.8rem; padding: 1.5rem 1.2rem; }
  .ebabt3-stats { grid-template-columns: repeat(2, 1fr); }
  .ebabt3-tag { top: 0.7rem; inset-inline-start: 0.7rem; }
  .ebabt3-note { top: 0.7rem; inset-inline-end: 0.5rem; bottom: auto; padding: 0.6rem 0.8rem; }
  .ebabt3-chip { bottom: 2.7rem; inset-inline-start: 0.7rem; padding: 0.6rem 0.85rem; }
  .ebabt3-frame { inset: 0.6rem; }
  .ebabt3-tabsnav { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ebabt3-tab-btn { justify-content: center; padding: 0.55rem 0.3rem; font-size: 0.82rem; }
}
@media (min-width: 376px) and (max-width: 425px) {
  .ebabt3-section { --ebabt3-section-padding-x: 1.1rem; --ebabt3-title-font-size: 1.95rem; }
  .ebabt3-imgwrap { height: 280px; }
  .ebabt3-content { margin-top: -1.8rem; padding: 1.6rem 1.3rem; }
  .ebabt3-stats { grid-template-columns: repeat(2, 1fr); }
  .ebabt3-note { top: 0.8rem; inset-inline-end: 0.6rem; bottom: auto; }
  .ebabt3-chip { bottom: 0.8rem; inset-inline-start: 0.8rem; }
  .ebabt3-frame { inset: 0.7rem; }
  .ebabt3-tabsnav { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ebabt3-tab-btn { justify-content: center; padding: 0.55rem 0.35rem; }
}
@media (min-width: 426px) and (max-width: 480px) {
  .ebabt3-section { --ebabt3-section-padding-x: 1.2rem; --ebabt3-title-font-size: 2rem; }
  .ebabt3-imgwrap { height: 300px; }
  .ebabt3-content { margin-top: -2rem; padding: 1.7rem 1.4rem; }
  .ebabt3-stats { grid-template-columns: repeat(2, 1fr); }
  .ebabt3-note { top: 0.8rem; inset-inline-end: 0.6rem; bottom: auto; }
  .ebabt3-chip { bottom: 0.8rem; inset-inline-start: 0.8rem; }
  .ebabt3-tabsnav { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ebabt3-tab-btn { justify-content: center; padding: 0.6rem 0.4rem; }
}
@media (min-width: 481px) and (max-width: 600px) {
  .ebabt3-section { --ebabt3-section-padding-x: 1.3rem; --ebabt3-title-font-size: 2.1rem; }
  .ebabt3-imgwrap { height: 320px; }
  .ebabt3-content { margin-top: -2.2rem; padding: 1.8rem 1.5rem; }
  .ebabt3-stats { grid-template-columns: repeat(2, 1fr); }
  .ebabt3-note { top: 0.9rem; inset-inline-end: 0.6rem; bottom: auto; }
  .ebabt3-chip { bottom: 0.9rem; inset-inline-start: 0.9rem; }
  .ebabt3-frame { inset: 0.8rem; }
  .ebabt3-tabsnav { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ebabt3-tab-btn { justify-content: center; padding: 0.6rem 0.4rem; }
}
@media (min-width: 601px) and (max-width: 768px) {
  .ebabt3-section { --ebabt3-section-padding-x: 1.5rem; --ebabt3-title-font-size: 2.2rem; }
  .ebabt3-imgwrap { height: 360px; }
  .ebabt3-content { margin-top: -2.4rem; padding: 1.9rem 1.6rem; }
  .ebabt3-stats { grid-template-columns: repeat(4, 1fr); }
  .ebabt3-note { top: 1rem; inset-inline-end: 0.8rem; bottom: auto; }
  .ebabt3-chip { bottom: 1rem; inset-inline-start: 1rem; }
  .ebabt3-frame { inset: 0.8rem; }
  .ebabt3-tabsnav { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ebabt3-tab-btn { justify-content: center; padding: 0.65rem 0.5rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ebabt3-section { --ebabt3-section-padding-x: 1.6rem; --ebabt3-title-font-size: 2.35rem; }
  .ebabt3-imgwrap { height: 420px; }
  .ebabt3-content { margin-top: -3rem; padding: 2rem 1.8rem; }
  .ebabt3-stats { grid-template-columns: repeat(4, 1fr); }
  .ebabt3-note { inset-inline-end: 1rem; top: auto; bottom: 1.5rem; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .ebabt3-section { --ebabt3-section-padding-x: 1.6rem; --ebabt3-title-font-size: 2.45rem; }
  .ebabt3-imgwrap { height: 460px; }
}
@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) {
  .ebabt3-orb,
  .ebabt3-shape-ring,
  .ebabt3-img,
  .ebabt3-imgwrap,
  .ebabt3-reveal,
  .ebabt3-section::before,
  .ebabt3-section::after {
    animation: none !important;
    transition: none !important;
  }
  .ebabt3-reveal { opacity: 1 !important; transform: none !important; }
  .ebabt3-tab-panel.ebabt3-panel-active { animation: none !important; }
}