.feature-card-modern {
          background: #0f0f13;
          border-radius: 24px;
          padding: 2.5rem;
          border: 1px solid rgba(255, 255, 255, 0.05);
          position: relative;
          overflow: hidden;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
          min-height: 350px;
      }

      .feature-card-modern:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
          border-color: var(--primary-dark);
      }

      .modern-title {
          font-size: 1.5rem;
          font-weight: 600;
          margin-bottom: 0.75rem;
      }

      .modern-desc {
          font-size: 0.95rem;
          line-height: 1.6;
          color: #aaa;
          margin-bottom: 2rem;
          max-width: 90%;
      }


      .filter-grid-viz {
          display: grid;
          grid-template-columns: 50% 50%;
          grid-template-rows: 1fr 1fr;
          height: 250px;
          position: relative;
          width: 100%;
          padding: 0;
          box-sizing: border-box;
          overflow: hidden;
      }

      .grid-spine {
          position: absolute;
          left: 50%;
          top: 20px;
          bottom: 45px;
          width: 1px;
          border-left: 1px dashed rgba(255, 255, 255, 0.2);
          transform: translateX(-0.5px);
          z-index: 1;
      }

      .grid-plus {
          position: absolute;
          left: 50%;
          bottom: 20px;
          transform: translateX(-50%);
          color: var(--primary);
          font-weight: bold;
          font-size: 1.2rem;
          text-shadow: 0 0 10px rgba(255, 0, 85, 0.4);
          z-index: 5;
          line-height: 1;
          background: rgba(16, 26, 35, 0.8);
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .grid-cell {
          display: flex;
          align-items: center;
          position: relative;
          z-index: 2;
          width: 100%;
          min-width: 0;
      }

      .cell-tl,
      .cell-bl {
          justify-content: flex-end;
          padding-right: 5px;
      }

      .cell-tr,
      .cell-br {
          justify-content: flex-start;
          padding-left: 5px;
      }

      .filter-pill {
          background: rgba(16, 26, 35, 0.95);
          border: 1px solid rgba(255, 255, 255, 0.15);
          padding: 6px 12px;
          border-radius: 20px;
          font-size: 0.8rem;
          color: #ddd;
          display: flex;
          align-items: center;
          gap: 6px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          flex-shrink: 1;

          transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .filter-pill:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
          border-color: var(--primary);
          color: #fff;
          z-index: 10;
      }

      .filter-pill i {
          color: var(--primary);
          font-size: 0.9em;
          flex-shrink: 0;
      }

      .connect-line {
          height: 1px;
          width: 15px;
          border-top: 1px dashed rgba(255, 255, 255, 0.3);
          flex-shrink: 0;
      }

      .cell-tl .connect-line,
      .cell-bl .connect-line {
          margin-left: -2px;
          margin-right: -1px;
      }

      .cell-tr .connect-line,
      .cell-br .connect-line {
          margin-left: -1px;
          margin-right: -2px;
      }

      @media (max-width: 400px) {
          .filter-grid-viz {
              padding: 0;
          }

          .filter-pill {
              padding: 4px 8px;
              font-size: 0.75rem;
          }

          .cell-tl,
          .cell-bl {
              padding-right: 2px;
          }

          .cell-tr,
          .cell-br {
              padding-left: 2px;
          }

          .connect-line {
              width: 10px;
          }

      }

      .node-links::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 100%;
          width: 200px;
          width: calc((50vw - 100%) - (15vw));

          width: 12%;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
          pointer-events: none;
          z-index: -1;
      }

      .node-links {
          top: 50px;
          left: 15%;
      }

      .node-links::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 100%;
          width: 100vw;
          max-width: calc(35vw - 20px);

      }

      .node-links {
          top: 60px;
          left: 18%;
      }

      .node-mentions {
          top: 60px;
          right: 18%;
      }

      .node-spoilers {
          bottom: 60px;
          left: 10%;
      }

      .node-invites {
          bottom: 60px;
          right: 10%;
      }

      .node-links::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 100%;
          width: calc(50vw - 18% - 130px);
          width: 100px;
      }


      .node-links::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 100%;
          width: 1000px;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
          z-index: -1;

      }


      .node-links {
          top: 60px;
          left: 10%;
      }

      .node-mentions {
          top: 60px;
          right: 10%;
      }

      .node-links {
          top: 50px;
          right: 50%;
          margin-right: 1px;
          transform: translateX(-40px);

      }



      .node-graph-viz::before {
          content: '';
          position: absolute;
          top: 75px;
          left: 20%;
          right: 50%;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
          z-index: 1;
      }

      .node-graph-viz::after {
          content: '';
          position: absolute;
          top: 75px;
          right: 20%;
          left: 50%;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
          z-index: 1;
      }

      .node-line-horizontal {
          display: block;
          position: absolute;
          top: 150px;

      }


      .node-links {
          top: 58px;
          left: 15%;
          margin: 0;
      }

      .node-mentions {
          top: 58px;
          right: 15%;
          margin: 0;
      }

      .node-spoilers {
          bottom: 60px;
          left: 10%;
          margin: 0;
      }

      .node-invites {
          bottom: 60px;
          right: 10%;
          margin: 0;
      }

      .node-links::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 100%;
          width: 200vw;
          height: 1px;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
          z-index: -1;
      }

      .node-mentions::before {
          content: '';
          position: absolute;
          top: 50%;
          right: 100%;
          width: 200vw;
          height: 1px;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
          z-index: -1;
      }

      .node-spoilers::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 100%;
          width: 50px;
          height: 1px;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
      }

      .node-spoilers::after {}


      .node-links {
          top: 60px;
          right: 50%;
          margin-right: 60px;
      }

      .node-links::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 100%;
          width: 60px;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
      }

      .node-mentions {
          top: 60px;
          left: 50%;
          margin-left: 60px;
      }

      .node-mentions::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 100%;
          width: 60px;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
      }

      .node-spoilers {
          top: 150px;
          right: 50%;
          margin-right: 100px;
      }

      .node-spoilers::after {
          content: '';
          position: absolute;
          top: -30px;
          left: 100%;
          width: 100px;
          height: 50px;

      }


      .node-links {
          top: 60px;
          right: 50%;
          margin-right: 80px;
      }

      .node-mentions {
          top: 60px;
          left: 50%;
          margin-left: 80px;
      }

      .node-graph-viz::before {
          content: '';
          position: absolute;
          top: 77px;
          left: 50%;
          transform: translateX(-50%);
          width: 160px;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
          z-index: 1;
      }

      .node-spoilers {
          top: 160px;
          right: 50%;
          margin-right: 80px;
      }

      .node-invites {
          top: 160px;
          left: 50%;
          margin-left: 80px;
      }


      .node-line-horizontal {
          display: block;
          position: absolute;
          top: 177px;
          left: 50%;
          transform: translateX(-50%);
          width: 160px;
          border-top: 1px dashed rgba(255, 255, 255, 0.2);
          z-index: 1;
      }


      .shield-viz-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 180px;
          position: relative;
      }

      .shield-icon {
          font-size: 5rem;
          color: var(--primary-dark);
          position: relative;
          z-index: 2;
          background: radial-gradient(circle at center, rgba(255, 0, 85, 0.1) 0%, transparent 70%);
          border-radius: 50%;
          padding: 2rem;
          width: 120px;
          height: 140px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid rgba(255, 0, 85, 0.1);
          box-shadow: 0 0 30px rgba(255, 0, 85, 0.05);
      }

      .shield-icon i.fa-shield-alt {
          font-size: 5rem;
      }

      .key-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 2.5rem;
          color: var(--primary);
          z-index: 3;
      }

      .shield-grid-lines {
          position: absolute;
          width: 160px;
          height: 160px;
          border: 1px dashed rgba(255, 255, 255, 0.1);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }

      .radar-viz-container {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .radar-circle {
          position: absolute;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.05);
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
      }

      .c1 {
          width: 100px;
          height: 100px;
      }

      .c2 {
          width: 220px;
          height: 220px;
      }

      .c3 {
          width: 340px;
          height: 340px;
      }

      .radar-sweep {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 170px;
          height: 170px;
          background: conic-gradient(from 0deg, transparent 0%, rgba(255, 0, 85, 0.1) 20%, rgba(255, 0, 85, 0.3) 25%, transparent 30%);
          transform-origin: top left;
          animation: radarSpin 4s linear infinite;
      }

      @keyframes radarSpin {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }

      .radar-dot {
          position: absolute;
          width: 6px;
          height: 6px;
          background: #fff;
          border-radius: 50%;
          box-shadow: 0 0 10px #fff;
          opacity: 0;
          animation: radarPulse 4s infinite;
      }

      .d1 {
          top: 40%;
          left: 60%;
          animation-delay: 0.5s;
      }

      .d2 {
          top: 60%;
          left: 30%;
          animation-delay: 2s;
          background: #ff4d4d;
          box-shadow: 0 0 10px #ff4d4d;
      }

      .d3 {
          top: 20%;
          left: 45%;
          animation-delay: 3s;
      }

      @keyframes radarPulse {
          0% {
              opacity: 0;
          }

          50% {
              opacity: 1;
              transform: scale(1.2);
          }

          100% {
              opacity: 0;
          }
      }

      .user-scan-viz {
          height: 180px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
      }

      .user-icon-large {
          font-size: 4rem;
          color: rgba(255, 255, 255, 0.3);
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
          width: 100px;
          height: 140px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
      }

      .scan-line {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: var(--primary);
          box-shadow: 0 0 10px var(--primary);
          animation: scanMove 2s ease-in-out infinite alternate;
          z-index: 5;
          width: 100%;
      }

      @keyframes scanMove {
          0% {
              top: 10%;
              opacity: 0.5;
          }

          100% {
              top: 90%;
              opacity: 1;
          }
      }

      .identity-viz {
          height: 180px;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .id-card-mock {
          width: 140px;
          height: 90px;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          position: relative;
          display: flex;
          align-items: center;
          padding: 10px;
          gap: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          transform: rotate(-5deg);
      }

      .id-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: var(--primary-dark);
      }

      .id-lines {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .id-line {
          height: 6px;
          border-radius: 3px;
          background: rgba(255, 255, 255, 0.1);
      }

      .id-line.l1 {
          width: 80%;
      }

      .id-line.l2 {
          width: 50%;
      }

      .id-badge {
          position: absolute;
          top: -10px;
          right: -10px;
          width: 30px;
          height: 30px;
          background: var(--primary);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 0.8rem;
          animation: bounce 2s infinite;
      }

      @keyframes bounce {

          0%,
          100% {
              transform: translateY(0);
          }

          50% {
              transform: translateY(-5px);
          }
      }

      .whitelist-viz {
          height: 180px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 10px;
          padding: 0 2rem;
      }

      .wl-item {
          display: flex;
          align-items: center;
          gap: 10px;
          background: rgba(255, 255, 255, 0.03);
          padding: 8px 12px;
          border-radius: 8px;
          border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .wl-item.dim {
          opacity: 0.5;
      }

      .wl-line {
          flex: 1;
          height: 4px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 2px;
      }

      .uptime-viz {
          height: 180px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
      }

      .server-icon {
          font-size: 5rem;
          color: rgba(255, 255, 255, 0.1);
      }

      .uptime-badge {
          position: absolute;
          bottom: 30px;
          background: rgba(0, 255, 136, 0.1);
          color: #00ff88;
          padding: 5px 12px;
          border-radius: 20px;
          border: 1px solid rgba(0, 255, 136, 0.3);
          font-weight: bold;
          font-size: 0.9rem;
          display: flex;
          align-items: center;
          gap: 6px;
      }

      .pulse-dot {
          width: 8px;
          height: 8px;
          background: #00ff88;
          border-radius: 50%;
          box-shadow: 0 0 10px #00ff88;
          animation: pulse 1.5s infinite;
      }

      @keyframes pulse {
          0% {
              opacity: 1;
          }

          50% {
              opacity: 0.5;
          }

          100% {
              opacity: 1;
          }
      }

      .support-viz {
          height: 180px;
          position: relative;
      }

      .chat-bubble {
          position: absolute;
          padding: 12px 18px;
          border-radius: 12px;
          color: white;
          font-size: 1.2rem;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .b1 {
          background: rgba(255, 255, 255, 0.1);
          top: 30%;
          left: 20%;
          border-bottom-left-radius: 2px;
          animation: float 3s infinite ease-in-out;
      }

      .b2 {
          background: var(--primary);
          top: 50%;
          right: 20%;
          border-bottom-right-radius: 2px;
          animation: float 3s infinite ease-in-out 1.5s;
      }

      .typing-dots span {
          display: inline-block;
          width: 6px;
          height: 6px;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 50%;
          margin: 0 2px;
          animation: typing 1.4s infinite;
      }

      .typing-dots span:nth-child(2) {
          animation-delay: 0.2s;
      }

      .typing-dots span:nth-child(3) {
          animation-delay: 0.4s;
      }

      @keyframes typing {

          0%,
          100% {
              transform: translateY(0);
          }

          50% {
              transform: translateY(-4px);
          }
      }

      @keyframes float {

          0%,
          100% {
              transform: translateY(0);
          }

          50% {
              transform: translateY(-10px);
          }
      }

      .pricing-card {
          background: #0f0f13;
          border-radius: 24px;
          padding: 2.5rem;
          border: 1px solid rgba(255, 255, 255, 0.05);
          position: relative;
          display: flex;
          flex-direction: column;
          transition: all 0.3s ease;
          height: 100%;
      }

      .pricing-card.free:hover {
          transform: translateY(-5px);
          border-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }

      .pricing-card.premium {
          background: linear-gradient(135deg, rgba(255, 0, 85, 0.05) 0%, #0f0f13 100%);
          border: 1px solid rgba(255, 0, 85, 0.3);
          box-shadow: 0 10px 40px rgba(255, 0, 85, 0.1);
      }

      .pricing-card.premium:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 50px rgba(255, 0, 85, 0.2);
          border-color: var(--primary);
      }

      .pricing-header {
          text-align: center;
          margin-bottom: 2rem;
      }

      .plan-name {
          font-size: 1.5rem;
          font-weight: 600;
          color: #fff;
          margin-bottom: 1rem;
      }

      .plan-price {
          font-size: 3.5rem;
          font-weight: 700;
          color: #fff;
          display: flex;
          align-items: baseline;
          justify-content: center;
          gap: 4px;
      }

      .premium .plan-price {
          color: var(--primary);
          text-shadow: 0 0 20px rgba(255, 0, 85, 0.3);
      }

      .plan-price .currency {
          font-size: 1.5rem;
          font-weight: 500;
          color: #aaa;
      }

      .plan-price .period {
          font-size: 1rem;
          font-weight: 500;
          color: #666;
      }

      .plan-price-sub {
          font-size: 0.9rem;
          color: #aaa;
          margin-top: -5px;
          margin-bottom: 10px;
      }

      .plan-desc {
          color: #888;
          font-size: 0.95rem;
          line-height: 1.5;
      }

      .plan-features {
          list-style: none;
          margin-bottom: 2.5rem;
          flex: 1;
      }

      .plan-features li {
          padding: 10px 0;
          color: #ccc;
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 0.95rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      }

      .plan-features li:last-child {
          border-bottom: none;
      }

      .plan-features li i {
          color: var(--primary);
          font-size: 1.1rem;
      }

      .free .plan-features li i {
          color: #fff;
      }

      .plan-features li.disabled {
          color: #444;
          text-decoration: line-through;
      }

      .plan-features li.disabled i {
          color: #444;
      }

      .btn-pricing {
          display: block;
          width: 100%;
          padding: 16px;
          border-radius: 12px;
          text-align: center;
          font-weight: 600;
          text-decoration: none;
          transition: all 0.3s ease;
          letter-spacing: 0.5px;
      }

      .btn-pricing.secondary {
          background: rgba(255, 255, 255, 0.05);
          color: #fff;
          border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .btn-pricing.secondary:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: #fff;
      }

      .btn-pricing.primary {
          background: var(--primary);
          color: #000;
          box-shadow: 0 5px 20px rgba(255, 0, 85, 0.3);
      }

      .btn-pricing.primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(255, 0, 85, 0.5);
          background: #fff;
      }

      .popular-badge {
          position: absolute;
          top: -15px;
          left: 50%;
          transform: translateX(-50%);
          background: var(--primary);
          color: #000;
          padding: 6px 16px;
          border-radius: 20px;
          font-size: 0.85rem;
          font-weight: 700;
          box-shadow: 0 5px 15px rgba(255, 0, 85, 0.3);
          z-index: 2;
      }

      .more-features-section {
          text-align: center;
      }

      .arc-glow {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 600px;
          height: 300px;
          background: radial-gradient(ellipse at top, rgba(255, 0, 85, 0.15), transparent 70%);
          pointer-events: none;
          z-index: 1;
      }

      .mf-header {
          margin-bottom: 4rem;
          position: relative;
      }

      .floating-icons-arc {
          height: 100px;
          width: 400px;
          margin: 0 auto 1rem;
          position: relative;
      }

      .f-icon {
          position: absolute;
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ccc;
          font-size: 1rem;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          animation: floatIcon 4s ease-in-out infinite;
      }

      .f-icon.i3 {
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          color: var(--primary);
          font-size: 1.5rem;
          width: 50px;
          height: 50px;
          border-color: rgba(255, 0, 85, 0.3);
          box-shadow: 0 0 20px rgba(255, 0, 85, 0.2);
          z-index: 2;
      }

      .f-icon.i2 {
          top: 20px;
          left: 30%;
          animation-delay: 1s;
      }

      .f-icon.i4 {
          top: 20px;
          right: 30%;
          animation-delay: 1.5s;
      }

      .f-icon.i1 {
          top: 50px;
          left: 10%;
          animation-delay: 2s;
      }

      .f-icon.i5 {
          top: 50px;
          right: 10%;
          animation-delay: 2.5s;
      }

      @keyframes floatIcon {

          0%,
          100% {
              transform: translateY(0) translateX(0);
          }

          50% {
              transform: translateY(-10px) translateX(0);
          }
      }

      @keyframes floatIconCenter {

          0%,
          100% {
              transform: translateY(0) translateX(-50%);
          }

          50% {
              transform: translateY(-10px) translateX(-50%);
          }
      }

      .f-icon.i3 {
          animation-name: floatIconCenter;
      }

      .mf-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
      }

      @media (max-width: 968px) {
          .mf-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      @media (max-width: 600px) {
          .mf-grid {
              grid-template-columns: 1fr;
          }
      }

      .mf-card {
          background: #0f0f13;
          border: 1px solid rgba(255, 255, 255, 0.05);
          border-radius: 24px;
          padding: 2rem;
          text-align: left;
          transition: all 0.3s ease;
      }

      .mf-card:hover {
          transform: translateY(-5px);
          border-color: rgba(255, 255, 255, 0.1);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      }

      .mf-icon-box {
          width: 50px;
          height: 50px;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.2rem;
          color: #fff;
          margin-bottom: 1.5rem;
          transition: all 0.3s ease;
      }

      .mf-card:hover .mf-icon-box {
          background: var(--primary);
          color: #000;
      }

      .mf-card h3 {
          font-size: 1.25rem;
          color: #fff;
          margin-bottom: 0.75rem;
          font-weight: 600;
      }

      .mf-card p {
          color: #aaa;
          font-size: 0.95rem;
          line-height: 1.6;
      }

      .faq-section .title {
          text-align: center;
      }

      .faq-accordion {
          display: flex;
          flex-direction: column;
          gap: 1rem;
      }

      .faq-item {
          background: rgba(16, 26, 35, 0.6);
          border: 1px solid rgba(255, 255, 255, 0.05);
          border-radius: 12px;
          overflow: hidden;
          transition: all 0.3s ease;
      }

      .faq-item:hover {
          border-color: rgba(255, 255, 255, 0.1);
          background: rgba(16, 26, 35, 0.8);
      }

      .faq-question {
          padding: 1.5rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          user-select: none;
      }

      .faq-question h3 {
          font-size: 1.1rem;
          font-weight: 500;
          margin: 0;
          color: #fff;
          transition: color 0.3s ease;
      }

      .faq-question i {
          color: var(--primary);
          transition: transform 0.3s ease;
      }

      .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
      }

      .faq-answer p {
          padding: 0 1.5rem 1.5rem 1.5rem;
          margin: 0;
          color: #ccc;
          line-height: 1.6;
          font-size: 0.95rem;
      }

      .faq-item.active {
          border-color: var(--primary);
          background: rgba(16, 26, 35, 0.95);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      }

      .faq-item.active .faq-question h3 {
          color: var(--primary);
      }

      .faq-item.active .faq-question i {
          transform: rotate(180deg);
      }

      .footer-modern {
          background: #0a0a0c;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          padding: 5rem 0 2rem;
          margin-top: 6rem;
          font-size: 0.95rem;
          position: relative;
          z-index: 10;
      }

      .footer-content {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 2rem;
          display: grid;
          grid-template-columns: 1.5fr 2fr;
          gap: 4rem;
      }

      .footer-brand {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
      }

      .footer-logo {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 1.5rem;
          font-weight: 700;
          color: #fff;
      }

      .footer-brand p {
          color: #888;
          line-height: 1.6;
          max-width: 350px;
      }

      .footer-socials {
          display: flex;
          gap: 1rem;
          margin-top: 0.5rem;
      }

      .footer-socials a {
          width: 42px;
          height: 42px;
          background: rgba(255, 255, 255, 0.03);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          transition: all 0.3s ease;
          border: 1px solid rgba(255, 255, 255, 0.05);
          font-size: 1.1rem;
      }

      .footer-socials a:hover {
          background: var(--primary);
          color: #000;
          transform: translateY(-3px);
          box-shadow: 0 5px 15px rgba(255, 0, 85, 0.3);
          border-color: var(--primary);
      }

      .footer-links {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2rem;
      }

      .link-column h4 {
          color: #fff;
          margin-bottom: 1.5rem;
          font-size: 1.1rem;
          font-weight: 600;
      }

      .link-column a {
          display: block;
          color: #888;
          margin-bottom: 0.8rem;
          text-decoration: none;
          transition: all 0.2s ease;
          font-size: 0.95rem;
      }

      .link-column a:hover {
          color: var(--primary);
          padding-left: 5px;
      }

      .footer-bottom {
          max-width: 1200px;
          margin: 4rem auto 0;
          padding: 2rem 2rem 0;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          text-align: center;
          color: #555;
          font-size: 0.9rem;
      }

      @media (max-width: 900px) {
          .footer-content {
              grid-template-columns: 1fr;
              gap: 3rem;
          }

          .footer-brand {
              align-items: center;
              text-align: center;
          }

          .footer-brand p {
              max-width: 100%;
          }
      }

      @media (max-width: 600px) {
          .footer-links {
              grid-template-columns: repeat(2, 1fr);
              gap: 2rem 1rem;
          }
      }

      @media (max-width: 400px) {
          .footer-links {
              grid-template-columns: 1fr;
              text-align: center;
          }
      }