html{ scroll-behavior:smooth; height:100%} *, *::before, *::after{ box-sizing:border-box} body{ font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin:0; padding:0; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); min-height:100%; height:100%} .header{ background:linear-gradient(135deg,#1f2933 0%,#111827 100%); backdrop-filter:blur(10px); position:sticky; top:0; z-index:1000; box-shadow:0 4px 20px rgba(0,0,0,0.35)} .header-inner{ position:relative} .brand{ text-decoration:none} .site-logo{ height:40px; width:auto; display:block} .brand-text{ color:#ffffff; font-weight:800; font-size:1.15rem} .nav-links{ position:absolute; left:50%; transform:translateX(-50%)} .nav-link{ color:#ffffff; text-decoration:none; font-weight:500; transition:all 0.25s ease; display:inline-block} .nav-link:hover{ color:#d1fae5; transform:translateY(-1px)} .dropdown{ position:relative} .dropdown-toggle{ background:none; border:none; color:#ffffff; font-weight:500; cursor:pointer; padding:0; transition:color 0.25s ease} .dropdown-toggle:hover{ color:#d1fae5} .dropdown-content{ display:none; position:absolute; top:120%; right:0; background:#ffffff; min-width:220px; box-shadow:0 10px 30px rgba(15,23,42,0.35); border-radius:0.75rem; overflow:hidden; z-index:1100} .dropdown.open .dropdown-content{ display:block} .dropdown-content a{ color:#4b5563; padding:12px 20px; text-decoration:none; display:block; font-size:0.9rem; transition:all 0.2s ease} .dropdown-content a:hover{ background:linear-gradient(135deg,#10b981 0%,#059669 100%); color:#ffffff; padding-left:26px} .mobile-menu-btn{ display:none; background:none; border:2px solid #10b981; border-radius:999px; padding:4px 10px; color:#ecfdf5; font-size:1.3rem; cursor:pointer; transition:background 0.25s ease,transform 0.15s ease,border-color 0.25s ease} .mobile-menu-btn:hover{ background:#10b981; border-color:#6ee7b7; transform:translateY(-1px)} .mobile-menu{ display:none; flex-direction:column; background:#065f46; padding:12px 18px 16px; gap:4px; border-bottom:3px solid #10b981} .mobile-menu.open{ display:flex} .mobile-menu a{ color:#ecfdf5; text-decoration:none; padding:8px 6px; border-radius:6px; font-size:0.95rem; font-weight:500; transition:background 0.2s ease,transform 0.15s ease} .mobile-menu a:hover{ background:rgba(16,185,129,0.2); transform:translateX(2px)} .page-header{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#ffffff; padding:80px 20px 90px; text-align:center; position:relative; overflow:hidden} .page-header::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at top left,rgba(255,255,255,0.2),transparent 55%); opacity:0.7} .page-header h1{ position:relative; z-index:1; font-size:2.9rem; font-weight:900; margin-bottom:12px; text-shadow:0 8px 25px rgba(15,23,42,0.6)} .page-header p{ position:relative; z-index:1; font-size:1.15rem; opacity:0.96} @keyframes float{ 0%,100%{transform:translateY(0px)rotate(0deg)} 50%{transform:translateY(-12px)rotate(3deg)}} .float-animation{ animation:float 3s ease-in-out infinite} .calculator-container{ max-width:1400px; margin:-60px auto 60px; padding:0 20px; position:relative; z-index:10} .calculator-card{ background:#ffffff; border-radius:24px; padding:40px; box-shadow:0 22px 60px rgba(15,23,42,0.25); margin-bottom:24px} .card-title{ font-size:1.7rem; font-weight:800; color:#4c1d95; margin-bottom:28px; display:flex; align-items:center; gap:10px} .calc-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px} .calc-tab{ padding:10px 20px; background:#f3f4ff; border:2px solid #e5e7eb; border-radius:999px; font-weight:600; cursor:pointer; transition:all 0.22s ease; color:#374151; font-size:0.9rem} .calc-tab:hover{ border-color:#667eea; transform:translateY(-1px)} .calc-tab.active{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#ffffff; border-color:#4f46e5} .input-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px} .input-group{ background:linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%); padding:18px; border-radius:14px; border:2px solid #667eea; transition:all 0.22s ease} .input-group:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(99,102,241,0.25)} .input-label{ font-weight:700; color:#4c1d95; margin-bottom:6px; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em} .input-field, .select-field{ width:100%; padding:10px 12px; border-radius:10px; border:2px solid #667eea; font-size:0.95rem; font-weight:500; color:#111827; transition:all 0.2s ease; background:#ffffff} .input-field:focus, .select-field:focus{ outline:none; border-color:#7c3aed; box-shadow:0 0 0 3px rgba(129,140,248,0.35); transform:scale(1.01)} .calculate-btn{ width:100%; padding:16px; background:linear-gradient(135deg,#10b981 0%,#059669 100%); color:#ffffff; border:none; border-radius:14px; font-size:1.1rem; font-weight:700; cursor:pointer; transition:all 0.22s ease; margin-top:12px} .calculate-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(16,185,129,0.45)} .result-display{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); padding:30px; border-radius:20px; color:#ffffff; margin-bottom:24px} .result-value{ font-size:3.2rem; font-weight:900; margin-bottom:4px; text-align:center} .result-label{ font-size:1.25rem; font-weight:600; text-align:center; opacity:0.97; margin-bottom:18px} .stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:18px} .stat-card{ background:rgba(255,255,255,0.16); backdrop-filter:blur(8px); padding:18px; border-radius:14px; text-align:center; border:2px solid rgba(255,255,255,0.22); transition:all 0.22s ease} .stat-card:hover{ background:rgba(255,255,255,0.25); transform:translateY(-2px)} .stat-title{ font-size:0.8rem; font-weight:600; margin-bottom:6px; opacity:0.9; text-transform:uppercase; letter-spacing:0.03em} .stat-value{ font-size:1.6rem; font-weight:900} .stat-value-small{ font-size:1rem; line-height:1.4} .adsense-container{ background:linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%); border-radius:16px; padding:22px; margin:24px 0; min-height:140px; display:flex; align-items:center; justify-content:center; border:2px dashed #a78bfa} .adsense-placeholder{ text-align:center; color:#4c1d95; font-size:0.9rem} .info-box{ background:linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%); padding:18px; border-radius:12px; border-left:4px solid #7c3aed; margin-top:18px} .info-title{ font-weight:700; color:#4c1d95; margin-bottom:6px; font-size:0.95rem} .info-text{ color:#5b21b6; font-size:0.9rem; line-height:1.6} .download-buttons{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap} .download-btn{ flex:1; min-width:180px; padding:12px 20px; background:linear-gradient(135deg,#6366f1 0%,#7c3aed 100%); color:#ffffff; border:none; border-radius:12px; font-weight:600; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; gap:8px; font-size:0.95rem} .download-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(99,102,241,0.4)} .blog-section{ max-width:900px; margin:70px auto; padding:0 20px} .blog-content{ background:#ffffff; border-radius:24px; padding:40px; box-shadow:0 14px 36px rgba(15,23,42,0.18); line-height:1.75} .blog-content h2{ font-size:2.1rem; font-weight:900; margin-bottom:20px; background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent} .blog-content h3{ font-size:1.3rem; font-weight:700; color:#111827; margin-top:32px; margin-bottom:12px} .blog-content h4{ font-size:1.05rem; font-weight:600; color:#1f2933; margin-top:16px; margin-bottom:6px} .blog-content p{ color:#4b5563; font-size:0.98rem; margin-bottom:14px} .blog-content ul{ margin-left:1.3rem; margin-bottom:14px; color:#4b5563} .blog-content li{ margin-bottom:6px} .blog-content a{ color:#2563eb; text-decoration:none; font-weight:500} .blog-content a:hover{ text-decoration:underline} .highlight-box{ background:#f3f4ff; padding:16px; border-radius:14px; border-left:4px solid #6366f1; margin:20px 0; font-size:0.94rem} .faq-item{ margin-top:16px; padding-top:10px; border-top:1px solid #e5e7eb} .faq-item h4{ font-size:1rem; font-weight:700; color:#111827; margin-bottom:6px} .faq-item p{ font-size:0.95rem; color:#4b5563} .footer{ background:linear-gradient(135deg,#1f2937 0%,#030712 100%); color:#ffffff; padding:50px 0 18px; margin-top:80px} .footer-column h3{ font-size:0.95rem; font-weight:700; margin-bottom:12px; color:#9ca3af; text-transform:uppercase; letter-spacing:0.06em} .footer-column ul{ list-style:none; padding:0; margin:0} .footer-column ul li{ margin-bottom:8px} .footer-column ul li a{ color:#e5e7eb; text-decoration:none; font-size:0.9rem; transition:all 0.2s ease; display:inline-block} .footer-column ul li a:hover{ color:#22c55e; transform:translateX(4px)} .footer-bottom{ border-top:1px solid rgba(148,163,184,0.35); margin-top:30px; padding-top:18px; text-align:center; color:#9ca3af; font-size:0.9rem} @media (max-width:1024px){ .nav-links{display:none !important} .mobile-menu-btn{display:block}} @media (max-width:768px){ .nav-links{display:none} .mobile-menu-btn{display:block} .page-header{ padding:60px 18px 70px} .page-header h1{ font-size:2.1rem} .page-header p{ font-size:1rem} .calculator-card{ padding:24px 18px} .input-grid{ grid-template-columns:1fr} .stats-grid{ grid-template-columns:1fr} .result-value{ font-size:2.5rem} .download-buttons{ flex-direction:column} .blog-content{ padding:26px 18px} .blog-content h2{ font-size:1.7rem} .blog-content h3{ font-size:1.15rem}}