:root{--primary:#1e40af;--primary-dark:#1e3a8a;--secondary:#7c2d12;--accent:#059669;--success:#16a34a;--warning:#d97706;--error:#dc2626;--white:#ffffff;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;--font-mono:Consolas, 'Liberation Mono', Menlo, monospace;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-full:9999px}html{scroll-behavior:smooth}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);line-height:1.6;color:var(--gray-900);background-color:var(--white)}.hero{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e40af 0%,#7c2d12 100%);overflow:hidden;padding:var(--space-8) var(--space-4)}.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgb(255 255 255 / .06),#fff0);opacity:.25}.hero-content{position:relative;z-index:2;text-align:center;max-width:1200px;width:100%;color:var(--white)}.hero-title{font-size:clamp(2.5rem, 5vw, 4rem);font-weight:800;line-height:1.1;margin-bottom:var(--space-6);color:#fff;text-shadow:0 2px 4px rgb(0 0 0 / .3)}.hero-subtitle{font-size:clamp(1.25rem, 2.5vw, 1.75rem);font-weight:600;margin-bottom:var(--space-8);opacity:.95;color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .3)}.hero-description{max-width:800px;margin:0 auto var(--space-12);font-size:var(--space-5);line-height:1.7;opacity:1;animation:fadeInUp 1s ease-out 0.4s both;color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .3)}.hero-cta{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;animation:fadeInUp 1s ease-out 0.6s both}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);border-radius:var(--radius-full);font-weight:600;font-size:var(--space-4);text-decoration:none;transition:all 0.3s ease;border:none;cursor:pointer}.btn-primary{background:var(--white);color:var(--primary);box-shadow:var(--shadow-lg)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl);color:var(--primary);text-decoration:none}.btn-secondary{background:rgb(255 255 255 / .1);color:var(--white);border:2px solid rgb(255 255 255 / .2);backdrop-filter:blur(10px)}.btn-secondary:hover{background:rgb(255 255 255 / .2);transform:translateY(-2px);color:var(--white);text-decoration:none}.calculator-section{padding:var(--space-24) var(--space-4);background:var(--gray-50)}.container{max-width:1200px;margin:0 auto}.section-header{text-align:center;margin-bottom:var(--space-16)}.section-title{font-size:clamp(2rem, 4vw, 3rem);font-weight:700;color:var(--gray-900);margin-bottom:var(--space-4)}.section-subtitle{font-size:var(--space-5);color:var(--gray-600);max-width:600px;margin:0 auto}.calculator-wrapper{background:var(--white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:var(--space-12);margin:0 auto;max-width:800px;position:relative;overflow:hidden}.calculator-wrapper::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary))}.how-to-use-section{padding:var(--space-16) 0;background:linear-gradient(135deg,var(--gray-50) 0%,var(--white) 100%)}.how-to-content{max-width:1200px;margin:0 auto}.step-card{display:flex;gap:1.5rem;margin-bottom:2.5rem;padding:2rem;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);border-left:4px solid var(--primary);transition:transform 0.2s ease,box-shadow 0.2s ease}.step-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.step-number{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--primary);color:var(--white);border-radius:50%;font-weight:700;font-size:1.2rem;flex-shrink:0}.step-content h3{color:var(--gray-800);margin-bottom:1rem;font-size:1.3rem;font-weight:600}.step-content h4{color:var(--gray-700);margin:1.5rem 0 .75rem;font-size:1.1rem;font-weight:600}.step-content ul{margin:var(--space-3) 0;padding-left:var(--space-6)}.step-content li{margin-bottom:var(--space-2);color:var(--gray-600);line-height:1.6}.tip-box,.example-box{background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);border:1px solid #bae6fd;border-radius:var(--radius);padding:var(--space-4);margin:var(--space-4) 0}.tip-box strong,.example-box strong{color:var(--primary-dark)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}.feature-item{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);padding:1.5rem;border-radius:.75rem;border-left:4px solid #3b82f6;box-shadow:0 2px 4px rgb(0 0 0 / .1);transition:all 0.3s ease;position:relative;overflow:hidden}.feature-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);transform:scaleX(0);transition:transform 0.3s ease}.feature-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .15);border-left-color:#8b5cf6}.feature-item:hover::before{transform:scaleX(1)}.feature-item h4{color:#1e293b;margin-bottom:.75rem;font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.feature-item p{color:#64748b;line-height:1.6;margin:0;font-size:.95rem}.result-explanation,.calculation-example{background:var(--gray-50);padding:var(--space-4);border-radius:var(--radius);margin:var(--space-4) 0}.result-types ul{margin:var(--space-3) 0}.use-cases-section,.troubleshooting-section{margin-top:var(--space-12)}.use-cases-section h3,.troubleshooting-section h3{text-align:center;margin-bottom:var(--space-8);color:var(--gray-800);font-size:1.5rem}.use-cases-grid,.troubleshooting-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}.use-case,.trouble-item{background:var(--white);padding:var(--space-6);border-radius:var(--radius-lg);box-shadow:var(--shadow);border-top:3px solid var(--success)}.trouble-item{border-top-color:var(--warning)}.use-case h4,.trouble-item h4{color:var(--gray-800);margin-bottom:var(--space-3);font-size:1.1rem}.use-case p,.trouble-item p{color:var(--gray-600);line-height:1.6}.features-section{padding:var(--space-24) var(--space-4);background:var(--white)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-8);margin-top:var(--space-16)}.feature-card{background:var(--white);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:all 0.3s ease;text-align:center}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.feature-icon{width:80px;height:80px;margin:0 auto var(--space-6);background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;color:var(--white)}.feature-title{font-size:var(--space-5);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-4)}.feature-description{color:var(--gray-600);line-height:1.6}.calculator-types-section{padding:var(--space-24) var(--space-4);background:var(--gray-50)}.calculator-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--space-8);margin-top:var(--space-16)}.calculator-card{background:var(--white);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:all 0.3s ease;text-decoration:none;color:inherit;display:block}.calculator-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none;color:inherit}.calculator-icon{width:60px;height:60px;background:linear-gradient(135deg,var(--accent),var(--primary));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--white);margin-bottom:var(--space-4);line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif}.calculator-title{font-size:var(--space-5);font-weight:600;color:var(--gray-900);margin-bottom:var(--space-3)}.calculator-description{color:var(--gray-600);line-height:1.6;margin-bottom:var(--space-4)}.calculator-cta{color:var(--primary);font-weight:600;display:inline-flex;align-items:center;gap:var(--space-2)}.faq-section{padding:var(--space-24) var(--space-4);background:var(--white)}.faq-container{max-width:800px;margin:0 auto}.faq-list{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-16)}.faq-item{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;transition:all 0.3s ease}.faq-item.active{box-shadow:var(--shadow-md)}.faq-question{padding:var(--space-6);background:var(--gray-50);cursor:pointer;font-weight:600;color:var(--gray-900);display:flex;justify-content:space-between;align-items:center;transition:all 0.3s ease;border:none;width:100%;text-align:left}.faq-question:hover{background:var(--gray-100)}.faq-question::after{content:'+';font-size:1.5rem;font-weight:400;transition:transform 0.3s ease}.faq-item.active .faq-question::after{transform:rotate(45deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease;padding:0 var(--space-6)}.faq-answer>div{padding:var(--space-6) 0;color:var(--gray-600);line-height:1.6}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.hero{padding:var(--space-12) var(--space-4);min-height:80vh}.hero-cta{flex-direction:column;align-items:center}.calculator-wrapper{padding:var(--space-6);margin:0 var(--space-2)}.features-grid,.calculator-grid{grid-template-columns:1fr;gap:var(--space-6)}.calculator-card{padding:var(--space-6)}}@media (max-width:480px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1.125rem}.hero-description{font-size:var(--space-4)}.calculator-wrapper{padding:var(--space-4)}}.hero,.calculator-wrapper,.feature-card,.calculator-card{will-change:transform;contain:layout style paint}.hero-title,.hero-subtitle,.hero-description{will-change:opacity,transform}.faq-item{will-change:transform}.faq-answer{will-change:max-height}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}.btn:focus,.faq-question:focus{outline:2px solid var(--primary);outline-offset:2px}@media (prefers-color-scheme:dark){:root{--white:#111827;--gray-50:#1f2937;--gray-100:#374151;--gray-200:#4b5563;--gray-300:#6b7280;--gray-400:#9ca3af;--gray-500:#d1d5db;--gray-600:#e5e7eb;--gray-700:#f3f4f6;--gray-800:#f9fafb;--gray-900:#ffffff}}.calculator-category{margin-bottom:4rem;padding:2rem;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border-radius:1rem;border:1px solid #e2e8f0;box-shadow:0 4px 6px -1px rgb(0 0 0 / .1);position:relative;z-index:1}.calculator-category:last-child{margin-bottom:0}.category-title{font-size:1.5rem;font-weight:700;color:#1e293b;text-align:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #3b82f6;position:relative}.category-title::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:60px;height:2px;background:linear-gradient(90deg,#3b82f6,#8b5cf6)}.calculator-category .calculator-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:1.5rem}.calculator-category .calculator-card{background:#fff;border-radius:.75rem;padding:1.5rem;box-shadow:0 4px 6px -1px rgb(0 0 0 / .1);border:1px solid #e2e8f0;transition:all 0.3s ease;text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden}.calculator-category .calculator-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);transform:scaleX(0);transition:transform 0.3s ease}.calculator-category .calculator-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px -3px rgb(0 0 0 / .1);border-color:#3b82f6}.calculator-category .calculator-card:hover::before{transform:scaleX(1)}.calculator-category .calculator-icon{font-size:2.5rem;margin-bottom:1rem;display:block;text-align:center;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif}.calculator-category .calculator-title{font-size:1.25rem;font-weight:600;color:#1e293b;margin-bottom:.75rem;text-align:center}.calculator-category .calculator-description{font-size:.9rem;color:#64748b;line-height:1.5;margin-bottom:1rem;text-align:center}.calculator-category .calculator-cta{display:inline-block;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;font-size:.9rem;text-decoration:none;transition:all 0.3s ease;text-align:center;width:100%;box-sizing:border-box}.calculator-category .calculator-cta:hover{background:linear-gradient(135deg,#2563eb,#7c3aed);transform:translateY(-2px);box-shadow:0 4px 12px rgb(59 130 246 / .4)}@media (max-width:768px){.calculator-category{padding:1.5rem;margin-bottom:2rem}.category-title{font-size:1.25rem;margin-bottom:1.5rem}.calculator-category .calculator-grid{grid-template-columns:1fr;gap:1rem}.calculator-category .calculator-card{padding:1.25rem}.calculator-category .calculator-icon{font-size:2rem}.calculator-category .calculator-title{font-size:1.1rem}}@media (max-width:768px){.container{padding:0 1.25rem}.hero,.calculator-section,.how-to-use-section,.features-section,.calculator-types-section,.faq-section{padding:3rem 0!important}.hero{padding:2.5rem 0!important;text-align:center}.hero-title{font-size:clamp(1.75rem, 8vw, 2.5rem)!important;margin-bottom:1rem}.hero-subtitle{font-size:1.1rem!important;margin-bottom:1.5rem;padding:0 .5rem}.hero-description{font-size:.95rem;margin-bottom:2rem;line-height:1.5}.hero-cta{display:flex;flex-direction:column;gap:.75rem;padding:0 1rem}.hero-cta .btn{width:100%;justify-content:center;padding:1rem!important;font-size:1.05rem}.section-title{font-size:1.75rem!important;padding:0 1rem}.section-subtitle{font-size:1rem!important;padding:0 1.5rem}.calculator-wrapper{padding:1.5rem 1rem!important;margin:0 0.5rem!important;border-radius:1rem!important;box-shadow:0 10px 25px -5px rgb(0 0 0 / .1)!important}.trust-signals,.features-grid,.calculator-grid{grid-template-columns:1fr!important;gap:1.5rem!important}.feature-card{padding:1.5rem 1rem!important}.feature-title{font-size:1.1rem!important}.feature-description{font-size:0.9rem!important}.feature-icon,.calculator-icon{width:50px!important;height:50px!important;font-size:1.25rem!important}.step-card{flex-direction:column!important;gap:0.75rem!important;padding:1.25rem!important;margin-bottom:1.25rem!important}.step-number{width:40px!important;height:40px!important;font-size:1rem!important;flex-shrink:0}.step-content h3{font-size:1.1rem!important}.step-content h4{font-size:1rem!important;margin-top:.75rem}.step-content p,.step-content li{font-size:0.92rem!important;line-height:1.6}.feature-grid{grid-template-columns:1fr!important;gap:0.75rem!important}.feature-item{padding:1rem!important}.feature-item h4{font-size:0.95rem!important}.tip-box,.example-box{font-size:0.9rem!important;padding:.75rem 1rem!important;border-radius:.5rem}.result-explanation,.calculation-example,.result-types{padding:.75rem 1rem!important;font-size:0.9rem!important}.use-cases-grid,.troubleshooting-grid{grid-template-columns:1fr!important;gap:0.75rem!important}.use-case,.trouble-item{padding:1rem 1.25rem!important}.use-case h4,.trouble-item h4{font-size:1rem!important}.how-to-use-section .section-header{margin-bottom:2rem!important}.faq-question{padding:1.25rem 1rem!important;font-size:1rem}.faq-answer>div{padding:1rem!important;font-size:.95rem}.calculator-category{padding:1.5rem 1rem!important;margin-left:0.5rem!important;margin-right:0.5rem!important}.calculator-category .calculator-grid{display:grid!important;grid-template-columns:1fr!important}}@media (max-width:400px){.hero-title{font-size:1.4rem!important;line-height:1.3!important}.btn{padding:.875rem 0.5rem!important;font-size:0.95rem!important}.step-number{width:36px!important;height:36px!important;font-size:0.95rem!important}.section-title{font-size:1.4rem!important}}@media (min-width:769px) and (max-width:1024px){.hero{padding:3.5rem 2rem!important}.hero-title{font-size:clamp(2rem, 4vw, 3rem)!important}.hero-cta{flex-wrap:wrap;justify-content:center;gap:.75rem}.hero-cta .btn{flex:1 1 200px;text-align:center;justify-content:center}.features-grid{grid-template-columns:repeat(2,1fr)!important}.calculator-grid{grid-template-columns:repeat(2,1fr)!important}.step-card{gap:1.25rem;padding:1.5rem}.feature-grid{grid-template-columns:repeat(2,1fr)!important}.use-cases-grid,.troubleshooting-grid{grid-template-columns:repeat(2,1fr)!important}.calculator-wrapper{padding:2rem!important}.section-title{font-size:2rem!important}}html,body{overflow-x:hidden;max-width:100%}*,*::before,*::after{box-sizing:border-box}