/* ============ HERO ============ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(242,122,26,.10), transparent 60%),
    radial-gradient(1000px 520px at 0% 0%, rgba(11,61,145,.10), transparent 60%),
    linear-gradient(180deg,#ffffff 0%, #f5f8ff 100%);
  padding:calc(var(--header-h) + 64px) 0 var(--s20);
}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s16); align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr; gap:var(--s12)}}
.hero h1{font-size:clamp(36px, 5.2vw, 68px); line-height:1.04; margin-bottom:var(--s5)}
.hero h1 .grad{
  background:linear-gradient(90deg,var(--blue-700),var(--blue-500) 40%,var(--orange-500) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{font-size:clamp(16px,1.4vw,19px); margin-bottom:var(--s6)}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:var(--s8)}
.hero-trust{display:flex; flex-wrap:wrap; gap:24px; align-items:center; color:var(--muted); font-size:var(--fs-13)}
.hero-trust strong{color:var(--ink)}
.hero-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s6)}

.hero-visual{
  position:relative;
}
.hero-shot{
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-xl); border:1px solid var(--line);
  background:#fff; aspect-ratio:16/11;
}
.hero-shot img{width:100%; height:100%; object-fit:cover}
.hero-float{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 14px; box-shadow:var(--sh-md); display:flex; gap:10px; align-items:center;
  font-size:var(--fs-13); color:var(--ink-2); font-weight:600;
}
.hero-float .dot{width:8px; height:8px; border-radius:50%; background:var(--ok)}
.hero-float.f1{top:16px; left:-24px}
.hero-float.f2{bottom:24px; right:-24px}
@media (max-width:600px){.hero-float{display:none}}

/* ============ Logos strip ============ */
.logos{padding:var(--s12) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2)}
.logos p{text-align:center; font-size:var(--fs-13); color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s6)}
.logo-row{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s8); align-items:center; opacity:.85}
@media (max-width:800px){.logo-row{grid-template-columns:repeat(3,1fr)}}
.logo-row .cell{height:34px; background:var(--line-2); border-radius:8px}

/* ============ Feature grid sections ============ */
.feature-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); display:flex; flex-direction:column; gap:var(--s3);
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.feature-card:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--blue-100)}
.feature-card .ic{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--blue-50); color:var(--blue-700); margin-bottom:var(--s2);
}
.feature-card.alt .ic{background:var(--orange-50); color:var(--orange-600)}
.feature-card h3{margin:0; font-size:var(--fs-18)}
.feature-card p{margin:0; color:var(--body); font-size:var(--fs-14)}

/* ============ Split / alternating sections ============ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s16); align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:var(--s10)}}
.split.reverse .split-visual{order:2}
@media (max-width:900px){.split.reverse .split-visual{order:0}}
.split-visual{
  border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line);
  background:#fff; box-shadow:var(--sh-lg);
}
.split-visual img{aspect-ratio:4/3; width:100%; object-fit:cover}
.checklist{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.checklist li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:var(--fs-15)}
.checklist svg{flex:none; margin-top:2px; color:var(--blue-700)}

/* ============ Feature tabs (Features page) ============ */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s8); border-bottom:1px solid var(--line); padding-bottom:var(--s4)}
.tab{
  padding:10px 14px; border-radius:10px; border:1px solid transparent; background:transparent;
  cursor:pointer; font-weight:600; font-size:var(--fs-14); color:var(--ink-2);
}
.tab:hover{background:var(--bg-2)}
.tab.active{background:var(--blue-50); color:var(--blue-700); border-color:var(--blue-100)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ============ Solutions ============ */
.solution-card{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff;
  display:flex; flex-direction:column; transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.solution-card:hover{transform:translateY(-3px); box-shadow:var(--sh-md)}
.solution-card .media{aspect-ratio:16/10; background:linear-gradient(135deg,var(--blue-100),#f3e6d6); position:relative; overflow:hidden}
.solution-card .media img{width:100%; height:100%; object-fit:cover}
.solution-card .body{padding:var(--s5)}
.solution-card h3{margin:0 0 6px; font-size:var(--fs-18)}
.solution-card p{margin:0; color:var(--body); font-size:var(--fs-14)}

/* ============ POS marketing ============ */
.pos-hero{background:linear-gradient(180deg,#061d47 0%, #0B3D91 100%); color:#fff; border-radius:var(--r-2xl); padding:var(--s16); position:relative; overflow:hidden}
.pos-hero::before{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; background:radial-gradient(closest-side, rgba(242,122,26,.35), transparent 70%)}
.pos-hero h2{color:#fff}
.pos-hero p{color:#cfd9ef}
.pos-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s16); align-items:center; position:relative; z-index:1}
@media (max-width:900px){.pos-grid{grid-template-columns:1fr}}
.pos-shot{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-xl); border:1px solid rgba(255,255,255,.12)}

/* ============ Pricing ============ */
.pricing-toggle{display:inline-flex; padding:4px; background:var(--bg-3); border-radius:var(--r-pill); margin:0 auto var(--s10); gap:4px}
.pricing-toggle button{
  border:0; background:transparent; padding:9px 18px; border-radius:var(--r-pill); cursor:pointer;
  font-weight:600; color:var(--ink-2); font-size:var(--fs-14);
}
.pricing-toggle button.active{background:#fff; color:var(--blue-700); box-shadow:var(--sh-xs)}
.plan{
  max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-2xl); padding:var(--s10) var(--s10) var(--s8);
  box-shadow:var(--sh-lg); position:relative;
}
.plan::before{
  content:"MOST POPULAR"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--orange-500); color:#fff; font-size:11px; letter-spacing:.14em; font-weight:800;
  padding:6px 12px; border-radius:var(--r-pill);
}
.plan h3{margin:0 0 4px; font-size:var(--fs-24)}
.plan .desc{color:var(--muted); margin:0 0 var(--s6)}
.plan .price{display:flex; align-items:flex-end; gap:10px; margin-bottom:var(--s6)}
.plan .price .amount{font-size:clamp(40px,6vw,56px); font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1}
.plan .price .cur{font-weight:700; color:var(--muted); padding-bottom:6px}
.plan .price .per{color:var(--muted); padding-bottom:8px}
.plan .feat-list{list-style:none; padding:0; margin:0 0 var(--s6); display:grid; grid-template-columns:1fr 1fr; gap:10px 20px}
@media (max-width:600px){.plan .feat-list{grid-template-columns:1fr}}
.plan .feat-list li{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-14); color:var(--ink-2)}
.plan .feat-list svg{flex:none; margin-top:3px; color:var(--ok)}
.plan .cta{margin-top:var(--s4)}

/* ============ FAQ ============ */
.faq{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  padding:var(--s5) var(--s6); cursor:pointer; font-weight:600; color:var(--ink); font-size:var(--fs-15);
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:800; color:var(--blue-700); font-size:20px; transition:transform var(--dur-2) var(--ease)}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 var(--s6) var(--s5); color:var(--body); font-size:var(--fs-14); max-width:80ch}

/* ============ Testimonials ============ */
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); box-shadow:var(--sh-xs);
}
.quote .stars{color:var(--orange-500); font-size:var(--fs-14); letter-spacing:2px}
.quote p{margin:0; color:var(--ink-2); font-size:var(--fs-15)}
.quote .who{display:flex; gap:12px; align-items:center; margin-top:auto}
.quote .who .av{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--blue-500),var(--blue-700))}
.quote .who small{display:block; color:var(--muted)}

/* ============ Final CTA ============ */
.final-cta{
  background:linear-gradient(135deg,var(--blue-800) 0%,var(--blue-700) 60%,var(--blue-600) 100%);
  color:#fff; border-radius:var(--r-2xl); padding:var(--s16); text-align:center;
  position:relative; overflow:hidden;
}
.final-cta::before{content:""; position:absolute; right:-180px; bottom:-180px; width:480px; height:480px; background:radial-gradient(closest-side, rgba(242,122,26,.35), transparent 70%)}
.final-cta h2{color:#fff; position:relative; z-index:1}
.final-cta p{color:#cfd9ef; max-width:64ch; margin-left:auto; margin-right:auto; position:relative; z-index:1}
.final-cta .ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:var(--s4); position:relative; z-index:1}