*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body{background:#08131f;color:#fff}
.hero{min-height:100vh;display:grid;place-items:center;overflow:hidden;position:relative}
.backdrop{
position:absolute;inset:0;
background:
linear-gradient(rgba(5,10,20,.45),rgba(5,10,20,.85)),
url('greece-background.jpg') center/cover no-repeat;
}
.backdrop:after{
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at top,#2f7cff33,transparent 40%);
}
.content{
position:relative;
z-index:2;
text-align:center;
padding:40px 20px;
max-width:1100px;
}
.logo{
width:min(520px,90vw);
filter:drop-shadow(0 25px 60px rgba(0,0,0,.45));
animation:float 6s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-10px)}}
h1{
font-size:clamp(3.5rem,8vw,6.5rem);
letter-spacing:.18em;
margin:.35em 0 .1em;
color:#ffd66d;
text-shadow:0 0 25px rgba(255,214,109,.35);
}
.subtitle{font-size:clamp(1.2rem,2.6vw,1.7rem)}
.tagline{font-size:1.15rem;opacity:.9}
.tagline span{color:#63b3ff}
.devices{
margin:50px auto 25px;
display:flex;
justify-content:center;
align-items:flex-end;
gap:18px;
flex-wrap:wrap;
}
.device{
background:linear-gradient(#1a2334,#111827);
border:2px solid rgba(255,255,255,.12);
box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.phone{width:90px;height:180px;border-radius:24px}
.tablet{width:140px;height:190px;border-radius:18px}
.laptop{width:260px;height:150px;border-radius:14px}
.desktop{width:220px;height:170px;border-radius:12px}
.platforms{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
opacity:.9;
font-size:.95rem;
}
.platforms span{
padding:10px 18px;
border-radius:999px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(10px);
}
@media(max-width:700px){
.devices{gap:10px}
.phone{width:65px;height:130px}
.tablet{width:100px;height:140px}
.laptop{width:180px;height:100px}
.desktop{width:150px;height:115px}
}