.bg-grid{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:linear-gradient(to right,rgba(71,85,105,.3) 1px,transparent 1px),linear-gradient(to bottom,rgba(71,85,105,.3) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(139,92,246,.25) 0%,rgba(139,92,246,.1) 40%,transparent 80%);background-size:32px 32px,32px 32px,100% 100%}nav{width:98%;height:40px;padding:10px;display:flex;border-radius:0 0 14px 14px;justify-content:space-between;align-items:center;z-index:3;font-family:Architects Daughter,cursive}nav .logotype{user-select:none;display:flex;justify-content:flex-start;align-items:center}nav .logotype a{font-size:2rem;text-decoration:none;color:var(--Black)}nav .sections{user-select:none;display:flex;justify-content:flex-end;align-items:center;gap:20px}nav .sections a{font-size:1.5rem;text-decoration:none;color:var(--Black)}nav .sections button{width:100px;height:40px;border-radius:4px;font-family:Architects Daughter,cursive;background-color:var(--Black);border:1px solid var(--Black);color:var(--White);font-size:1.2rem;cursor:pointer}nav .sections button:hover{background-color:var(--Aquamarine);color:var(--Black);transition:.5s}.hero{width:96%;height:calc(100vh - 40px);display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px;color:var(--Black);z-index:9999}.hero h1{max-width:70%;text-wrap:wrap;text-align:center;justify-content:center;align-items:center;font-size:6rem;font-family:Architects Daughter,cursive;font-weight:400;font-style:normal;line-height:80px;letter-spacing:-.5px;margin:30px 0}.hero h1 span{font-size:6rem;background:linear-gradient(90deg,var(--blue) 40%,var(--Blue_light));background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.hero h2{font-size:1.5rem;color:var(--Black_light);margin:0;font-family:Architects Daughter,cursive;font-weight:400;font-style:normal}.hero h3{font-size:1.1rem;color:var(--Black);margin:0;font-family:Architects Daughter,cursive;font-weight:400;font-style:normal;position:absolute;opacity:.7;border:2px solid #000;border-radius:255px 15px 225px/15px 225px 15px 255px;box-shadow:2px 5px #000;transition:all .2s ease}.hero h3:hover{transform:scale(1.05);transition:.5s;cursor:default;opacity:.9}.hero .left{top:60%;left:20%}.hero .right{top:65%;right:20%}.hero button{width:auto;padding:10px 30px;height:55px;border:2px solid var(--White);border-radius:255px 15px 225px/15px 225px 15px 255px;background-color:transparent;color:var(--Black);border:1px solid var(--Black);font-size:1.4rem;cursor:pointer;margin:20px;font-family:Architects Daughter,cursive;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;box-shadow:0 4px #0003}.hero button:hover{transform:rotate(-2deg) scale(1.05);background-color:#5d5dff;box-shadow:0 0 15px var(--blue),0 0 30px #5d5dff66;text-shadow:0 0 8px rgba(255,255,255,.8);color:var(--White);border:transparent}.hero button:after{content:"";position:absolute;top:-50%;left:-60%;width:20%;height:200%;background:#fff3;transform:rotate(30deg);transition:all .5s}.hero button:hover:after{left:120%}.about-section{padding:60px 20px;text-align:center;background-color:transparent}.about-section h2{font-family:Architects Daughter,cursive;font-size:2.5rem;color:var(--Black);margin-bottom:40px;text-decoration:underline wavy rgba(255,255,255,.3)}.features-container{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}.feature-note{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:25px;width:280px;border-radius:2px;clip-path:polygon(0% 0%,100% 0%,98% 98%,2% 100%);transition:transform .3s ease}.note-1{transform:rotate(-2deg);border-bottom:3px solid #ffde59}.note-2{transform:rotate(1deg);border-bottom:3px solid var(--blue)}.note-3{transform:rotate(-1deg);border-bottom:3px solid #ff5757}.feature-note:hover{transform:scale(1.05) rotate(0);background:#ffffff1a}.feature-note h3{font-family:Architects Daughter,cursive;margin-bottom:15px}.feature-note p{font-size:1rem;line-height:1.5;opacity:.8}@media screen and (max-width:768px){.hero h1{font-size:4rem;text-align:center;width:100%;line-height:60px}.hero h2{text-align:center;font-size:1.5rem}.hero h3{display:none}.hero h1 span{font-size:4rem}}