@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

/* ── Scoped reset ─────────────────────────────────────────────────── */
#noa-roi-root,#noa-roi-root *,#noa-roi-root *::before,#noa-roi-root *::after{
  box-sizing:border-box; margin:0; padding:0;
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#noa-roi-root button,#noa-roi-root input,#noa-roi-root select{
  -webkit-appearance:none; appearance:none;
  border:none; background:none; font-family:inherit;
}
#noa-roi-root h1,#noa-roi-root h2,#noa-roi-root h3,
#noa-roi-root h4,#noa-roi-root h5,#noa-roi-root h6{
  color:#F1F5F9!important; -webkit-text-fill-color:#F1F5F9!important;
  font-family:'Inter',system-ui,sans-serif!important;
  font-weight:700!important; margin:0!important; padding:0!important;
}
#noa-roi-root a{ color:inherit!important; text-decoration:none!important; }
#noa-roi-root p{ margin:0!important; padding:0!important; }

/* ── Shell ────────────────────────────────────────────────────────── */
.noa-root{ background:transparent; padding:32px 20px 60px; color:#F1F5F9; }
.noa-inner{ max-width:1100px; margin:0 auto; }

/* ═══════════════════════════════════════════════════════════════════
   2-COLUMN LAYOUT
   Left: stepper + inputs  |  Right: live results summary (sticky)
   ═══════════════════════════════════════════════════════════════════ */
.noa-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:28px;
  align-items:start;
}
.noa-left{}
.noa-right{
  position:sticky;
  top:24px;
  padding-top:130px; /* aligns with card start: stepper(~60px) + gap(80px) */
}

/* ═══════════════════════════════════════════════════════════════════
   STEPPER
   ═══════════════════════════════════════════════════════════════════ */
.noa-stepper{ display:flex; align-items:center; margin-bottom:28px; }
.noa-step-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.noa-step-circle{
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(148,163,184,0.2);
  background:rgba(15,23,42,0.6);
  color:#475569; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s; flex-shrink:0;
}
.noa-step-item.active .noa-step-circle{ border-color:#2196F3; color:#2196F3; background:rgba(33,150,243,0.08); }
.noa-step-item.done   .noa-step-circle{ border:none; background:#2196F3; color:#fff; }
.noa-step-label{ font-size:11px; font-weight:600; color:#475569; white-space:nowrap; }
.noa-step-item.active .noa-step-label{ color:#2196F3; }
.noa-step-item.done   .noa-step-label{ color:#a855f7; }
.noa-step-line{ flex:1; height:2px; margin:0 8px; margin-bottom:18px; min-width:24px; background:rgba(148,163,184,0.15); border-radius:1px; transition:background .3s; }
.noa-step-line.done{ background:#2196F3; }

/* ═══════════════════════════════════════════════════════════════════
   INPUT CARDS GRID
   ═══════════════════════════════════════════════════════════════════ */
.noa-grid{ display:grid; gap:12px; }
.noa-g3{ grid-template-columns:repeat(3,1fr); }
.noa-g2{ grid-template-columns:repeat(2,1fr); }
.noa-g1{ grid-template-columns:1fr; }

/* ── Slider card ──────────────────────────────────────────────────── */
.noa-sc{
  background:rgb(1 1 1/17%)!important;
  border:1px solid rgba(148,163,184,0.12)!important;
  border-radius:14px!important;
  padding:18px 18px 16px!important;
  display:flex!important; flex-direction:column!important;
  align-items:flex-start!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.noa-sc__lbl{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#64748B; margin-bottom:10px; width:100%; }
.noa-sc__val{ display:flex; align-items:baseline; gap:4px; margin-bottom:6px; width:100%; }
.noa-sc__pfx{ font-size:18px; font-weight:700; line-height:1; font-family:'JetBrains Mono','Courier New',monospace; }
.noa-sc__num{
  font-size:36px!important; font-weight:700!important;
  font-family:'JetBrains Mono','Courier New',monospace!important;
  line-height:1; background:transparent!important;
  border:none!important; outline:none!important; box-shadow:none!important;
  padding:0!important; min-width:0; width:100%; caret-color:#2196F3;
}
.noa-sc__sfx{ font-size:13px; font-weight:500; color:#64748B!important; -webkit-text-fill-color:#64748B!important; flex-shrink:0; padding-bottom:4px; align-self:flex-end; }
.noa-sc__typical{ font-size:11px; font-weight:600; color:#2196F3; margin-bottom:2px; }
.noa-sc__desc{ font-size:11px; color:#64748B; line-height:1.4; flex:1; width:100%; }

/* Smooth slider */
.noa-sc__slider{ width:100%; margin-top:14px; }
.noa-sc__track-wrap{ position:relative; height:20px; margin-bottom:8px; display:flex; align-items:center; }
.noa-sc__track-wrap::before{ content:''; position:absolute; left:0; right:0; height:4px; background:rgba(148,163,184,0.12); border-radius:2px; pointer-events:none; }
.noa-sc__fill{ position:absolute; left:0; top:50%; transform:translateY(-50%); height:4px; border-radius:2px; pointer-events:none; }
.noa-sc__thumb{ position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; background:#2196F3; border:2.5px solid #0a0f1e; box-shadow:0 0 0 3px rgba(33,150,243,0.3),0 2px 6px rgba(0,0,0,0.5); pointer-events:none; z-index:2; }
.noa-sc__range{ position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:grab; z-index:3; padding:0!important; margin:0!important; -webkit-appearance:none; appearance:none; background:transparent!important; border:none!important; }
.noa-sc__range:active{ cursor:grabbing; }
.noa-sc__range::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:transparent; cursor:grab; }
.noa-sc__range::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:transparent; border:none; cursor:grab; }
.noa-sc__range::-moz-range-track{ background:transparent; }
.noa-sc__minmax{ display:flex; justify-content:space-between; font-size:10px; color:#334155; }

/* ── Tool / mode cards ────────────────────────────────────────────── */
.noa-tool-card{ background:rgb(1 1 1/17%); border:1px solid rgba(148,163,184,0.12); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px; backdrop-filter:blur(8px); }
.noa-mode-card{ background:rgb(1 1 1/17%); border:1px solid rgba(148,163,184,0.12); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:10px; margin-bottom:12px; backdrop-filter:blur(8px); }
.noa-mode-card__lbl{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#64748B; }

/* ── Summary pill ─────────────────────────────────────────────────── */
.noa-summary-pill{ margin-top:12px; padding:10px 14px; background:rgba(33,150,243,0.05); border:1px solid rgba(33,150,243,0.15); border-radius:8px; display:flex; justify-content:space-between; align-items:center; }
.noa-summary-pill__note{ font-size:11px; color:#64748b; }
.noa-summary-pill__val{ font-size:14px; font-weight:700; color:#2196F3; font-family:'JetBrains Mono','Courier New',monospace; }

/* ── Nav ──────────────────────────────────────────────────────────── */
.noa-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; }

/* ═══════════════════════════════════════════════════════════════════
   RIGHT COLUMN — LIVE RESULTS SUMMARY
   ═══════════════════════════════════════════════════════════════════ */
/* ── Animated gradient border on result panel ────────────────────── */
@property --noa-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes noa-border-spin {
  to { --noa-angle: 360deg; }
}
@keyframes noa-dot-orbit {
  0%   { top:-6px; left:calc(50% - 6px); background:#a855f7; box-shadow:0 0 10px 4px rgba(168,85,247,.8),0 0 20px 8px rgba(168,85,247,.3); }
  25%  { top:calc(50% - 6px); left:calc(100% - 6px); background:#ec4899; box-shadow:0 0 10px 4px rgba(236,72,153,.8),0 0 20px 8px rgba(236,72,153,.3); }
  50%  { top:calc(100% - 6px); left:calc(50% - 6px); background:#2196F3; box-shadow:0 0 10px 4px rgba(33,150,243,.8),0 0 20px 8px rgba(33,150,243,.3); }
  75%  { top:calc(50% - 6px); left:-6px; background:#a855f7; box-shadow:0 0 10px 4px rgba(168,85,247,.8),0 0 20px 8px rgba(168,85,247,.3); }
  100% { top:-6px; left:calc(50% - 6px); background:#a855f7; box-shadow:0 0 10px 4px rgba(168,85,247,.8),0 0 20px 8px rgba(168,85,247,.3); }
}

.noa-summary-panel{
  position:relative;
  background:rgb(1 1 1/25%);
  border-radius:15px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:visible;
}
/* Animated conic gradient border */
.noa-summary-panel::before{
  content:'';
  position:absolute;
  inset:-1.5px;
  border-radius:16px;
  background:conic-gradient(from var(--noa-angle),#a855f7 0%,#ec4899 30%,#2196F3 60%,#a855f7 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1.5px;
  animation:noa-border-spin 3s linear infinite;
  z-index:0;
}
/* Moving glowing dot */
.noa-summary-panel::after{
  content:'';
  position:absolute;
  width:12px; height:12px;
  border-radius:50%;
  z-index:3;
  animation:noa-dot-orbit 3s linear infinite;
  pointer-events:none;
}
/* Inner content above pseudo-elements */
.noa-summary-panel > *{ position:relative; z-index:2; }
.noa-summary-panel__head{
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(148,163,184,0.08);
}
.noa-summary-panel__eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#64748B; margin-bottom:10px;
}
.noa-summary-panel__title{
  font-size:13px; font-weight:600; color:#94A3B8; margin-bottom:6px;
}
.noa-summary-panel__big{
  font-size:42px; font-weight:700; line-height:1;
  font-family:'JetBrains Mono','Courier New',monospace;
  background:#2196F3;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:4px;
}
.noa-summary-panel__sub{ font-size:12px; color:#64748B; }

.noa-summary-panel__body{ padding:16px 18px; display:flex; flex-direction:column; gap:0; }

.noa-summary-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(148,163,184,0.07);
}
.noa-summary-row:last-child{ border-bottom:none; }
.noa-summary-row__label{ font-size:13px; color:#94A3B8; }
.noa-summary-row__val{
  font-size:15px; font-weight:700;
  font-family:'JetBrains Mono','Courier New',monospace;
  color:#2196F3;
}
.noa-summary-row__val.pink{
  background:#2196F3;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.noa-summary-row__sub{ font-size:10px; color:#475569; text-align:right; margin-top:1px; }

.noa-summary-panel__cta{ padding:0 18px 18px; }
.noa-summary-panel__note{ font-size:11px; color:#475569; text-align:center; margin-top:10px; line-height:1.5; }

/* Placeholder dashes when no data yet */
.noa-dash{ color:#334155; letter-spacing:.1em; }

/* ── HubSpot overrides ────────────────────────────────────────────── */
.noa-hs-hint{ font-size:12px; font-weight:600; color:#94A3B8; margin-bottom:14px; }
.noa-hs-loading{ font-size:12px; color:#64748B; text-align:center; padding:18px 0; }
.noa-hs-disclaimer{ font-size:10px; color:#475569; margin-top:10px; text-align:center; }
.noa-hs-missing{ font-size:12px; color:#f87171; }
#noa-roi-root .noa-hs-target .hs-form-field label{font-size:11px!important;font-weight:500!important;color:#64748B!important;display:block!important;margin-bottom:4px!important;}
#noa-roi-root .noa-hs-target input[type="text"],
#noa-roi-root .noa-hs-target input[type="email"],
#noa-roi-root .noa-hs-target input[type="tel"],
#noa-roi-root .noa-hs-target select,
#noa-roi-root .noa-hs-target textarea{
  width:100%!important;padding:10px 13px!important;font-size:13px!important;
  background:rgba(15,23,42,0.9)!important;border:1px solid rgba(148,163,184,0.15)!important;
  border-radius:8px!important;color:#F1F5F9!important;-webkit-text-fill-color:#F1F5F9!important;
  outline:none!important;box-shadow:none!important;-webkit-appearance:none!important;
}
#noa-roi-root .noa-hs-target input:focus,#noa-roi-root .noa-hs-target select:focus{border-color:#2196F3!important;}
#noa-roi-root .noa-hs-target .hs-form-field{margin-bottom:12px!important;}
#noa-roi-root .noa-hs-target .hs-error-msgs{list-style:none!important;margin:4px 0 0!important;}
#noa-roi-root .noa-hs-target .hs-error-msgs li label{font-size:11px!important;color:#f87171!important;}
#noa-roi-root .noa-hs-target input[type="submit"],#noa-roi-root .noa-hs-target .hs-button{
  width:100%!important;padding:13px 20px!important;margin-top:8px!important;border-radius:9px!important;
  font-size:13px!important;font-weight:700!important;cursor:pointer!important;border:none!important;
  background:#2196F3!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-appearance:none!important;
}
#noa-roi-root .noa-hs-target .submitted-message{text-align:center!important;font-size:14px!important;font-weight:600!important;color:#2196F3!important;padding:18px 0!important;}
#noa-roi-root .noa-hs-target .hs-powered-by{display:none!important;}
#noa-roi-root .noa-hs-target .legal-consent-container,#noa-roi-root .noa-hs-target .hs-richtext{font-size:10px!important;color:#475569!important;}

/* ── Responsive ───────────────────────────────────────────────────── */
@media(max-width:860px){
  .noa-layout{ grid-template-columns:1fr; }
  .noa-right{ position:static; }
  .noa-summary-panel{ margin-top:0; }
  .noa-g3{ grid-template-columns:1fr 1fr; }
}
@media(max-width:520px){
  .noa-g3,.noa-g2{ grid-template-columns:1fr; }
  .noa-root{ padding:20px 12px 44px; }
  .noa-inner-grid{ grid-template-columns:1fr!important; }
}