* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; line-height:1.6; color:#222; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
a { text-decoration:none; color:inherit; }

/* Header */
.header { background:#fff; border-bottom:1px solid #eee; padding:15px 0; position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.header .container { display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; color:#007bff; font-weight:bold; }
.wave-icon { width:56px; height:56px; margin-right:12px; }
.bluewave { font-size:26px; display:block; }
.skipper { font-size:34px; letter-spacing:-1px; display:block; line-height:0.9; }
nav a { margin:0 12px; font-weight:500; }
.btn { background:#007bff; color:white; padding:10px 24px; border-radius:50px; font-weight:600; }
.btn-outline { border:1px solid #007bff; color:#007bff; padding:9px 22px; border-radius:50px; }

/* Hero */
.hero { background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('https://via.placeholder.com/1600x900/007bff/ffffff?text=Greek+Islands') center/cover; color:white; text-align:center; padding:140px 20px; }
.hero h1 { font-size:48px; margin-bottom:16px; }
.hero p { font-size:22px; margin-bottom:30px; }
.search-bar { max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr 1fr 180px; gap:12px; }
.search-bar input,.search-bar select,.search-bar button { padding:16px; border-radius:50px; border:none; font-size:16px; }
.search-bar button { background:#ff5a5f; color:white; font-weight:bold; cursor:pointer; }

/* Grid & Cards */
.section { padding:80px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:30px; margin-top:40px; }
.card { border-radius:16px; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,0.1); transition:0.3s; background:#fff; }
.card:hover { transform:translateY(-10px); }
.card img { width:100%; height:220px; object-fit:cover; }
.card .info { padding:20px; }
.card h3 { font-size:20px; margin-bottom:8px; }
.rating { color:#ffb400; font-size:14px; }

/* Footer */
footer { background:#1a1a1a; color:#aaa; padding:60px 20px; text-align:center; }

/* Mobile */
@media (max-width:768px) {
  .search-bar { grid-template-columns:1fr; }
  .hero h1 { font-size:36px; }
  .header .container { flex-direction:column; gap:15px; }
}