@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  --blue-dark:#1D4E89;  /* CLEAN */
  --green-eco:#6BBF4E;  /* ECO */
  --blue-azur:#4DBEE3;  /* water */
  --white:#ffffff;
  --light-gray:#F5F7FA;
  --muted:#6b7280;
}

*{box-sizing:border-box}
html,body{height:100%}
body {
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--blue-dark);
  background:#ffffff; /* clean white background */
  overflow-x:hidden;
}

#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.container{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:20px}

/* Header */
header{display:flex;align-items:center;justify-content:flex-start;gap:20px;flex-wrap:wrap;position:relative;z-index:100}
.brand img{height:50px;width:auto;display:block}
nav.topnav{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-left:20px}
.topnav a{
  text-decoration:none;color:var(--blue-dark);font-weight:600;
  padding:8px 14px;border-radius:999px;border:1px solid transparent;
  transition:.2s;
}
.topnav a:hover{background:rgba(255,255,255,0.6);border-color:#e6eef8;box-shadow:0 6px 18px rgba(77,190,227,.15)}
.topnav a.active{background:var(--green-eco);color:#fff;border-color:var(--green-eco)}
.topnav .book-btn{background:var(--green-eco);color:#fff;padding:8px 16px;font-weight:700}
.topnav .book-btn:hover{background:var(--blue-azur)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;margin-left:auto}
.hamburger span{width:28px;height:3px;background:var(--blue-dark);border-radius:2px;transition:.3s}
.hamburger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,0.95);
  box-shadow:0 8px 20px rgba(0,0,0,.1);border-radius:0 0 12px 12px;animation:slideDown .28s ease}
.mobile-menu a{padding:12px 16px;color:var(--blue-dark);text-decoration:none;border-bottom:1px solid #eee;border-radius:12px}
.mobile-menu a:hover{background:rgba(77,190,227,.15);box-shadow:inset 0 0 0 2px rgba(110,231,183,.25)}
.mobile-menu .book-btn{margin:10px;background:var(--green-eco);color:#fff;text-align:center}
.mobile-menu .book-btn:hover{background:var(--blue-azur)}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:880px){
  nav.topnav{display:none}
  .hamburger{display:flex}
  .container{padding-bottom:120px}
}

/* Hero */
.hero {
  margin-top: 12px;
  border-radius: 16px;
  padding: 24px;
  background: linear-gradient(90deg, rgba(77,190,227,.08), rgba(107,191,78,.06));
  box-shadow: 0 18px 46px rgba(6,21,40,.05);
}
.eyebrow{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(77,190,227,.12);color:var(--blue-azur);font-weight:700;font-size:13px}
h1{margin:10px 0 8px;font-size:30px;line-height:1.2}
.lead{margin:0;color:var(--muted);max-width:70ch}
.cta-row{display:flex;gap:12px;margin-top:14px;align-items:center;flex-wrap:wrap}
.btn{border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer;border:none}
.btn-primary{background:var(--green-eco);color:#fff;box-shadow:0 14px 36px rgba(107,191,78,.24)}
.btn-primary:hover{background:var(--blue-azur)}
.btn-ghost{background:transparent;border:1px solid rgba(29,78,137,.18);color:var(--blue-azur)}
.btn-ghost:hover{border-color:var(--blue-azur)}

/* Grid / Cards */
.grid{display:grid;gap:16px}
.cards{grid-template-columns:1fr}
.card{background:#fff;border-radius:14px;box-shadow:0 12px 34px rgba(6,21,40,.06);
  padding:16px;text-align:left;}
.card img{width:100%;height:220px;object-fit:cover;border-radius:10px;margin-bottom:10px}
h2.section-title{font-size:24px;margin:0 0 10px}
h3{margin:0 0 6px}
.muted{color:var(--muted)}
@media(min-width:880px){.cards{grid-template-columns:repeat(3,1fr)}}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{text-align:left;color:var(--muted);font-weight:600;font-size:14px}
.table td{background:#fff;padding:12px 14px;border-top:1px solid #eef4fb;border-bottom:1px solid #eef4fb}
.table tr td:first-child{border-left:1px solid #eef4fb;border-top-left-radius:10px;border-bottom-left-radius:10px}
.table tr td:last-child{border-right:1px solid #eef4fb;border-top-right-radius:10px;border-bottom-right-radius:10px}

/* Banner */
.banner {
  margin-top: 16px;         
  border-radius: 12px;      
  overflow: hidden;         
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.banner img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

/* Steps list in hero */
.hero .steps {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.hero .steps li {
  margin-bottom: 16px;
  padding-left: 4px;
}
.hero .steps strong {
  color: var(--blue-dark);
}

/* Why Choose section */
.why-choose {
  margin: 40px 0;
}

/* Footer */
footer {
  background: var(--blue-dark);
  color: #fff;
  padding: 20px;              
  margin-top: 30px;
  border-radius: 12px 12px 0 0;
  font-size: 0.9rem;          
}
.footer-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 20px;
  justify-items: center;   /* centers each column */
  text-align: center;      /* centers text inside */
}
footer h4 {
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--blue-azur);
}
footer p, footer a {
  margin: 2px 0;
  font-size: 0.85rem;
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
  color: var(--blue-azur);
}
.footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 6px;
}
@media(max-width:768px){
  .footer-grid {
    grid-template-columns: 1fr; /* collapse into one column */
    text-align: center;
  }
  .footer-grid div {
    margin-bottom: 12px;
  }
}

/* Footer social row */
.footer-social {
  text-align: center;
  margin: 12px 0;
}
.footer-social p {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
}
.social-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  transition: background 0.3s, color 0.3s;
}
.social-icons a:hover {
  background: var(--blue-azur);
  color: #fff;
}
.lead {
  margin: 0 0 16px;       /* add spacing below */
  color: var(--muted);
  max-width: 100%;        /* full width */
  line-height: 1.6;       /* better readability */
}

.app-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.app-text { flex: 1 1 300px; }
.app-text ol { line-height: 1.8; font-size: 1.05rem; margin: 0; padding-left: 20px; }

.app-separator {
  width: 1px;
  background: #ddd;
  min-height: 200px;
}

.app-right {
  flex: 1 1 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.app-right .store-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.app-right .store-buttons img {
  width: 150px;
  height: auto;
}

.qr-code {
  width: 110px;
  height: auto;
  border-radius: 10px;
}

/* Mobile fix */
@media (max-width: 768px) {
  .app-flex { flex-direction: column; align-items: center; text-align: center; }
  .app-separator { display: none; }
  .app-right { flex-direction: column; gap: 12px; }
}