*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bb-navy:#F5F1F4;--bb-card:#FFFFFF;--bb-border:#DDE3EB;--bb-border-light:#EEF1F5;
  --bb-teal:#9d248c;--bb-teal-dark:#7a1b6d;--bb-teal-light:#fd4a9e;
  --bb-teal-glow:rgba(157,36,140,0.08);--bb-teal-glow-strong:rgba(157,36,140,0.15);
  --bb-white:#FFFFFF;--bb-gray-300:#1A1A2E;--bb-gray-400:#5A6577;--bb-gray-500:#8896A6;
  --bb-accent:#fc0b7f;--bb-purple:#9d248c;--bb-amber:#F59E0B;--bb-red:#EF4444;--bb-blue:#3B82F6;
  --bb-shadow-sm:0 1px 3px rgba(0,0,0,0.06);
  --bb-shadow-card:0 2px 8px rgba(157,36,140,0.06),0 0 0 1px rgba(157,36,140,0.04);
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bb-navy);color:var(--bb-gray-300);
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* HEADER */
.calc-header{background:linear-gradient(160deg,#2e1a2b 0%,#4a1545 40%,#7a1b6d 100%);color:#fff;padding:2rem 1.5rem 2.5rem;text-align:center}
.header-inner{max-width:1200px;margin:0 auto}
.logo-link{display:inline-block;text-decoration:none}
.logo-area{display:inline-flex;align-items:center;gap:0.6rem;margin-bottom:1rem;width:200px}
.logo-icon{flex-shrink:0;width:100%}
.calc-header h1{font-size:clamp(28px,5vw,48px);font-weight:800;line-height:1.2;margin-bottom:0.5rem;letter-spacing:-1px}
.calc-header .accent{color:#fd6aaf}
.calc-header .subtitle{font-size:1rem;opacity:0.8;font-weight:400;max-width:560px;margin:0 auto;line-height:1.6}

/* CONTAINER */
.calc-container{max-width:1200px;margin:0 auto;padding:40px 24px 80px}

/* SECTION LABELS */
.section-label{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--bb-teal);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.section-label::before{content:'';width:20px;height:2px;background:var(--bb-teal);border-radius:1px}
.section-title{font-family:'Inter',sans-serif;font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--bb-teal-dark);letter-spacing:-0.5px;margin-bottom:24px}

/* CARDS */
.card{background:var(--bb-card);border:1px solid var(--bb-border);border-radius:16px;padding:28px;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s;box-shadow:var(--bb-shadow-card)}
.card:hover{border-color:rgba(157,36,140,0.3);box-shadow:0 4px 20px rgba(157,36,140,0.1)}
.card-glow{position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(157,36,140,0.04) 0%,transparent 70%);pointer-events:none}

/* INPUT GRID */
.input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:40px}
.input-group{display:flex;flex-direction:column;gap:6px}
.input-label{font-size:13px;font-weight:600;color:var(--bb-gray-300);display:flex;align-items:center;gap:6px}
.input-label .hint{font-size:11px;color:var(--bb-gray-500);font-weight:400;margin-left:auto}
.input-wrapper{position:relative}
.input-wrapper .prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:'Inter',sans-serif;font-size:15px;font-weight:600;color:var(--bb-gray-500)}
input[type="number"],input[type="text"],input[type="email"]{width:100%;background:var(--bb-white);border:1.5px solid var(--bb-border);border-radius:10px;padding:12px 14px;color:var(--bb-gray-300);font-family:'Inter',sans-serif;font-size:16px;font-weight:600;transition:border-color .2s,box-shadow .2s;outline:none;-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type="number"]:focus,input[type="text"]:focus,input[type="email"]:focus{border-color:var(--bb-teal);box-shadow:0 0 0 3px var(--bb-teal-glow)}
input.has-prefix{padding-left:28px}
.input-wrapper .suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--bb-gray-500)}

/* RANGE SLIDER */
.range-row{display:flex;align-items:center;gap:16px}
.range-row input[type="range"]{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;border:none;background:linear-gradient(to right,var(--bb-teal) var(--pct,50%),var(--bb-border) var(--pct,50%));cursor:pointer;flex:1;padding:0}
.range-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--bb-teal);border:3px solid #fff;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.2);transition:transform .15s,box-shadow .15s}
.range-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 8px rgba(157,36,140,0.3)}
.range-val{font-family:'Inter',sans-serif;font-size:18px;font-weight:700;color:var(--bb-teal);min-width:52px;text-align:right}

/* GATE OVERLAY */
.results-wrapper{position:relative;overflow:hidden;min-height:580px}
.gate-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(245,241,244,0.85);border-radius:16px;transition:opacity .5s,visibility .5s}
.gate-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.gate-card{background:var(--bb-card);border:1px solid var(--bb-border);border-radius:20px;padding:40px;max-width:480px;width:90%;text-align:center;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.12)}
.gate-card::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:300px;height:300px;background:radial-gradient(circle,rgba(157,36,140,0.08) 0%,transparent 70%);pointer-events:none}
.gate-card h2{font-family:'Inter',sans-serif;font-size:28px;font-weight:800;color:var(--bb-teal-dark);margin-bottom:8px;position:relative}
.gate-card h2 span{color:var(--bb-accent)}
.gate-card p{color:var(--bb-gray-400);font-size:15px;margin-bottom:24px;position:relative;line-height:1.5}
.gate-form{display:flex;flex-direction:column;gap:12px;position:relative}
.gate-form input{background:var(--bb-white);border:1.5px solid var(--bb-border);border-radius:10px;padding:14px 16px;color:var(--bb-gray-300);font-family:'Inter',sans-serif;font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s}
.gate-form input:focus{border-color:var(--bb-teal);box-shadow:0 0 0 3px var(--bb-teal-glow)}
.gate-form input::placeholder{color:var(--bb-gray-500)}
.gate-submit{background:var(--bb-teal);color:#fff;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;padding:14px 32px;border-radius:12px;border:none;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s}
.gate-submit:hover{background:var(--bb-teal-dark);transform:translateY(-2px);box-shadow:0 8px 30px rgba(157,36,140,0.3)}
.gate-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}
.gate-fine{font-size:12px;color:var(--bb-gray-500);margin-top:4px}
.gate-error{color:var(--bb-red);font-size:13px;display:none}

/* TEASER STATS (visible before gate) */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:24px}
.teaser-card{background:var(--bb-card);border:1px solid var(--bb-border);border-radius:14px;padding:24px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--bb-shadow-sm)}
.teaser-card .result-label{font-size:12px;color:var(--bb-gray-500);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:8px}
.teaser-card .teaser-value{font-family:'Inter',sans-serif;font-size:20px;font-weight:700;color:var(--bb-gray-500);letter-spacing:-1px;filter:blur(8px);user-select:none;transition:filter .6s,color .6s}
.teaser-card .teaser-value.revealed{filter:blur(0);color:var(--bb-teal)}
.teaser-card.highlight{border-color:var(--bb-teal);background:linear-gradient(135deg,var(--bb-card) 0%,rgba(157,36,140,0.04) 100%)}
.teaser-card.highlight::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--bb-teal-dark),var(--bb-teal),var(--bb-teal-light))}
.teaser-card .lock-icon{font-size:16px;opacity:0.3;margin-bottom:4px;transition:opacity .3s}
.teaser-card .lock-icon.unlocked{opacity:0}
.teaser-card .result-sub{font-size:13px;color:var(--bb-gray-400);margin-top:4px}

/* RESULTS (full detail, hidden until unlocked) */
.full-results{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s cubic-bezier(.25,.46,.45,.94),opacity .5s .3s}
.full-results.visible{max-height:4000px;opacity:1}

/* BREAKDOWN TABLE */
.breakdown{background:var(--bb-card);border:1px solid var(--bb-border);border-radius:16px;overflow:hidden;margin-top:32px;box-shadow:var(--bb-shadow-card)}
.breakdown-header{padding:20px 28px;border-bottom:1px solid var(--bb-border);display:flex;align-items:center;justify-content:space-between}
.breakdown-header h3{font-family:'Inter',sans-serif;font-size:18px;font-weight:700;color:var(--bb-teal-dark)}
.breakdown-row{display:grid;grid-template-columns:1fr auto;padding:16px 28px;border-bottom:1px solid var(--bb-border-light);transition:background .2s}
.breakdown-row:hover{background:var(--bb-teal-glow)}
.breakdown-row:last-child{border-bottom:none}
.breakdown-row .label{font-size:14px;color:var(--bb-gray-400);display:flex;align-items:center;gap:8px}
.breakdown-row .label .icon{font-size:16px}
.breakdown-row .value{font-family:'Inter',sans-serif;font-size:16px;font-weight:700;color:var(--bb-gray-300);text-align:right}
.breakdown-row.total{background:var(--bb-teal-glow)}
.breakdown-row.total .label{color:var(--bb-gray-300);font-weight:700}
.breakdown-row.total .value{color:var(--bb-teal);font-size:20px}
.breakdown-row.cost .value{color:var(--bb-red)}

/* ROI VISUAL */
.roi-gauge-section{display:flex;flex-direction:column;align-items:center;margin-top:48px;padding:40px 24px;background:linear-gradient(180deg,transparent 0%,var(--bb-teal-glow) 50%,transparent 100%);border-radius:24px}
.roi-bar-container{width:100%;max-width:600px;margin:32px auto 0}
.roi-bar-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.roi-bar-label .left{color:var(--bb-gray-400)}
.roi-bar-label .right{color:var(--bb-teal);font-weight:700;font-family:'Inter',sans-serif}
.roi-bar-track{height:28px;background:var(--bb-border);border-radius:14px;overflow:hidden;position:relative}
.roi-bar-fill{height:100%;border-radius:14px;background:linear-gradient(90deg,var(--bb-teal-dark),var(--bb-teal),var(--bb-teal-light));transition:width .6s cubic-bezier(.25,.46,.45,.94);position:relative}
.roi-bar-fill::after{content:'';position:absolute;top:0;right:0;bottom:0;width:40px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2));border-radius:0 14px 14px 0}

/* CTA */
.cta-section{text-align:center;margin-top:56px;padding:48px 24px;background:var(--bb-card);border:1px solid var(--bb-border);border-radius:20px;position:relative;overflow:hidden;box-shadow:var(--bb-shadow-card)}
.cta-section::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:400px;height:400px;background:radial-gradient(circle,rgba(157,36,140,0.06) 0%,transparent 70%);pointer-events:none}
.cta-section h2{font-family:'Inter',sans-serif;font-size:clamp(24px,4vw,36px);font-weight:800;color:var(--bb-teal-dark);letter-spacing:-0.5px;margin-bottom:12px;position:relative}
.cta-section p{color:var(--bb-gray-400);font-size:16px;margin-bottom:28px;position:relative}
.cta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--bb-teal);color:#fff;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;padding:14px 32px;border-radius:12px;border:none;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;text-decoration:none;position:relative}
.cta-btn:hover{background:var(--bb-teal-dark);transform:translateY(-2px);box-shadow:0 8px 30px rgba(157,36,140,0.3)}
.share-row{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.share-btn{background:var(--bb-navy);border:1px solid var(--bb-border);color:var(--bb-gray-400);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer;transition:border-color .2s,color .2s;display:flex;align-items:center;gap:6px}
.share-btn:hover{border-color:var(--bb-teal);color:var(--bb-teal)}

/* ANIMATE */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.fade-in.visible{opacity:1;transform:translateY(0)}
@keyframes numPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.num-pop{animation:numPop .3s ease}

/* TOOLTIP */
.tooltip{position:relative;cursor:help}
.tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bb-teal-dark);border:1px solid var(--bb-teal-dark);color:#fff;font-size:12px;padding:8px 12px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10;font-weight:400}
.tooltip:hover::after{opacity:1}

/* UNLOCK ANIMATION */
@keyframes revealSlide{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.reveal-animate{animation:revealSlide .6s ease forwards}

@media(max-width:640px){
  .input-grid{grid-template-columns:1fr}
  .teaser-grid{grid-template-columns:1fr 1fr}
  .hero{padding:40px 16px 32px}
  .calc-container{padding:24px 16px 60px}
  .card{padding:20px}
  .gate-card{padding:28px 20px}
}