body{margin:0;font-family:var(--font-family-main);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-color)!important;height:100vh}html{font-size:var(--html-font-size);font-family:var(--font-family-main)}:root{--font-family-main: "Archivo", "Roboto", "Helvetica", "Arial", sans-serif;--html-font-size: 15px;--text-color: #202124;--def-bg: #f6f6f6;--raaho-green: #26ab6c;--body-grad: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%)}.MuiTypography-root{font-family:inherit!important}.gradient-background{background:linear-gradient(300deg,#f5fff9,#f5faff,#faf5ff,#fff5fa);background-size:240% 240%;animation:gradient-animation 24s ease infinite;position:relative}.gradient-background:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 25% 25%,rgba(0,0,0,.02) 1px,transparent 1px),radial-gradient(circle at 75% 75%,rgba(0,0,0,.015) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(0,0,0,.01) .5px,transparent .5px);background-size:4px 4px,6px 6px,3px 3px;background-position:0 0,2px 2px,1px 1px;opacity:.5;pointer-events:none;z-index:1}.gradient-background>*{position:relative;z-index:2}@keyframes gradient-animation{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.card{--card-bg: #ffffff;--card-accent: #26ab6c;--card-text: #1e293b;--card-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05);width:100%;height:100%;background:var(--card-bg);border-radius:15px;position:relative;overflow:hidden;transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,.2)}.card__shine{position:absolute;inset:0;background:linear-gradient(120deg,#fff0 40%,#fffc,#fff0 60%);opacity:0;transition:opacity .3s ease}.card__glow{position:absolute;inset:-10px;background:radial-gradient(circle at 50% 0%,#3aed9c4d,#7c3aed00 70%);opacity:0;transition:opacity .5s ease}.card__content{padding:1.25em;height:100%;display:flex;flex-direction:column;gap:.75em;position:relative;z-index:2}.card__image{background:linear-gradient(-60deg,#4b99e2,#3357bf);border-radius:8px;transition:all .5s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.card__icon{opacity:0}.card__image:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.1) 0%,transparent 30%),repeating-linear-gradient(45deg,rgba(139,92,246,.1) 0px,rgba(139,92,246,.1) 2px,transparent 2px,transparent 4px);opacity:.5}.card__text{display:flex;flex-direction:column;gap:.25em}.card__title{color:var(--card-text);font-size:1.1em;margin:0;font-weight:700;transition:all .3s ease}.card__description{color:var(--card-text);font-size:.9rem;margin:0;opacity:.5;transition:all .3s ease}.card__footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.card__price{color:var(--card-text);font-weight:700;font-size:1em;transition:all .3s ease}.card__button{width:28px;height:28px;background:var(--card-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .3s ease;transform:scale(.9)}.card:hover{transform:translateY(-10px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-color:#7c3aed33}.card:hover .card__shine{opacity:1;animation:shine 3s infinite}.card:hover .card__glow{opacity:1}.card:hover{transform:scale(1);opacity:1;z-index:1}.card:hover .card__icon{opacity:1}.card:hover .card__image{transform:translateY(-5px) scale(1.01);background:linear-gradient(-60deg,#87c8a9,#26ab6c);box-shadow:0 10px 15px -3px #0000001a}.card:hover .card__title{color:var(--card-accent);transform:translate(2px)}.card:hover .card__description{opacity:.75;transform:translate(2px)}.card:hover .card__price{color:var(--card-accent);transform:translate(2px)}.card:hover .card__button{transform:scale(1);box-shadow:0 0 0 4px #7c3aed33}.card:hover .card__button svg{animation:pulse 1.5s infinite}.card:active{transform:translateY(-5px) scale(.98)}@keyframes shine{0%{background-position:-100% 0}to{background-position:200% 0}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}