:root {
  --accent:#FF385C;
  --muted:#6b7280;
  --card:#fff;
  --bg:#fafafa;
  --shadow:0 6px 18px rgba(0,0,0,0.08);
  --radius:14px;
  font-family:'Inter',sans-serif;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:#111827; font-family:'Inter',sans-serif; }

header{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px; z-index:90;
}

.logo-container { display:flex; align-items:center; gap:10px; }
.logo-container img { height:36px; width:auto; display:block; }
.logo-text { font-weight:700; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,0.35); }

nav a {
  margin-left:20px; color:#fff; text-decoration:none; font-weight:500;
  text-shadow:0 2px 4px rgba(0,0,0,0.4);
}
nav a:hover { color:var(--accent); }
nav a:focus-visible { outline:3px solid #fff; outline-offset:3px; border-radius:6px; }

/* Mobile menu toggle */
.menu-toggle { display:none; background:none; border:0; padding:6px; cursor:pointer; align-self:center; }
.menu-toggle span { display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:transform .25s, opacity .25s; box-shadow:0 1px 2px rgba(0,0,0,0.35); }

/* Hamburger -> X animation when open */
body.nav-open .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
body.nav-open .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.hero {
  background:url('images/my-apartment-cover.jpg') center/cover no-repeat;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; position:relative; padding:40px;
}
.hero::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.45);
}
.hero-content { position:relative; z-index:2; max-width:1000px; }
.hero-logo { display:none; }
.hero-text h1 { font-size:48px; margin:0; font-weight:700; }
.hero-text p { font-size:18px; margin:12px 0 30px; }
.hero-sections { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.hero-box { background:rgba(255,255,255,0.15); padding:20px; border-radius:10px; backdrop-filter:blur(6px); }
.hero-box h2 { margin:0 0 10px; font-size:20px; color:#fff; }
.hero-box p { font-size:14px; line-height:1.4; color:#eee; }

main { padding:40px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.card { background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .2s; min-height:450px; }
.card:hover { transform:translateY(-4px); }
.card img { width:100%; height:260px; object-fit:cover; display:block; }
.card-body { padding:20px; flex:1; display:flex; flex-direction:column; line-height:1.5; }
.card-title { font-weight:600; font-size:16px; margin-bottom:6px; }
.card-meta { font-size:13px; color:var(--muted); margin-top:4px; }
.card-price { font-weight:700; margin-top:8px; }
.btn { margin-top:auto; background:var(--accent); color:#fff; border:0; padding:10px; border-radius:10px; font-weight:600; cursor:pointer; text-align:center; }
.btn:hover { filter:brightness(0.95); }
.btn:focus-visible { outline:3px solid #111827; outline-offset:2px; }

/* Info sections */
.info-section { background:#fff; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,0.06); padding:40px; margin:40px auto; max-width:900px; }
.info-section h2 { font-size:28px; margin-bottom:16px; color:var(--accent); }
.info-section p, .info-section li { font-size:16px; line-height:1.6; color:#333; }
.info-section ul { padding-left:20px; }

footer { text-align:center; padding:28px; color:var(--muted); font-size:14px; border-top:1px solid #eee; margin-top:40px; }

/* Responsive: mobile-first improvements */
@media (max-width: 768px) {
  /* tighter header padding on small screens */
  header { padding:14px 16px; display:grid; grid-template-columns:1fr auto 1fr; }

  /* center logo perfectly while keeping toggle on right */
  .logo-container { 
    grid-column:2; justify-self:center; 
    background: rgba(255,255,255,0.12); 
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding:6px 10px; 
    border-radius:9999px;
  }
  .menu-toggle { grid-column:3; justify-self:end; }
  .logo-text { display:none; }
  .logo-container img { height:28px; }

  /* show hamburger, hide nav by default */
  .menu-toggle { display:block; }
  nav {
    position:absolute; top:100%; right:16px; left:16px;
    display:none; flex-direction:column; gap:8px;
    background:#ffffff; color:#111827; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,0.18);
    padding:12px; margin-top:10px;
  }
  body.nav-open nav { display:flex; }
  nav a { color:#111827; text-shadow:none; padding:10px 12px; border-radius:8px; margin:0; }
  nav a:hover { background:#f3f4f6; color:#111827; }
  nav a:focus-visible { outline:3px solid #111827; }

  /* hero heading sizes */
  .hero { padding:24px 16px; }
  .hero-logo { display:block; width:min(70vw, 320px); height:auto; margin:0 auto 14px; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35)); }
  .hero-text h1 { font-size:30px; }
  .hero-text p { font-size:15px; }
}

/* Larger screens: ensure horizontal nav and centered header */
@media (min-width: 769px) {
  nav { display:flex; align-items:center; }
}