:root{--clr-bg: #f7f7f8;--clr-surface: #ffffff;--clr-surface-2: #eef0f2;--clr-border: #dde1e6;--clr-border-focus: #3a7bfd;--clr-text: #1a1a2e;--clr-text-dim: #6b7280;--clr-accent: #3a7bfd;--clr-accent-hover: #2563eb;--clr-accent-soft: #eef3ff;--clr-hero-bg: #ffffff;--clr-success: #16a34a;--clr-bench-bad: #ef4444;--clr-bench-bad-bg: #ef4444;--clr-bench-regular: #f59e0b;--clr-bench-regular-bg: #f59e0b;--clr-bench-excellent: #16a34a;--clr-bench-excellent-bg: #16a34a;--font: "Inter", system-ui, -apple-system, sans-serif;--radius: 12px;--radius-sm: 8px;--shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, .08);--shadow-hero: 0 4px 20px rgba(58, 123, 253, .12);--transition: .2s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font);background:var(--clr-bg);color:var(--clr-text);line-height:1.6;min-height:100vh}.header{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1.5rem 2rem;background:var(--clr-surface);border-bottom:1px solid var(--clr-border)}.header__brand{margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.header__logo-img{height:48px;width:auto}.header__logo{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;color:var(--clr-text);display:inline-block}.header__logo--accent{color:var(--clr-accent)}.header__tagline{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:.35rem;letter-spacing:-.3px;max-width:600px;line-height:1.3;color:var(--clr-text)}.header__subtitle{text-align:center;font-size:.95rem;color:var(--clr-text-dim);max-width:520px;line-height:1.5}.calculator{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem;display:flex;flex-direction:column;gap:2.5rem}.section-title{font-size:.8rem;font-weight:700;color:var(--clr-text-dim);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1.25rem}.inputs{display:flex;flex-direction:column;gap:1rem}.input-group{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);padding:1.25rem 1.5rem;transition:border-color var(--transition),box-shadow var(--transition)}.input-group:focus-within{border-color:var(--clr-border-focus);box-shadow:0 0 0 3px var(--clr-accent-soft)}.input-group__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.input-group__header label{font-weight:600;font-size:.95rem;color:var(--clr-text)}.input-group__value-wrap{display:flex;align-items:center;gap:0;background:var(--clr-surface-2);border-radius:var(--radius-sm);padding:.35rem .65rem}.input-group__prefix,.input-group__suffix{font-size:.85rem;font-weight:700;color:var(--clr-accent)}.input-group__number{background:transparent;border:none;color:var(--clr-text);font-family:var(--font);font-size:1.15rem;font-weight:700;width:80px;text-align:right;outline:none;-moz-appearance:textfield}.input-group__number::-webkit-inner-spin-button,.input-group__number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-group__hint{display:block;margin-top:.75rem;font-size:.75rem;color:var(--clr-text-dim);font-weight:500}.input-group__slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--clr-surface-2);border-radius:2px;outline:none;cursor:pointer}.input-group__slider::-webkit-slider-runnable-track{height:4px;border-radius:2px}.input-group__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--clr-accent);cursor:grab;margin-top:-7px;border-radius:50%;border:3px solid var(--clr-surface);box-shadow:0 1px 4px #00000026;transition:transform var(--transition)}.input-group__slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.input-group__slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--clr-accent);cursor:grab;border:3px solid var(--clr-surface);box-shadow:0 1px 4px #00000026}.input-group__slider::-moz-range-track{height:4px;background:var(--clr-surface-2);border-radius:2px}.results{display:flex;flex-direction:column;gap:1rem}.result-card--hero{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);padding:2rem 1.5rem;text-align:left;box-shadow:var(--shadow-hero)}.result-card--hero .result-card__label{font-size:.85rem;text-transform:uppercase;letter-spacing:2px;color:var(--clr-text-dim);font-weight:700;display:block;margin-bottom:.35rem}.result-card--hero .result-card__value{font-size:2rem;font-weight:800;color:var(--clr-accent);display:block;line-height:1.1;letter-spacing:-1px}.results__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.result-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);padding:1.25rem;display:flex;flex-direction:column;gap:.35rem;transition:box-shadow var(--transition)}.result-card:not(.result-card--hero):hover{box-shadow:var(--shadow-card-hover)}.result-card__label{font-size:.7rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--clr-text-dim);font-weight:600}.result-card__value{font-size:1.5rem;font-weight:800;color:var(--clr-text);line-height:1;letter-spacing:-.3px}.result-card__hint{font-size:.7rem;color:var(--clr-accent);font-weight:500}.benchmark{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}.benchmark__label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--clr-text-dim);margin-right:.25rem}.benchmark__tag{font-size:.7rem;font-weight:600;padding:.3rem .7rem;border-radius:100px;border:1px solid var(--clr-border);background:var(--clr-surface-2);color:var(--clr-text-dim);opacity:.6;transition:all var(--transition);cursor:default;white-space:nowrap}.benchmark__tag:before{content:attr(data-range) " ";font-weight:500}.benchmark__tag--bad.active{opacity:1;background:var(--clr-bench-bad-bg);border-color:var(--clr-bench-bad);color:#fff;box-shadow:0 2px 8px #ef444459}.benchmark__tag--regular.active{opacity:1;background:var(--clr-bench-regular-bg);border-color:var(--clr-bench-regular);color:#fff;box-shadow:0 2px 8px #f59e0b59}.benchmark__tag--excellent.active{opacity:1;background:var(--clr-bench-excellent-bg);border-color:var(--clr-bench-excellent);color:#fff;box-shadow:0 2px 8px #16a34a59}.fade-in{opacity:0;transform:translateY(12px);transition:opacity .4s ease-out,transform .4s ease-out}.fade-in.visible{opacity:1;transform:translateY(0)}.cta-section{margin-top:.75rem}.cta-button{display:block;width:100%;text-align:center;background:var(--clr-accent);color:#fff;font-family:var(--font);font-size:1rem;font-weight:700;letter-spacing:-.2px;padding:1.15rem 2rem;text-decoration:none;cursor:pointer;border:none;border-radius:var(--radius);transition:background var(--transition),box-shadow var(--transition)}.cta-button:after{content:" →";display:inline}.cta-button:hover{background:var(--clr-accent-hover);box-shadow:0 4px 16px #3a7bfd40}.footer{text-align:center;padding:2rem 1.5rem;font-size:.8rem;font-weight:500;color:var(--clr-text-dim);border-top:1px solid var(--clr-border);background:var(--clr-surface)}@media(min-width:600px){.header{padding:3rem 2rem 2.5rem}.header__tagline{font-size:1.85rem}}@media(min-width:768px){.header{padding:3rem 3rem 2.5rem}.header__tagline{font-size:2rem}.header__subtitle{font-size:1.05rem}.result-card--hero .result-card__value{font-size:2.5rem}}@media(min-width:1024px){.calculator{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,1fr);gap:3rem;align-items:start;padding-top:3rem}.results{position:sticky;top:2rem;margin-top:0}}@media(min-width:1280px){.calculator{grid-template-columns:minmax(0,1.4fr) minmax(400px,1fr)}}@media(prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none;transition:none}}