/* ========================================= PAYMENT INTRODUCTION ========================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; background: #0b0416; color: #ffffff; } /* ========================================= MAIN SECTION ========================================= */ .payments-intro { position: relative; padding: 110px 20px; background: radial-gradient( circle at 80% 10%, rgba(212, 175, 55, 0.08), transparent 35% ), #0b0416; overflow: hidden; } .payments-container { max-width: 1200px; margin: 0 auto; } /* ========================================= HEADER ========================================= */ .payments-header { max-width: 780px; margin-bottom: 60px; } .section-label { display: inline-block; margin-bottom: 20px; padding: 8px 15px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #d4af37; border: 1px solid rgba(212, 175, 55, 0.35); background: rgba(212, 175, 55, 0.07); border-radius: 50px; } .payments-header h1 { margin-bottom: 24px; font-size: clamp(42px, 6vw, 68px); line-height: 1.05; letter-spacing: -2.5px; font-weight: 750; color: #ffffff; } .payments-header h1 span { color: #d4af37; } .intro-text { max-width: 720px; font-size: 18px; line-height: 1.8; color: #b7afc4; } /* ========================================= TOPIC GRID ========================================= */ .payment-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } /* ========================================= TOPIC CARD ========================================= */
 .topic-card { position: relative; display: flex; gap: 24px; padding: 32px; text-decoration: none; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; backdrop-filter: blur(12px); transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .topic-card::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 2px; background: #d4af37; opacity: 0; border-radius: 10px; transition: opacity 0.3s ease; } .topic-card:hover { transform: translateY(-6px); background: rgba(212, 175, 55, 0.055); border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .topic-card:hover::before { opacity: 1; } /* ========================================= ICON ========================================= */ .topic-icon { flex-shrink: 0; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; color: #d4af37; font-size: 27px; background: rgba(212, 175, 55, 0.09); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 15px; transition: background 0.3s ease, transform 0.3s ease; } .topic-card:hover .topic-icon { background: rgba(212, 175, 55, 0.15); transform: scale(1.05); } /* ========================================= CONTENT ========================================= */ .topic-content { flex: 1; } .topic-number { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #8f879d; } .topic-content h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.3; font-weight: 700; color: #ffffff; } .topic-content p { margin-bottom: 22px; font-size: 15px; line-height: 1.7; color: #a9a1b5; } /* ========================================= READ MORE ========================================= */ .read-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #d4af37; transition: gap 0.25s ease; } .read-more span { font-size: 18px; line-height: 1; } .topic-card:hover .read-more { gap: 13px; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 850px) { .payments-intro { padding: 80px 20px; } .payment-topics { grid-template-columns: 1fr; } } @media (max-width: 550px) { .payments-intro { padding: 65px 16px; } .payments-header { margin-bottom: 42px; } .payments-header h1 { font-size: 42px; letter-spacing: -1.5px; } .intro-text { font-size: 16px; line-height: 1.7; } .topic-card { flex-direction: column; padding: 25px; gap: 18px; } .topic-icon { width: 52px; height: 52px; } .topic-content h3 { font-size: 20px; } }