* { margin: 0; padding: 0; box-sizing: border-box; }
:root{ --cream:#fdfbf7; --cream-2:#f7f1e8; --ink:#232323; --muted:#6b6b6b; --accent:#d8cfc5; }
html,body{font-family: Arial, Helvetica, sans-serif; background: var(--cream); color: var(--ink); line-height: 1.65;}
a{color: var(--ink); text-decoration: none;} a:hover{opacity:.85}
.container{width:92%; max-width:1100px; margin:0 auto;}
.header{background: var(--cream-2); border-bottom: 1px solid #e9e3db;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.logo{display:flex; align-items:center; gap:12px;}
.logo img{height:56px; width:auto}
.nav a{margin-left:18px; font-weight:700}
.hero{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:28px; padding:48px 0; align-items:center}
.hero h1{font-size:40px; line-height:1.15; margin-bottom:12px}
.hero p{color:var(--muted); margin-bottom:18px}
.btn{display:inline-block; background: var(--accent); padding:12px 18px; border-radius:8px; font-weight:700}
.grid-3{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:18px}
.card{background:#fff; border:1px solid #eee; border-radius:12px; padding:18px}
.section{padding:56px 0}
.section h2{font-size:28px; margin-bottom:12px}
.muted{color:var(--muted)}
.footer{background: var(--cream-2); margin-top:48px; padding:18px 0; text-align:center; border-top:1px solid #e9e3db}
.badge{display:inline-flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1px solid #eee; border-radius:10px}
.brand-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:16px}
.brand{background:#fff; border:1px solid #eee; border-radius:12px; padding:14px; text-align:center}
.brand img{max-height:40px; width:auto; object-fit:contain}
.kpis{display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:16px}
.kpi{background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; text-align:center}
.hero img.hero-photo{width:100%; border-radius:14px; border:1px solid #eee}

/* --- Brand logo hover effects --- */
.brand img{
  filter: grayscale(100%);
  opacity: .75;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.brand:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.brand{
  transition: background .25s ease, border-color .25s ease;
  background: linear-gradient(180deg, #ffffff 0%, #faf6ee 100%);
  border-color: #e6dccd;
}
.brand:hover{
  background: linear-gradient(180deg, #fffaf2 0%, #fff 100%);
  border-color: #dbcdb7;
}

/* === iPhone/Safari responsive enhancements === */
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap: wrap;}
.nav{display:flex; flex-wrap: wrap; gap:14px;}
@media (max-width: 900px){
  .hero{grid-template-columns: 1fr; padding:32px 0}
  .hero h1{font-size:32px}
}
@media (max-width: 700px){
  .grid-3{grid-template-columns: 1fr;}
  .section{padding:40px 0}
  .logo img{height:48px}
}
@media (max-width: 420px){
  .topbar{padding:14px 0}
  .hero h1{font-size:26px}
  .btn{padding:10px 14px; font-size:14px}
  .brand-grid{grid-template-columns: repeat(2, 1fr);}
  .brand img{max-height:44px}
}
body{overflow-x:hidden}