.tabs{display:flex;border-bottom:1px solid var(--light-gray);margin-bottom:30px}.tab{border-bottom:3px solid transparent;padding:12px 20px;font-weight:500;transition:all 0.3s;cursor:pointer}.tab.active{border-bottom-color:var(--primary);color:var(--primary)}.tab-content{display:none}.tab-content.active{display:block}.input-group{margin-bottom:20px}.input-group label{display:block;margin-bottom:8px;padding:10px;font-weight:500}.date-inputs{display:grid;gap:15px;grid-template-columns:repeat(3,1fr)}input,select{border:1px solid var(--light-gray);border-radius:6px;padding:12px 15px;width:100%;font-size:16px}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,97,238,0.15);outline:none}button{border:none;border-radius:6px;padding:14px 20px;width:100%;font-size:16px;font-weight:600;background-color:var(--primary);color:white;transition:all 0.3s;cursor:pointer}button:hover{background-color:var(--primary-dark);box-shadow:0 4px 10px rgba(0,0,0,0.1);transform:translateY(-2px)}.results{display:none;border-left:4px solid var(--primary);border-radius:8px;margin-top:40px;padding:30px;background-color:var(--light)}.results h3{margin-bottom:15px;color:var(--primary)}.age-grid{display:grid;gap:15px;grid-template-columns:repeat(4,1fr);text-align:center}.age-box{border-radius:8px;padding:20px;background-color:white;box-shadow:0 2px 5px rgba(0,0,0,0.05)}.age-value{margin-bottom:5px;font-size:32px;font-weight:700;color:var(--primary)}.age-label{font-size:14px;color:var(--gray)}footer{padding:60px 0 20px;background-color:var(--dark);color:white}.footer-content{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:40px}.footer-column h3{position:relative;margin-bottom:20px;padding-bottom:10px}.footer-column h3::after{bottom:0;left:0;position:absolute;height:2px;width:40px;background-color:var(--primary);content:""}.footer-column ul{list-style:none}.footer-column ul li{margin-bottom:10px}.footer-column ul li a{text-decoration:none;color:#adb5bd;transition:color 0.3s}.footer-column ul li a:hover{color:white}.copyright{border-top:1px solid #495057;padding-top:20px;font-size:14px;text-align:center;color:#adb5bd}@media (max-width:768px){.header-content{flex-direction:column}nav{margin-top:20px}nav ul li{margin-left:15px;margin-right:15px}.hero h1{font-size:32px}.hero p{font-size:18px}.calculator{padding:30px}.date-inputs{grid-template-columns:1fr}.age-grid{grid-template-columns:1fr 1fr}}