/* Apptimate Software shop — custom styles on top of Bootstrap 5, same palette as pasguard.com. */

:root {
  --ds-bg:        #0b1020;
  --ds-bg-2:      #111834;
  --ds-ink:       #e8ecf6;
  --ds-brand:     #6366f1;
  --ds-brand-2:   #22d3ee;
  --ds-muted:     #94a3b8;
}

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1f2533;
}

/* ---------- Navbar ---------- */
.ds-nav {
  background: rgba(11, 16, 32, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ds-nav .nav-link { color: #c7cfe2; font-weight: 500; }
.ds-nav .nav-link:hover,
.ds-nav .nav-link.active { color: #fff; }
.ds-logo { filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.5)); }

/* ---------- Buttons ---------- */
.btn-brand {
  background: linear-gradient(135deg, var(--ds-brand), var(--ds-brand-2));
  border: none;
  color: #fff;
  font-weight: 600;
}
.btn-brand:hover { color: #fff; filter: brightness(1.08); }
.btn-outline-light-brand {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}
.btn-outline-light-brand:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ---------- Hero ---------- */
.ds-hero {
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(99, 102, 241, 0.25), transparent 55%),
    linear-gradient(180deg, var(--ds-bg), var(--ds-bg-2));
  color: var(--ds-ink);
}
.ds-hero .eyebrow,
.page-hero .eyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--ds-brand-2);
  font-weight: 700;
}
.ds-hero h1 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.ds-hero .lead { color: #c2cbe0; }

/* Hero visual: top edge in line with the first line of the headline, not with
   the eyebrow above it. The row centres its columns, which puts the mock level
   with the middle of the whole text block - lead and buttons included - and
   that reads as hanging too low next to a headline this large. The offset is
   the eyebrow's own line box plus its .mb-2; keep it in step if that line's
   type changes. Below lg the columns stack, so no offset applies. */
@media (min-width: 992px) {
  .ds-hero .hero-visual {
    align-self: flex-start;
    /* Bootstrap pays the row gutter as margin-top on the column, so carry it
       through here or this rule silently eats it. */
    margin-top: calc(var(--bs-gutter-y) + 0.8rem * 1.5 + 0.5rem);
  }
}

/* Code/terminal mock in hero */
.ds-terminal {
  background: #0a0f1f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  overflow: hidden;
}
.ds-terminal .bar {
  background: #131a30;
  padding: .55rem .8rem;
  display: flex; gap: .4rem; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ds-terminal .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ds-terminal pre {
  margin: 0; padding: 1rem 1.1rem;
  color: #cfe0ff; font-size: .86rem; line-height: 1.55;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  white-space: pre-wrap;
}
.ds-terminal .c-key { color: #7dd3fc; }
.ds-terminal .c-ok  { color: #4ade80; }
.ds-terminal .c-dim { color: #6b7aa0; }

/* trust bar */
.ds-trust {
  background: var(--ds-bg-2);
  color: var(--ds-muted);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ds-trust .item { color: #aeb9d4; font-weight: 600; }

/* ---------- Feature cards ---------- */
.ds-feature {
  height: 100%;
  border: 1px solid #e7eaf3;
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  background: #fff;
}
.ds-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(20, 30, 70, 0.10);
  border-color: #d6dbef;
}
.ds-feature .icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.4rem; color: #fff;
  background: linear-gradient(135deg, var(--ds-brand), var(--ds-brand-2));
}

/* section helpers */
.section { padding: 5rem 0; }
.section-tight { padding: 3.5rem 0; }
.eyebrow-dark {
  letter-spacing: .12em; text-transform: uppercase;
  font-size: .8rem; color: var(--ds-brand); font-weight: 700;
}
.text-muted-2 { color: #5a6477; }

/* steps */
.ds-step .num {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--ds-brand), var(--ds-brand-2));
}

/* ---------- Pricing ---------- */
.ds-price {
  border: 1px solid #e7eaf3; border-radius: 16px; background: #fff; height: 100%;
}
.ds-price.featured {
  border-color: var(--ds-brand);
  box-shadow: 0 24px 60px rgba(99, 102, 241, 0.18);
  position: relative;
}
.ds-price .price { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; }
.ds-price .badge-pop {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--ds-brand), var(--ds-brand-2));
}
.ds-check { color: #16a34a; }
.ds-x { color: #c0c6d4; }

/* ---------- CTA band ---------- */
.ds-cta {
  background:
    radial-gradient(800px 300px at 80% 0%, rgba(34, 211, 238, 0.18), transparent 60%),
    linear-gradient(135deg, var(--ds-bg), var(--ds-bg-2));
  color: #fff;
  border-radius: 20px;
}

/* ---------- Footer ---------- */
.ds-footer { background: var(--ds-bg); }
.ds-footer a { color: #aeb9d4; text-decoration: none; }
.ds-footer a:hover { color: #fff; }

/* page hero (inner pages) */
.page-hero {
  background: linear-gradient(180deg, var(--ds-bg), var(--ds-bg-2));
  color: var(--ds-ink);
}
.page-hero h1 { font-weight: 800; letter-spacing: -0.02em; }
.page-hero p { color: #c2cbe0; }

/* ---------- Shop ---------- */
.ds-filter .btn {
  border: 1px solid #e7eaf3; color: #5a6477; background: #fff; font-weight: 600;
}
.ds-filter .btn.active,
.ds-filter .btn:hover { border-color: var(--ds-brand); color: var(--ds-brand); }
.ds-search .form-control { border-color: #e7eaf3; }
.ds-search .form-control:focus,
.ds-admin .form-control:focus,
.ds-admin .form-select:focus {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .15);
}

.ds-product { display: flex; flex-direction: column; }
.ds-product .meta { font-size: .8rem; color: #5a6477; }
.ds-product .from { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.ds-product .stretched-link:focus-visible { outline: none; }
.ds-product:focus-within { border-color: var(--ds-brand); }

.ds-type {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 999px;
}
.ds-type.software { background: #eef0ff; color: #4338ca; }
.ds-type.saas     { background: #e6fafd; color: #0e7490; }
.ds-hero .ds-type.software { background: rgba(99, 102, 241, .2);  color: #c7c9ff; }
.ds-hero .ds-type.saas     { background: rgba(34, 211, 238, .16); color: #a5f0fc; }

.ds-product-img {
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45); max-width: 100%;
}
.ds-hero-icon {
  width: 72px; height: 72px; border-radius: 18px;
  display: grid; place-items: center; font-size: 2rem; color: #fff;
  background: linear-gradient(135deg, var(--ds-brand), var(--ds-brand-2));
  box-shadow: 0 12px 30px rgba(99, 102, 241, .35);
}
.ds-price ul { padding-left: 0; list-style: none; }
.ds-price li { display: flex; gap: .5rem; margin-bottom: .4rem; font-size: .92rem; }
.ds-price li .bi { flex-shrink: 0; margin-top: .1rem; }
.ds-empty { border: 1px dashed #d6dbef; border-radius: 14px; }

/* ---------- Admin ---------- */
.ds-admin .card { border: 1px solid #e7eaf3; border-radius: 14px; }
.ds-admin .table > :not(caption) > * > * { padding: .75rem; }
.ds-admin .table td { vertical-align: middle; }
.ds-admin .row-hidden td { opacity: .55; }
.ds-admin .plan-row { border: 1px solid #e7eaf3; border-radius: 12px; background: #fafbfe; }
.ds-admin .icon-preview {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--ds-brand), var(--ds-brand-2));
}
.ds-admin .form-text { color: #5a6477; }

/* Contact form: the honeypot field is for bots only, so keep it off screen
   rather than display:none, which some bots skip. */
.ds-contact:hover { transform: none; }
.ds-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ds-step .num .bi { font-size: 1.15rem; }
.ds-nav .btn-brand.active { color: #fff; filter: brightness(1.1); }

.ds-soon {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: 999px;
  background: #fff4d6; color: #92600a;
}
.ds-hero .ds-soon { background: rgba(255, 193, 7, .16); color: #ffd666; }