<div
                  key={subculture.id}
                  className={`rounded-[30px] lg:rounded-[40px] xl:rounded-[50px] relative overflow-hidden p-4 lg:p-6 xl:p-8 transition-all duration-300 h-[520px] lg:h-[620px] xl:h-[680px] ${
                    isUserSubculture ? "ring-4 ring-[#01E95C]" : ""
                  }`}
                >
                {isUserSubculture && (
                    <div className="absolute top-8 lg:top-10 xl:top-12 left-8 lg:left-10 xl:left-12 bg-[#01E95C] text-black font-bold py-2 lg:py-3 xl:py-4 px-3 lg:px-4 xl:px-6 rounded-full transform -rotate-12 z-20 shadow-lg text-xs lg:text-sm xl:text-base">
                      Ваша команда
                    </div>
                  )}
                  {/* Background & SVG */}
                  <div
                    className="absolute inset-0 w-full h-full rounded-[30px] lg:rounded-[40px] xl:rounded-[50px]"
                    style={{ background: design.gradient }}
                  ></div>
                  <svg
                    className="absolute top-0 right-0 w-full h-full opacity-20"
                    viewBox="0 0 540 675"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    preserveAspectRatio="xMaxYMin slice"
                  >
                    <path
                      opacity="0.7"
                      fillRule="evenodd"
                      clipRule="evenodd"
                      d="M726.777 394.739C711.477 368.878 679.324 359.021 652.463 371.957C504.907 443.017 295.537 537.159 144.866 590.081C123.085 597.731 102.838 604.41 84.4164 609.984C247.19 435.749 778.043 25.0046 875 -57.8763L800.541 -147.5C693.377 -55.8935 124.953 388.764 -44.9599 579.15C-56.7667 592.379 -67.0384 605.509 -74.7355 618.399C-81.7992 630.229 -90.161 647.489 -90.85 667.809C-91.7056 693.04 -80.3902 716.621 -59.1171 731.099C-42.1369 742.656 -23.4674 745.215 -11.2885 745.878C14.0808 747.258 44.8291 741.656 75.0549 734.1C106.71 726.186 143.348 714.645 182.673 700.833C201.735 694.138 221.643 686.832 242.175 679.035L-181.5 999.338L-112.699 1093.5L711.641 471.977C735.529 454.018 742.078 420.6 726.777 394.739Z"
                      fill={`url(#paint0_linear_${subculture.slug})`}
                    />
                    <defs>
                      <linearGradient
                        id={`paint0_linear_${subculture.slug}`}
                        x1="0%"
                        y1="0%"
                        x2="100%"
                        y2="100%"
                        gradientUnits="userSpaceOnUse"
                      >
                        <stop offset="0%" stopColor={design.svgColors.start} />
                        <stop offset="50%" stopColor={design.svgColors.middle} />
                        <stop offset="100%" stopColor={design.svgColors.end} />
                      </linearGradient>
                    </defs>
                  </svg>

                  {/* Card Content - АДАПТОВАНИЙ ДЛЯ ШИРШИХ КАРТОК */}
                  <div className="relative z-10 flex flex-col h-full">
                    {/* Static Header */}
                    <div className="flex-shrink-0">
                      <div className="w-full h-[100px] lg:h-[120px] xl:h-[140px] flex items-center justify-center">
                        <Image
                          src={design.icon || "/placeholder.svg"}
                          alt={design.name}
                          width={160}
                          height={160}
                          className="w-[80px] h-[80px] lg:w-[100px] lg:h-[100px] xl:w-[120px] xl:h-[120px] object-contain"
                        />
                      </div>
                      <div className="flex flex-col items-center w-full">
                        <h3 className="text-lg lg:text-xl xl:text-2xl 2xl:text-3xl font-black text-black text-center leading-tight">
                          {design.name}
                        </h3>
                        <h4 className="text-sm lg:text-base xl:text-lg font-extrabold text-black text-center leading-relaxed">
                          {design.subtitle}
                        </h4>
                      </div>
                    </div>

                    {/* Dynamic Content Area */}
                    <div className="flex-1 flex flex-col min-h-0 mt-2 lg:mt-3 xl:mt-4">
                      {!isExpanded ? (
                        <div className="flex flex-col items-center justify-between flex-1 gap-2 lg:gap-3 xl:gap-4 w-full animate-fade-in">
                          <div className="w-full min-h-[80px] lg:min-h-[100px] xl:min-h-[120px] flex items-center px-0">
                            <p className="text-xs lg:text-sm xl:text-base font-semibold text-black leading-relaxed text-left w-full">
                              {design.description}
                            </p>
                          </div>
                          <div className="flex flex-col items-center w-full">
                            <span className="text-sm lg:text-base xl:text-lg font-semibold text-black text-center">Зібрано:</span>
                            <span className="text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl font-extrabold text-black text-center leading-tight">
                              {formatCurrency(subculture.current_amount)}
                            </span>
                          </div>
                          <div
                            className="w-full min-h-[110px] lg:min-h-[130px] xl:min-h-[150px] flex flex-col justify-center items-start p-3 lg:p-4 xl:p-6 gap-2 lg:gap-3 xl:gap-4 rounded-[20px] lg:rounded-[25px] xl:rounded-[30px] mx-1 lg:mx-2"
                            style={{ backgroundColor: design.buttonColor }}
                          >
                            <div className="flex flex-col w-full gap-2 lg:gap-3 xl:gap-4">
                              <div className="flex items-start gap-1 lg:gap-2">
                                <span className="text-xs lg:text-sm xl:text-base font-semibold text-white leading-relaxed flex-1">
                                  {subculture.bank_account}
                                </span>
                                <button
                                  onClick={() => copyToClipboard(subculture.bank_account, subculture.slug)}
                                  className="flex-shrink-0 transition-colors"
                                  aria-label="Копіювати номер рахунку"
                                >
                                  {isCopied ? (
                                    <Check className="w-3 h-3 lg:w-4 lg:h-4 xl:w-5 xl:h-5 text-white" />
                                  ) : (
                                    <Copy className="w-3 h-3 lg:w-4 lg:h-4 xl:w-5 xl:h-5 text-white hover:text-white/80 transition-colors" />
                                  )}
                                </button>
                              </div>
                              {subculture.jar_url ? (
                                <a
                                  href={subculture.jar_url}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="flex justify-center items-center px-2 lg:px-3 xl:px-4 py-2 lg:py-3 xl:py-4 gap-1 lg:gap-2 xl:gap-3 w-full bg-white/20 rounded-[40px] lg:rounded-[50px] hover:bg-white/30 transition-colors"
                                >
                                  <span className="text-xs lg:text-sm xl:text-base font-semibold text-white">
                                    Підтримати
                                  </span>
                                  <ArrowRight className="w-3 h-3 lg:w-4 lg:h-4 xl:w-5 xl:h-5 text-white" />
                                </a>
                              ) : (
                                <div className="flex justify-center items-center px-2 lg:px-3 xl:px-4 py-2 lg:py-3 xl:py-4 gap-1 lg:gap-2 xl:gap-3 w-full bg-white/10 rounded-[40px] lg:rounded-[50px] opacity-50 cursor-not-allowed">
                                  <span className="text-xs lg:text-sm xl:text-base font-semibold text-white">
                                    Підтримати
                                  </span>
                                  <ArrowRight className="w-3 h-3 lg:w-4 lg:h-4 xl:w-5 xl:h-5 text-white" />
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      ) : (
                        <div className="w-full bg-black/5 backdrop-blur-sm p-3 lg:p-4 xl:p-6 rounded-[20px] lg:rounded-[25px] xl:rounded-[30px] mx-1 lg:mx-2 flex-1 overflow-y-auto animate-fade-in">
                          <p className="text-xs lg:text-sm xl:text-base text-black leading-relaxed text-left">
                            {design.fullDescription}
                          </p>
                        </div>
                      )}
                    </div>

                    {/* Static Footer (Expand Button) */}
                    <button
                      onClick={() => toggleCard(subculture.slug)}
                      className="flex justify-center items-center px-4 lg:px-6 xl:px-8 py-2 lg:py-3 gap-2 lg:gap-3 w-full mt-4 lg:mt-5 xl:mt-6 flex-shrink-0"
                    >
                      <div className="w-4 h-4 lg:w-5 lg:h-5 xl:w-6 xl:h-6 flex items-center justify-center">
                        {isExpanded ? (
                          <span className="text-sm lg:text-base xl:text-lg 2xl:text-xl font-black text-[#07163B]">—</span>
                        ) : (
                          <Plus className="w-4 h-4 lg:w-5 lg:h-5 xl:w-6 xl:h-6 text-black" />
                        )}
                      </div>
                      <span className="text-sm lg:text-base xl:text-lg 2xl:text-xl font-black uppercase text-[#07163B] text-center">
                        ЩО ЗА {design.name.toUpperCase()}
                      </span>
                    </button>
                  </div>
                </div> 
треба зробити трохи довшою, щоб помістився текст що за на великому екрані,