/* -------------------------
   Save My Status — styles.css
   UPDATED: Menu bar line fix + MENU text button
   ------------------------- */

:root{
  --bg: #f7fbf8;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #0b7a4f;
  --accent-2: #13a96b;
  --text: #0f1724;
  --radius: 12px;
  --gap: 18px;
  --shadow-1: 0 6px 18px rgba(11,122,79,0.06);
  --shadow-2: 0 12px 32px rgba(11,122,79,0.08);
  font-family: Inter, system-ui, Roboto, Arial, -apple-system;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Reset & container ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);line-height:1.45;overflow-x:hidden}
.container{max-width:1100px;margin:0 auto;padding:20px;}

/* ---------- HEADER ---------- */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  border:none !important;
  outline:none !important;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:56px;height:56px;border-radius:10px;object-fit:cover;box-shadow:var(--shadow-1)}
.brand h1{font-size:18px;margin:0}
.brand small{display:block;color:var(--muted);font-size:13px;line-height:1}

/* ---------- NAV ---------- */
.nav{display:flex;gap:14px;align-items:center;border:none !important;outline:none !important;}
.nav a{
  text-decoration:none;color:var(--text);font-weight:600;padding:8px 12px;border-radius:8px;
  transition:background .18s ease, transform .12s ease;
}
.nav a:hover{background:rgba(0,0,0,0.04);transform:translateY(-1px)}
.nav .cta{
  background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 6px 18px rgba(11,122,79,0.08);
}

/* accessible focus styles */
a:focus, button:focus { outline:3px solid rgba(11,122,79,0.14); outline-offset:3px; }

/* ---------- HERO ---------- */
.hero{
  display:flex;
  gap:28px;
  align-items:stretch;
  margin-top:18px;
}
.hero-left{flex:1.1;padding:6px 0}
.hero-left h2{font-size:32px;margin-bottom:12px;line-height:1.05}
.hero-left p{color:var(--muted);margin-bottom:16px;font-size:16px}

/* buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.btn-apk{background:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(11,122,79,0.06)}
.btn-apk:active{transform:translateY(1px)}

/* features */
.features{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.feature{flex:1;min-width:200px;background:var(--card);padding:14px;border-radius:10px;box-shadow:0 6px 18px rgba(12,20,30,0.03);transition:transform .22s ease,box-shadow .22s ease}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.feature h4{margin-bottom:6px}

/* preview / aside */
aside{width:360px;flex:0 0 360px}
.preview-card{background:var(--card);padding:12px;border-radius:12px;box-shadow:var(--shadow-1);transition:transform .28s ease, box-shadow .28s ease}
.preview-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.preview-card img{width:100%;border-radius:10px;display:block}

/* why box */
.why-box{background:#e9f8f0;border:1.5px solid var(--accent);border-radius:14px;padding:18px 20px;margin-top:16px;box-shadow:0 6px 18px rgba(11,122,79,0.08);transition:transform .16s ease}
.why-box:hover{transform:translateY(-3px)}
.why-box h3{margin:0 0 10px;color:var(--accent);font-size:18px;display:flex;align-items:center;gap:8px}
.why-box ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.why-box li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text)}
.why-box .icon{font-size:18px;line-height:1}

/* how-to */
.how-to{margin-top:22px;padding:22px;border-radius:12px;background:var(--card);box-shadow:0 6px 20px rgba(0,0,0,0.04)}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.how-step{display:flex;gap:12px;align-items:flex-start;background:rgba(11,122,79,0.04);border-radius:10px;padding:12px;transition:transform .22s ease,box-shadow .22s ease}
.how-step:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(11,122,79,0.06)}
.how-icon{font-size:22px;color:var(--accent);background:#fff;width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(11,122,79,0.06)}

/* gallery */
.gallery{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gallery img{width:100%;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.04);object-fit:cover;display:block;opacity:0;transform:translateY(8px);animation:reveal .48s ease forwards}
@keyframes reveal{to{opacity:1;transform:none}}
.gallery img:nth-child(1){animation-delay:.04s}
.gallery img:nth-child(2){animation-delay:.08s}
.gallery img:nth-child(3){animation-delay:.12s}
.gallery img:nth-child(4){animation-delay:.16s}

/* contact */
.contact-section{margin-top:26px;padding:22px;background:var(--card);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.04)}
.contact-box{margin-top:10px;background:#e9f8f0;padding:14px;border-radius:10px;border:1px solid var(--accent)}
.contact-box a{color:var(--accent);text-decoration:none;font-weight:600}
.contact-box a:hover{text-decoration:underline}

/* footer */
.footer{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding:18px;color:var(--muted);font-size:14px;border:none !important;outline:none !important;}
.footer .socials a{margin-left:10px;font-size:18px;text-decoration:none}
.footer .socials a:hover{color:var(--accent)}

/* ---------- MENU BUTTON (TEXT STYLE - NO MORE HAMBURGER LINES) ---------- */
.nav-toggle {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(11,122,79,0.12) !important;
  cursor: pointer;
  padding: 10px 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11,122,79,0.18);
}

.nav-toggle:active {
  transform: translateY(0);
}

/* When menu opens, show X icon */
.nav-toggle[aria-expanded="true"]::after {
  content: " ✕";
  margin-left: 4px;
}

/* Overlay */
.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(6,8,10,0.36);
  z-index:9990;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.menu-overlay.open{opacity:1;pointer-events:auto}

/* Mobile menu slide panel */
.mobile-menu{
  position:fixed;
  top:0;
  right:0;
  width:min(360px,86%);
  height:100vh;
  background:#fff;
  box-shadow:-18px 0 40px rgba(0,0,0,0.12);
  transform:translateX(110%);
  transition:transform .28s cubic-bezier(.2,.9,.2,1);
  z-index:10010;
  padding:72px 18px 24px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border:none !important;
  outline:none !important;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu nav{display:flex;flex-direction:column;gap:12px}
.mobile-menu a{display:block;color:var(--accent);text-decoration:none;font-weight:700;padding:12px;border-radius:10px}
.mobile-menu a.cta{background:var(--accent);color:#fff;text-align:center}

/* Close button */
.close-btn{
  position:absolute;
  right:12px;
  top:12px;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  font-size:22px;
  cursor:pointer;
  color:var(--muted);
}
.close-btn::before,
.close-btn::after {
  display:none !important;
  content:none !important;
}

/* Prevent page scroll when menu open */
body.menu-open{overflow:hidden;touch-action:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  aside{width:100%;flex:unset}
  .hero{flex-direction:column;gap:18px}
  .hero-left h2{font-size:22px}
  .btn{width:100%;text-align:center}
  .preview-card{order:2}
  .footer{flex-direction:column;gap:12px;align-items:flex-start}
}

/* Desktop refinements */
@media(min-width:1200px){
  .hero{align-items:center}
  aside{flex:0 0 420px;width:420px}
  .hero-left h2{font-size:36px}
}

/* Very small phones */
@media(max-width:420px){
  .brand img{width:48px;height:48px}
  .brand h1{font-size:16px}
  .hero-left h2{font-size:20px}
  .gallery{gap:8px}
  .gallery img{animation-duration:.36s}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gallery img, .how-step, .feature, .mobile-menu, .preview-card { 
    transition: none !important; 
    animation: none !important; 
  }
}
/* ---------- DOWNLOAD BUTTON (TRUST-FOCUSED) ---------- */
.actions {
  margin-top: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-apk {
  background: linear-gradient(135deg, #0b7a4f 0%, #13a96b 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(11,122,79,0.3), 0 4px 12px rgba(11,122,79,0.2);
  border: 2px solid rgba(255,255,255,0.2);
}

.btn-apk svg {
  animation: bounce 2s infinite;
}

.btn-apk:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(11,122,79,0.4), 0 6px 18px rgba(11,122,79,0.25);
}

.btn-apk:active {
  transform: translateY(-1px) scale(0.98);
}

/* Shine effect on hover */
.btn-apk::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

.btn-apk:hover::before {
  left: 100%;
}

/* Trust badges below button */
.trust-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.badge {
  background: rgba(11,122,79,0.08);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(11,122,79,0.2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Download icon bounce animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Mobile responsive */
@media(max-width:900px) {
  .btn {
    width: 100%;
    justify-content: center;
  }
  .trust-badges {
    justify-content: center;
  }
}