:root { --primary: #003366; --secondary: #1e90ff; --accent: #ffcc00; --bg: #f9f9f9; --text: #333; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", Arial, sans-serif; font-size: 1.125rem; line-height: 1.6; background: var(--bg); color: var(--text); }

.hd-1 { text-align: center; max-width: 540px; margin: 0 auto 30px; }
.hd-2 { color: var(--secondary); font-size: 1.8rem; margin-bottom: 1rem; margin-left: auto; margin-right: auto; font-weight: 700; }
.hd-3 { color: #003366; font-size: 1.8rem; margin: 0 auto; text-align: center; font-weight: 700; }

header { background: var(--primary); color: #fff; text-align: center; padding: 2rem 1rem; }
header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
header p { font-size: 1.25rem; max-width: 1200px; margin: 0 auto; }
section { padding: 3rem 1rem; max-width: 1000px; margin: auto; }
.deal { width: 96%; background: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; padding: 2rem; margin-top: 2rem; }
.deal-img { max-width: 480px; width: 100%; margin: 1rem 0; border-radius: 8px; }
.founders, .media, .charity { margin-top: 1rem; }
.about p, .founders p { margin-bottom: 1rem; }
.media-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 15px; transition: transform 0.3s ease; transform: scale(1);  }

.media-logos a:hover { transform: scale(1.05); } 

.media-logos img { width: 36px; height: auto; object-fit: contain; }
.charity { text-align: center; background: var(--primary); color: #fff; border-radius: 10px; padding: 2rem 1rem; margin-bottom: 3rem; width: 96%; }
.charity img { max-width: 600px; width: 100%; border-radius: 8px; margin-top: 1rem; }
footer { text-align: center; font-size: 1rem; padding: 2rem 1rem; background: #262626; color: #fff; }
.footer-links { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px;  }
.footer-links a { color: #8ec5ff; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

.footer-label img { max-width: 850px; width: 100%; height: auto; }
.footer-wrap { max-width: 850px; width: 100%; margin: 0 auto; }
.footer-p-1, .footer-p-2 { margin-top: 16px; }

.head-logo { max-width: 490px; width: 100%; }
.blk-1 { background: #e6f2ff; padding: 1px 0; }
.flex-1 { display: flex; gap: 20px; text-align: center; }
.flex-1 > div { width: 50%; }
.auth { font-size: 1.25rem; font-weight: bold; display: block; }
.auth-desc-1 { max-width: 400px; margin: 6px auto 0; }
.auth-desc-2 { max-width: 400px; margin: 6px auto 0; }
.founder-img { max-width: 200px; width: 100%; }

.options-wrap { font-size: clamp(1.6rem, 1.5vw, 1.8rem); display: grid; justify-content: space-between; gap: 30px; width: 100%; margin-left: auto; margin-right: auto; max-width: 960px; grid-template-columns: repeat(2, 1fr); padding-right: 0.6%; }
.option { background: #fff; border: 1px solid #f5f5f5; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); cursor: pointer; overflow: hidden; text-decoration: none; color: var(--text); }
.option-title { display: block; width: 100%; text-align: center; padding: 15px 10px; font-weight: 700; }
.option-body { padding: 24px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.option-desc-1 { margin-top: 8px; margin-bottom: 8px; }
.option-img { width: 100%; max-width: 260px; margin-left: auto; margin-right: auto; margin-bottom: 16px; }
.option-img img { width: 100%; height: auto; }
.option-price { display: flex; align-items: center; justify-content: center; font-weight: bold; line-height: 1; margin-top: 2.5rem; margin-bottom: 2.5rem; gap: 1.25rem; }
.option-price-2 { display: flex; align-items: center; justify-content: center; gap: 0.25rem; line-height: 1; }

.option-1 { transform: scale(0.97); }
.option-1 .option-title { background: #b5e3ff; color: #003366; }
.option-2 { transform: scale(1.03); }
.option-2 .option-body { border: 3px solid #007ed5; border-top: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.option-2 .option-title { background: #007ed5; color: #ffffff; }

.price-hd { font-weight: 900; color: #003366; line-height: 1; font-size: 2.6rem; text-align: center; }
.price-hd-2 { font-size: 1.4rem; margin-top: 10px; display: block; text-align: center; }

.cta-btn { color: #fff; font-weight: bold; border-radius: 9999px; text-align: center; text-decoration: none; width: 100%; transition: transform 0.3s, color 0.3s; position: relative; z-index: 2; max-width: 400px; background: linear-gradient(to right, #ff9400, #fbad27); border: 4px solid #fff; box-shadow: inset 1px 1px 15px rgba(243, 143, 0, 0.5), 0 10px 12px -3px rgba(0, 0, 0, 0.1); font-size: 2rem; padding-top: 15px; padding-bottom: 20px; margin: 10px 0 15px; line-height: 1; padding-left: 16px; padding-right: 16px; }
.cta-btn:hover, .cta-btn:focus { transform: translateY(-10px); }

.cta-pulse:hover:before, .cta-pulse:focus:before { opacity: 1; }
.cta-pulse:hover:after, .cta-pulse:focus:after { animation: none; display: none; }
.cta-pulse:before { content: ''; border-radius: 80px; min-width: calc(100% + 8px); min-height: calc(100% + 8px); border: 4px solid #ff9400; box-shadow: 0 0 60px rgba(251, 203, 176, 0.21); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.2s linear; }
.cta-pulse:after { content: ''; width: 30px; height: 30px; border-radius: 100%; border: 5px solid #ff9400; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: ring 1.5s infinite; opacity: 0; pointer-events: none; }

.cc-icons { width: 100%; max-width: 225px; margin-left: auto; margin-right: auto; }


.red { color: #ff0000; }

.text-1 { max-width: 800px; display: block; margin: 0 auto; }

.mb-10 { margin-bottom: 10px; }
.mt-0 { margin-top: 0px; }
.mb-0 { margin-bottom: 0px; }
.pb-0 { padding-bottom: 0px; }

@media (max-width: 840px) { 
  .options-wrap { display: flex; flex-direction: column-reverse; }
  .option-1, .option-2 { transform: scale(1); }
}

@media (max-width: 768px) { 
  section { padding: 2rem 1rem; } 
  header h1 { font-size: 1.8rem; } 
  .deal h2 { font-size: 1.5rem; } 
  .flex-1 { flex-direction: column; width: 100%; align-items: center; } 
  .flex-1 > div { width: 100%; } 

  .option-img { max-width: 220px; }
  .cta-btn { font-size: 28px; }
  .price-hd-2 { font-size: 20px; }
  .price-hd { font-size: 32px; }
  .option-title { font-size: 24px; padding: 12px 10px; }
}