:root { --bg-color: #0d0d0d; --text-gold: #d4af37; --text-light: #f4f4f4; --text-dim: #888888; --font-serif: 'Playfair Display', 'Songti SC', serif; --font-sans: 'Helvetica Neue', Helvetica, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-light); font-family: var(--font-serif); margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }
.fade-in { animation: fadeIn 2s ease-in forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.header { text-align: center; margin-top: 10vh; margin-bottom: 3vh; }
.cert-title { color: var(--text-gold); font-size: 1.2rem; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 10px; }
.cert-number { font-family: var(--font-sans); color: var(--text-dim); font-size: 0.8rem; letter-spacing: 2px; }
.model-container { width: 100vw; height: 40vh; position: relative; flex-shrink: 0; }
model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.ar-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.6); color: var(--text-gold); padding: 8px 16px; border: 1px solid var(--text-gold); border-radius: 20px; font-family: var(--font-sans); font-size: 0.8rem; cursor: pointer; }
.info-section { width: 85%; max-width: 500px; text-align: center; margin-top: 20px; border-top: 1px solid #333; padding-top: 30px; }
.baby-name { font-size: 1.8rem; margin-bottom: 5px; font-weight: normal; }
.baby-details { font-family: var(--font-sans); color: var(--text-dim); font-size: 0.9rem; line-height: 1.8; margin-bottom: 30px; }
.play-btn { background: transparent; border: 1px solid var(--text-gold); color: var(--text-gold); padding: 10px 30px; font-family: var(--font-serif); font-size: 0.9rem; border-radius: 50px; cursor: pointer; transition: all 0.3s; margin-bottom: 20px; }
.play-btn:active { background: var(--text-gold); color: var(--bg-color); }
.milestones { margin-top: 40px; width: 100%; text-align: left; }
.milestone-item { border-left: 1px solid #333; padding-left: 20px; margin-bottom: 30px; position: relative; }
.milestone-item::before { content: ''; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-gold); }
.ms-year { font-size: 1.2rem; color: var(--text-gold); margin-bottom: 5px; }
.ms-content { font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-dim); }
.locked-vault { text-align: center; margin-top: 40px; padding: 20px; border: 1px dashed #333; border-radius: 10px; }
.footer { margin-top: 20vh; margin-bottom: 5vh; font-family: var(--font-sans); font-size: 0.7rem; color: #444; text-align: center; line-height: 1.6; }
.repurchase-cta { font-family: var(--font-serif); font-size: 0.9rem; color: #666; margin-bottom: 20px; cursor: pointer; border-bottom: 1px solid #333; display: inline-block; padding-bottom: 3px; }
.repurchase-cta:hover { color: var(--text-gold); border-color: var(--text-gold); }
.lang-switcher { position: absolute; top: 20px; right: 20px; font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-dim); letter-spacing: 1px; z-index: 1000; }
.lang-switcher span { cursor: pointer; transition: color 0.3s; }
.lang-switcher span:hover { color: var(--text-gold); }
#pin-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg-color); z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.pin-box { text-align: center; }
.pin-box input { background: transparent; border: none; border-bottom: 2px solid var(--text-gold); color: var(--text-light); text-align: center; font-size: 1.5rem; width: 100px; padding: 5px; outline: none; margin-top: 20px; letter-spacing: 5px; }
#main-content { display: none; width: 100%; flex-direction: column; align-items: center; }

/* Responsive adjustments */
@media (min-width: 768px) {
  .info-section { max-width: 600px; }
  .cert-title { font-size: 1.5rem; }
  .baby-name { font-size: 2.2rem; }
  .model-container { height: 50vh; }
  .claim-box { max-width: 500px; padding: 40px; }
}

@media (min-width: 1024px) {
  .body { font-size: 18px; }
  .info-section { max-width: 800px; }
}