:root { --blue:#155dfc; --blue-2:#0695ff; --ink:#0b1736; --text:#172541; --muted:#60708b; --soft:#f4f8ff; --soft-2:#eef5ff; --line:#dbe7fb; --cyan:#67e8f9; --green:#19b982; --red:#ef476f; --gradient:linear-gradient(135deg,#155dfc 0%,#0695ff 55%,#67e8f9 100%); --shadow:0 24px 80px rgba(21,93,252,.14); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:radial-gradient(circle at 0% 0%,rgba(21,93,252,.12),transparent 28%),radial-gradient(circle at 100% 5%,rgba(103,232,249,.14),transparent 30%),linear-gradient(180deg,#fff 0%,#f7fbff 42%,#fff 100%); overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background-image:linear-gradient(rgba(21,93,252,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(21,93,252,.04) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }.site-noise { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.28; background-image:radial-gradient(rgba(11,23,54,.11) .65px,transparent .65px); background-size:18px 18px; mask-image:linear-gradient(to bottom,transparent,#000 15%,transparent 90%); }
a { color:inherit; text-decoration:none; } h1,h2,h3,p { margin-top:0; } h1 { max-width:900px; margin-bottom:22px; color:var(--ink); font-size:clamp(2.7rem,6vw,5.4rem); line-height:.92; letter-spacing:-.075em; } h2 { margin-bottom:12px; color:var(--ink); font-size:clamp(1.7rem,3vw,2.7rem); line-height:1; letter-spacing:-.06em; } h3 { margin-bottom:8px; color:var(--ink); font-size:1.08rem; line-height:1.08; letter-spacing:-.04em; } p { color:var(--muted); line-height:1.65; }.micro { margin-bottom:14px; color:var(--blue); font-size:.76rem; font-weight:950; letter-spacing:.19em; text-transform:uppercase; }.lead { max-width:760px; font-size:clamp(1.02rem,1.55vw,1.2rem); }.blue-accent { position:relative; color:var(--blue); }.blue-accent::after { content:""; position:absolute; z-index:-1; left:0; bottom:.06em; width:100%; height:.22em; border-radius:999px; background:rgba(21,93,252,.11); }
.topbar { position:fixed; z-index:30; top:18px; left:50%; display:flex; align-items:center; justify-content:space-between; width:min(1180px,calc(100% - 28px)); height:64px; padding:0 10px 0 16px; border:1px solid rgba(219,231,251,.96); border-radius:999px; background:rgba(255,255,255,.82); box-shadow:0 18px 60px rgba(11,23,54,.08); backdrop-filter:blur(18px); transform:translateX(-50%); }.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:950; letter-spacing:-.05em; }.brand img { flex:0 0 auto; filter:drop-shadow(0 14px 24px rgba(21,93,252,.18)); }.header-actions { display:flex; align-items:center; gap:16px; }.header-label { color:#40516d; font-size:.85rem; font-weight:780; }.text-button { padding:9px 13px; border:0; border-radius:999px; color:#40516d; background:transparent; font:inherit; font-size:.87rem; font-weight:820; cursor:pointer; }.text-button:hover { color:var(--blue); background:var(--soft-2); }
.calculator-shell { width:min(1180px,calc(100% - 34px)); margin:0 auto; padding:150px 0 76px; }.calculator-intro { margin-bottom:42px; }.calculator-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:28px; align-items:start; }.calculator-main { min-width:0; }.progress-wrap { margin-bottom:18px; padding:15px 18px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.76); box-shadow:0 10px 30px rgba(11,23,54,.035); }.progress-meta { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--blue); font-size:.76rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }.progress-meta span:last-child { overflow:hidden; color:#60708b; text-align:right; text-overflow:ellipsis; white-space:nowrap; }.progress-track { height:9px; overflow:hidden; border-radius:999px; background:#e8f1ff; }.progress-track i { display:block; width:10%; height:100%; border-radius:inherit; background:var(--gradient); transition:width .35s ease; }
.step-card { padding:clamp(24px,4vw,42px); overflow:hidden; border:1px solid var(--line); border-radius:34px; background:radial-gradient(circle at 100% 0%,rgba(21,93,252,.11),transparent 32%),rgba(255,255,255,.9); box-shadow:var(--shadow); animation:stepIn .35s ease both; }.step-heading { max-width:690px; margin-bottom:28px; }.step-heading p { margin-bottom:0; }.option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.option-grid.single { grid-template-columns:1fr; }.selection-card { position:relative; display:block; min-height:126px; padding:18px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#fff,#f8fbff); cursor:pointer; transition:transform .2s ease,border .2s ease,box-shadow .2s ease,background .2s ease; }.selection-card:hover { border-color:rgba(21,93,252,.38); box-shadow:0 14px 34px rgba(21,93,252,.08); transform:translateY(-2px); }.selection-card:has(input:checked) { border-color:rgba(21,93,252,.62); background:linear-gradient(135deg,rgba(21,93,252,.11),rgba(103,232,249,.15)); box-shadow:0 14px 34px rgba(21,93,252,.1); }.selection-card input { position:absolute; opacity:0; }.selection-card strong { display:block; padding-right:30px; color:var(--ink); font-size:1rem; letter-spacing:-.025em; }.selection-card p { margin:7px 0 0; font-size:.88rem; line-height:1.45; }.selection-card .price { position:absolute; top:17px; right:17px; color:var(--blue); font-size:.78rem; font-weight:900; }.selection-card input:focus-visible + strong { outline:3px solid rgba(21,93,252,.27); outline-offset:5px; border-radius:4px; }.helper { margin:20px 0 0; padding:14px 16px; border:1px solid rgba(21,93,252,.22); border-radius:16px; color:#40516d; background:var(--soft-2); font-size:.9rem; line-height:1.5; }.warning { border-color:rgba(239,71,111,.27); color:#81223b; background:#fff3f6; }.quantity-control { display:flex; align-items:center; gap:12px; margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:18px; background:#f8fbff; }.quantity-copy { flex:1; }.quantity-copy strong { display:block; color:var(--ink); }.quantity-copy span { color:var(--muted); font-size:.85rem; }.stepper { display:flex; align-items:center; gap:7px; }.stepper button { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:#fff; font:inherit; font-size:1.2rem; cursor:pointer; }.stepper button:hover { border-color:var(--blue); color:var(--blue); }.stepper output { min-width:26px; text-align:center; color:var(--ink); font-weight:900; }
.sub-question { margin-top:28px; padding-top:25px; border-top:1px solid var(--line); }.sub-question h3 { margin-bottom:5px; }.sub-question > p { margin-bottom:15px; font-size:.91rem; }.compact-grid .selection-card { min-height:88px; padding:14px; }.compact-grid .selection-card p { display:none; }.market-grid { display:flex; flex-wrap:wrap; gap:9px; }.market-grid .selection-card { min-height:auto; padding:10px 13px; border-radius:999px; }.market-grid .selection-card strong { padding:0; font-size:.86rem; }.market-grid .price { display:none; }.step-nav { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }.btn { min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:999px; font:inherit; font-size:.96rem; font-weight:890; letter-spacing:-.025em; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }.btn:hover { transform:translateY(-2px); }.btn.primary { color:#fff; background:var(--gradient); box-shadow:0 18px 38px rgba(21,93,252,.24); }.btn.secondary { color:var(--ink); border-color:var(--line); background:#fff; }.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.estimate-card { position:sticky; top:104px; padding:25px; border:1px solid var(--line); border-radius:30px; background:radial-gradient(circle at 100% 0%,rgba(21,93,252,.15),transparent 35%),rgba(255,255,255,.92); box-shadow:var(--shadow); }.estimate-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.estimate-head .micro { margin-bottom:18px; }.estimate-status { padding:6px 8px; border-radius:999px; color:var(--blue); background:var(--soft-2); font-size:.66rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }.estimate-label { margin-bottom:3px; font-size:.88rem; }.estimate-total { margin:0; color:var(--ink); font-size:clamp(2rem,3vw,2.7rem); font-weight:950; line-height:1; letter-spacing:-.07em; }.estimate-range { margin:9px 0 0; color:var(--blue); font-size:.9rem; font-weight:850; }.estimate-breakdown { display:grid; gap:9px; margin:22px 0 17px; padding-top:17px; border-top:1px solid var(--line); }.estimate-breakdown div { display:flex; justify-content:space-between; gap:12px; font-size:.84rem; }.estimate-breakdown dt { color:var(--muted); }.estimate-breakdown dd { margin:0; color:var(--ink); font-weight:850; text-align:right; }.monthly-row { padding-top:10px; border-top:1px solid var(--line); }.estimate-note { margin:0 0 13px; color:#40516d; font-size:.86rem; line-height:1.48; }.disclaimer { margin:0; color:#7988a2; font-size:.76rem; line-height:1.48; }.mobile-total { display:none; }
.summary-group { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }.summary-group:first-of-type { margin-top:0; padding-top:0; border-top:0; }.summary-group-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }.summary-group h3 { margin:0; }.edit-link { border:0; color:var(--blue); background:none; font:inherit; font-size:.83rem; font-weight:900; cursor:pointer; }.summary-lines { display:grid; gap:8px; }.summary-line { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:#f8fbff; }.summary-line input { width:16px; height:16px; accent-color:var(--blue); }.summary-line input:disabled { opacity:.65; }.summary-line strong { color:var(--ink); font-size:.88rem; }.summary-line span { color:var(--blue); font-size:.81rem; font-weight:900; }.summary-core { grid-template-columns:1fr auto; }.summary-core em { color:#60708b; font-size:.76rem; font-style:normal; font-weight:750; }.summary-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }.copy-note { margin:12px 0 0; font-size:.85rem; }.success-icon { display:grid; width:58px; height:58px; place-items:center; margin-bottom:17px; border-radius:18px; color:#0d6b51; background:#eefcf7; font-size:1.6rem; }.summary-reference { margin-top:16px; padding:14px; border:1px dashed rgba(21,93,252,.32); border-radius:16px; color:#40516d; background:var(--soft); font-size:.88rem; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:18px; width:min(1180px,calc(100% - 34px)); margin:0 auto; padding:34px 0 50px; border-top:1px solid var(--line); }.footer p { margin:0; font-size:.9rem; }.footer-link { color:var(--blue); font-size:.88rem; font-weight:900; }.footer-link:hover { text-decoration:underline; }.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }.reveal.visible { opacity:1; transform:translateY(0); }@keyframes stepIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:980px) { .calculator-layout { grid-template-columns:1fr; }.estimate-card { position:static; display:none; }.mobile-total { position:sticky; z-index:20; bottom:0; display:flex; align-items:center; justify-content:space-between; margin:0; padding:13px 20px; border-top:1px solid var(--line); color:#40516d; background:rgba(255,255,255,.94); box-shadow:0 -10px 30px rgba(11,23,54,.08); backdrop-filter:blur(18px); font-size:.85rem; }.mobile-total strong { color:var(--ink); font-size:1.1rem; letter-spacing:-.04em; } body { padding-bottom:55px; } }
@media (max-width:740px) { .topbar { border-radius:24px; }.header-label { display:none; }.calculator-shell { width:100%; padding:125px 20px 48px; }.calculator-intro { margin-bottom:28px; }.option-grid { grid-template-columns:1fr; }.step-card { padding:22px; border-radius:26px; }.progress-meta { font-size:.68rem; }.step-nav .btn { flex:1; padding-inline:12px; }.footer { flex-direction:column; align-items:flex-start; width:calc(100% - 40px); }.quantity-control { align-items:flex-start; flex-direction:column; }.stepper { align-self:flex-end; }.summary-line { grid-template-columns:auto 1fr; }.summary-line span { grid-column:2; }.summary-core { grid-template-columns:1fr auto; }.header-actions { gap:0; }.text-button { font-size:.78rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }.reveal { opacity:1; transform:none; } }