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

/* ============================================================
   POINTS — THEME 6 (Neo Brutal — Ticket Booth) — FULLY TOKENIZED
   File: ebpt6.css | HTML prefix: ebpt11
   Hard-edged editorial brutalism: cream canvas, black ink,
   signal orange, acid yellow, hazard-stripe band, blueprint
   grid + halftone dots, stamped icon plates with sticky tape,
   barcode strips, ghost display numerals, cut-corner tickets,
   marker-boxed title highlight, offset hard shadows, zero radius.

   DESIGN LANGUAGE (matches hero6 / about6 / ebsrv6)
   • Cream canvas #f0ece4 | ink #0a0a0a | orange #ff4400 →
     #ff6a00 | acid yellow #eab308
   • White tickets with 3px hard borders + solid offset shadows
   • Diagonal corner cuts, technical uppercase latin (Space Grotesk)

   LAYOUT (fixed)
   • Container is a single column (feature/meter/actions no longer
     exist in the markup) — the points grid is the whole stage.
   • Points = even repeat(3, 1fr) desktop grid → 2 rows of 3.

   ARCHITECTURE
   • Every visual value is a CSS custom property defined below.
   • Colors are semantic per element — never shared between
     different UI elements (each element is independently
     themeable).
   • Only truly global values are shared: font families,
     animation easing, animation keywords, spacing scale,
     zero-radius scale, border width, transition timing.
   • Responsive values use explicit -tablet/-mobile/-small
     tokens, overridden inside the media queries below.
   • The only hardcoded literals allowed are @media breakpoints
     (CSS custom properties are invalid inside media queries)
     and structural keywords such as display / content strings.
   ============================================================ */

.ebpt11-section {
  /* =========================================================
     GLOBAL / CORE (shared tokens only)
     ========================================================= */
  --ebpt11-font-family: 'El Messiri', sans-serif;
  --ebpt11-font-family-latin: 'Space Grotesk', sans-serif;

  --ebpt11-animation-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ebpt11-animation-linear: linear;
  --ebpt11-animation-steps: steps(1);
  --ebpt11-animation-infinite: infinite;

  --ebpt11-spacing-gap-xs: 0.45rem;
  --ebpt11-spacing-gap-sm: 0.6rem;
  --ebpt11-spacing-gap-md: 0.7rem;
  --ebpt11-spacing-gap-lg: 1rem;

  --ebpt11-radius-pill: 0px;
  --ebpt11-radius-circle: 0px;
  --ebpt11-radius-card: 0px;

  --ebpt11-transition-duration: 0.15s;

  /* =========================================================
     COLORS — SECTION
     ========================================================= */
  --ebpt11-section-background: #f0ece4;
  --ebpt11-section-background-orb-a: rgba(255, 68, 0, 0.1);
  --ebpt11-section-background-orb-b: rgba(234, 179, 8, 0.16);
  --ebpt11-bg-grid-background-image: linear-gradient(rgba(10, 10, 10, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 10, 10, 0.07) 1px, transparent 1px);
  --ebpt11-bg-grid-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 72%);
  --ebpt11-bg-dots-background-image: radial-gradient(rgba(10, 10, 10, 0.16) 1.5px, transparent 1.5px);
  --ebpt11-bg-dots-mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 25%, transparent 75%);
  --ebpt11-bg-shape-a-background: #ff4400;
  --ebpt11-bg-shape-b-background: #eab308;
  --ebpt11-bg-line-background: repeating-linear-gradient(-45deg, #0a0a0a 0 12px, #eab308 12px 24px);

  /* =========================================================
     COLORS — BADGE
     ========================================================= */
  --ebpt11-badge-background: #ff4400;
  --ebpt11-badge-border-color: #0a0a0a;
  --ebpt11-badge-shadow: 4px 4px 0 #0a0a0a;
  --ebpt11-badge-icon-background: #0a0a0a;
  --ebpt11-badge-icon-color: #eab308;
  --ebpt11-badge-text-color: #f2ede4;

  /* =========================================================
     COLORS — HEAD
     ========================================================= */
  --ebpt11-title-color: #0a0a0a;
  --ebpt11-title-highlight-background: linear-gradient(120deg, #ff4400, #ff6a00);
  --ebpt11-title-highlight-color: #f0ece4;
  --ebpt11-title-highlight-box-shadow: 5px 5px 0 #0a0a0a;
  --ebpt11-subtitle-color: rgba(10, 10, 10, 0.62);
  --ebpt11-head-count-color: transparent;
  --ebpt11-head-count-text-stroke: 2px rgba(10, 10, 10, 0.2);

  /* =========================================================
     COLORS — POINTS
     ========================================================= */
  --ebpt11-point-background: #ffffff;
  --ebpt11-point-border-color: #0a0a0a;
  --ebpt11-point-hover-border-color: #0a0a0a;
  --ebpt11-point-drop-shadow: drop-shadow(6px 6px 0 #0a0a0a);
  --ebpt11-point-hover-drop-shadow: drop-shadow(10px 10px 0 #eab308);
  --ebpt11-point-barcode-background: repeating-linear-gradient(90deg, #0a0a0a 0 2px, transparent 2px 5px, #0a0a0a 5px 8px, transparent 8px 10px, #0a0a0a 10px 11px, transparent 11px 15px);
  --ebpt11-point-notch-background: #eab308;
  --ebpt11-point-num-text-stroke: 1.5px rgba(10, 10, 10, 0.22);
  --ebpt11-point-icon-background: #0a0a0a;
  --ebpt11-point-icon-background-b: #ff4400;
  --ebpt11-point-icon-background-c: #eab308;
  --ebpt11-point-icon-color: #f2ede4;
  --ebpt11-point-icon-color-b: #ffffff;
  --ebpt11-point-icon-color-c: #0a0a0a;
  --ebpt11-point-tape-background: rgba(234, 179, 8, 0.8);
  --ebpt11-point-title-color: #0a0a0a;
  --ebpt11-point-desc-color: rgba(10, 10, 10, 0.66);
  --ebpt11-point-support-background: #f0ece4;
  --ebpt11-point-support-border-color: #0a0a0a;
  --ebpt11-point-support-color: #0a0a0a;
  --ebpt11-point-link-color: #ff4400;
  --ebpt11-point-link-hover-color: #0a0a0a;
  --ebpt11-point-flag-background: #eab308;
  --ebpt11-point-flag-color: #0a0a0a;
  --ebpt11-point-flag-border-color: #0a0a0a;
  --ebpt11-point-flag-shadow: 3px 3px 0 #0a0a0a;

  /* =========================================================
     TYPOGRAPHY — SIZES / WEIGHTS / LINE-HEIGHTS / TRACKING
     ========================================================= */
  --ebpt11-badge-font-size: 0.8rem;
  --ebpt11-badge-font-weight: 700;
  --ebpt11-badge-letter-spacing: 1.5px;
  --ebpt11-badge-icon-font-size: 0.85rem;

  --ebpt11-title-font-size: 3rem;
  --ebpt11-title-font-weight: 800;
  --ebpt11-title-line-height: 1.2;
  --ebpt11-title-letter-spacing: -1px;
  --ebpt11-title-highlight-display: inline-block;
  --ebpt11-title-highlight-padding-block: 0 0.1rem;
  --ebpt11-title-highlight-padding-inline: 0.45rem;
  --ebpt11-subtitle-font-size: 1.04rem;
  --ebpt11-subtitle-line-height: 1.9;
  --ebpt11-subtitle-max-width: 640px;

  --ebpt11-head-count-font-family: var(--ebpt11-font-family-latin);
  --ebpt11-head-count-font-size: 7rem;
  --ebpt11-head-count-font-weight: 800;
  --ebpt11-head-count-line-height: 1;

  --ebpt11-point-num-font-family: var(--ebpt11-font-family-latin);
  --ebpt11-point-num-font-size: 3.4rem;
  --ebpt11-point-num-font-weight: 800;
  --ebpt11-point-num-line-height: 1;
  --ebpt11-point-title-font-size: 1.18rem;
  --ebpt11-point-title-font-weight: 800;
  --ebpt11-point-desc-font-size: 0.94rem;
  --ebpt11-point-desc-line-height: 1.8;
  --ebpt11-point-support-font-family: var(--ebpt11-font-family-latin);
  --ebpt11-point-support-font-size: 0.66rem;
  --ebpt11-point-support-font-weight: 700;
  --ebpt11-point-support-letter-spacing: 1.5px;
  --ebpt11-point-support-text-transform: uppercase;
  --ebpt11-point-icon-font-size: 1.05rem;
  --ebpt11-point-link-font-size: 0.9rem;
  --ebpt11-point-link-font-weight: 800;
  --ebpt11-point-flag-font-size: 0.72rem;
  --ebpt11-point-flag-font-weight: 700;
  --ebpt11-point-flag-letter-spacing: 1px;

  /* =========================================================
     SPACING — PADDING / MARGIN / GAP
     ========================================================= */
  --ebpt11-section-padding-y: 6rem;
  --ebpt11-section-padding-x: 4rem;
  --ebpt11-container-max-width: 1180px;

  --ebpt11-header-gap: var(--ebpt11-spacing-gap-md);
  --ebpt11-header-margin-bottom: 3.2rem;
  --ebpt11-badge-gap: var(--ebpt11-spacing-gap-sm);
  --ebpt11-badge-padding-y: 0.55rem;
  --ebpt11-badge-padding-x: 1.15rem;
  --ebpt11-badge-icon-size: 30px;
  --ebpt11-title-margin-block-start: 1.6rem;
  --ebpt11-title-margin-block-end: 1rem;

  --ebpt11-points-gap: 2.2rem;
  --ebpt11-points-margin-top: 3rem;
  --ebpt11-point-padding-y: 1.7rem;
  --ebpt11-point-padding-x: 1.5rem;
  --ebpt11-point-gap: var(--ebpt11-spacing-gap-sm);
  --ebpt11-point-barcode-top: 0;
  --ebpt11-point-barcode-height: 12px;
  --ebpt11-point-notch-size: 22px;
  --ebpt11-point-num-top: 0.9rem;
  --ebpt11-point-num-inline-end: 0.9rem;
  --ebpt11-point-icon-size: 50px;
  --ebpt11-point-icon-tape-height: 10px;
  --ebpt11-point-icon-tape-rotate: -8deg;
  --ebpt11-point-title-margin-block-end: 0.5rem;
  --ebpt11-point-support-margin-top: 0.85rem;
  --ebpt11-point-support-padding-y: 0.22rem;
  --ebpt11-point-support-padding-x: 0.55rem;
  --ebpt11-point-link-margin-top: 1.15rem;
  --ebpt11-point-link-gap: var(--ebpt11-spacing-gap-xs);
  --ebpt11-point-flag-top: 1.1rem;
  --ebpt11-point-flag-inline-start: 1.1rem;
  --ebpt11-point-flag-padding-y: 0.25rem;
  --ebpt11-point-flag-padding-x: 0.7rem;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --ebpt11-section-position: relative;
  --ebpt11-section-direction: rtl;
  --ebpt11-section-overflow: hidden;
  --ebpt11-section-isolation: isolate;

  --ebpt11-bg-position: absolute;
  --ebpt11-bg-inset: 0;
  --ebpt11-bg-z-index: 0;
  --ebpt11-bg-overflow: hidden;
  --ebpt11-bg-pointer-events: none;

  --ebpt11-bg-orb-position: absolute;
  --ebpt11-bg-orb-border-radius: 50%;
  --ebpt11-bg-orb-blur: 80px;
  --ebpt11-bg-orb-a-width: 400px;
  --ebpt11-bg-orb-a-height: 400px;
  --ebpt11-bg-orb-a-top: -150px;
  --ebpt11-bg-orb-a-inline-end: -100px;
  --ebpt11-bg-orb-b-width: 340px;
  --ebpt11-bg-orb-b-height: 340px;
  --ebpt11-bg-orb-b-bottom: -130px;
  --ebpt11-bg-orb-b-inline-start: -90px;

  --ebpt11-bg-grid-position: absolute;
  --ebpt11-bg-grid-inset: 0;
  --ebpt11-bg-grid-background-size: 44px 44px;
  --ebpt11-bg-grid-opacity: 1;

  --ebpt11-bg-dots-position: absolute;
  --ebpt11-bg-dots-inset: 0;
  --ebpt11-bg-dots-background-size: 22px 22px;
  --ebpt11-bg-dots-opacity: 0.5;

  --ebpt11-bg-shape-position: absolute;
  --ebpt11-bg-shape-a-top: 18%;
  --ebpt11-bg-shape-a-inline-start: 6%;
  --ebpt11-bg-shape-a-width: 150px;
  --ebpt11-bg-shape-a-height: 16px;
  --ebpt11-bg-shape-a-transform: rotate(-8deg);
  --ebpt11-bg-shape-b-bottom: 16%;
  --ebpt11-bg-shape-b-inline-end: 5%;
  --ebpt11-bg-shape-b-width: 120px;
  --ebpt11-bg-shape-b-height: 14px;
  --ebpt11-bg-shape-b-transform: rotate(7deg);

  --ebpt11-bg-line-position: absolute;
  --ebpt11-bg-line-top: 0;
  --ebpt11-bg-line-inline: 0;
  --ebpt11-bg-line-height: 16px;

  --ebpt11-container-position: relative;
  --ebpt11-container-z-index: 1;
  --ebpt11-container-margin-inline: auto;

  --ebpt11-header-position: relative;
  --ebpt11-header-display: flex;
  --ebpt11-header-flex-direction: column;
  --ebpt11-header-align-items: flex-start;
  --ebpt11-header-text-align: start;
  --ebpt11-head-count-top: -0.6rem;
  --ebpt11-head-count-inline-end: 0;
  --ebpt11-head-count-z-index: -1;

  --ebpt11-badge-display: inline-flex;
  --ebpt11-badge-align-items: center;
  --ebpt11-badge-icon-display: flex;
  --ebpt11-badge-icon-align-items: center;
  --ebpt11-badge-icon-justify-content: center;

  --ebpt11-points-display: grid;
  --ebpt11-points-grid-template-columns: repeat(3, minmax(0, 1fr));
  --ebpt11-point-position: relative;
  --ebpt11-point-display: flex;
  --ebpt11-point-flex-direction: column;
  --ebpt11-point-align-items: flex-start;
  --ebpt11-point-overflow: hidden;
  --ebpt11-point-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  --ebpt11-point-num-position: absolute;
  --ebpt11-point-num-z-index: 1;
  --ebpt11-point-icon-position: relative;
  --ebpt11-point-icon-display: flex;
  --ebpt11-point-icon-align-items: center;
  --ebpt11-point-icon-justify-content: center;
  --ebpt11-point-body-display: flex;
  --ebpt11-point-body-flex-direction: column;
  --ebpt11-point-link-display: inline-flex;
  --ebpt11-point-link-align-items: center;
  --ebpt11-point-flag-position: absolute;

  /* =========================================================
     BORDER
     ========================================================= */
  --ebpt11-border-width: 3px;
  --ebpt11-badge-border: var(--ebpt11-border-width) solid var(--ebpt11-badge-border-color);
  --ebpt11-point-border: var(--ebpt11-border-width) solid var(--ebpt11-point-border-color);
  --ebpt11-point-support-border: 2px dashed var(--ebpt11-point-support-border-color);
  --ebpt11-point-flag-border: 2px solid var(--ebpt11-point-flag-border-color);
  --ebpt11-point-flag-clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  --ebpt11-point-notch-clip-path: polygon(0 0, 100% 0, 100% 100%);

  /* =========================================================
     SHADOW
     ========================================================= */
  --ebpt11-badge-box-shadow: var(--ebpt11-badge-shadow);
  --ebpt11-point-flag-box-shadow: var(--ebpt11-point-flag-shadow);

  /* =========================================================
     ANIMATION — DURATIONS / DELAYS / KEYFRAME VALUES
     ========================================================= */
  --ebpt11-animation-blip-duration: 1.2s;
  --ebpt11-animation-blip-timing: var(--ebpt11-animation-steps);
  --ebpt11-animation-blip-opacity-a: 1;
  --ebpt11-animation-blip-opacity-b: 0.25;
  --ebpt11-animation-shape-a-delay: 0s;
  --ebpt11-animation-shape-b-delay: 0.6s;

  /* =========================================================
     REVEAL / TRANSITIONS
     ========================================================= */
  --ebpt11-reveal-opacity-start: 0;
  --ebpt11-reveal-opacity-end: 1;
  --ebpt11-reveal-translate-distance: 26px;
  --ebpt11-reveal-translate-distance-end: 0;
  --ebpt11-reveal-transition-duration: 0.3s;
  --ebpt11-reveal-delay-1: 0.1s;
  --ebpt11-reveal-delay-2: 0.2s;
  --ebpt11-reveal-delay-3: 0.3s;

  --ebpt11-point-transition-duration: var(--ebpt11-transition-duration);
  --ebpt11-point-hover-transform: translate(-3px, -3px);
  --ebpt11-point-link-transition-duration: var(--ebpt11-transition-duration);
  --ebpt11-point-link-hover-translate-x: -4px;

  /* =========================================================
     RESPONSIVE — BREAKPOINT TOKENS
     ========================================================= */
  --ebpt11-section-padding-x-tablet: 2rem;
  --ebpt11-title-font-size-tablet: 2.2rem;
  --ebpt11-points-gap-tablet: 1.6rem;
  --ebpt11-section-padding-y-mobile: 3.5rem;
  --ebpt11-section-padding-x-mobile: 1.1rem;
  --ebpt11-title-font-size-mobile: 1.8rem;
  --ebpt11-points-grid-template-columns-mobile: minmax(0, 1fr);
  --ebpt11-section-padding-x-small: 0.9rem;

  /* =========================================================
     BASE RULES (desktop)
     ========================================================= */
  position: var(--ebpt11-section-position);
  padding: var(--ebpt11-section-padding-y) var(--ebpt11-section-padding-x);
  background: var(--ebpt11-section-background);
  font-family: var(--ebpt11-font-family);
  direction: var(--ebpt11-section-direction);
  overflow: var(--ebpt11-section-overflow);
  isolation: var(--ebpt11-section-isolation);
}

/* ============================ BACKGROUND ============================ */
.ebpt11-bg {
  position: var(--ebpt11-bg-position);
  inset: var(--ebpt11-bg-inset);
  z-index: var(--ebpt11-bg-z-index);
  overflow: var(--ebpt11-bg-overflow);
  pointer-events: var(--ebpt11-bg-pointer-events);
}

.ebpt11-bg-line {
  position: var(--ebpt11-bg-line-position);
  top: var(--ebpt11-bg-line-top);
  inset-inline: var(--ebpt11-bg-line-inline);
  height: var(--ebpt11-bg-line-height);
  background: var(--ebpt11-bg-line-background);
}

.ebpt11-bg-orb {
  position: var(--ebpt11-bg-orb-position);
  border-radius: var(--ebpt11-bg-orb-border-radius);
  filter: blur(var(--ebpt11-bg-orb-blur));
}
.ebpt11-bg-orb-a {
  width: var(--ebpt11-bg-orb-a-width);
  height: var(--ebpt11-bg-orb-a-height);
  top: var(--ebpt11-bg-orb-a-top);
  inset-inline-end: var(--ebpt11-bg-orb-a-inline-end);
  background: var(--ebpt11-section-background-orb-a);
}
.ebpt11-bg-orb-b {
  width: var(--ebpt11-bg-orb-b-width);
  height: var(--ebpt11-bg-orb-b-height);
  bottom: var(--ebpt11-bg-orb-b-bottom);
  inset-inline-start: var(--ebpt11-bg-orb-b-inline-start);
  background: var(--ebpt11-section-background-orb-b);
}
.ebpt11-bg-orb-c { display: none; }

.ebpt11-bg-grid {
  position: var(--ebpt11-bg-grid-position);
  inset: var(--ebpt11-bg-grid-inset);
  background-image: var(--ebpt11-bg-grid-background-image);
  background-size: var(--ebpt11-bg-grid-background-size);
  opacity: var(--ebpt11-bg-grid-opacity);
  -webkit-mask-image: var(--ebpt11-bg-grid-mask-image);
  mask-image: var(--ebpt11-bg-grid-mask-image);
}

.ebpt11-bg-dots {
  position: var(--ebpt11-bg-dots-position);
  inset: var(--ebpt11-bg-dots-inset);
  background-image: var(--ebpt11-bg-dots-background-image);
  background-size: var(--ebpt11-bg-dots-background-size);
  opacity: var(--ebpt11-bg-dots-opacity);
  -webkit-mask-image: var(--ebpt11-bg-dots-mask-image);
  mask-image: var(--ebpt11-bg-dots-mask-image);
}

.ebpt11-bg-shape {
  position: var(--ebpt11-bg-shape-position);
}
.ebpt11-bg-shape-a {
  top: var(--ebpt11-bg-shape-a-top);
  inset-inline-start: var(--ebpt11-bg-shape-a-inline-start);
  width: var(--ebpt11-bg-shape-a-width);
  height: var(--ebpt11-bg-shape-a-height);
  background: var(--ebpt11-bg-shape-a-background);
  transform: var(--ebpt11-bg-shape-a-transform);
  animation-name: ebpt11-blip;
  animation-duration: var(--ebpt11-animation-blip-duration);
  animation-timing-function: var(--ebpt11-animation-blip-timing);
  animation-iteration-count: var(--ebpt11-animation-infinite);
  animation-delay: var(--ebpt11-animation-shape-a-delay);
}
.ebpt11-bg-shape-b {
  bottom: var(--ebpt11-bg-shape-b-bottom);
  inset-inline-end: var(--ebpt11-bg-shape-b-inline-end);
  width: var(--ebpt11-bg-shape-b-width);
  height: var(--ebpt11-bg-shape-b-height);
  background: var(--ebpt11-bg-shape-b-background);
  transform: var(--ebpt11-bg-shape-b-transform);
  animation-name: ebpt11-blip;
  animation-duration: var(--ebpt11-animation-blip-duration);
  animation-timing-function: var(--ebpt11-animation-blip-timing);
  animation-iteration-count: var(--ebpt11-animation-infinite);
  animation-delay: var(--ebpt11-animation-shape-b-delay);
}
.ebpt11-bg-shape-c { display: none; }

.ebpt11-bg-scan, .ebpt11-bg-noise, .ebpt11-bg-rays, .ebpt11-bg-waves,
.ebpt11-bg-particles, .ebpt11-bg-leaf, .ebpt11-bg-cloud,
.ebpt11-badge-ribbon { display: none; }

/* ============================ HEADER ============================ */
.ebpt11-container {
  position: var(--ebpt11-container-position);
  z-index: var(--ebpt11-container-z-index);
  max-width: var(--ebpt11-container-max-width);
  margin-inline: var(--ebpt11-container-margin-inline);
}

.ebpt11-header {
  position: var(--ebpt11-header-position);
  display: var(--ebpt11-header-display);
  flex-direction: var(--ebpt11-header-flex-direction);
  align-items: var(--ebpt11-header-align-items);
  gap: var(--ebpt11-header-gap);
  text-align: var(--ebpt11-header-text-align);
  margin-bottom: var(--ebpt11-header-margin-bottom);
}

.ebpt11-badge {
  display: var(--ebpt11-badge-display);
  align-items: var(--ebpt11-badge-align-items);
  gap: var(--ebpt11-badge-gap);
  padding: var(--ebpt11-badge-padding-y) var(--ebpt11-badge-padding-x);
  border-radius: var(--ebpt11-radius-pill);
  border: var(--ebpt11-badge-border);
  background: var(--ebpt11-badge-background);
  box-shadow: var(--ebpt11-badge-box-shadow);
}
.ebpt11-badge i {
  display: var(--ebpt11-badge-icon-display);
  align-items: var(--ebpt11-badge-icon-align-items);
  justify-content: var(--ebpt11-badge-icon-justify-content);
  width: var(--ebpt11-badge-icon-size);
  height: var(--ebpt11-badge-icon-size);
  background: var(--ebpt11-badge-icon-background);
  color: var(--ebpt11-badge-icon-color);
  font-size: var(--ebpt11-badge-icon-font-size);
  animation-name: ebpt11-blip;
  animation-duration: var(--ebpt11-animation-blip-duration);
  animation-timing-function: var(--ebpt11-animation-blip-timing);
  animation-iteration-count: var(--ebpt11-animation-infinite);
}
.ebpt11-badge span {
  font-size: var(--ebpt11-badge-font-size);
  font-weight: var(--ebpt11-badge-font-weight);
  letter-spacing: var(--ebpt11-badge-letter-spacing);
  color: var(--ebpt11-badge-text-color);
}

.ebpt11-title {
  margin: var(--ebpt11-title-margin-block-start) 0 var(--ebpt11-title-margin-block-end);
  font-size: var(--ebpt11-title-font-size);
  font-weight: var(--ebpt11-title-font-weight);
  line-height: var(--ebpt11-title-line-height);
  letter-spacing: var(--ebpt11-title-letter-spacing);
  color: var(--ebpt11-title-color);
}
.ebpt11-title-highlight {
  display: var(--ebpt11-title-highlight-display);
  padding: var(--ebpt11-title-highlight-padding-block) var(--ebpt11-title-highlight-padding-inline);
  background: var(--ebpt11-title-highlight-background);
  color: var(--ebpt11-title-highlight-color);
  box-shadow: var(--ebpt11-title-highlight-box-shadow);
}
.ebpt11-subtitle {
  max-width: var(--ebpt11-subtitle-max-width);
  font-size: var(--ebpt11-subtitle-font-size);
  line-height: var(--ebpt11-subtitle-line-height);
  color: var(--ebpt11-subtitle-color);
}

/* ============================ POINTS GRID ============================ */
.ebpt11-points {
  display: var(--ebpt11-points-display);
  grid-template-columns: var(--ebpt11-points-grid-template-columns);
  gap: var(--ebpt11-points-gap);
  margin-top: var(--ebpt11-points-margin-top);
}

/* ============================ POINT CARD ============================ */
.ebpt11-point {
  position: var(--ebpt11-point-position);
  display: var(--ebpt11-point-display);
  flex-direction: var(--ebpt11-point-flex-direction);
  align-items: var(--ebpt11-point-align-items);
  gap: var(--ebpt11-point-gap);
  padding: var(--ebpt11-point-padding-y) var(--ebpt11-point-padding-x);
  background: var(--ebpt11-point-background);
  border-radius: var(--ebpt11-radius-card);
  border: var(--ebpt11-point-border);
  clip-path: var(--ebpt11-point-clip-path);
  filter: var(--ebpt11-point-drop-shadow);
  overflow: var(--ebpt11-point-overflow);
  transition: transform var(--ebpt11-point-transition-duration) var(--ebpt11-animation-ease), filter var(--ebpt11-point-transition-duration) var(--ebpt11-animation-ease);
}
.ebpt11-point:hover {
  filter: var(--ebpt11-point-hover-drop-shadow);
  transform: var(--ebpt11-point-hover-transform);
}

.ebpt11-point::before {
  content: '';
  position: absolute;
  top: var(--ebpt11-point-barcode-top);
  inset-inline: 0;
  height: var(--ebpt11-point-barcode-height);
  background: var(--ebpt11-point-barcode-background);
  opacity: 0.9;
  pointer-events: none;
}
.ebpt11-point::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: var(--ebpt11-point-notch-size);
  height: var(--ebpt11-point-notch-size);
  background: var(--ebpt11-point-notch-background);
  clip-path: var(--ebpt11-point-notch-clip-path);
  pointer-events: none;
}

/* Num plate (ghost display numeral, top-start) */
.ebpt11-point-num {
  position: var(--ebpt11-point-num-position);
  top: var(--ebpt11-point-num-top);
  inset-inline-end: var(--ebpt11-point-num-inline-end);
  z-index: var(--ebpt11-point-num-z-index);
  font-family: var(--ebpt11-point-num-font-family);
  font-size: var(--ebpt11-point-num-font-size);
  font-weight: var(--ebpt11-point-num-font-weight);
  line-height: var(--ebpt11-point-num-line-height);
  color: transparent;
  -webkit-text-stroke: var(--ebpt11-point-num-text-stroke);
  pointer-events: none;
}

/* Icon plate (stamped + taped) */
.ebpt11-point-icon {
  position: var(--ebpt11-point-icon-position);
  display: var(--ebpt11-point-icon-display);
  align-items: var(--ebpt11-point-icon-align-items);
  justify-content: var(--ebpt11-point-icon-justify-content);
  width: var(--ebpt11-point-icon-size);
  height: var(--ebpt11-point-icon-size);
  background: var(--ebpt11-point-icon-background);
  color: var(--ebpt11-point-icon-color);
  font-size: var(--ebpt11-point-icon-font-size);
  border-radius: var(--ebpt11-radius-circle);
  box-shadow: var(--ebpt11-badge-shadow);
}
.ebpt11-point-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline: -8px;
  height: var(--ebpt11-point-icon-tape-height);
  background: var(--ebpt11-point-tape-background);
  transform: translateY(-50%) rotate(var(--ebpt11-point-icon-tape-rotate));
  pointer-events: none;
}

/* Alternate ink colors per card */
.ebpt11-point:nth-child(3n + 1) .ebpt11-point-icon {
  background: var(--ebpt11-point-icon-background);
  color: var(--ebpt11-point-icon-color);
}
.ebpt11-point:nth-child(3n + 2) .ebpt11-point-icon {
  background: var(--ebpt11-point-icon-background-b);
  color: var(--ebpt11-point-icon-color-b);
}
.ebpt11-point:nth-child(3n + 3) .ebpt11-point-icon {
  background: var(--ebpt11-point-icon-background-c);
  color: var(--ebpt11-point-icon-color-c);
}

/* Body */
.ebpt11-point-body {
  display: var(--ebpt11-point-body-display);
  flex-direction: var(--ebpt11-point-body-flex-direction);
}
.ebpt11-point-title {
  font-size: var(--ebpt11-point-title-font-size);
  font-weight: var(--ebpt11-point-title-font-weight);
  color: var(--ebpt11-point-title-color);
  margin-block-end: var(--ebpt11-point-title-margin-block-end);
}
.ebpt11-point-desc {
  font-size: var(--ebpt11-point-desc-font-size);
  line-height: var(--ebpt11-point-desc-line-height);
  color: var(--ebpt11-point-desc-color);
}
.ebpt11-point-support {
  align-self: flex-start;
  margin-top: var(--ebpt11-point-support-margin-top);
  padding: var(--ebpt11-point-support-padding-y) var(--ebpt11-point-support-padding-x);
  border: var(--ebpt11-point-support-border);
  background: var(--ebpt11-point-support-background);
  font-family: var(--ebpt11-point-support-font-family);
  font-size: var(--ebpt11-point-support-font-size);
  font-weight: var(--ebpt11-point-support-font-weight);
  letter-spacing: var(--ebpt11-point-support-letter-spacing);
  text-transform: var(--ebpt11-point-support-text-transform);
  color: var(--ebpt11-point-support-color);
}

/* Link (arrow shifts left on hover, RTL) */
.ebpt11-point-link {
  display: var(--ebpt11-point-link-display);
  align-items: var(--ebpt11-point-link-align-items);
  gap: var(--ebpt11-point-link-gap);
  margin-top: var(--ebpt11-point-link-margin-top);
  font-size: var(--ebpt11-point-link-font-size);
  font-weight: var(--ebpt11-point-link-font-weight);
  color: var(--ebpt11-point-link-color);
  text-decoration: none;
  transition: color var(--ebpt11-point-link-transition-duration) var(--ebpt11-animation-ease), transform var(--ebpt11-point-link-transition-duration) var(--ebpt11-animation-ease);
}
.ebpt11-point-link:hover {
  color: var(--ebpt11-point-link-hover-color);
  transform: translateX(var(--ebpt11-point-link-hover-translate-x));
}

/* Flag (acid yellow arrow-cut tag) */
.ebpt11-point-flag {
  position: var(--ebpt11-point-flag-position);
  top: var(--ebpt11-point-flag-top);
  inset-inline-start: var(--ebpt11-point-flag-inline-start);
  padding: var(--ebpt11-point-flag-padding-y) var(--ebpt11-point-flag-padding-x);
  background: var(--ebpt11-point-flag-background);
  color: var(--ebpt11-point-flag-color);
  border: var(--ebpt11-point-flag-border);
  clip-path: var(--ebpt11-point-flag-clip-path);
  box-shadow: var(--ebpt11-point-flag-box-shadow);
  font-size: var(--ebpt11-point-flag-font-size);
  font-weight: var(--ebpt11-point-flag-font-weight);
  letter-spacing: var(--ebpt11-point-flag-letter-spacing);
}

/* ============================ REVEAL ============================ */
.ebpt11-reveal-hidden {
  opacity: var(--ebpt11-reveal-opacity-start);
  transform: translateY(var(--ebpt11-reveal-translate-distance));
}
.ebpt11-reveal-visible {
  opacity: var(--ebpt11-reveal-opacity-end);
  transform: translateY(var(--ebpt11-reveal-translate-distance-end));
  transition: opacity var(--ebpt11-reveal-transition-duration) var(--ebpt11-animation-ease), transform var(--ebpt11-reveal-transition-duration) var(--ebpt11-animation-ease);
}
.ebpt11-reveal-visible:nth-child(3n + 1) { transition-delay: var(--ebpt11-reveal-delay-1); }
.ebpt11-reveal-visible:nth-child(3n + 2) { transition-delay: var(--ebpt11-reveal-delay-2); }
.ebpt11-reveal-visible:nth-child(3n + 3) { transition-delay: var(--ebpt11-reveal-delay-3); }

/* ============================ KEYFRAMES ============================ */
@keyframes ebpt11-blip {
  0% { opacity: var(--ebpt11-animation-blip-opacity-a); }
  50% { opacity: var(--ebpt11-animation-blip-opacity-b); }
  100% { opacity: var(--ebpt11-animation-blip-opacity-a); }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .ebpt11-section {
    --ebpt11-section-padding-x: var(--ebpt11-section-padding-x-tablet);
    --ebpt11-title-font-size: var(--ebpt11-title-font-size-tablet);
    --ebpt11-points-gap: var(--ebpt11-points-gap-tablet);
    --ebpt11-head-count-font-size: 5rem;
  }
}

@media (max-width: 767px) {
  .ebpt11-section {
    --ebpt11-section-padding-y: var(--ebpt11-section-padding-y-mobile);
    --ebpt11-section-padding-x: var(--ebpt11-section-padding-x-mobile);
    --ebpt11-title-font-size: var(--ebpt11-title-font-size-mobile);
    --ebpt11-points-grid-template-columns: var(--ebpt11-points-grid-template-columns-mobile);
    --ebpt11-header-margin-bottom: 2.4rem;
    --ebpt11-head-count-font-size: 4rem;
    --ebpt11-point-flag-top: 1rem;
    --ebpt11-point-num-top: 0.8rem;
  }
  .ebpt11-bg-shape-a, .ebpt11-bg-shape-b { display: none; }
}

@media (max-width: 480px) {
  .ebpt11-section {
    --ebpt11-section-padding-x: var(--ebpt11-section-padding-x-small);
  }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  .ebpt11-section {
    --ebpt11-point-hover-transform: none;
  }
  .ebpt11-point,
  .ebpt11-point-link,
  .ebpt11-badge i,
  .ebpt11-bg-shape-a,
  .ebpt11-bg-shape-b {
    animation: none !important;
    transition: none !important;
  }
  .ebpt11-reveal-hidden {
    opacity: var(--ebpt11-reveal-opacity-end);
    transform: none;
  }
}