Astrology of the Beasts & Realms

<div class="zq-page">
  <div class="zq-header">
    <p class="zq-eyebrow">Zarlequan Universe</p>
    <h1>Astrology of the Beasts &amp; Realms</h1>
    <p class="zq-tagline">Discover your Magical Beast and Realm Influence</p>
  </div>
  <div class="zq-intro">
    <p>Zarlequan Astrology is not prediction. It is recognition — a mirror held up to the deeper patterns already moving through you.</p>
    <p class="zq-pull">“The beasts do not define you. They remember you.”</p>
  </div>
  <div class="zq-card">
    <p class="zq-card-title">Discover Your Alignment</p>
    <div class="zq-field">
      <label for="zq-month">Month</label>
      <select id="zq-month">
        <option value="">Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
    <div class="zq-field">
      <label for="zq-day">Day</label>
      <select id="zq-day">
        <option value="">Day</option>
      </select>
    </div>
    <div class="zq-field">
      <label for="zq-year">Year</label>
      <select id="zq-year">
        <option value="">Year</option>
      </select>
    </div>
    <button id="zq-calc-btn" class="zq-btn" type="button">Reveal My Zarlequan Signature</button>
    <div id="zq-error" class="zq-error"></div>
  </div>
  <div id="zq-results" class="zq-results">
    <div class="zq-result-header">
      <p class="zq-eyebrow">Your Zarlequan Signature</p>
      <h2 id="zq-headline"></h2>
      <p id="zq-subline" class="zq-subline"></p>
    </div>
    <div class="zq-result-card">
      <h3>Magical Beast</h3>
      <p id="zq-beast-name" class="zq-highlight"></p>
      <p id="zq-beast-energy"></p>
      <p id="zq-beast-gift"></p>
    </div>
    <div class="zq-result-card">
      <h3>Realm Influence</h3>
      <p id="zq-realm-name" class="zq-highlight"></p>
      <p id="zq-realm-desc"></p>
    </div>
    <div class="zq-result-card">
      <h3>Your Reading</h3>
      <p id="zq-reading"></p>
    </div>
  </div>
</div>