html,
body{
height:100%;
margin:0;
padding:0;
overflow:hidden;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
background:#fefefe;
}
body{
background:
linear-gradient(
135deg,
#ffffff,
#fff8ef,
#f2fffb
);
}
.background{
position:fixed;
inset:0;
overflow:hidden;
z-index:-1;
}
.circle{
position:absolute;
border-radius:50%;
filter:blur(10px);
animation:float 9s ease-in-out infinite;
opacity:.25;
}
.c1{
width:340px;
height:340px;
background:#ff9833;
left:-120px;
top:-120px;
}
.c2{
width:260px;
height:260px;
background:#72dbc6;
right:-60px;
top:15%;
animation-delay:2s;
}
.c3{
width:260px;
height:260px;
background:#ffd478;
bottom:-90px;
left:20%;
animation-delay:3s;
}
.c4{
width:200px;
height:200px;
background:#6fdcc5;
right:15%;
bottom:-60px;
animation-delay:1s;
}
@keyframes float{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-25px);
}
100%{
transform:translateY(0px);
}
}
.brand-card{
padding:60px;
border-radius:35px;
background:rgba(255,255,255,.88);
backdrop-filter:blur(14px);
box-shadow:
0 20px 60px rgba(0,0,0,.12);
animation:appear .8s ease;
max-width:700px;
}
@keyframes appear{
from{
opacity:0;
transform:
translateY(25px)
scale(.92);
}
to{
opacity:1;
transform:
translateY(0)
scale(1);
}
}
.logo{
animation:pulse 2.5s infinite;
filter:
drop-shadow(0 12px 30px rgba(0,0,0,.15));
}
@keyframes pulse{
0%{
transform:scale(1);
}
50%{
transform:scale(1.05);
}
100%{
transform:scale(1);
}
}
.loading{
font-weight:700;
font-size:1.25rem;
color:#666;
}
.progress{
height:14px;
border-radius:50px;
background:#ececec;
}
.progress-bar{
width:0;
background:
linear-gradient(
90deg,
#ff7c24,
#ffb33f,
#6fdcc5
);
}
.hero-section{
position:relative;
overflow:hidden;
background:
linear-gradient(135deg,rgba(255,140,66,.90),rgba(67,201,168,.85)),
url('https://images.unsplash.com/photo-1450778869180-41d0601e046e?auto=format&fit=crop&w=1920&q=80');
background-size:cover;
background-position:center;
min-height:700px;
display:flex;
align-items:center;
}
.hero-logo{
width:420px;
max-width:90%;
filter:drop-shadow(0 20px 45px rgba(0,0,0,.25));
animation:floatLogo 5s ease-in-out infinite;
}
.hero-box{
background:rgba(255,255,255,.12);
backdrop-filter:blur(12px);
border-radius:35px;
padding:60px;
box-shadow:0 20px 60px rgba(0,0,0,.20);
}
.hero-title{
font-size:3.8rem;
font-weight:800;
}
.hero-sub{
font-size:1.3rem;
opacity:.95;
}
.paw{
position:absolute;
font-size:3rem;
opacity:.12;
animation:floatPaw 8s infinite ease-in-out;
}
.p1{top:10%;left:10%;}
.p2{top:25%;right:12%;animation-delay:1s;}
.p3{bottom:15%;left:20%;animation-delay:2s;}
.p4{bottom:10%;right:18%;animation-delay:3s;}
@keyframes floatLogo{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-15px);
}
}
@keyframes floatPaw{
0%,100%{
transform:translateY(0) rotate(0);
}
50%{
transform:translateY(-35px) rotate(10deg);
}
}