/* display */
.calc-display{background:var(--display-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--display-radius);padding:14px 18px 16px;margin-bottom:16px;min-height:90px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:4px;position:relative;overflow:hidden;border:1px solid rgba(100,160,255,0.2);box-shadow:inset 0 2px 12px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.1),0 0 0 1px rgba(59,130,246,0.08)}
.calc-display::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(100,160,255,0.4) 40%,rgba(100,160,255,0.4) 60%,transparent 100%);pointer-events:none;z-index:2}
.calc-display::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 60% 40% at 85% 80%,rgba(59,130,246,0.1) 0%,transparent 70%);pointer-events:none;z-index:0}
.display-expression{font-family:var(--font-display);font-size:13px;color:var(--display-subtext);letter-spacing:0.5px;min-height:16px;position:relative;z-index:2;word-break:break-all;text-align:right}
.display-value{font-family:var(--font-display);font-size:46px;font-weight:400;letter-spacing:-2px;color:var(--display-text);line-height:1;position:relative;z-index:2;word-break:break-all;text-align:right;text-shadow:0 0 10px rgba(147,197,253,0.7),0 0 24px rgba(59,130,246,0.35),0 0 48px rgba(59,130,246,0.12);transition:font-size 0.15s var(--ease-smooth)}
.display-value.small{font-size:34px;letter-spacing:-1px}
.display-value.xsmall{font-size:24px;letter-spacing:-0.5px}

/* buttons */
.calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--btn-gap)}
.btn{width:100%;aspect-ratio:1;border-radius:var(--btn-radius);font-family:var(--font-ui);font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center;transition:transform 0.12s var(--ease-spring),box-shadow 0.12s var(--ease-smooth),background 0.15s var(--ease-smooth),filter 0.1s;position:relative;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:rgba(255,255,255,0.6);border-radius:50%;pointer-events:none}
.btn-number{background:var(--btn-num-bg);color:var(--btn-num-text);border:1px solid var(--btn-num-border);box-shadow:0 2px 8px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.3)}
.btn-utility{background:var(--btn-util-bg);color:var(--btn-util-text);border:1px solid var(--btn-util-border);font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.5)}
.btn-operator{background:var(--btn-op-bg);color:var(--btn-op-text);border:1px solid var(--btn-op-border);font-size:22px;box-shadow:0 2px 10px rgba(59,130,246,0.15),inset 0 1px 0 rgba(255,255,255,0.25)}
.btn-operator.active{background:var(--btn-op-active-bg);color:var(--btn-op-active-text);border-color:rgba(147,197,253,0.7);box-shadow:0 4px 16px rgba(59,130,246,0.35),inset 0 1px 0 rgba(255,255,255,0.4)}
.btn-equals{background:linear-gradient(145deg,var(--btn-eq-bg-start),var(--btn-eq-bg-end));color:var(--btn-eq-text);border:1px solid rgba(147,197,253,0.4);font-size:24px;font-weight:500;box-shadow:0 4px 20px var(--btn-eq-glow),0 1px 0 rgba(255,255,255,0.25) inset}
.btn-zero{grid-column:span 2;aspect-ratio:auto;border-radius:32px;justify-content:flex-start;padding-left:26px}
.btn-number:hover{background:rgba(255,255,255,0.22)}
.btn-utility:hover{background:rgba(255,255,255,0.38)}
.btn-operator:hover:not(.active){background:rgba(100,160,255,0.32)}
.btn-equals:hover{filter:brightness(1.1);box-shadow:0 6px 28px var(--btn-eq-glow),0 1px 0 rgba(255,255,255,0.25) inset}
.btn:active,.btn.pressed{transform:scale(0.93);filter:brightness(0.9);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.btn-zero:active,.btn-zero.pressed{transform:scale(0.96)}

/* animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes displayUpdate{0%{transform:translateY(-4px);opacity:0.5}100%{transform:translateY(0);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes ripple{from{transform:scale(0);opacity:0.35}to{transform:scale(2.5);opacity:0}}
.hero-eyebrow{animation:fadeIn 0.5s ease 0.1s both}
.hero-headline{animation:fadeUp 0.6s var(--ease-smooth) 0.2s both}
.calc-wrapper{animation:fadeUp 0.7s var(--ease-smooth) 0.35s both}
.site-footer{animation:fadeIn 0.5s ease 0.6s both}
.display-value.updated{animation:displayUpdate 0.12s var(--ease-smooth)}
.calc-device.error{animation:shake 0.35s var(--ease-smooth)}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(147,197,253,0.45);width:60px;height:60px;margin-left:-30px;margin-top:-30px;pointer-events:none;animation:ripple 0.45s var(--ease-smooth) forwards}