*, *::before, *::after{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#f5f7fb; color:#1f2933} .hidden{display:none} .container{ max-width:1200px; margin:0 auto; padding:0 16px} .header{ background:linear-gradient(135deg,#059669 0%,#047857 100%); backdrop-filter:blur(10px); position:sticky; top:0; z-index:1000; box-shadow:0 4px 20px rgba(5,150,105,0.15)} .max-w-7xl{max-width:1120px;margin-left:auto;margin-right:auto} .mx-auto{margin-left:auto;margin-right:auto} .px-6{padding-left:1.5rem;padding-right:1.5rem} .py-4{padding-top:1rem;padding-bottom:1rem} .flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .space-x-3>*:not(:last-child){margin-right:.75rem} .space-x-4>*:not(:last-child){margin-right:1rem} .space-x-8>*:not(:last-child){margin-right:2rem} .text-white{color:#fff} .text-xl{font-size:1.25rem} .font-bold{font-weight:700} .font-medium{font-weight:500} .inline-block{display:inline-block} .text-gray-200{color:#e5e7eb} .text-gray-400{color:#cbd5e0} .leading-relaxed{line-height:1.625} .hover\:text-gray-200:hover{color:#e5e7eb} .transition-all{transition:all .3s ease} .hover\:scale-110:hover{transform:scale(1.1)} @media (min-width:768px){ .md\:flex{display:flex !important} .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .md\:hidden{display:none !important}} .nav-links{list-style:none} .main-nav a{text-decoration:none} .dropdown{position:relative} .dropdown>button{ background:transparent; border:0; cursor:pointer} .dropdown-content{ display:none; position:absolute; top:calc(100%+10px); right:0; background:#fff; min-width:220px; box-shadow:0 8px 30px rgba(0,0,0,.12); border-radius:12px; overflow:hidden; animation:fadeInDown .22s ease; z-index:50} .dropdown-content::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px} .dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content{ display:block} .dropdown-content a{ color:#4a5568; padding:12px 20px; text-decoration:none; display:block; transition:all .25s ease; font-size:14px} .dropdown-content a:hover{ background:linear-gradient(135deg,#059669 0%,#047857 100%); color:#fff; padding-left:28px} @keyframes fadeInDown{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)}} .mobile-menu-btn{ background:none; border:none; color:white; font-size:24px; cursor:pointer} .mobile-nav{ background:#065f46; max-height:0; overflow:hidden; opacity:0; transition:max-height .28s ease,opacity .28s ease} .mobile-nav.open{max-height:480px;opacity:1} .mobile-nav-inner{ max-width:1120px; margin:0 auto; padding:8px 24px 16px} .mobile-nav a{ display:block; color:#e5e7eb; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:15px; text-decoration:none} .mobile-nav a:last-child{border-bottom:none} .mobile-nav a:hover{color:#fff} .page-main{padding:24px 0 48px} .main-grid{ display:grid; grid-template-columns:minmax(0,3fr)minmax(260px,1fr); gap:24px; align-items:flex-start} .hero{margin-bottom:16px} .eyebrow{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#6b7280; margin:0 0 4px} .hero h1{ font-size:26px; margin:0 0 8px; color:#111827} .hero-subtitle{ margin:0 0 8px; color:#4b5563; font-size:15px; max-width:720px} .period-summary{ margin:0 0 16px; font-size:13px; color:#6b7280} .card, .calculator-card{ background:#fff; border-radius:18px; padding:18px 18px 20px; box-shadow:0 14px 35px rgba(15,23,42,.08)} .calculator-card{border-top:4px solid #4f46e5} .config-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px} .calculator-title{ font-size:20px; margin:0 0 4px; color:#111827} .calculator-tagline{ margin:0; font-size:14px; color:#4b5563} .pill{ display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase} .pill-free{background:#ecfdf5;color:#166534} .config-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px; margin-top:8px} .form-group{display:flex;flex-direction:column;gap:4px} .form-group label{ font-size:13px; font-weight:600; color:#374151} .help-text{font-size:11px;color:#6b7280;margin:6px 0 0} input[type="text"], input[type="number"], select, textarea{ border-radius:10px; border:1px solid #d1d5db; padding:9px 10px; font-size:14px; font-family:inherit; transition:border-color .18s ease,box-shadow .18s ease; background:#fff} input:focus, select:focus, textarea:focus{ outline:none; border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.15)} .btn{ border-radius:999px; font-size:13px; font-weight:600; border:none; cursor:pointer; padding:8px 14px; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:transform .14s ease,box-shadow .14s ease,background .14s ease} .btn-primary{ background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; box-shadow:0 6px 18px rgba(79,70,229,.35)} .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(79,70,229,.45)} .btn-tertiary{ background:#f9fafb; color:#4b5563; border:1px solid #e5e7eb} .btn-tertiary:hover{background:#f3f4f6} .btn-large{padding:10px 22px;font-size:14px} .form-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:10px; margin-top:14px} .results-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px} .result-card{ border-radius:16px; padding:14px 14px 16px; color:#fff; position:relative; overflow:hidden} .result-card::before{ content:""; position:absolute; inset:0; opacity:.14; background:radial-gradient(circle at top left,#fff 0,transparent 60%)} .result-label{font-size:13px;margin:0 0 4px;opacity:.95;position:relative} .result-value{font-size:22px;font-weight:900;margin:0 0 4px;position:relative} .result-meta{font-size:11px;margin:0;position:relative} .result-card--roi{background:linear-gradient(135deg,#2563eb,#7c3aed)} .result-card--annual{background:linear-gradient(135deg,#0ea5e9,#6366f1)} .result-card--gain{background:linear-gradient(135deg,#059669,#16a34a)} .notice{ margin-top:10px; font-size:12px; color:#6b7280} .sidebar{display:flex;flex-direction:column;gap:16px} .sidebar-card{ background:#fff; border-radius:18px; padding:14px 14px 16px; box-shadow:0 10px 28px rgba(15,23,42,.08)} .sidebar-card h2{font-size:16px;margin:0 0 8px} .sidebar-card ul{list-style:none;padding:0;margin:0} .sidebar-card li{margin-bottom:6px} .sidebar-card a{ text-decoration:none; font-size:13px; color:#4b5563} .sidebar-card a:hover{text-decoration:underline} .content-section{margin-top:24px} .seo-article h2{font-size:20px;margin:16px 0 6px} .seo-article p{ font-size:14px; line-height:1.7; color:#4b5563; margin:0 0 10px} .seo-article ul, .seo-article ol{ font-size:14px; color:#4b5563; padding-left:20px; margin:0 0 10px} .seo-article li{margin-bottom:6px} .faq-section{margin-top:26px} .faq-section h2{font-size:18px;margin:0 0 10px} .faq-item{border-top:1px solid #e5e7eb;padding:10px 0} .faq-item h3{ margin:4px 0; font-size:15px; color:#111827; cursor:pointer; display:flex; justify-content:space-between; align-items:center} .faq-item p{ margin:4px 0 2px; font-size:14px; color:#4b5563; display:none} .faq-item.open p{display:block} .footer{ background:linear-gradient(135deg,#2d3748 0%,#1a202c 100%); color:#fff; padding:60px 0 20px; margin-top:40px} .grid{display:grid} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .gap-12{gap:3rem} .footer-column h3{ font-size:18px; font-weight:700; margin-bottom:20px; color:#a0aec0; text-transform:uppercase; letter-spacing:1px} .footer-column ul{list-style:none;padding:0;margin:0} .footer-column ul li{margin-bottom:12px} .footer-column ul li a{ color:#cbd5e0; text-decoration:none; transition:all .3s ease; display:inline-block} .footer-column ul li a:hover{ color:#667eea; transform:translateX(5px)} .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:40px; padding-top:30px; text-align:center; color:#a0aec0} @media (max-width:900px){ .main-grid{grid-template-columns:minmax(0,1fr)} .sidebar{order:-1} .config-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:768px){ .config-grid{grid-template-columns:minmax(0,1fr)} .results-grid{grid-template-columns:minmax(0,1fr)} .hero h1{font-size:22px} .hero-subtitle{font-size:14px}} @media (max-width:480px){ .card,.calculator-card{padding:14px 12px 16px} .sidebar{gap:12px}}