/* Added microinteractions & small animations */
:root{--accent:#ff8a65;--soft:#f6f7fb}
.icon{width:48px;height:48px;display:inline-block;vertical-align:middle}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:12px;background:var(--accent);color:white;border:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.btn:active{transform:translateY(1px) scale(.995)}
.btn:hover{box-shadow:0 8px 18px rgba(0,0,0,.12);transform:translateY(-3px)}
.card{border-radius:14px;padding:1.2rem;background:linear-gradient(180deg,#fff, #fbfbff);transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(21,29,66,.08)}

/* subtle icon spin when focused */
.icon:focus, .icon:hover{transform:rotate(-6deg) scale(1.03);transition:transform .22s cubic-bezier(.2,.9,.3,1)}

/* fade-in animation for sections */
@keyframes fadeUp {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.section{animation:fadeUp .6s ease both}

/* accessible reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}