/* Sales Counter demo site. Rebrand by changing :root. */
:root { --ink:#0b1220; --ink2:#16233b; --blue:#3b5bff; --amber:#ffb020; --mint:#1fcfa3; --paper:#f5f6fa; --line:#e3e6ee; --text:#14203a; --muted:#5a6478; --bad:#d92d20; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--paper); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow-x:hidden; }
h1,h2,h3,p,ul,ol { margin:0; }
h1 { font-size:clamp(2.5rem,6vw,4.4rem); line-height:1; letter-spacing:-.04em; color:#fff; }
h1 mark { background:none; color:var(--amber); position:relative; white-space:nowrap; }
h1 mark::after { content:""; position:absolute; left:0; right:0; bottom:-.08em; height:.14em; border-radius:9px; background:var(--amber); transform-origin:left; animation:draw 1s .5s both; }
h2 { font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.03em; text-align:center; margin-bottom:40px; }
h2.left { text-align:left; margin-bottom:16px; }
h3 { font-size:1.08rem; margin-bottom:6px; }
a { color:var(--blue); }
code { background:rgba(127,127,127,.22); padding:1px 6px; border-radius:4px; font-size:.9em; }
.lead { font-size:1.15rem; color:var(--muted); max-width:58ch; }
.center { text-align:center; }
.fine { margin-top:14px; font-size:.85rem; color:var(--muted); } .fine--light { color:#8fa0bf; }
.eyebrow { text-align:center; margin-bottom:10px; font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.split .eyebrow, .band .eyebrow { text-align:left; } .eyebrow--light { color:var(--amber); }

.btn { display:inline-block; padding:11px 20px; border:1px solid transparent; border-radius:10px; font-weight:700; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translateY(-2px); }
.btn:focus-visible,summary:focus-visible,nav a:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.btn--lg { padding:14px 26px; font-size:1.05rem; }
.btn--amber { background:var(--amber); color:var(--ink); box-shadow:0 8px 24px rgba(255,176,32,.35); }
.btn--glass { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); }
.btn--ghost { background:#fff; border-color:#cdd3df; color:var(--text); }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:28px; padding:14px 6vw; background:rgba(11,18,32,.88); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; color:#fff; text-decoration:none; }
.brand__mark { display:inline-flex; align-items:flex-end; gap:3px; height:22px; }
.brand__mark i { width:4px; background:#fff; border-radius:2px; }
.brand__mark i:nth-child(1){height:10px} .brand__mark i:nth-child(2){height:16px} .brand__mark i:nth-child(3){height:22px} .brand__mark i:nth-child(4){height:13px;background:var(--amber)}
.top nav { display:flex; gap:24px; margin-left:auto; } .top nav a { color:#c9d2e3; text-decoration:none; font-weight:600; } .top nav a:hover { color:#fff; }

/* Hero */
.hero { position:relative; overflow:hidden; background:radial-gradient(circle at 80% 10%,#1d3a8a 0,transparent 45%),var(--ink); background-image:radial-gradient(circle at 80% 10%,rgba(59,91,255,.45),transparent 45%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size:auto,26px 26px; background-color:var(--ink); }
.tally { position:absolute; inset:auto 0 0 0; height:70%; display:flex; align-items:flex-end; gap:1.2%; padding:0 3%; opacity:.28; pointer-events:none; }
.tally i { flex:1; height:calc(var(--h) * 1%); border-radius:6px 6px 0 0; background:linear-gradient(var(--blue),transparent); transform-origin:bottom; animation:rise 1.2s both; }
.tally i:nth-child(odd){animation-delay:.15s} .tally i:nth-child(3n){animation-delay:.3s} .tally i:nth-child(4n){animation-delay:.45s} .tally i:last-child{background:linear-gradient(var(--amber),transparent)}
.hero__in { position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; max-width:1240px; margin:0 auto; padding:84px 6vw 96px; }
.pill { display:inline-block; padding:5px 14px; margin-bottom:20px; border-radius:999px; background:rgba(255,176,32,.14); color:var(--amber); border:1px solid rgba(255,176,32,.4); font-weight:700; font-size:.85rem; }
.hero .lead { margin-top:22px; color:#b6c2dc; }
.trust { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 0; padding:0; list-style:none; }
.trust li { padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.08); color:#c9d2e3; font-size:.85rem; }
.trust li::before { content:"✓ "; color:var(--mint); }

/* Counter look, same as the plugin */
.box { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:8px 0; }
.chip { display:inline-block; padding:6px 12px; border-radius:8px; background:#f1f5f9; color:#1f2937; font-size:14px; line-height:1.35; }
.chip b { font-weight:800; font-variant-numeric:tabular-nums; }
.chip--trend { background:#fef3c7; color:#92400e; font-weight:600; }
.chip--low { background:none; padding-left:0; color:var(--bad); font-weight:700; }
@property --n { syntax:"<integer>"; initial-value:0; inherits:false; }
.count { --n:128; counter-reset:n var(--n); animation:count 2.4s .6s ease-out both; }
.count::after { content:counter(n); }

.hero__visual { position:relative; min-height:430px; }
.card { position:absolute; width:56%; padding:14px; background:#fff; border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.45); }
.card--a { left:0; top:0; transform:rotate(-5deg); animation:float 6s ease-in-out infinite; }
.card--b { right:0; top:70px; transform:rotate(4deg); animation:float 7s -2s ease-in-out infinite; }
.card__img { aspect-ratio:1.15; margin-bottom:12px; border-radius:10px; background:linear-gradient(135deg,#ffd58a,#ff9a62); }
.card__img--2 { background:linear-gradient(135deg,#9fc1ff,#6c7cff); }
.card__title { font-weight:700; } .card__price { color:var(--muted); }
.popup { position:absolute; left:6%; bottom:0; display:flex; align-items:center; gap:10px; max-width:310px; padding:10px 14px; background:#fff; border-radius:14px; font-size:13px; line-height:1.4; box-shadow:0 18px 40px rgba(0,0,0,.4); animation:pop 7s 1.5s infinite; }
.popup__img { flex:none; width:44px; height:44px; border-radius:8px; background:linear-gradient(135deg,#7be0c3,#1fcfa3); }
.popup small { display:block; opacity:.6; }

.marquee { overflow:hidden; background:var(--amber); color:var(--ink); transform:rotate(-1deg); margin:-14px -2% 0; position:relative; z-index:2; box-shadow:0 8px 24px rgba(0,0,0,.2); }
.marquee__in { display:flex; gap:28px; width:max-content; padding:14px 0; font-weight:800; letter-spacing:.06em; animation:slide 28s linear infinite; }

.section { max-width:1120px; margin:0 auto; padding:92px 6vw; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature { padding:28px; background:#fff; border:1px solid var(--line); border-radius:16px; transition:transform .2s, box-shadow .2s; }
.feature:hover { transform:translateY(-6px); box-shadow:0 24px 40px rgba(20,32,58,.12); }
.feature p { color:var(--muted); }
.ico { display:grid; place-items:center; width:48px; height:48px; margin-bottom:16px; border-radius:14px; font-size:1.4rem; }
.ico--blue{background:#e4e9ff} .ico--amber{background:#fff0cf} .ico--mint{background:#d5f7ec} .ico--rose{background:#ffe1e6}
.tag { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:#e4e9ff; color:#2437b8; font-size:.7rem; font-weight:800; vertical-align:2px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.checks { margin:22px 0 0; padding:0; list-style:none; } .checks li { padding:5px 0; font-weight:600; } .checks li::before { content:"✓"; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:10px; border-radius:50%; background:var(--mint); color:var(--ink); font-size:.8rem; }
.result { padding:28px; background:#fff; border-radius:20px; border:1px solid var(--line); box-shadow:0 30px 60px rgba(20,32,58,.14); transform:rotate(1.5deg); }
.verdict { padding:14px 16px; border-radius:12px; background:#dcf8ee; color:#0b5d42; font-weight:700; }
.bars2 { margin-top:22px; display:grid; gap:14px; } .bars2 span { display:block; font-size:.85rem; color:var(--muted); margin-bottom:4px; }
.bars2 b { display:block; width:var(--w); padding:10px 14px; border-radius:10px; background:var(--blue); color:#fff; font-size:1.2rem; animation:grow 1.4s both; } .bars2 .b2 { background:#c4cbe0; color:var(--ink); }

.band { display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; padding:92px 6vw; background:linear-gradient(135deg,var(--ink),#142a66); color:#c9d2e3; }
.band__in { max-width:540px; justify-self:end; } .band h2 { color:#fff; } .band .lead { color:#aebbd6; }
.steps { margin:22px 0 0; padding-left:22px; } .steps li { padding:5px 0; } .steps b { color:#fff; }
.browser { border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 40px 80px rgba(0,0,0,.5); transform:rotate(-1.5deg); }
.browser__bar { display:flex; align-items:center; gap:7px; padding:12px 14px; background:#e9ecf3; } .browser__bar i { width:11px; height:11px; border-radius:50%; background:#c4cadb; } .browser__bar span { margin-left:12px; padding:2px 14px; border-radius:6px; background:#fff; color:var(--muted); font-size:.8rem; }
.shot { display:grid; place-items:center; min-height:300px; color:#8b97b0; background:repeating-linear-gradient(135deg,#f3f5fa 0 14px,#fff 14px 28px); text-align:center; padding:20px; }
.browser__body img { display:block; width:100%; }

.table-wrap { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:16px; }
table { width:100%; border-collapse:collapse; } th,td { padding:15px 20px; text-align:center; border-top:1px solid var(--line); }
thead th { border-top:0; background:#f0f2f8; font-size:.85rem; color:var(--muted); } th:first-child,td:first-child { text-align:left; }
td:not(:first-child) { color:#0e9a6e; font-weight:800; } td.no { color:#aab2c4; }

.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:center; }
.plan { position:relative; display:flex; flex-direction:column; align-items:center; padding:36px 24px; background:#fff; border:1px solid var(--line); border-radius:18px; text-align:center; }
.plan--hot { background:var(--ink); color:#fff; border:0; padding:48px 24px; transform:scale(1.04); box-shadow:0 30px 60px rgba(11,18,32,.4); }
.tag--hot { position:absolute; top:-13px; margin:0; padding:4px 14px; background:var(--amber); color:var(--ink); font-size:.75rem; }
.price { margin:14px 0 2px; font-size:3.4rem; font-weight:800; letter-spacing:-.04em; line-height:1; } .price small { font-size:1rem; font-weight:500; opacity:.6; letter-spacing:0; }
.alt { margin-bottom:24px; opacity:.7; } .plan .btn { width:100%; margin-top:auto; }

.faq { max-width:800px; } details { background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; }
summary { padding:18px 22px; font-weight:700; cursor:pointer; } details p { padding:0 22px 20px; color:var(--muted); } details[open] { border-color:var(--blue); }
.cta { padding:84px 6vw; text-align:center; color:#fff; background:radial-gradient(circle at 20% 0,#5b78ff,transparent 50%),var(--blue); } .cta h2 { color:#fff; margin-bottom:26px; }
footer { padding:30px 6vw; text-align:center; color:var(--muted); font-size:.9rem; }

@keyframes draw { from{transform:scaleX(0)} } @keyframes rise { from{transform:scaleY(0)} } @keyframes grow { from{width:0} }
@keyframes count { from{--n:0} } @keyframes slide { to{transform:translateX(-50%)} } @keyframes float { 50%{translate:0 -12px} }
@keyframes pop { 0%{opacity:0;transform:translateY(20px)} 8%,70%{opacity:1;transform:none} 80%,100%{opacity:0;transform:translateY(20px)} }

@media (max-width:900px) {
  .hero__in,.band,.split { grid-template-columns:1fr; } .band__in { justify-self:start; }
  .grid,.plans { grid-template-columns:1fr; } .plan--hot { transform:none; }
  .top nav { display:none; } .top .btn { margin-left:auto; }
  .hero__in { padding:48px 6vw 64px; } .hero__visual { min-height:400px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } html { scroll-behavior:auto; } }

/* More features: spotlights, panels, code card, works-with */
.spots .eyebrow { text-align:center; }
.spot { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:36px 0; }
.spot--rev > :first-child { order:2; }
.spot__h { font-size:1.7rem; letter-spacing:-.03em; line-height:1.15; margin-bottom:12px; }
.panel { padding:28px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 30px 60px rgba(20,32,58,.12); }
.spot:nth-of-type(odd) .panel { transform:rotate(1.2deg); } .spot:nth-of-type(even) .panel { transform:rotate(-1.2deg); }
.seg { display:inline-flex; padding:3px; gap:2px; border-radius:10px; background:#eceff4; margin-bottom:20px; }
.seg span { padding:6px 14px; border-radius:8px; font-weight:700; font-size:.85rem; color:var(--muted); } .seg .on { background:#fff; color:var(--text); box-shadow:0 0 0 1px var(--line); }
.demo-chips { display:flex; flex-wrap:wrap; gap:12px; }
.chip--pill { border-radius:999px; background:#e4e9ff; } .chip--outline { background:none; border:1.5px solid #1f2937; } .chip--min { background:none; padding-left:0; } .chip--gold { background:#fef3c7; color:#92400e; font-weight:700; }
.kpi { font-size:3.4rem; font-weight:800; letter-spacing:-.04em; line-height:1; } .kpi small { display:block; margin-top:6px; font-size:.9rem; font-weight:500; letter-spacing:0; color:var(--muted); }
.mini { display:flex; align-items:flex-end; gap:8px; height:120px; margin-top:20px; } .mini i { flex:1; height:calc(var(--h) * 1%); border-radius:6px 6px 0 0; background:var(--blue); } .mini i:last-child { background:var(--amber); }
.stock { margin-top:16px; max-width:320px; font-size:.9rem; } .stock i { display:block; height:9px; margin-top:6px; border-radius:99px; background:#e3e6ee; overflow:hidden; } .stock b { display:block; width:85%; height:100%; background:var(--blue); border-radius:inherit; }
.code { padding:26px 28px; border-radius:18px; background:var(--ink); color:#e6ecff; font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; box-shadow:0 30px 60px rgba(11,18,32,.35); }
.code p + p { margin-top:14px; } .code .c { color:#7f90b3; }
.works { max-width:1120px; margin:0 auto; padding:10px 6vw 70px; text-align:center; } .works p { margin-bottom:14px; font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.works ul { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0; padding:0; list-style:none; } .works li { padding:8px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:650; font-size:.9rem; }
@media (max-width:900px) { .spot { grid-template-columns:1fr; gap:28px; } .spot--rev > :first-child { order:0; } .panel { transform:none !important; } }