/* ============================================================
   RetailPOS.biz — shared styles
   Design language: the Indian GST bill book.
   Signature: red margin rule + ledger ruling lines.
   ============================================================ */
:root {
  --ink: #22303e;          /* deep slate ink */
  --ink-soft: #4c5a68;
  --paper: #fbfaf5;        /* bill-book paper */
  --card: #ffffff;
  --rule: #e3ded0;         /* ledger ruling line */
  --margin-red: #c2402e;   /* the red margin line */
  --billing: #b97a0a;      /* marigold — billing */
  --erp: #1f7a6d;          /* teal — ERP */
  --crm: #545b9e;          /* indigo — CRM */
  --focus: #1f7a6d;
  --maxw: 1100px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: "Hind Madurai", "Noto Sans Tamil", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
}
h1, h2, h3, .wordmark {
  font-family: "Anek Latin", "Anek Tamil", "Hind Madurai", sans-serif;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
:lang(ta) h1, :lang(ta) h2, :lang(ta) h3, :lang(ta) .wordmark {
  font-family: "Anek Tamil", "Hind Madurai", sans-serif;
  line-height: 1.35;
}
a { color: var(--erp); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
img { max-width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
header.site {
  background: var(--card);
  border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 50;
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.wordmark {
  font-weight: 700; font-size: 1.15rem; color: var(--ink);
  text-decoration: none; letter-spacing: 0;
}
.nav-links { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; }
.nav-links a:hover { color: var(--ink); text-decoration: underline; }
.lang-switch {
  border: 1.5px solid var(--ink); border-radius: 4px;
  padding: 4px 12px; font-weight: 600; color: var(--ink) !important;
}
.lang-switch:hover { background: var(--ink); color: var(--paper) !important; text-decoration: none !important; }

/* ---------- bill-book hero ---------- */
.hero {
  position: relative;
  background:
    repeating-linear-gradient(to bottom, transparent 0 42px, var(--rule) 42px 43px),
    var(--card);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero .container { position: relative; padding: 72px 20px 80px 56px; }
.hero .container::before {
  /* the red margin line of a bill book */
  content: ""; position: absolute; left: 28px; top: 0; bottom: 0;
  width: 2px; background: var(--margin-red);
}
.eyebrow {
  display: inline-block; font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--margin-red); margin-bottom: 14px;
}
:lang(ta) .eyebrow { text-transform: none; letter-spacing: 0.02em; font-size: 0.95rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 700; max-width: 18ch; }
.hero p.lead { margin-top: 18px; max-width: 60ch; font-size: 1.1rem; color: var(--ink-soft); }
.cta-row { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: 13px 26px; border-radius: 5px; font-size: 1rem;
  font-family: inherit; cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); }
.btn-primary:hover { background: #101a24; }
.btn-secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

/* ---------- sections ---------- */
section { padding: 64px 0; }
section.alt { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
h2.section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; margin-bottom: 10px; }
p.section-sub { color: var(--ink-soft); max-width: 62ch; margin-bottom: 34px; }
.ledger-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* three needs */
.needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.need {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 26px 24px 24px; display: flex; flex-direction: column;
  border-top: 4px solid var(--ink);
}
.need.billing { border-top-color: var(--billing); }
.need.erp { border-top-color: var(--erp); }
.need.crm { border-top-color: var(--crm); }
.need h3 { font-size: 1.25rem; margin-bottom: 8px; }
.need p { color: var(--ink-soft); font-size: 0.98rem; flex: 1; }
.need a.more { margin-top: 16px; font-weight: 600; text-decoration: none; }
.need.billing a.more { color: var(--billing); }
.need.erp a.more { color: var(--erp); }
.need.crm a.more { color: var(--crm); }
.need a.more:hover { text-decoration: underline; }

/* feature lists */
.feat-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat-card { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 24px; }
.feat-card h3 { font-size: 1.15rem; margin-bottom: 12px; }
ul.checks { list-style: none; }
ul.checks li {
  padding: 7px 0 7px 26px; position: relative;
  border-bottom: 1px dashed var(--rule); font-size: 0.97rem;
}
ul.checks li:last-child { border-bottom: 0; }
ul.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 7px; font-weight: 700;
}
.tone-billing ul.checks li::before { color: var(--billing); }
.tone-erp ul.checks li::before { color: var(--erp); }
.tone-crm ul.checks li::before { color: var(--crm); }

/* comparison */
.compare { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.plan {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 24px 22px; display: flex; flex-direction: column;
}
.plan h3 { font-size: 1.1rem; margin-bottom: 4px; }
.plan .fit { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 14px; }
.plan ul { list-style: none; flex: 1; }
.plan ul li { padding: 5px 0 5px 22px; position: relative; font-size: 0.93rem; }
.plan ul li::before { content: "—"; position: absolute; left: 0; color: var(--ink-soft); }
.plan.featured { border: 2px solid var(--ink); background: #fffdf4; }
.plan .btn { margin-top: 18px; text-align: center; font-size: 0.93rem; padding: 10px 14px; }

/* page hero for solution pages */
.page-hero { border-left: none; }
.badge {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; padding: 3px 10px; border-radius: 3px; margin-bottom: 14px;
}
:lang(ta) .badge { text-transform: none; letter-spacing: 0.02em; }
.badge.billing { background: var(--billing); }
.badge.erp { background: var(--erp); }
.badge.crm { background: var(--crm); }

.two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.note {
  border-left: 3px solid var(--margin-red); background: var(--card);
  padding: 16px 20px; border-radius: 0 6px 6px 0; color: var(--ink-soft); font-size: 0.95rem;
}

/* CTA band */
.cta-band { background: var(--ink); color: var(--paper); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfd6dd; max-width: 60ch; }
.cta-band .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .btn-primary:hover { background: #fff; }
.cta-band .btn-secondary { color: var(--paper); border-color: var(--paper); }
.cta-band .btn-secondary:hover { background: var(--paper); color: var(--ink); }

/* footer */
footer.site {
  background: var(--card); border-top: 2px solid var(--ink);
  padding: 40px 0; font-size: 0.93rem; color: var(--ink-soft);
}
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
footer h3 { font-size: 1rem; margin-bottom: 10px; color: var(--ink); }
footer ul { list-style: none; }
footer li { margin-bottom: 6px; }
footer a { color: var(--ink-soft); }

/* responsive */
@media (max-width: 900px) {
  .needs, .feat-cols { grid-template-columns: 1fr; }
  .compare { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  footer .cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .compare { grid-template-columns: 1fr; }
  .hero .container { padding-left: 44px; }
  .hero .container::before { left: 20px; }
}

/* ---------- trust labels ---------- */
.trust-labels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.trust-labels span {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 4px 14px; font-size: 0.85rem; font-weight: 600;
  background: var(--card); color: var(--ink);
}
.trust-labels span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--margin-red);
}
.trust-labels span:nth-child(2)::before { background: var(--billing); }
.trust-labels span:nth-child(3)::before { background: var(--erp); }
.trust-labels span:nth-child(4)::before { background: var(--crm); }
.trust-labels span:nth-child(5)::before { background: var(--ink); }

/* ---------- compliance sections ---------- */
.tone-gst ul.checks li::before { color: var(--margin-red); }
.compliance-note {
  margin-top: 30px; border: 1px solid var(--rule); border-left: 3px solid var(--margin-red);
  background: var(--card); padding: 18px 22px; border-radius: 0 6px 6px 0;
  color: var(--ink-soft); font-size: 0.95rem; max-width: 75ch;
}

/* ---------- launch additions ---------- */
[hidden] { display: none !important; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 18px;
  border-radius: 0 0 6px 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }
address.contact-block { font-style: normal; margin-top: 10px; line-height: 1.9; }
address.contact-block a { color: var(--ink); }

/* sticky mobile action bar */
.sticky-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--card); border-top: 2px solid var(--ink);
  padding: 8px 10px; gap: 8px;
}
.sticky-bar a {
  flex: 1; text-align: center; text-decoration: none; font-weight: 600;
  font-size: 0.95rem; padding: 10px 6px; border-radius: 5px;
  border: 1.5px solid var(--ink); color: var(--ink); background: var(--paper);
}
.sticky-bar a.js-demo-cta { background: var(--ink); color: var(--paper); }
@media (max-width: 700px) {
  .sticky-bar { display: flex; }
  body { padding-bottom: 62px; }
}

/* 404 */
.err-wrap { max-width: 640px; margin: 0 auto; padding: 90px 20px 60px 56px; position: relative; }
.err-wrap::before { content: ""; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: var(--margin-red); }
.err-wrap h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: 12px; }
.err-wrap p { color: var(--ink-soft); margin-bottom: 10px; }
.err-wrap .cta-row { margin-top: 26px; }
/* two-card feature rows (after conditional cards were removed) */
.feat-cols:has(> .feat-card:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .feat-cols:has(> .feat-card:nth-child(2):last-child) { grid-template-columns: 1fr; }
}

/* ---------- call actions ---------- */
.nav-call {
  background: var(--margin-red); color: #fff !important;
  border-radius: 5px; padding: 8px 16px; font-weight: 700;
  text-decoration: none !important; font-size: 0.95rem;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-call:hover { background: #a33324; }
@media (max-width: 700px) { .nav-call { display: none; } } /* sticky bar takes over on mobile */
.hero-phone { margin-top: 18px; font-weight: 600; font-size: 1.05rem; }
.hero-phone a { color: var(--margin-red); text-decoration-thickness: 2px; }
.sticky-bar a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.cta-band .hero-phone, .cta-band .hero-phone a { color: var(--paper); }

/* ---------- header logo lockup ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 11px; }
.wm-icon { display: block; flex: none; }
.wm-lines { display: flex; flex-direction: column; line-height: 1.05; }
.wm-top {
  font-family: "Anek Latin", sans-serif; font-weight: 700;
  font-size: 1.02rem; letter-spacing: 0.02em; color: var(--ink); text-transform: uppercase;
}
.wm-red { color: var(--margin-red); }
.wm-sub { font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em; }
:lang(ta) .wm-top { text-transform: none; }
@media (max-width: 420px) {
  .wm-top { font-size: 0.9rem; }
  .wm-sub { font-size: 0.62rem; }
}

/* ---------- WhatsApp green buttons ---------- */
.sticky-bar a.js-wa {
  background: #25D366; color: #08351a; border-color: #1da851; font-weight: 700;
}
.sticky-bar a.js-wa:hover { background: #1ebe5a; }

/* ---------- floating WhatsApp widget ---------- */
.wa-fab {
  position: fixed; right: 18px; bottom: 78px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: #25D366; color: #fff; display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  animation: wa-pop 0.4s ease-out;
}
@media (min-width: 701px) { .wa-fab { bottom: 22px; } }
.wa-fab:hover { background: #1ebe5a; }
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,0.55); animation: wa-pulse 2.4s infinite;
}
@keyframes wa-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,0.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@keyframes wa-pop { from{transform:scale(0);opacity:0;} to{transform:scale(1);opacity:1;} }

.wa-card {
  position: fixed; right: 18px; bottom: 146px; z-index: 71;
  width: min(320px, calc(100vw - 36px)); background: var(--card);
  border-radius: 14px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,0.3);
  display: none; animation: wa-pop 0.22s ease-out;
}
@media (min-width: 701px) { .wa-card { bottom: 90px; } }
.wa-card.open { display: block; }
.wa-fab.open::after { animation: none; }
.wa-head { background: #075E54; color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.wa-head img { width: 34px; height: 40px; background: #fbfaf5; border-radius: 6px; padding: 2px; }
.wa-head .wa-name { font-weight: 700; font-size: 0.95rem; }
.wa-head .wa-status { font-size: 0.72rem; opacity: 0.85; }
.wa-head .wa-x { margin-left: auto; background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 4px; }
.wa-body { background: #ece5dd; padding: 18px 14px; }
.wa-bubble {
  background: #fff; border-radius: 0 10px 10px 10px; padding: 11px 13px;
  font-size: 0.9rem; color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,0.08); max-width: 90%;
}
.wa-bubble .wa-time { display: block; font-size: 0.64rem; color: #7c8a91; text-align: right; margin-top: 4px; }
.wa-start {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px; padding: 12px; border-radius: 8px; background: #25D366; color: #08351a;
  font-weight: 700; text-decoration: none; min-height: 44px;
}
.wa-start:hover { background: #1ebe5a; }
.wa-start svg { width: 20px; height: 20px; }

/* ---------- WhatsApp inline buttons (hero / demo band / header / footer) ---------- */
.btn-wa {
  background: #25D366; color: #08351a !important; border: 2px solid #1da851;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-wa:hover { background: #1ebe5a; }
.cta-band .btn-wa { color: #08351a !important; }
.nav-wa {
  background: #25D366; color: #08351a !important; border-radius: 5px;
  padding: 8px 14px; font-weight: 700; text-decoration: none !important;
  font-size: 0.95rem; min-height: 44px; display: inline-flex; align-items: center;
}
.nav-wa:hover { background: #1ebe5a; }
@media (max-width: 700px) { .nav-wa { display: none; } } /* sticky bar + fab cover mobile */
.footer-wa {
  display: inline-flex; align-items: center; background: #25D366; color: #08351a !important;
  padding: 8px 14px; border-radius: 6px; font-weight: 700; text-decoration: none;
}
.footer-wa:hover { background: #1ebe5a; }

/* ---------- mobile sticky bar: fit Call · WhatsApp · Free Demo at 360px ---------- */
@media (max-width: 400px) {
  .sticky-bar { gap: 6px; padding: 7px 8px; }
  .sticky-bar a { font-size: 0.82rem; padding: 8px 4px; }
}

/* ---------- global overflow guard (fixes Tamil homepage horizontal scroll) ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.trust-labels { max-width: 100%; }
.trust-labels span { white-space: nowrap; }
:lang(ta) .hero h1, :lang(ta) .hero p.lead { overflow-wrap: break-word; word-break: normal; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
.faq-item { border: 1px solid var(--rule); border-radius: 8px; background: var(--card); margin-bottom: 10px; }
.faq-item summary {
  cursor: pointer; padding: 15px 18px; font-weight: 600; color: var(--ink);
  list-style: none; position: relative; padding-right: 42px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 18px; top: 13px; font-size: 1.4rem; color: var(--margin-red); font-weight: 700;
}
.faq-item[open] summary::after { content: "−"; }
.faq-a { padding: 0 18px 16px; color: var(--ink-soft); }
.faq-item summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

/* ---------- industries 6-up grid ---------- */
.needs-6 { grid-template-columns: repeat(3, 1fr); }
.needs-6 .need { border-top-color: var(--erp); }
@media (max-width: 900px) { .needs-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .needs-6 { grid-template-columns: 1fr; } }

/* ---------- product evidence (revealed only when real assets added) ---------- */
.evidence-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.evidence-frame { margin: 0; }
.evidence-ph {
  border: 2px dashed var(--rule); border-radius: 8px; background: var(--paper);
  min-height: 190px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; text-align: center; padding: 16px; color: var(--ink-soft);
}
.evidence-ph span { font-weight: 700; color: var(--ink); }
.evidence-ph small { font-size: 0.82rem; }
@media (max-width: 700px){ .evidence-grid { grid-template-columns: 1fr; } }

/* ---------- mobile navigation (hamburger + slide-down menu) ---------- */
.nav-toggle { display: none; }
.nav-toggle-bars { display: block; width: 26px; height: 18px; position: relative; }
.nav-toggle-bars span {
  position: absolute; left: 0; height: 3px; width: 100%; background: var(--ink);
  border-radius: 3px; transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 7.5px; }
.nav-toggle-bars span:nth-child(3) { top: 15px; }
.nav.open .nav-toggle-bars span:nth-child(1) { top: 7.5px; transform: rotate(45deg); }
.nav.open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle-bars span:nth-child(3) { top: 7.5px; transform: rotate(-45deg); }

@media (max-width: 700px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 46px; height: 46px; border: 1.5px solid var(--ink);
    border-radius: 8px; background: var(--card); cursor: pointer;
  }
  .nav-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 2px solid var(--ink);
    box-shadow: 0 14px 28px rgba(0,0,0,0.16);
    padding: 6px 16px 18px; max-height: 0; overflow: hidden;
    opacity: 0; visibility: hidden; transition: max-height .28s ease, opacity .2s ease, visibility .2s;
  }
  .nav.open .nav-links { max-height: 86vh; overflow-y: auto; opacity: 1; visibility: visible; }

  .nav-links a { padding: 13px 6px; border-bottom: 1px dashed var(--rule); font-size: 1.02rem; }
  .nav-links a:last-child { border-bottom: 0; }

  /* WhatsApp + Call become prominent full-width buttons in the mobile menu */
  .nav-links .nav-wa {
    display: flex !important; justify-content: center; align-items: center; gap: 8px;
    margin-top: 12px; border-radius: 8px; padding: 13px; font-size: 1.02rem;
    border-bottom: 0; min-height: 48px;
  }
  .nav-links .nav-wa::before {
    content: ""; width: 20px; height: 20px; flex: none;
    background: currentColor; -webkit-mask: var(--wa-mask) center/contain no-repeat; mask: var(--wa-mask) center/contain no-repeat;
  }
  .nav-links .nav-call {
    display: flex !important; justify-content: center; margin-top: 10px;
    border-radius: 8px; padding: 13px; font-size: 1.02rem; border-bottom: 0; min-height: 48px;
  }
  .nav-links .lang-switch { margin-top: 12px; text-align: center; border-bottom: 0; }
}
:root {
  --wa-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="black" d="M16 3C9.4 3 4 8.3 4 14.9c0 2.3.7 4.5 1.9 6.4L4 29l7-1.8c1.8 1 3.9 1.5 6 1.5 6.6 0 12-5.3 12-11.9C29 8.3 22.6 3 16 3z"/></svg>');
}

/* ---------- mobile logo: smaller + aligned with hamburger ---------- */
@media (max-width: 700px) {
  .nav { flex-wrap: nowrap; gap: 10px; }
  .wordmark { gap: 8px; }
  .wm-icon { width: 26px; height: 31px; }
  .wm-top { font-size: 0.86rem; }
  .wm-sub { font-size: 0.58rem; }
}
@media (max-width: 360px) {
  .wm-top { font-size: 0.8rem; }
  .wm-sub { font-size: 0.55rem; }
}

/* ---------- expanded footer ---------- */
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; gap: 30px; }
.foot-brand p { font-size: 0.92rem; }
.foot-ind { columns: 1; }
footer.site h3 { font-size: 0.98rem; margin-bottom: 10px; color: var(--ink); }
footer.site ul { list-style: none; }
footer.site li { margin-bottom: 7px; }
footer.site a { color: var(--ink-soft); }
footer.site a:hover { color: var(--ink); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- industries chips + mobile block ---------- */
.needs-ind .need { border-top-color: var(--erp); min-height: auto; }
.ind-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ind-chip {
  display: inline-block; background: var(--card); border: 1px solid var(--rule);
  border-radius: 999px; padding: 6px 14px; font-size: 0.88rem; color: var(--ink-soft);
}

/* ---------- refinement: smaller aligned mobile logo + even 4-col footer ---------- */
@media (max-width: 700px) {
  .nav { align-items: center; }
  .wm-icon { width: 22px; height: 26px; }
  .wm-top { font-size: 0.78rem; line-height: 1.1; }
  .wm-sub { font-size: 0.54rem; line-height: 1.1; }
  .wordmark { gap: 7px; align-items: center; }
  .nav-toggle { width: 42px; height: 42px; }
}
@media (max-width: 360px) {
  .wm-icon { width: 20px; height: 24px; }
  .wm-top { font-size: 0.72rem; }
  .wm-sub { font-size: 0.5rem; }
}

/* Desktop footer: even 4-column grid, aligned columns */
@media (min-width: 901px) {
  .foot-grid { grid-template-columns: repeat(4, 1fr); gap: 36px; align-items: start; }
  .foot-grid > div { min-width: 0; }
  footer.site h3 { font-size: 1rem; letter-spacing: 0.01em; }
  footer.site ul { line-height: 1.5; }
}

/* ---------- demo request modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,26,32,0.55); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card); border-radius: 14px; max-width: 440px; width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35); position: relative; overflow: hidden;
  animation: wa-pop .22s ease-out; max-height: 92vh; overflow-y: auto;
}
.modal-head { background: var(--ink); color: #fff; padding: 18px 22px; }
.modal-head h2 { color: #fff; font-size: 1.2rem; margin: 0; }
.modal-head p { color: #cfd6dd; font-size: 0.86rem; margin-top: 4px; }
.modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 4px; }
.modal-body { padding: 20px 22px 22px; }
.modal-body label { display: block; font-weight: 600; font-size: 0.9rem; margin: 12px 0 5px; color: var(--ink); }
.modal-body input, .modal-body select {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--rule); border-radius: 7px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink); min-height: 44px;
}
.modal-body input:focus, .modal-body select:focus { outline: none; border-color: var(--focus); }
.modal-err { color: var(--margin-red); font-size: 0.82rem; margin-top: 5px; display: none; }
.modal-body input.invalid, .modal-body select.invalid { border-color: var(--margin-red); }
.modal-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.modal-actions a, .modal-actions button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 8px; font-weight: 700; font-size: 1rem; min-height: 48px;
  text-decoration: none; border: 2px solid var(--ink); cursor: pointer; font-family: inherit;
}
.modal-wa { background: #25D366; color: #08351a; border-color: #1da851; }
.modal-wa:hover { background: #1ebe5a; }
.modal-mail { background: var(--ink); color: #fff; }
.modal-call { background: transparent; color: var(--ink); }
.modal-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 12px; text-align: center; }

/* ---------- trusted-by client wall ---------- */
.trusted { text-align: center; }
.trusted .section-sub { margin-left: auto; margin-right: auto; }
.client-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.client-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--rule); border-radius: 8px; padding: 12px 18px;
  font-weight: 700; color: var(--ink); font-size: 0.95rem;
}
.client-chip img { width: 20px; height: 20px; border-radius: 3px; }

/* ---------- illustrative product mockups ---------- */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shot { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #fff; }
.shot img { display: block; width: 100%; }
.shot figcaption { padding: 10px 14px; font-size: 0.85rem; color: var(--ink-soft); border-top: 1px solid var(--rule); }
.illus-note { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; margin-top: 12px; }
@media (max-width: 700px) { .shots { grid-template-columns: 1fr; } }

/* ---------- FINAL mobile header: small logo, dead-centre with hamburger ---------- */
@media (max-width: 700px) {
  header.site .nav { align-items: center; flex-wrap: nowrap; gap: 10px; }
  .wordmark { align-items: center; gap: 7px; }
  .wm-lines { justify-content: center; }
  .wm-icon { width: 19px; height: 23px; }
  .wm-top { font-size: 0.72rem; line-height: 1.15; }
  .wm-sub { font-size: 0.5rem; line-height: 1.15; }
  .nav-toggle { width: 40px; height: 40px; flex: none; }
}
@media (max-width: 360px) {
  .wm-icon { width: 17px; height: 20px; }
  .wm-top { font-size: 0.66rem; }
  .wm-sub { font-size: 0.46rem; }
}