/* ====== Elite Solutions Network — Mobile-first theme ====== */
/* Palette from Thank You page */
:root{
  --navy1:#0a1a44;
  --navy2:#1e2e68;
  --orange:#ff6600;
  --gold:#ffd27f;
  --white:#fff;
  --ink:#111319;
  --muted:#9fb0d4;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.18);
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Base reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--white);
  background: linear-gradient(135deg, var(--navy1), var(--navy2));
  min-height:100%;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* Responsive type & containers */
:root{
  /* clamp(min, vw scaling, max) keeps text readable on phones */
  --h1: clamp(1.6rem, 4.5vw, 2.6rem);
  --h2: clamp(1.25rem, 3.8vw, 1.9rem);
  --p:  clamp(.95rem, 2.6vw, 1.05rem);
}
h1{font-size:var(--h1); margin:.2rem 0 .6rem; line-height:1.15}
h2.section-title, h2{font-size:var(--h2); margin:0 0 1rem}
p, li, label, input, select, textarea, button{font-size:var(--p)}

a{text-decoration:none; color:inherit}
img{max-width:100%; height:auto; display:block}

.wrap{max-width:1150px; margin:0 auto; padding:1.25rem 1rem}
@media (min-width:768px){
  .wrap{padding:2rem 1rem}
}

/* -------- Header / Nav (shows navy everywhere) -------- */
.site-header{
  position:relative;
  z-index:5;
  background: linear-gradient(135deg, var(--navy1), var(--navy2));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .nav{
  display:flex; gap:.75rem; align-items:center; justify-content:space-between;
}
.site-header .brand{display:flex; align-items:center; gap:.6rem; font-weight:700}
.site-header .brand img{height:32px; width:auto}
.site-header .nav-links{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.site-header .nav-links a{padding:.4rem .55rem; border-radius:8px; color:#eaf2ff}
.site-header .nav-links a:hover{background:rgba(255,255,255,.08)}

@media (max-width:520px){
  .site-header .brand img{height:28px}
  .site-header .nav{flex-direction:column; align-items:flex-start}
  .site-header .nav-links{width:100%; padding-top:.4rem}
}

/* -------- Buttons -------- */
.btn{
  display:inline-block;
  padding:.85rem 1rem;
  border:1px solid currentColor;
  border-radius:10px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  min-width:44px; /* iOS tap target */
}
.btn:active{transform:translateY(1px)}
.btn:hover{box-shadow:0 10px 22px rgba(0,0,0,.25)}
.btn--primary{background:var(--orange); color:#101010; border-color:var(--orange); font-weight:700}
.btn--ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,.55)}
.link{color:var(--gold); font-weight:700}

/* Make button rows break nicely on phones */
.cta-row{display:flex; gap:.6rem; flex-wrap:wrap}
@media (max-width:520px){
  .cta-row .btn{flex:1 1 140px}
}

/* -------- Hero -------- */
.hero{
  background: linear-gradient(135deg, var(--navy1) 0%, var(--navy2) 60%);
  color:var(--white);
}
.hero__inner{padding:2rem 1rem 1.25rem}
.hero__copy p{margin:.2rem 0 1rem; color:var(--gold)}

/* -------- Cards / Funnels -------- */
.grid{display:grid; gap:1rem}
.cards{grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
  color:var(--white);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.35); background:rgba(255,255,255,.09)}
.card__body h3{margin:.2rem 0 .35rem; color:var(--gold)}
.card__body p{color:var(--muted)}

/* -------- Rentals preview & cards -------- */
.rentals__head{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem}
.rentals{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.rental-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.rental-card__media{height:170px; background:linear-gradient(135deg,#5a6aa0,#8fa2d8)}
.rental-card__body{padding:1rem}
.rental-card__body h3{margin:.25rem 0 .35rem}
.rental-card__body p{margin:0 0 .5rem; color:var(--muted)}
.tags{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.75rem}
.tags span{font-size:.8rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.25rem .55rem}

/* -------- Forms (buyers/sellers) -------- */
.form-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.1rem;
  margin:1rem 0;
}
label{display:block; font-weight:700; margin:.5rem 0 .25rem}
input, select, textarea{
  width:100%;
  padding:.78rem .85rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  background:rgba(7,12,32,.45);
  color:var(--white);
  /* iOS: prevent zoom on focus */
  font-size:16px;
  -webkit-appearance:none; appearance:none;
}
input::placeholder, textarea::placeholder{color:#cbd4ff80}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
@media (max-width:760px){
  .row{grid-template-columns:1fr}
}
.form-panel .btn--primary{margin-top:.4rem; width:100%; max-width:360px}

/* -------- Footer -------- */
.site-footer{
  background:rgba(0,0,0,.25);
  border-top:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  padding:1.5rem 1rem;
}
.site-footer .footer-inner{display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center}
.site-footer img{height:40px; filter:drop-shadow(0 0 6px rgba(255,102,0,.55))}

/* -------- Subtle fade-in animations -------- */
.fade-item{opacity:0; transform:translateY(14px)}
.fade-item.in-view{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion: reduce){
  .fade-item,.card,.btn{transition:none !important; transform:none !important}
}