:root {
  --bg: #070710;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.12);
  --txt: #eef0ff;
  --txt-dim: #9aa0c4;
  --cons-a: #ffb347; --cons-b: #ff5e62;
  --prod-a: #00e6a8; --prod-b: #36d1ff;
  --stor-a: #8a7bff; --stor-b: #d46bff;
  --track: rgba(255,255,255,0.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  padding: clamp(20px, 4vw, 56px);
}

/* ---------- Aurora background ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.blob.b1 { width: 46vw; height: 46vw; left: -8vw; top: -10vw;
  background: radial-gradient(circle at 30% 30%, #ff5e62, transparent 60%);
  animation: drift1 22s ease-in-out infinite; }
.blob.b2 { width: 50vw; height: 50vw; right: -12vw; top: 8vh;
  background: radial-gradient(circle at 60% 40%, #36d1ff, transparent 60%);
  animation: drift2 26s ease-in-out infinite; }
.blob.b3 { width: 42vw; height: 42vw; left: 25vw; bottom: -18vw;
  background: radial-gradient(circle at 50% 50%, #8a7bff, transparent 60%);
  animation: drift3 30s ease-in-out infinite; }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 3px 3px; opacity: 0.4; }

@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(6vw,4vh) scale(1.12);} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1.05);} 50%{transform:translate(-5vw,6vh) scale(0.92);} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(3vw,-5vh) scale(1.1);} }

/* ---------- Layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; }

header { text-align: center; margin-bottom: clamp(28px, 5vw, 52px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--txt-dim); padding: 7px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--stroke);
  backdrop-filter: blur(12px); margin-bottom: 22px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--prod-a); box-shadow: 0 0 12px var(--prod-a); }
h1 {
  font-size: clamp(30px, 5.5vw, 56px); line-height: 1.05; font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #fff 10%, #b9c0ff 50%, #7ee0ff 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
header p { color: var(--txt-dim); margin-top: 16px; font-size: clamp(15px,2vw,18px); max-width: 620px; margin-inline: auto; }

.controls {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center;
  margin-top: 26px;
}
.control {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 14px;
  padding: 10px 14px; backdrop-filter: blur(12px); font-size: 14px;
}
.control label { color: var(--txt-dim); }
select, button.reset {
  background: rgba(255,255,255,0.06); color: var(--txt); border: 1px solid var(--stroke);
  border-radius: 10px; padding: 8px 12px; font-size: 14px; font-family: inherit; cursor: pointer;
}
select { background-color: #15151f; }
select option { background-color: #15151f; color: #eef0ff; }
.control input[type=number] {
  background:#15151f; color:var(--txt); border:1px solid var(--stroke);
  border-radius:8px; padding:7px 9px; width:76px; font-size:14px; font-family:inherit;
}
.control input[type=number]:focus { outline:2px solid var(--prod-b); outline-offset:1px; }

/* ---------- Finance ---------- */
.finance { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width:760px){ .finance{ grid-template-columns:1fr; } }
.fin-card { background: rgba(255,255,255,0.03); border:1px solid var(--stroke); border-radius:16px; padding:16px 18px; }
.fin-card .k { font-size:12px; color:var(--txt-dim); }
.fin-card .v { font-size: clamp(24px,3.6vw,34px); font-weight:800; margin-top:8px; letter-spacing:-.02em; }
.fin-card .sub { font-size:12px; color:var(--txt-dim); margin-top:6px; }
.fin-card.hl {
  background: linear-gradient(135deg, rgba(255,179,71,0.14), rgba(54,209,255,0.10));
  border-color: rgba(255,179,71,0.4); box-shadow: 0 0 34px -12px rgba(255,179,71,0.45);
}
.fin-card.hl .v {
  background: linear-gradient(100deg, #ffe08a, #ffb347);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
select:focus, button.reset:focus { outline: 2px solid var(--prod-b); outline-offset: 1px; }
button.reset { transition: background .2s; }
button.reset:hover { background: rgba(255,255,255,0.12); }

/* ---------- Gauge cards ---------- */
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); }
@media (max-width: 860px) { .gauges { grid-template-columns: 1fr; } }

.card {
  background: var(--glass); border: 1px solid var(--stroke); border-radius: 26px;
  padding: 26px 22px 28px; backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) backwards;
}
.card:nth-child(1){animation-delay:.05s;} .card:nth-child(2){animation-delay:.13s;} .card:nth-child(3){animation-delay:.21s;}
@keyframes rise { from{opacity:0; transform: translateY(24px);} to{opacity:1; transform:none;} }

.card .glow { position:absolute; top:-40%; left:50%; width:120%; height:80%; transform:translateX(-50%);
  filter: blur(60px); opacity:.22; pointer-events:none; }
.card.cons .glow{ background: var(--cons-b);} .card.prod .glow{ background: var(--prod-a);} .card.stor .glow{ background: var(--stor-b);}

.card-head { display:flex; align-items:center; gap:12px; margin-bottom: 6px; }
.icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  border:1px solid var(--stroke); }
.card.cons .icon{ background: linear-gradient(135deg, var(--cons-a), var(--cons-b)); }
.card.prod .icon{ background: linear-gradient(135deg, var(--prod-a), var(--prod-b)); }
.card.stor .icon{ background: linear-gradient(135deg, var(--stor-a), var(--stor-b)); }
.icon svg{ width:22px; height:22px; }
.card-title { font-size: 16px; font-weight: 700; }
.card-sub { font-size: 12.5px; color: var(--txt-dim); }
.badge { margin-left:auto; font-size: 11px; padding: 4px 9px; border-radius: 999px;
  border:1px solid var(--stroke); color: var(--txt-dim); background: rgba(255,255,255,0.04); }

.gauge-wrap { position: relative; margin: 4px auto 0; max-width: 280px; }
svg.gauge { display:block; width:100%; height:auto; touch-action: none; cursor: grab; }
svg.gauge:active { cursor: grabbing; }
.gauge .track { fill:none; stroke: var(--track); stroke-width: 17; stroke-linecap: round; }
.gauge .value { fill:none; stroke-width: 17; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(255,255,255,0.18)); }
.knob-halo { fill: rgba(255,255,255,0.14); }
.knob { fill: #fff; stroke-width: 3; }

.readout { position:absolute; left:0; right:0; bottom: 14%; text-align:center; pointer-events:none; }
.readout .num { font-size: clamp(30px, 6vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height:1; }
.readout .unit { font-size: 13px; color: var(--txt-dim); margin-top: 4px; }

.hint { text-align:center; font-size:12.5px; color: var(--txt-dim); margin-top: 8px; min-height: 32px; }

/* ---------- Results ---------- */
.results {
  margin-top: clamp(20px, 3vw, 34px);
  background: var(--glass); border:1px solid var(--stroke); border-radius: 26px;
  padding: 26px clamp(18px,3vw,30px); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
}
.results h2 { font-size: 15px; text-transform: uppercase; letter-spacing:.12em; color: var(--txt-dim); font-weight:700; margin-bottom: 18px; }
.metrics { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width:760px){ .metrics{ grid-template-columns: repeat(2,1fr);} }
.metric { background: rgba(255,255,255,0.03); border:1px solid var(--stroke); border-radius:16px; padding:16px; }
.metric .k { font-size:12px; color:var(--txt-dim); display:flex; align-items:center; gap:6px; }
.metric .v { font-size: clamp(22px,3vw,28px); font-weight:800; margin-top:8px; letter-spacing:-.02em; }
.metric .v small { font-size:14px; font-weight:600; color:var(--txt-dim); }
.bar { height:6px; border-radius:999px; background: rgba(255,255,255,0.08); margin-top:12px; overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }

.verdict { margin-top:22px; padding:18px 20px; border-radius:18px; line-height:1.55; font-size:15px;
  background: linear-gradient(120deg, rgba(54,209,255,0.10), rgba(138,123,255,0.10));
  border:1px solid var(--stroke); }
.verdict strong { color:#fff; }

/* ---------- Methodology ---------- */
details.method { margin-top: 22px; background: var(--glass); border:1px solid var(--stroke);
  border-radius:20px; backdrop-filter: blur(14px); overflow:hidden; }
details.method > summary { cursor:pointer; list-style:none; padding:18px 22px; font-weight:600; display:flex; align-items:center; gap:10px; }
details.method > summary::-webkit-details-marker{ display:none; }
details.method > summary::after{ content:"+"; margin-left:auto; font-size:20px; color:var(--txt-dim); transition: transform .25s; }
details.method[open] > summary::after{ transform: rotate(45deg); }
.method-body { padding: 0 22px 22px; color: var(--txt-dim); font-size:14px; line-height:1.7; }
.method-body code { background: rgba(255,255,255,0.07); padding:2px 7px; border-radius:6px; color:#cfe5ff; font-size:13px; }
.method-body h4 { color: var(--txt); margin: 16px 0 6px; font-size:14px; }
.method-body a { color:#7ee0ff; text-decoration:none; border-bottom:1px solid rgba(126,224,255,.3); }
.method-body ul { margin: 6px 0 6px 18px; }
.method-body li { margin: 4px 0; }

footer { text-align:center; color:var(--txt-dim); font-size:12.5px; line-height:1.8; margin: 38px 0 64px; }
footer a { color:#7ee0ff; text-decoration:none; border-bottom:1px solid rgba(126,224,255,.3); }

@media (prefers-reduced-motion: reduce){
  .blob{ animation:none; } .card{ animation:none; }
}