/**
 * TP4R Features Shapes Library
 * 15 shape sets for the "Why Us" features block
 */

/* ===== CSS Variables - Defaults ===== */
.tp4r-hp-features--shapes {
    --shape-bg-page: #f8f6f2;
    --shape-text-dark: #2c2c2c;
    --shape-text-muted: #6b6b6b;
    --shape-accent-rose: #e8a0b4;
    --shape-accent-gold: #d4a853;
    --shape-accent-sage: #8fad8b;
    --shape-accent-sky: #7db8d4;
    --shape-accent-lavender: #b5a3d4;
    --shape-accent-coral: #e09580;
    --shape-accent-mint: #7dc5b0;
    --shape-accent-peach: #f0c4a0;
}

/* ===== Base Shape ===== */
.tp4r-hp-features--shapes .tp4r-hp-feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: inherit;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    cursor: default;
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.tp4r-hp-features--shapes .tp4r-hp-feature:hover {
    transform: translateY(-4px) scale(1.03);
}

.tp4r-hp-features--shapes .tp4r-hp-feature__icon {
    font-size: 1.6rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: transparent !important;
}

.tp4r-hp-features--shapes .tp4r-hp-feature__icon.tp4r-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.6rem;
}

.tp4r-hp-features--shapes .tp4r-hp-feature__title {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    max-width: 85%;
    margin: 0;
}

.tp4r-hp-features--shapes .tp4r-hp-feature__text {
    font-size: 0.7rem;
    font-weight: 300;
    opacity: 0.7;
    margin-top: 2px;
}

/* ===== Shape Wrapper ===== */
.tp4r-hp-features--shapes .tp4r-shape-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.tp4r-hp-features--shapes .tp4r-shape-wrapper:hover {
    transform: translateY(-4px) scale(1.03);
}

/* Inner content for rotated shapes */
.tp4r-hp-features--shapes .tp4r-shape-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ============================================================
   1. GLASSMORPHISM - זכוכית עדינה
   ============================================================ */

.tp4r-shape--glass-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}

.tp4r-shape--glass-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}

.tp4r-shape--glass-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}

.tp4r-shape--glass-drop {
    width: 150px; height: 150px;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    transform: rotate(45deg);
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}
.tp4r-shape--glass-drop .tp4r-shape-inner { transform: rotate(-45deg); }

.tp4r-shape--glass-squircle {
    width: 155px; height: 155px;
    border-radius: 30%;
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}

/* ============================================================
   2. SOFT PASTEL - פסטל רך
   ============================================================ */

.tp4r-shape--pastel-rose-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
    box-shadow: 0 10px 30px rgba(232,160,180,0.2);
    color: #5a2d3e;
}

.tp4r-shape--pastel-sage-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    box-shadow: 0 10px 30px rgba(143,173,139,0.2);
    color: #2e4a2c;
}

.tp4r-shape--pastel-sky-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    box-shadow: 0 10px 30px rgba(125,184,212,0.2);
    color: #1a3a4a;
}

.tp4r-shape--pastel-lavender-squircle {
    width: 155px; height: 155px;
    border-radius: 30%;
    background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%);
    box-shadow: 0 10px 30px rgba(181,163,212,0.2);
    color: #3a2d5a;
}

.tp4r-shape--pastel-peach-drop {
    width: 150px; height: 150px;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    box-shadow: 0 10px 30px rgba(240,196,160,0.2);
    color: #5a3a1a;
}
.tp4r-shape--pastel-peach-drop .tp4r-shape-inner { transform: rotate(-45deg); }

/* ============================================================
   3. NEUMORPHISM - בולט/שקוע
   ============================================================ */

.tp4r-shape--neu-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: #f0ece4;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.9);
    color: var(--shape-text-dark);
}

.tp4r-shape--neu-squircle {
    width: 155px; height: 155px;
    border-radius: 30%;
    background: #f0ece4;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.9);
    color: var(--shape-text-dark);
}

.tp4r-shape--neu-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: #f0ece4;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.9);
    color: var(--shape-text-dark);
}

.tp4r-shape--neu-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: #f0ece4;
    box-shadow: 8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.9);
    color: var(--shape-text-dark);
}

.tp4r-shape--neu-inset-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: #f0ece4;
    box-shadow: inset 6px 6px 12px rgba(0,0,0,0.08), inset -6px -6px 12px rgba(255,255,255,0.9);
    color: var(--shape-text-dark);
}

/* ============================================================
   4. GRADIENT RICH - גרדיאנט עשיר
   ============================================================ */

.tp4r-shape--grad-sunset-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 10px 30px rgba(240,147,251,0.3);
    color: #fff;
}

.tp4r-shape--grad-ocean-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 10px 30px rgba(102,126,234,0.3);
    color: #fff;
}

.tp4r-shape--grad-forest-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    box-shadow: 0 10px 30px rgba(17,153,142,0.3);
    color: #fff;
}

.tp4r-shape--grad-gold-squircle {
    width: 155px; height: 155px;
    border-radius: 30%;
    background: linear-gradient(135deg, #f2c94c 0%, #d4a853 60%, #b8860b 100%);
    box-shadow: 0 10px 30px rgba(212,168,83,0.3);
    color: #3a2a0a;
}

.tp4r-shape--grad-coral-drop {
    width: 150px; height: 150px;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    box-shadow: 0 10px 30px rgba(255,154,158,0.3);
    color: #5a2020;
}
.tp4r-shape--grad-coral-drop .tp4r-shape-inner { transform: rotate(-45deg); }

/* ============================================================
   5. OUTLINE / BORDERED - מסגרת עדינה
   ============================================================ */

.tp4r-shape--outline-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--shape-accent-rose);
    color: var(--shape-text-dark);
}

.tp4r-shape--outline-squircle {
    width: 155px; height: 155px;
    border-radius: 30%;
    background: transparent;
    border: 2px solid var(--shape-accent-sage);
    color: var(--shape-text-dark);
}

.tp4r-shape--outline-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: transparent;
    border: 2px solid var(--shape-accent-sky);
    color: var(--shape-text-dark);
}

.tp4r-shape--outline-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: transparent;
    border: 2px solid var(--shape-accent-gold);
    color: var(--shape-text-dark);
}

.tp4r-shape--outline-dashed-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: transparent;
    border: 2px dashed var(--shape-accent-lavender);
    color: var(--shape-text-dark);
}

/* ============================================================
   6. DARK ELEGANT - כהה אלגנטי
   ============================================================ */

.tp4r-shape--dark-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: #f0e6d3;
}

.tp4r-shape--dark-squircle {
    width: 155px; height: 155px;
    border-radius: 30%;
    background: linear-gradient(145deg, #1e1e2e, #151520);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: var(--shape-accent-gold);
}

.tp4r-shape--dark-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: linear-gradient(145deg, #2a2a35, #1a1a22);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: var(--shape-accent-rose);
}

.tp4r-shape--dark-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: linear-gradient(145deg, #2c2520, #1a1510);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: var(--shape-accent-peach);
}

.tp4r-shape--dark-drop {
    width: 150px; height: 150px;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    transform: rotate(45deg);
    background: linear-gradient(145deg, #202530, #101520);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: var(--shape-accent-sky);
}
.tp4r-shape--dark-drop .tp4r-shape-inner { transform: rotate(-45deg); }

/* ============================================================
   7. ORGANIC BLOBS - צורות אורגניות מיוחדות
   ============================================================ */

.tp4r-shape--organic-1 {
    width: 170px; height: 165px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: linear-gradient(135deg, rgba(143,173,139,0.2), rgba(143,173,139,0.08));
    border: 1px solid rgba(143,173,139,0.25);
    color: #2e4a2c;
}

.tp4r-shape--organic-2 {
    width: 165px; height: 170px;
    border-radius: 70% 30% 50% 50% / 50% 50% 30% 70%;
    background: linear-gradient(135deg, rgba(232,160,180,0.2), rgba(232,160,180,0.08));
    border: 1px solid rgba(232,160,180,0.25);
    color: #5a2d3e;
}

.tp4r-shape--organic-3 {
    width: 170px; height: 160px;
    border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
    background: linear-gradient(135deg, rgba(125,184,212,0.2), rgba(125,184,212,0.08));
    border: 1px solid rgba(125,184,212,0.25);
    color: #1a3a4a;
}

.tp4r-shape--organic-4 {
    width: 165px; height: 165px;
    border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%;
    background: linear-gradient(135deg, rgba(212,168,83,0.2), rgba(212,168,83,0.08));
    border: 1px solid rgba(212,168,83,0.25);
    color: #4a3a1a;
}

.tp4r-shape--organic-5 {
    width: 170px; height: 165px;
    border-radius: 50% 50% 33% 67% / 55% 40% 60% 45%;
    background: linear-gradient(135deg, rgba(181,163,212,0.2), rgba(181,163,212,0.08));
    border: 1px solid rgba(181,163,212,0.25);
    color: #3a2d5a;
}

/* ============================================================
   8. FLOATING SHADOW - צל צף
   ============================================================ */

.tp4r-shape--float-circle {
    width: 150px; height: 150px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03);
    color: var(--shape-text-dark);
}

.tp4r-shape--float-squircle {
    width: 150px; height: 150px;
    border-radius: 28%;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03);
    color: var(--shape-text-dark);
}

.tp4r-shape--float-blob {
    width: 165px; height: 155px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03);
    color: var(--shape-text-dark);
}

.tp4r-shape--float-egg {
    width: 155px; height: 165px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03);
    color: var(--shape-text-dark);
}

.tp4r-shape--float-diamond {
    width: 130px; height: 130px;
    border-radius: 15%;
    transform: rotate(45deg);
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03);
    color: var(--shape-text-dark);
}
.tp4r-shape--float-diamond .tp4r-shape-inner { transform: rotate(-45deg); }

/* ============================================================
   9. ACCENT TOP BORDER - פס צבע עליון
   ============================================================ */

.tp4r-shape--accent-top-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-top: 4px solid var(--shape-accent-rose);
    color: var(--shape-text-dark);
}

.tp4r-shape--accent-top-squircle {
    width: 155px; height: 155px;
    border-radius: 28%;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-top: 4px solid var(--shape-accent-sage);
    color: var(--shape-text-dark);
}

.tp4r-shape--accent-top-egg {
    width: 155px; height: 165px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-top: 4px solid var(--shape-accent-sky);
    color: var(--shape-text-dark);
}

.tp4r-shape--accent-top-blob {
    width: 165px; height: 155px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-top: 4px solid var(--shape-accent-gold);
    color: var(--shape-text-dark);
}

/* ============================================================
   10. ICON BADGES - תגיות עם אייקון בולט
   ============================================================ */

.tp4r-shape--badge-pill {
    width: 200px; height: 80px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.07);
    flex-direction: row;
    gap: 10px;
    padding: 0 20px;
}

.tp4r-shape--badge-rounded {
    width: 200px; height: 80px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.07);
    flex-direction: row;
    gap: 10px;
    padding: 0 20px;
}

.tp4r-shape--badge-circle-icon {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.07);
}

.tp4r-shape--badge-pill-outline {
    width: 200px; height: 80px;
    border-radius: 50px;
    background: transparent;
    border: 2px solid var(--shape-accent-sage);
    flex-direction: row;
    gap: 10px;
    padding: 0 20px;
}

.tp4r-shape--badge-rounded-dark {
    width: 200px; height: 80px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
    flex-direction: row;
    gap: 10px;
    padding: 0 20px;
    color: #f0e6d3;
}

/* ============================================================
   11. HEXAGON & SPECIAL - משושה וצורות מיוחדות
   ============================================================ */

.tp4r-shape--hexagon {
    width: 160px; height: 140px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #2e4a2c;
}

.tp4r-shape--hexagon-dark {
    width: 160px; height: 140px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
    color: var(--shape-accent-gold);
}

.tp4r-shape--shield {
    width: 150px; height: 170px;
    clip-path: polygon(50% 0%, 100% 15%, 100% 70%, 50% 100%, 0% 70%, 0% 15%);
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
    color: #5a2d3e;
}

.tp4r-shape--pentagon {
    width: 160px; height: 155px;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1a3a4a;
}

.tp4r-shape--octagon {
    width: 155px; height: 155px;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #5a3a1a;
}

/* ============================================================
   12. SUBTLE TEXTURE - עם טקסטורה
   ============================================================ */

.tp4r-shape--texture-dots-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background-color: #fff;
    background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 10px 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}

.tp4r-shape--texture-lines-squircle {
    width: 155px; height: 155px;
    border-radius: 30%;
    background-color: #fff;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0,0,0,0.02) 8px,
        rgba(0,0,0,0.02) 9px
    );
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}

.tp4r-shape--texture-grid-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background-color: #fef9f0;
    background-image:
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 15px 15px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}

.tp4r-shape--texture-noise-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: linear-gradient(135deg, #f9f5ef, #f0e8db);
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    color: var(--shape-text-dark);
}

/* ============================================================
   13. DOUBLE BORDER - מסגרת כפולה
   ============================================================ */

.tp4r-shape--double-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--shape-accent-gold);
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--shape-accent-gold), 0 10px 30px rgba(0,0,0,0.08);
    color: var(--shape-text-dark);
}

.tp4r-shape--double-squircle {
    width: 155px; height: 155px;
    border-radius: 28%;
    background: #fff;
    border: 2px solid var(--shape-accent-rose);
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--shape-accent-rose), 0 10px 30px rgba(0,0,0,0.08);
    color: var(--shape-text-dark);
}

.tp4r-shape--double-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: #fff;
    border: 2px solid var(--shape-accent-sage);
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--shape-accent-sage), 0 10px 30px rgba(0,0,0,0.08);
    color: var(--shape-text-dark);
}

/* ============================================================
   14. ANIMATED GLOW - זוהר עדין
   ============================================================ */

@keyframes tp4rSoftPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(232,160,180,0.2), 0 8px 30px rgba(0,0,0,0.06); }
    50% { box-shadow: 0 0 35px rgba(232,160,180,0.35), 0 8px 30px rgba(0,0,0,0.06); }
}

@keyframes tp4rGoldPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(212,168,83,0.2), 0 8px 30px rgba(0,0,0,0.06); }
    50% { box-shadow: 0 0 35px rgba(212,168,83,0.35), 0 8px 30px rgba(0,0,0,0.06); }
}

@keyframes tp4rMintPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(125,197,176,0.2), 0 8px 30px rgba(0,0,0,0.06); }
    50% { box-shadow: 0 0 35px rgba(125,197,176,0.35), 0 8px 30px rgba(0,0,0,0.06); }
}

.tp4r-shape--glow-rose-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: #fff;
    animation: tp4rSoftPulse 3s ease-in-out infinite;
    color: #5a2d3e;
}

.tp4r-shape--glow-gold-squircle {
    width: 155px; height: 155px;
    border-radius: 30%;
    background: #fff;
    animation: tp4rGoldPulse 3s ease-in-out infinite;
    color: #4a3a1a;
}

.tp4r-shape--glow-mint-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: #fff;
    animation: tp4rMintPulse 3s ease-in-out infinite;
    color: #1a4a3a;
}

/* ============================================================
   15. MINIMAL FLAT - מינימלי שטוח
   ============================================================ */

.tp4r-shape--flat-circle {
    width: 155px; height: 155px;
    border-radius: 50%;
    background: #eee8df;
    color: var(--shape-text-dark);
}

.tp4r-shape--flat-squircle {
    width: 155px; height: 155px;
    border-radius: 28%;
    background: #dfe8e3;
    color: var(--shape-text-dark);
}

.tp4r-shape--flat-blob {
    width: 170px; height: 160px;
    border-radius: 58% 42% 65% 35% / 45% 60% 40% 55%;
    background: #e3dfe8;
    color: var(--shape-text-dark);
}

.tp4r-shape--flat-egg {
    width: 160px; height: 170px;
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: #e8e0d8;
    color: var(--shape-text-dark);
}

.tp4r-shape--flat-drop {
    width: 150px; height: 150px;
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    transform: rotate(45deg);
    background: #dce8e0;
    color: var(--shape-text-dark);
}
.tp4r-shape--flat-drop .tp4r-shape-inner { transform: rotate(-45deg); }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    /* 1. GLASSMORPHISM */
    .tp4r-shape--glass-egg { width: 140px; height: 150px; }
    .tp4r-shape--glass-circle { width: 135px; height: 135px; }
    .tp4r-shape--glass-blob { width: 150px; height: 140px; }
    .tp4r-shape--glass-drop { width: 130px; height: 130px; }
    .tp4r-shape--glass-squircle { width: 135px; height: 135px; }

    /* 2. SOFT PASTEL */
    .tp4r-shape--pastel-rose-circle { width: 135px; height: 135px; }
    .tp4r-shape--pastel-sage-egg { width: 140px; height: 150px; }
    .tp4r-shape--pastel-sky-blob { width: 150px; height: 140px; }
    .tp4r-shape--pastel-lavender-squircle { width: 135px; height: 135px; }
    .tp4r-shape--pastel-peach-drop { width: 130px; height: 130px; }

    /* 3. NEUMORPHISM */
    .tp4r-shape--neu-circle { width: 135px; height: 135px; }
    .tp4r-shape--neu-squircle { width: 135px; height: 135px; }
    .tp4r-shape--neu-egg { width: 140px; height: 150px; }
    .tp4r-shape--neu-blob { width: 150px; height: 140px; }
    .tp4r-shape--neu-inset-circle { width: 135px; height: 135px; }

    /* 4. GRADIENT RICH */
    .tp4r-shape--grad-sunset-circle { width: 135px; height: 135px; }
    .tp4r-shape--grad-ocean-blob { width: 150px; height: 140px; }
    .tp4r-shape--grad-forest-egg { width: 140px; height: 150px; }
    .tp4r-shape--grad-gold-squircle { width: 135px; height: 135px; }
    .tp4r-shape--grad-coral-drop { width: 130px; height: 130px; }

    /* 5. OUTLINE / BORDERED */
    .tp4r-shape--outline-circle { width: 135px; height: 135px; }
    .tp4r-shape--outline-squircle { width: 135px; height: 135px; }
    .tp4r-shape--outline-egg { width: 140px; height: 150px; }
    .tp4r-shape--outline-blob { width: 150px; height: 140px; }
    .tp4r-shape--outline-dashed-circle { width: 135px; height: 135px; }

    /* 6. DARK ELEGANT */
    .tp4r-shape--dark-circle { width: 135px; height: 135px; }
    .tp4r-shape--dark-squircle { width: 135px; height: 135px; }
    .tp4r-shape--dark-blob { width: 150px; height: 140px; }
    .tp4r-shape--dark-egg { width: 140px; height: 150px; }
    .tp4r-shape--dark-drop { width: 130px; height: 130px; }

    /* 7. ORGANIC BLOBS */
    .tp4r-shape--organic-1 { width: 150px; height: 145px; }
    .tp4r-shape--organic-2 { width: 145px; height: 150px; }
    .tp4r-shape--organic-3 { width: 150px; height: 140px; }
    .tp4r-shape--organic-4 { width: 145px; height: 145px; }
    .tp4r-shape--organic-5 { width: 150px; height: 145px; }

    /* 8. FLOATING SHADOW */
    .tp4r-shape--float-circle { width: 130px; height: 130px; }
    .tp4r-shape--float-squircle { width: 130px; height: 130px; }
    .tp4r-shape--float-blob { width: 145px; height: 135px; }
    .tp4r-shape--float-egg { width: 135px; height: 145px; }
    .tp4r-shape--float-diamond { width: 110px; height: 110px; }

    /* 9. ACCENT TOP BORDER */
    .tp4r-shape--accent-top-circle { width: 135px; height: 135px; }
    .tp4r-shape--accent-top-squircle { width: 135px; height: 135px; }
    .tp4r-shape--accent-top-egg { width: 135px; height: 145px; }
    .tp4r-shape--accent-top-blob { width: 145px; height: 135px; }

    /* 10. ICON BADGES */
    .tp4r-shape--badge-pill { width: 180px; height: 60px; }
    .tp4r-shape--badge-rounded { width: 180px; height: 60px; }
    .tp4r-shape--badge-circle-icon { width: 135px; height: 135px; }
    .tp4r-shape--badge-pill-outline { width: 180px; height: 60px; }
    .tp4r-shape--badge-rounded-dark { width: 180px; height: 60px; }

    /* 11. HEXAGON & SPECIAL */
    .tp4r-shape--hexagon { width: 140px; height: 120px; }
    .tp4r-shape--hexagon-dark { width: 140px; height: 120px; }
    .tp4r-shape--shield { width: 130px; height: 150px; }
    .tp4r-shape--pentagon { width: 140px; height: 135px; }
    .tp4r-shape--octagon { width: 135px; height: 135px; }

    /* 12. SUBTLE TEXTURE */
    .tp4r-shape--texture-dots-circle { width: 135px; height: 135px; }
    .tp4r-shape--texture-lines-squircle { width: 135px; height: 135px; }
    .tp4r-shape--texture-grid-blob { width: 150px; height: 140px; }
    .tp4r-shape--texture-noise-egg { width: 140px; height: 150px; }

    /* 13. DOUBLE BORDER */
    .tp4r-shape--double-circle { width: 135px; height: 135px; }
    .tp4r-shape--double-squircle { width: 135px; height: 135px; }
    .tp4r-shape--double-egg { width: 140px; height: 150px; }

    /* 14. GLOW EFFECT */
    .tp4r-shape--glow-rose-circle { width: 135px; height: 135px; }
    .tp4r-shape--glow-gold-squircle { width: 135px; height: 135px; }
    .tp4r-shape--glow-mint-blob { width: 150px; height: 140px; }

    /* 15. MINIMAL FLAT */
    .tp4r-shape--flat-circle { width: 135px; height: 135px; }
    .tp4r-shape--flat-squircle { width: 135px; height: 135px; }
    .tp4r-shape--flat-blob { width: 150px; height: 140px; }
    .tp4r-shape--flat-egg { width: 140px; height: 150px; }
    .tp4r-shape--flat-drop { width: 130px; height: 130px; }
}