/* POS Solutions Agency — minimal, modern CSS */
/* Base + tokens */
:root{
  --bg:#0b1020;
  --surface:#10172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#14b8a6;
  --accent:#6366f1;
  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.btn{display:inline-block; padding:12px 18px; border-radius:14px; font-weight:600; text-decoration:none; background:linear-gradient(90deg,var(--brand),var(--accent)); color:#0b1020; box-shadow:var(--shadow); transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.outline{background:transparent;color:var(--text); border:1px solid rgba(255,255,255,.12)}
.card{background:linear-gradient(180deg, #0f172a, #0b1225); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}
.section{padding:70px 0}
.kicker{letter-spacing:.2em; font-size:.8rem; color:var(--muted); text-transform:uppercase}
h1,h2,h3{line-height:1.2; margin:0 0 12px}
h1{font-size:clamp(1.8rem,1.2rem + 2.5vw,3rem)}
h2{font-size:clamp(1.4rem,1rem + 1.5vw,2rem)}
.lead{font-size:1.15rem; color:#cbd5e1}
/* Header */
header{position:sticky;top:0;z-index:50; background:rgba(11,16,32,.65); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.nav a.logo{display:flex; align-items:center; gap:12px}
.nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0;    align-items: center;}
.nav a.link{color:#e5e7eb; padding:8px 10px; border-radius:10px}
.nav a.link:hover{background:rgba(255,255,255,.06)}
#menuToggle{display:none}
@media (max-width:800px){
  #menuToggle{display:block}
  .nav ul{display:none}
  .nav.open ul{display:flex; flex-direction:column; position:absolute; top:60px; right:20px; background:#0f172a; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.1)}
}
/* Hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08)}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.35), transparent), radial-gradient(800px 400px at 90% 10%, rgba(20,184,166,.25), transparent)}
.hero .bg{position:absolute; inset:0; opacity:.5;     width: -webkit-fill-available;}
.hero .wrap{position:relative; padding:80px 20px}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#cbd5e1; padding:6px 10px; border-radius:999px; font-size:.85rem}
/* Forms */
form{display:grid; gap:12px}
.input, textarea, select{width:100%; padding:12px 14px; border-radius:12px; background:#0b1328; border:1px solid rgba(255,255,255,.12); color:#e5e7eb}
.input:focus, textarea:focus, select:focus{outline:2px solid var(--accent); border-color:transparent}
.form-row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (max-width:720px){.form-row{grid-template-columns:1fr}}
small.help{color:#94a3b8}
/* Footer */
footer{border-top:1px solid rgba(255,255,255,.08); background:#0b1020; padding:50px 0}
.footer-cols{display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr 1fr}
@media (max-width:900px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-cols{grid-template-columns:1fr}}
.copy{color:#94a3b8; font-size:.9rem; margin-top:18px}
/* Utility */
.m-0{margin:0}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}
.p-0{padding:0}.pt-2{padding-top:8px}.pt-4{padding-top:16px}.pt-6{padding-top:24px}.pt-8{padding-top:32px}.pt-10{padding-top:40px}
.center{text-align:center}
.hidden{display:none}
.success{color:var(--ok)} .error{color:var(--err)}
/* Animations */
.reveal{opacity:0; transform:translateY(10px); transition:all .5s ease}
.reveal.show{opacity:1; transform:none}