@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&display=swap');

*{box-sizing:border-box}
body{
margin:0;
min-height:100vh;
background:#080b25;
color:#fff;
font-family:Outfit,sans-serif;
overflow-x:hidden
}
.glow{
position:fixed;
inset:0;
background:radial-gradient(circle at 70% 50%,#ff980066,transparent 35%);
z-index:-1
}
header{
display:flex;
justify-content:space-between;
padding:35px 6%;
font-weight:900
}
.logo{
font-size:32px;
color:#ff9d00
}
.tag{opacity:.6}
.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
padding:4% 6%;
align-items:center
}
.panel,.info{
background:#101532dd;
border:1px solid #ffffff22;
padding:45px;
box-shadow:0 30px 90px #0008
}
.small{color:#ff9d00;letter-spacing:4px}
h1{
font-size:clamp(60px,8vw,120px);
line-height:.78;
margin:20px 0
}
h1 span{color:#ff9d00}
p{
font-size:21px;
color:#d7daf0
}
.buttons{
display:flex;
flex-wrap:wrap;
gap:14px;
margin:35px 0
}
.buttons a{
display:flex;
align-items:center;
gap:12px;
background:#fff;
color:#111;
padding:15px 22px;
font-weight:800;
text-decoration:none;
transition:.35s
}
.buttons a:hover{
transform:translateY(-8px) rotate(-3deg)
}
.buttons img{
width:30px;
height:30px;
object-fit:contain
}
.ca{
border:1px solid #ff9d00;
padding:20px
}
.ca code{
display:block;
word-break:break-all;
margin:15px 0
}
button{
padding:12px 25px;
font-weight:bold
}
.fruit{
position:relative;
display:grid;
place-items:center
}
.fruit img{
width:min(650px,100%);
animation:float 5s infinite
}
.aura{
position:absolute;
width:70%;
aspect-ratio:1;
background:#ff9d0044;
filter:blur(90px)
}
.info{
margin:0 6% 60px
}
@keyframes float{
50%{transform:translateY(-25px) scale(1.03)}
}
@media(max-width:850px){
.hero{grid-template-columns:1fr}
}