:root {
  --ink: #061a18;
  --white: #f8fffb;
  --mint: #65ffd0;
  --gold: #ffcf70;
  --coral: #ff756f;
  --pointer-x: 70vw;
  --pointer-y: 30vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 0;
  color: var(--white);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #041b19;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.calculator-page {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
}

.calculator-bg,
.calculator-wash,
.light-trace,
.particle-field {
  position: fixed;
  inset: 0;
}

.calculator-bg {
  z-index: -5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
  animation: backgroundDrift 18s ease-in-out infinite alternate;
}

.calculator-wash {
  z-index: -4;
  background:
    linear-gradient(105deg, rgba(2, 24, 22, .96) 0%, rgba(3, 44, 40, .88) 48%, rgba(20, 13, 24, .72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.46));
}

.light-trace {
  z-index: -2;
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: 460px;
  height: 460px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 45%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 100px color-mix(in srgb, var(--mode-accent) 22%, transparent), inset 0 0 70px rgba(255,255,255,.05);
  transform: translate(-50%, -50%);
  transition: left 1.2s cubic-bezier(.16,1,.3,1), top 1.2s cubic-bezier(.16,1,.3,1), border-color .5s ease;
  pointer-events: none;
}

.particle-field { z-index: -1; pointer-events: none; }
.particle-field i {
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mode-accent);
  box-shadow: 0 0 12px var(--mode-accent), 0 0 30px rgba(255,255,255,.42);
  opacity: .58;
  animation: particleFloat calc(5s + var(--particle) * 110ms) ease-in-out infinite alternate;
}

.calculator-nav {
  position: fixed;
  inset: 16px clamp(18px, 4vw, 64px) auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(2,31,29,.84);
  box-shadow: 0 18px 54px rgba(0,0,0,.28);
  backdrop-filter: blur(22px);
}

.calculator-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.calculator-brand-mark { width: 52px; height: 52px; flex: 0 0 52px; }
.calculator-brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px rgba(101,255,208,.35)); }
.calculator-brand strong, .calculator-brand small { display: block; }
.calculator-brand strong { font-size: 1rem; white-space: nowrap; }
.calculator-brand small { margin-top: 3px; color: rgba(248,255,251,.62); font-size: .72rem; }

.nav-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 0 16px;
  color: rgba(248,255,251,.82);
  font-size: .78rem;
  font-weight: 800;
}

.calculator-stage {
  width: min(1500px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(580px, 1.22fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
  padding: 132px clamp(20px, 5vw, 76px) 64px;
}

.calc-eyebrow,
.tool-topline span,
.measure-heading > span,
.price-result > div > span {
  color: var(--mode-accent);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .45s ease;
}

.calculator-intro h1 {
  max-width: 670px;
  margin: 20px 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 5.7rem;
  line-height: .88;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 24px 80px rgba(0,0,0,.45);
}

.calc-lead { max-width: 590px; margin: 30px 0 0; color: rgba(248,255,251,.72); font-size: 1.08rem; line-height: 1.7; }

.formula-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 34px;
  color: rgba(248,255,251,.48);
  font-size: .64rem;
  font-weight: 800;
}
.formula-strip span { padding: 9px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; background: rgba(255,255,255,.06); }
.formula-strip b { color: var(--mode-accent); font-size: 1rem; }

.calculator-tool {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(4, 28, 26, .82);
  box-shadow: 0 42px 130px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(26px);
  overflow: hidden;
}

.calculator-tool::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 2px solid var(--mode-accent);
  opacity: .72;
  pointer-events: none;
  transition: border-color .45s ease;
}

.tool-aura { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tool-aura span { position: absolute; border: 1px solid color-mix(in srgb, var(--mode-accent) 28%, transparent); border-radius: 50%; animation: ringSpin 12s linear infinite; }
.tool-aura span:nth-child(1) { width: 420px; height: 420px; right: -250px; top: -230px; }
.tool-aura span:nth-child(2) { width: 300px; height: 300px; right: -180px; top: -165px; animation-direction: reverse; animation-duration: 8s; }
.tool-aura span:nth-child(3) { width: 180px; height: 180px; right: -105px; top: -100px; animation-duration: 5s; }

.tool-topline { position: relative; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.tool-topline em { color: rgba(248,255,251,.5); font-size: .72rem; font-style: normal; text-align: right; }

.mode-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin-top: 22px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
}

.mode-switch button {
  min-height: 78px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 13px 15px;
  color: rgba(248,255,251,.62);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: color .24s ease, background .24s ease, border-color .24s ease, transform .24s ease;
}
.mode-switch button:hover { color: var(--white); transform: translateY(-2px); }
.mode-switch button.is-selected { color: var(--white); border-color: color-mix(in srgb, var(--mode-accent) 50%, transparent); background: color-mix(in srgb, var(--mode-accent) 13%, transparent); box-shadow: 0 12px 40px color-mix(in srgb, var(--mode-accent) 12%, transparent); }
.mode-switch span, .mode-switch strong { display: block; }
.mode-switch span { font-weight: 800; }
.mode-switch strong { margin-top: 7px; color: var(--mode-accent); font-size: .72rem; }

.measure-heading { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-top: 34px; }
.measure-heading output { font-family: "Playfair Display", Georgia, serif; font-size: 2.4rem; font-weight: 800; line-height: 1; }
.measure-control { position: relative; margin-top: 22px; }

input[type="range"] {
  width: 100%;
  height: 12px;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  background: linear-gradient(90deg, var(--mode-accent) 0 var(--range-progress), rgba(255,255,255,.12) var(--range-progress) 100%);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb { width: 30px; height: 30px; border: 5px solid #062a27; border-radius: 50%; appearance: none; background: var(--mode-accent); box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 28px var(--mode-accent); cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 5px solid #062a27; border-radius: 50%; background: var(--mode-accent); box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 28px var(--mode-accent); cursor: grab; }
input[type="range"]:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mode-accent) 20%, transparent); }

.range-scale { display: flex; justify-content: space-between; margin-top: 13px; color: rgba(248,255,251,.35); font-size: .58rem; font-weight: 700; }
.number-input { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; color: rgba(248,255,251,.62); font-size: .75rem; font-weight: 700; }
.number-input > span:last-child { display: flex; align-items: center; gap: 8px; }
.number-input input { width: 120px; min-height: 46px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 0 12px; color: var(--white); background: rgba(255,255,255,.08); outline: none; }
.number-input input:focus { border-color: var(--mode-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-accent) 16%, transparent); }
.number-input b { color: var(--mode-accent); }

.price-result {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(250px,1.3fr);
  gap: 24px;
  align-items: end;
  margin-top: 34px;
  padding: 25px 0;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.price-result small { display: block; margin-top: 10px; color: rgba(248,255,251,.48); }
.price-total { justify-self: end; color: var(--white); font-family: "Playfair Display", Georgia, serif; font-size: 3.7rem; font-weight: 800; line-height: .9; text-align: right; text-shadow: 0 0 34px color-mix(in srgb, var(--mode-accent) 45%, transparent); animation: totalPop .42s cubic-bezier(.16,1,.3,1) both; }

.tool-actions { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 20px; align-items: center; margin-top: 24px; }
.estimate-cta { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 24px; color: #032421; background: linear-gradient(135deg, var(--mode-accent), #fff2a7 62%, var(--coral)); box-shadow: 0 18px 50px color-mix(in srgb, var(--mode-accent) 22%, transparent); font-weight: 900; transition: transform .22s ease, box-shadow .22s ease; }
.estimate-cta:hover { transform: translateY(-3px); box-shadow: 0 24px 66px color-mix(in srgb, var(--mode-accent) 32%, transparent); }
.tool-actions p { margin: 0; color: rgba(248,255,251,.46); font-size: .66rem; line-height: 1.5; }

@keyframes totalPop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes particleFloat { from { transform: translate3d(0,0,0) scale(.7); } to { transform: translate3d(24px,-38px,0) scale(1.5); } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes backgroundDrift { from { transform: scale(1.03); } to { transform: scale(1.1) translate3d(1%,-1%,0); } }

@media (max-width: 1080px) {
  .calculator-stage { grid-template-columns: 1fr; padding-top: 132px; }
  .calculator-intro { max-width: 760px; }
  .calculator-intro h1 { font-size: 4.8rem; }
}

@media (max-width: 680px) {
  .light-trace { display: none; }
  .calculator-nav { inset: 10px 10px auto; gap: 8px; padding: 7px 8px; }
  .calculator-brand { gap: 8px; }
  .calculator-brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
  .calculator-brand strong { font-size: .82rem; }
  .calculator-brand small { font-size: .64rem; }
  .nav-back { min-height: 44px; padding: 0 12px; font-size: .68rem; }
  .calculator-stage { gap: 38px; padding: 112px 14px 32px; }
  .calculator-intro h1 { font-size: 3.25rem; line-height: .92; }
  .calc-lead { font-size: .98rem; }
  .formula-strip { gap: 6px; }
  .formula-strip span { padding: 8px 7px; font-size: .56rem; }
  .calculator-tool { padding: 22px 16px; }
  .tool-topline { align-items: start; }
  .tool-topline em { max-width: 150px; }
  .mode-switch { grid-template-columns: 1fr; }
  .mode-switch button { min-height: 66px; }
  .measure-heading output { font-size: 2rem; }
  .range-scale span:nth-child(2), .range-scale span:nth-child(4) { display: none; }
  .price-result { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .price-total { justify-self: start; font-size: 3rem; text-align: left; }
  .tool-actions { grid-template-columns: 1fr; }
  .estimate-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}