/* ===== Global ===== */
:root {
  --accent: #ff6b00;
  --primary: #2e2e2e;
  --secondary: #ffffff;
  --bg-light: #f9f9f9;
  --radius: 6px;
  --shadow: 0 5px 20px rgba(0,0,0,.08);
  font-size: 16px;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--primary);
  line-height: 1.6;
  background: var(--secondary);
}

/* ===== Utilities ===== */
.container { width: min(90%, 1100px); margin-inline: auto; }
.center { text-align: center; }
.section { padding: 4rem 0; }
.section--alt { background: var(--bg-light); }
.btn {
  display: inline-block;
  padding: .75rem 1.5rem;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  transition: background .3s ease;
}
.btn--primary { background: var(--accent); color: var(--secondary); }
.btn--primary:hover { opacity: .9; }
.btn--secondary { background: var(--primary); color: var(--secondary); }
.btn--secondary:hover { background: #444; }
.accent { color: var(--accent); }

/* ===== Navigation ===== */
.nav { position: sticky; top: 0; background: var(--secondary); box-shadow: var(--shadow); z-index: 999; }
.nav__content { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.logo { font-weight: 700; font-size: 1.25rem; color: var(--primary); text-decoration: none; }
nav { display: flex; gap: 1.25rem; }
nav a { color: var(--primary); text-decoration: none; font-weight: 500; }
nav a:hover { color: var(--accent); }

/* Mobile nav */
#hamburger {
  display: none;
  width: 1.5rem; height: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='%232e2e2e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-color: transparent;
  border: none;
  cursor: pointer;
}
@media (max-width: 760px) {
  nav { position: absolute; inset: 0 auto auto 0; flex-direction: column; background: var(--secondary); padding: 4rem 2rem; min-width: 60%; transform: translateX(-100%); transition: transform .3s ease; box-shadow: var(--shadow); }
  nav.open { transform: translateX(0); }
  #hamburger { display: block; }
}

/* ===== Hero ===== */
.hero { background: url('https://source.unsplash.com/1600x900/?apartment,city') center/cover no-repeat; color: var(--secondary); display: grid; place-items: center; text-align: center; padding: 5rem 1rem; }
.hero__content { backdrop-filter: blur(3px); background: rgba(0,0,0,.45); padding: 3rem; border-radius: var(--radius); }
.hero h1 { margin-top: 0; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2; }

/* ===== Grid Helpers ===== */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }

/* ===== About / RConnect images ===== */
.about__img, .rconnect__img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ===== Features ===== */
.features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.card { background: var(--secondary); padding: 2rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }

/* ===== Tick list ===== */
.tick-list { list-style: none; padding: 0; margin: 0 0 2rem 0; }
.tick-list li { margin-bottom: .75rem; padding-left: 1.75rem; position: relative; }
.tick-list li::before {
  content: "✔";
  position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700;
}

/* ===== CTA ===== */
.cta { background: var(--accent); color: var(--secondary); padding: 3rem 1rem; }

/* ===== Footer ===== */
.footer { background: var(--primary); color: var(--secondary); padding: 4rem 1rem 2rem; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer__form input, .footer__form textarea {
  width: 100%; padding: .75rem; margin-bottom: .75rem; border: none; border-radius: var(--radius);
}
.footer__form button { width: 100%; }
.copyright { font-size: .875rem; opacity: .8; margin: 0; }