.cta-row { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; opacity: 0; animation: fadeup 1s ease 0.9s forwards; } .cta { text-decoration: none; position: relative; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border: none; border-radius: 24px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; overflow: hidden; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; z-index: 0; } .cta:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(70,161,113,0.35); } .cta .arrow { transition: transform 0.25s ease; } .cta:hover .arrow { transform: translateX(4px); } .cta-ghost { display: inline-flex; align-items: center; text-decoration: none; height: 48px; padding: 0 24px; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease; } .cta-ghost:hover { border-color: var(--accent); background: var(--accent-soft); } .trust { margin-top: 24px; display: flex; align-items: center; gap: 18px; font-size: 12px; color: var(--text-dim); opacity: 0; animation: fadeup 1s ease 1.1s forwards; } .trust b { color: var(--text); font-size: 15px; display: block; } .trust .sep { width: 1px; height: 26px; background: var(--border); } /* ================= SCOOPED CORNER CARD ================= */ .notch { position: absolute; right: 0; bottom: 0; z-index: 5; background: var(--page-bg); border-top-left-radius: var(--radius); padding: 14px 0 0 14px; } .notch::before, .notch::after { content: ""; position: absolute; width: 52px; height: 52px; background: transparent; border-bottom-right-radius: var(--radius); box-shadow: 14px 14px 0 var(--page-bg); pointer-events: none; } .notch::before { left: -52px; bottom: 0; } .notch::after { right: 0; top: -52px; } .card { width: 250px; background: #ffffff; border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgba(60,50,30,0.05), 0 10px 26px rgba(60,50,30,0.08); opacity: 0; animation: cardin 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.2s forwards; transform: translateY(24px); transition: transform 0.3s ease, box-shadow 0.3s ease; } @keyframes cardin { to { opacity: 1; transform: translateY(0); } } .card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(60,50,30,0.06), 0 16px 36px rgba(60,50,30,0.12); } .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .card-title { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-dark); } .live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 2s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } .ann + .ann { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .ann-date { font-size: 10.5px; font-weight: 700; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; } .ann-text { font-size: 13px; font-weight: 600; line-height: 1.45; margin-top: 2px; } .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--accent-dark); text-decoration: none; } .card-link:hover { text-decoration: underline; } /* ================= Responsive ================= */