html, body { margin: 0; padding: 0; }
body { background: #2C2C2A; }
@keyframes breatheLight { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.20; } }
@keyframes breatheDark  { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.12; } }
@keyframes dividerGlow  { 0%, 100% { width: 39px; opacity: 0.4; } 50% { width: 70px; opacity: 1; } }
.bigCrystalLight { animation: breatheLight 4.5s ease-in-out infinite; }
.bigCrystalDark  { animation: breatheDark 4.5s ease-in-out infinite; }
.cardDivider     { animation: dividerGlow 4.5s ease-in-out infinite; }
.cardDivider { border: none; border-top: 1px solid #C9A66B; }
.heroPhrase { font-size: 24px; white-space: nowrap; }
@media (max-width: 600px) {
  .heroPhrase { white-space: normal; font-size: 22px; margin-top: 48px !important; }

  .siteHeader {
    padding: 20px 24px 8px !important;
  }
  .headerBrand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  .headerSymbol {
    width: 28px !important;
    height: auto !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  .headerText {
    text-align: left;
  }
  .headerWordmark {
    font-size: 14px !important;
    margin-top: 0 !important;
  }
  .headerSubtitle {
    font-size: 8px !important;
    margin-top: 2px !important;
  }
  .headerDivider {
    display: none !important;
  }
  .heroSubtext {
    margin-top: 8px !important;
  }

  .cardsGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .card {
    padding: 16px !important;
    min-height: 104px !important;
  }
  .cardContent {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 14px;
  }
  .cardSymbol {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0;
  }
  .cardBody {
    flex: 1;
    min-width: 0;
  }
  .cardTitleRow {
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }
  .cardDesc {
    margin-top: 4px !important;
  }
  .cardDividerLine {
    display: none !important;
  }
  .cardCrystal {
    top: 50% !important;
    right: -30px !important;
    transform: translateY(-50%) !important;
    width: 90px !important;
    height: 90px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bigCrystalLight, .bigCrystalDark, .cardDivider { animation: none; }
}