/* SunnyPOS site styles */
:root{
  --mint:#2ecc71;
  --orderup:#ff9f1c;
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#f9fafb;
  --ring:rgba(31,41,55,.08);
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 "Segoe UI", SegoeUI, "Helvetica Neue", Arial, system-ui, -apple-system, Roboto, Ubuntu, Cantarell, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto;border-radius:12px}
.wrap{max-width:1200px;margin:0 auto;padding:16px}

/* Header */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--ring);}
.topbar .inner{display:flex;flex-direction:column;align-items:center;padding:14px 16px;}
.brand{font-weight:800;font-size:22px}
.tagline{font-size:14px;color:var(--muted);margin-top:4px}

/* Two cards always side-by-side */
.splitScroller{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.split{display:grid;grid-template-columns:repeat(2, minmax(320px, 1fr));gap:16px;margin:18px 0;min-width:640px}
.card{background:var(--card);padding:16px;border-radius:16px;border:1px solid var(--ring);cursor:pointer;transition:box-shadow .2s ease, transform .06s ease}
.card:active{transform:scale(.995)}
.card.active{box-shadow:0 8px 28px rgba(31,41,55,.12);border-color:transparent}

/* Card contents */
.mini{display:flex;align-items:center;gap:16px;margin-bottom:2px}
.mini img.logo{width:96px;height:96px;border-radius:20px}
.info{flex:1}
.name{font-size:20px;font-weight:800;margin:0}
.desc{color:var(--muted);margin:4px 0 8px}

/* Buttons */
.btn{padding:8px 14px;border-radius:999px;border:1px solid var(--ring);font-weight:600;transition:transform .05s ease,box-shadow .2s ease;text-decoration:none;display:inline-block;font-size:14px}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(31,41,55,.08)}
.btn.mint{background:var(--mint);color:#fff;border-color:transparent}
.btn.order{background:var(--orderup);color:#111827;border-color:transparent}

/* Media section */
.section{margin:28px 0}
.section h2{font-size:22px;margin:0 0 10px;font-weight:800}
.chip{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;padding:6px 10px;border-radius:999px;border:1px solid var(--ring);background:#fff}
.chip.dot{position:relative;padding-left:28px}
.chip.dot:before{content:"";position:absolute;left:10px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);}
.chip.mint.dot:before{background:var(--mint)}
.chip.order.dot:before{background:var(--orderup)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.frame, .grid img{aspect-ratio:16/9;border:1px solid var(--ring);border-radius:14px;overflow:hidden;background:#000}
iframe{width:100%;height:100%;border:0}

/* Footer */
footer{margin:40px 0 20px;color:var(--muted);font-size:13px;text-align:center}

/* Partner */
.reseller-form { display: grid; gap: 12px; }
.reseller-form .row { display: grid; gap: 12px; }
.reseller-form label { display: grid; gap: 6px; font-size: 14px; }
.reseller-form input, .reseller-form select, .reseller-form textarea {
  padding: .55rem .65rem; border: 1px solid #d9d9d9; border-radius: 10px; font: inherit;
}
@media (min-width: 720px){
  .reseller-form .row { grid-template-columns: 1fr 1fr; }
}
.btn { background:#111; color:#fff; padding:.6rem 1rem; border-radius:10px; text-decoration:none; display:inline-block; border:none; cursor:pointer; }
.btn:hover { opacity:.9; }

/* Make the topbar row flex so items can align left/right */
.topbar .inner.wrap { display: flex; align-items: center; gap: 12px; }

/* Push the Partner Portal button to the far right */
.partner-cta { margin-left: auto; white-space: nowrap; }

/* Make the Partner Portal button stand out on white */
.topbar .partner-cta{
  background:#fff;
  color:#111;
  padding:.55rem 1rem;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  white-space:nowrap;
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 4px 12px rgba(0,0,0,.14);
  transition: box-shadow .15s ease, transform .15s ease;
}

.topbar .partner-cta:hover{
  box-shadow:
    0 2px 0 rgba(0,0,0,.08),
    0 10px 20px rgba(0,0,0,.20);
  transform: translateY(-1px);
}

.topbar .partner-cta:focus-visible{
  outline: 2px solid #2ea97d; /* accent */
  outline-offset: 2px;
}

/* Keep the hero sticky and shorten its height */
.hero {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* keep your existing dark background/gradient if you have one */
  /* example background (optional):
  background:
    radial-gradient(900px 400px at 80% -20%, rgba(46,169,125,.3), transparent 60%),
    linear-gradient(135deg, #0a0f24 0%, #131a36 100%);
  */
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero-inner.hero-compact {
  padding: 16px;            /* was larger before — this makes it “short” */
  max-width: 1100px;
  margin: 0 auto;
}

/* Row layouts */
.hero-row1 { display: grid; gap: 6px; }
.hero-row2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Logos + title on one line */
.hero-title { display: flex; align-items: center; gap: 10px; }
.hero-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.hero h1 { margin: 0; font-size: 22px; font-weight: 700; color: #fff; }
.hero-sub { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; }

/* Prominent submit button */
.btn.cta{
  background: linear-gradient(180deg, #2ea97d, #1f8e67); /* brandy mint */
  color:#fff;
  border:0;
  padding:.75rem 1.15rem;
  font-weight:700;
  font-size:16px;
  border-radius:12px;
  box-shadow: 0 6px 16px rgba(46,169,125,.35);
  transform: translateY(0);
  transition: box-shadow .15s ease, transform .15s ease;
}
.btn.cta:hover{
  box-shadow: 0 10px 24px rgba(46,169,125,.45);
  transform: translateY(-1px);
}
.btn.cta:focus-visible{
  outline: 3px solid rgba(46,169,125,.55);
  outline-offset: 2px;
}

/* Full-width on small screens for extra visibility */
@media (max-width: 720px){
  .btn.cta{ width:100%; }
}


/* Buttons */
.btn, .btn.ghost {
  display: inline-block;
  text-decoration: none;
  padding: .5rem .9rem;
  border-radius: 10px;
  font-weight: 600;
}
.btn { background: #fff; color: #111; }
.btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn:hover { opacity: .92; }

/* Push the back button to the far right of row 2 */
.push-right { margin-left: auto; }

/* Prevent in-page anchors from hiding under the sticky hero */
#reseller, #downloads, #versions { scroll-margin-top: 96px; }

#reseller-title, #downloads-title, #versions-title { scroll-margin-top: 96px; }