@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ========== BASE ========== */
*{font-family:'Inter',sans-serif;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#6366f1 #1f2937}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1f2937}::-webkit-scrollbar-thumb{background:linear-gradient(#6366f1,#a855f7);border-radius:4px}
.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:linear-gradient(#6366f1,#8b5cf6);border-radius:3px}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* ========== TEXT GRADIENTS ========== */
.gradient-text{background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-pink{background:linear-gradient(135deg,#ec4899,#a855f7,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gold-text{background:linear-gradient(135deg,#f59e0b,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ========== GLASS & CARDS ========== */
.glass{background:rgba(17,17,27,.95);backdrop-filter:blur(20px)}
.card-hover{transition:all .3s ease}.card-hover:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(139,92,246,.15)}

/* ========== GRADIENTS ========== */
.progress-gradient{background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899)}
.gold-gradient{background:linear-gradient(90deg,#f59e0b,#fbbf24,#f59e0b)}
.rare-gradient{background:linear-gradient(135deg,#10b981,#059669)}
.common-gradient{background:linear-gradient(135deg,#6b7280,#4b5563)}

/* ========== RARITY BADGES ========== */
.rarity-mythic{background:linear-gradient(135deg,#ff0844,#ffb199,#ff0844);box-shadow:0 0 40px rgba(255,8,68,.6),0 0 80px rgba(255,8,68,.3);animation:mythicPulse 1.5s infinite}
.rarity-legendary{background:linear-gradient(135deg,#f59e0b,#fbbf24);box-shadow:0 0 30px rgba(245,158,11,.5),0 0 60px rgba(245,158,11,.3);animation:legendaryGlow 2s infinite}
.rarity-epic{background:linear-gradient(135deg,#7c3aed,#c084fc);box-shadow:0 0 25px rgba(124,58,237,.5),0 0 50px rgba(124,58,237,.3)}
.rarity-rare{background:linear-gradient(135deg,#8b5cf6,#a855f7);box-shadow:0 0 20px rgba(139,92,246,.4)}
.rarity-common{background:linear-gradient(135deg,#3b82f6,#60a5fa);box-shadow:0 0 15px rgba(59,130,246,.3)}

/* ========== TROPHIES ========== */
.trophy-gold{color:#fbbf24;text-shadow:0 0 20px rgba(251,191,36,.5)}
.trophy-silver{color:#c0c0c0;text-shadow:0 0 15px rgba(192,192,192,.5)}
.trophy-bronze{color:#cd7f32;text-shadow:0 0 15px rgba(205,127,50,.5)}

/* ========== ANIMATIONS ========== */
@keyframes mythicPulse{0%,100%{box-shadow:0 0 40px rgba(255,8,68,.5),0 0 80px rgba(255,8,68,.2)}50%{box-shadow:0 0 60px rgba(255,8,68,.7),0 0 120px rgba(255,8,68,.4)}}
@keyframes legendaryGlow{0%,100%{box-shadow:0 0 30px rgba(245,158,11,.3)}50%{box-shadow:0 0 60px rgba(245,158,11,.6)}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(139,92,246,.4)}50%{box-shadow:0 0 40px rgba(139,92,246,.7)}}.glow{animation:glow 2s infinite}
@keyframes goldGlow{0%,100%{box-shadow:0 0 30px rgba(245,158,11,.3)}50%{box-shadow:0 0 60px rgba(245,158,11,.6)}}.gold-glow{animation:goldGlow 2s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.float{animation:float 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}.pulse{animation:pulse 2s infinite}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease-out forwards}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}.slide-in{animation:slideIn .4s ease-out forwards}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}.scale-in{animation:scaleIn .5s ease-out forwards}
@keyframes countUp{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.count-up{animation:countUp .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.shimmer{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);background-size:200% 100%;animation:shimmer 2s infinite}
@keyframes confetti{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}.bounce{animation:bounce 1s ease-in-out infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.spin-slow{animation:spin 8s linear infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.1)}}.heartbeat{animation:heartbeat 1.5s ease-in-out infinite}
@keyframes dna{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}.dna-spin{animation:dna 3s linear infinite}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes revealScore{0%{opacity:0;transform:scale(0.3) rotate(-10deg)}50%{transform:scale(1.1) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.reveal-score{animation:revealScore 0.8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.animated-gradient{background-size:200% 200%;animation:gradientShift 4s ease infinite}

/* Staggered reveal for results */
.stagger-1{animation:slideUp .5s ease-out .1s both}
.stagger-2{animation:slideUp .5s ease-out .3s both}
.stagger-3{animation:slideUp .5s ease-out .5s both}
.stagger-4{animation:slideUp .5s ease-out .7s both}
.stagger-5{animation:slideUp .5s ease-out .9s both}

/* Result score number glow */
.score-glow-gold{text-shadow:0 0 20px rgba(251,191,36,.6),0 0 40px rgba(251,191,36,.3),0 0 80px rgba(251,191,36,.1)}
.score-glow-pink{text-shadow:0 0 20px rgba(236,72,153,.5),0 0 40px rgba(236,72,153,.2)}
.score-glow-purple{text-shadow:0 0 15px rgba(168,85,247,.4),0 0 30px rgba(168,85,247,.2)}
.score-glow-blue{text-shadow:0 0 15px rgba(96,165,250,.4)}

/* ========== FORM ELEMENTS ========== */
input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:4px;background:#374151;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#a855f7,#ec4899);cursor:pointer;box-shadow:0 0 10px rgba(168,85,247,.5);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
input[type=checkbox]{cursor:pointer}
.input-field{width:100%;padding:12px 16px;border-radius:12px;background:#1f2937;border:2px solid #374151;color:white;outline:none;transition:all 0.3s}
.input-field:focus{border-color:#a855f7;box-shadow:0 0 20px rgba(168,85,247,.2)}

/* ========== BUTTONS & TABS ========== */
.tab-btn{transition:all .2s}.tab-active{background:linear-gradient(135deg,#a855f7,#ec4899)!important;color:white;box-shadow:0 0 20px rgba(168,85,247,.4)}
.btn-shine{position:relative;overflow:hidden}.btn-shine::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-shine:hover::after{left:100%}
.section-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);transition:all .3s}.section-btn:hover{transform:scale(1.02);box-shadow:0 5px 20px rgba(99,102,241,.4)}
.full-btn{background:linear-gradient(135deg,#ec4899,#a855f7,#6366f1);transition:all .3s}.full-btn:hover{transform:scale(1.02);box-shadow:0 5px 30px rgba(236,72,153,.5)}

/* Calculate button special */
.calc-btn-ready{position:relative;overflow:hidden}
.calc-btn-ready::before{content:'';position:absolute;inset:-2px;background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899,#a855f7,#6366f1);background-size:200% auto;animation:gradientShift 3s linear infinite;border-radius:18px;z-index:-1}

/* ========== BABY GENETICS SPECIFIC ========== */
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:#374151}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#a855f7);border:none;box-shadow:0 2px 6px rgba(0,0,0,.3)}

/* ========== SEO CONTENT STYLING ========== */
.seo-content{color:#9ca3af;font-size:0.95rem;line-height:1.8}
.seo-content h2{color:#e5e7eb;font-size:1.35rem;font-weight:700;margin:1.5rem 0 0.75rem;padding-top:1rem;border-top:1px solid rgba(107,114,128,.2)}
.seo-content h2:first-child{border-top:none;padding-top:0;margin-top:0}
.seo-content p{margin-bottom:0.85rem}
.seo-content strong{color:#c4b5fd}
.seo-content a{color:#a78bfa;text-decoration:underline;text-underline-offset:2px}
.seo-content a:hover{color:#c4b5fd}
.seo-content ul{list-style:disc;padding-left:1.25rem;margin-bottom:0.85rem}
.seo-content ul li{margin-bottom:0.35rem}

/* ========== TRUST PAGES ========== */
.trust-page{max-width:800px;margin:0 auto;padding:2rem 1rem}
.trust-page h1{font-size:2rem;font-weight:800;margin-bottom:0.5rem}
.trust-page h2{font-size:1.35rem;font-weight:700;color:#e5e7eb;margin:2rem 0 0.75rem;padding-top:1.25rem;border-top:1px solid rgba(107,114,128,.2)}
.trust-page p,.trust-page li{color:#9ca3af;line-height:1.8;margin-bottom:0.75rem}
.trust-page ul{list-style:disc;padding-left:1.5rem}
.trust-page a{color:#a78bfa}

/* ========== FOOTER ========== */
.site-footer{border-top:1px solid rgba(55,65,81,.5);margin-top:3rem;padding:2rem 0}
.site-footer a{color:#9ca3af;text-decoration:none;transition:color .2s}
.site-footer a:hover{color:#c4b5fd}

/* ========== SOCIAL PROOF TICKER ========== */
.ticker-container{overflow:hidden;position:relative}
.ticker-item{display:inline-flex;animation:tickerSlide 20s linear infinite}
@keyframes tickerSlide{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* ========== MOBILE OPTIMIZATIONS ========== */
@media(max-width:640px){
  .input-field{padding:10px 14px;font-size:16px}
  input[type=range]::-webkit-slider-thumb{width:28px;height:28px}
}

/* ========== ACCESSIBILITY ========== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}

@media print{.no-print{display:none}}


/* Readability boost */
.input-field{color:#f9fafb}
.input-field::placeholder{color:rgba(209,213,219,.7)}
nav a{color:#d1d5db}
.chip-link{background:rgba(31,41,55,.75)!important;color:#e5e7eb!important;border:1px solid rgba(75,85,99,.9)!important}
.chip-link:hover{background:rgba(55,65,81,.9)!important}
/* Make colored pills readable if background is close */
.bg-green-500\/20,.bg-pink-500\/20,.bg-purple-500\/20,.bg-indigo-500\/20{background:rgba(31,41,55,.75)!important}
.text-green-200,.text-pink-200,.text-purple-200,.text-indigo-200{color:#e5e7eb!important}
.border-green-500\/30,.border-pink-500\/30,.border-purple-500\/30,.border-indigo-500\/30{border-color:rgba(75,85,99,.9)!important}

.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}