*{box-sizing:border-box}
body{margin:0;font-family:'Inter',Arial,sans-serif;color:#172033;background:#f6f8fc;line-height:1.6}
.wrap{max-width:1120px;margin:auto;padding:0 20px}
a{text-decoration:none}

/* ---------- Top trust strip ---------- */
.topstrip{background:#172033;color:#cbd5e1;font-size:13px}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;flex-wrap:wrap;gap:6px}
.topstrip .status{display:flex;align-items:center;gap:6px;color:#e5e7eb}
.topstrip .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.topstrip .contacts{display:flex;gap:18px}
.topstrip .contacts a{color:#cbd5e1}
.topstrip .contacts a:hover{color:#fff}

/* ---------- Nav ---------- */
.nav{background:#fff;border-bottom:1px solid #e8ebf2;position:sticky;top:0;z-index:5}
.navin{height:70px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:23px;font-weight:800;color:#172033;display:flex;align-items:center;gap:8px}
.brand span{color:#2563eb}
.brand svg{flex-shrink:0}
.nav nav{display:flex;align-items:center}
.nav a{margin-left:22px;color:#4b5563;text-decoration:none;font-size:14px;font-weight:600}
.nav a:hover{color:#2563eb}
.nav .btn{margin-left:22px;padding:9px 16px}

/* ---------- Hero ---------- */
.hero{padding:80px 0;background:linear-gradient(135deg,#eff6ff,#fff)}
.hero-sub{padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:46px;line-height:1.1;margin:14px 0}
.hero p{max-width:600px;color:#64748b;font-size:18px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#dbeafe;color:#1d4ed8;border-radius:30px;font-size:13px;font-weight:700}
.hero-actions{margin:22px 0 6px;display:flex;gap:10px;flex-wrap:wrap}
.hero-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px}
.hero-trust span{display:flex;align-items:center;gap:7px;font-size:14px;color:#334155;font-weight:600}
.hero-trust svg{color:#16a34a;flex-shrink:0}
.hero-media{display:flex;align-items:center;justify-content:center}
.hero-media svg{width:100%;max-width:440px;height:auto}

.btn{display:inline-flex;align-items:center;gap:8px;background:#2563eb;color:white;padding:13px 20px;border-radius:9px;text-decoration:none;font-weight:700;font-size:14.5px;border:1px solid #2563eb;cursor:pointer}
.btn:hover{background:#1d4ed8}
.btn.alt{background:#fff;color:#2563eb;border:1px solid #bfdbfe}
.btn.alt:hover{background:#eff6ff}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.block{width:100%;justify-content:center}

/* ---------- Stats strip ---------- */
.stats{background:#fff;border-top:1px solid #e8ebf2;border-bottom:1px solid #e8ebf2;padding:36px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stats-grid strong{display:block;font-size:30px;color:#172033;font-weight:800}
.stats-grid span{color:#64748b;font-size:13.5px;font-weight:600}

/* ---------- Sections ---------- */
.section{padding:70px 0}
.section h2{text-align:center;font-size:32px;margin:0 0 12px}
.lead{text-align:center;color:#64748b;margin:0 auto 40px;max-width:680px}
.section.tight{padding-top:0}

/* ---------- How it works ---------- */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.process-step{background:#fff;border:1px solid #e7eaf0;border-radius:15px;padding:28px;position:relative}
.process-step .num{width:36px;height:36px;border-radius:50%;background:#172033;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-bottom:16px}
.process-step h3{margin:0 0 8px}
.process-step p{color:#64748b;margin:0}

/* ---------- Cards / grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid #e7eaf0;border-radius:15px;padding:26px;box-shadow:0 5px 20px #1e293b08;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px #1e293b12}
.card h3{margin-top:0;display:flex;align-items:center;gap:10px}
.card p{color:#64748b}
.card > a, .card-body > a{color:#2563eb;font-weight:700;font-size:14px}
.icon{font-size:28px}
.icon-circle{width:52px;height:52px;border-radius:13px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0}
.icon-circle.amber{background:#fef3c7;color:#b45309}
.icon-circle.green{background:#dcfce7;color:#16a34a}
.card-top{display:flex;align-items:flex-start;justify-content:space-between}
.pill{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:20px;background:#f1f5f9;color:#475569;white-space:nowrap}
.pill.common{background:#fee2e2;color:#b91c1c}

/* ---------- Why choose us ---------- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 32px}
.why-item{display:flex;gap:14px;align-items:flex-start}
.why-item svg{flex-shrink:0;color:#16a34a;margin-top:3px}
.why-item h4{margin:0 0 4px;font-size:15.5px}
.why-item p{margin:0;color:#64748b;font-size:14.5px}

/* ---------- Testimonials ---------- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial{background:#fff;border:1px solid #e7eaf0;border-radius:15px;padding:24px}
.testimonial .stars{color:#f59e0b;font-size:14px;margin-bottom:10px}
.testimonial p{color:#334155;font-size:14.5px;margin:0 0 16px}
.testimonial .who{display:flex;align-items:center;gap:10px}
.testimonial .avatar{width:38px;height:38px;border-radius:50%;background:#172033;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.testimonial .who strong{display:block;font-size:14px}
.testimonial .who small{color:#94a3b8}

/* ---------- Troubleshoot accordion (support pages) ---------- */
.tissue{background:#fff;border:1px solid #e7eaf0;border-radius:15px;margin-bottom:14px;overflow:hidden}
.tissue-head{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.tissue-head-left{display:flex;align-items:center;gap:14px}
.tissue-head h3{margin:0;font-size:16.5px}
.tissue-head .meta{color:#94a3b8;font-size:13px;margin-top:3px}
.tissue-chevron{transition:transform .18s ease;color:#94a3b8;flex-shrink:0}
.tissue.open .tissue-chevron{transform:rotate(180deg)}
.tissue-body{display:none;padding:0 22px 22px 76px;color:#475569}
.tissue.open .tissue-body{display:block}
.tissue-body ol{margin:0;padding-left:18px}
.tissue-body li{margin-bottom:8px}

/* ---------- CTA band ---------- */
.cta-band{background:#172033;color:#fff;border-radius:18px;padding:44px}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-inner h2{margin:0 0 6px;text-align:left}
.cta-inner p{margin:0;color:#94a3b8}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- FAQ ---------- */
.faq-toolbar{max-width:800px;margin:0 auto 26px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.faq-tab{padding:9px 16px;border-radius:30px;border:1px solid #e2e8f0;background:#fff;color:#475569;font-weight:700;font-size:13.5px;cursor:pointer}
.faq-tab.active{background:#172033;color:#fff;border-color:#172033}
.faq-search{max-width:800px;margin:0 auto 18px;display:block;width:100%;padding:14px 16px;border:1px solid #d8dee9;border-radius:10px;font:inherit}
.faq{max-width:800px;margin:12px auto;background:#fff;border:1px solid #e7eaf0;border-radius:12px;overflow:hidden}
.faq-q{padding:18px 20px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;gap:14px}
.faq-a{display:none;padding:0 20px 18px;color:#64748b}
.faq.open .faq-a{display:block}
.faq-cat{font-size:11px;font-weight:700;color:#2563eb;text-transform:uppercase;letter-spacing:.03em;display:block;margin-bottom:4px}
.faq-empty{max-width:800px;margin:12px auto;text-align:center;color:#94a3b8}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start;max-width:1000px;margin:auto}
.form{background:#fff;padding:28px;border-radius:15px;border:1px solid #e7eaf0}
.form label{font-size:13.5px;font-weight:700;color:#334155}
.form input,.form textarea,.form select{width:100%;padding:12px;margin:7px 0 15px;border:1px solid #d8dee9;border-radius:8px;font:inherit}
.form textarea{min-height:150px}
.side-card{background:#fff;border:1px solid #e7eaf0;border-radius:15px;padding:24px;margin-bottom:16px}
.side-card h4{margin:0 0 10px;display:flex;align-items:center;gap:8px}
.side-card ul{margin:0;padding-left:18px;color:#64748b;font-size:14px}
.side-card li{margin-bottom:6px}
.side-card.dark{background:#172033;color:#fff;border:none}
.side-card.dark ul{color:#cbd5e1}
.side-card.dark h4{color:#fff}
.notice{padding:14px 16px;background:#dcfce7;color:#166534;border-radius:8px;margin-bottom:15px;display:flex;align-items:center;gap:10px}

/* ---------- Footer ---------- */
footer{background:#111827;color:#cbd5e1;padding:50px 0 24px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px;border-bottom:1px solid #1f2937}
.footer-grid h5{color:#fff;font-size:14px;margin:0 0 14px}
.footer-grid p{color:#94a3b8;font-size:14px}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{margin-bottom:10px}
.footer-grid a{color:#9ca3af;font-size:14px}
.footer-grid a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;flex-wrap:wrap;gap:10px}
.footer-bottom small{color:#6b7280}

/* Why-choose-us image layout */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
footer .brand{color:#fff}

/* ---------- Admin (unchanged) ---------- */
.admin{padding:40px 0}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{padding:12px;border-bottom:1px solid #eee;text-align:left}
.danger{color:#dc2626}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{order:-1}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .navin{height:auto;padding:14px 20px;align-items:flex-start;flex-direction:column;gap:10px}
  .nav nav{display:flex;flex-wrap:wrap}
  .nav a{margin:4px 12px 4px 0}
  .nav .btn{margin:6px 0 0}
  .hero h1{font-size:33px}
  .hero{padding:50px 0}
  .topstrip .contacts{display:none}
  .tissue-body{padding-left:22px}
  .cta-inner{flex-direction:column;text-align:center}
  .cta-inner h2{text-align:center}
}

/* ATM card image gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;margin-top:24px}
.gallery-item{border-radius:14px;overflow:hidden;border:1px solid #e2e8f0;background:#f8fafc;aspect-ratio:1/1}
.gallery-item img{width:100%;height:100%;object-fit:contain;display:block}