/* PasGuard marketing site — custom styles on top of Bootstrap 5. */

: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 {
  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; }

/* ---------- Cookie notice (includes/cookie-consent.php) ----------
   Ported from the Apptimate corporate site and recoloured to the PasGuard
   palette. That site has a light/dark switch; this one does not, so every
   [data-theme="dark"] rule from the original is dropped rather than carried
   over dead. */
.pg-cc {
  position: fixed; inset: 0; z-index: 1090;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.pg-cc__backdrop {
  position: absolute; inset: 0; background: rgba(11, 16, 32, .72);
  opacity: 0; transition: opacity .3s ease;
}
.pg-cc--visible .pg-cc__backdrop { opacity: 1; }

.pg-cc__card {
  position: relative; z-index: 1; background: #fff; border-radius: 16px;
  width: 100%; max-width: 860px; box-shadow: 0 24px 64px rgba(11, 16, 32, .28);
  opacity: 0; transform: translateY(20px) scale(.97);
  transition: opacity .35s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.pg-cc--visible .pg-cc__card { opacity: 1; transform: translateY(0) scale(1); }
.pg-cc__card-body { display: flex; align-items: flex-start; gap: 1.75rem; padding: 2rem 2rem 1.25rem; }
.pg-cc__card-logo { flex-shrink: 0; padding-top: .15rem; }
.pg-cc__card-content { flex: 1; min-width: 0; }
.pg-cc__card-title { font-size: 1.05rem; font-weight: 800; color: #1f2533; margin: 0 0 .6rem; }
.pg-cc__card-text { font-size: .88rem; color: #4b5563; line-height: 1.65; margin: 0 0 .75rem; }
.pg-cc__card-check {
  font-size: .82rem; color: #16a34a; font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: .4rem;
}
.pg-cc__card-actions { flex-shrink: 0; display: flex; align-items: center; }

.pg-cc__btn-accept {
  background: linear-gradient(135deg, var(--ds-brand), var(--ds-brand-2));
  color: #fff; border: none; padding: .75rem 1.75rem; border-radius: 10px;
  font-size: .95rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: filter .2s, transform .1s;
}
.pg-cc__btn-accept:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pg-cc__btn-accept:active { transform: translateY(0); }

.pg-cc__card-footer { padding: .75rem 2rem 1.25rem; border-top: 1px solid #e8edf3; }
.pg-cc__details-link {
  background: none; border: none; padding: 0; font-size: .88rem; font-weight: 600;
  color: var(--ds-brand); cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem; transition: gap .2s;
}
.pg-cc__details-link:hover { gap: .55rem; }
.pg-cc__details-link .bi { font-size: .75rem; }

.pg-cc__modal {
  position: relative; z-index: 1; background: #fff; border-radius: 16px;
  width: 100%; max-width: 720px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(11, 16, 32, .3);
  animation: ccModalIn .3s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes ccModalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pg-cc__modal-header { padding: 1.35rem 2rem 1rem; border-bottom: 1px solid #e8edf3; flex-shrink: 0; }
.pg-cc__modal-title { font-weight: 800; color: #1f2533; }
.pg-cc__tabs { display: flex; border-bottom: 1px solid #e8edf3; flex-shrink: 0; padding: 0 2rem; }
.pg-cc__tab {
  background: none; border: none; padding: .85rem 0; margin-right: 2rem;
  font-size: .95rem; font-weight: 500; color: #6b7280; cursor: pointer;
  position: relative; transition: color .2s; white-space: nowrap;
}
.pg-cc__tab::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: var(--ds-brand); transform: scaleX(0); transition: transform .2s ease;
}
.pg-cc__tab--active { color: var(--ds-brand); font-weight: 700; }
.pg-cc__tab--active::after { transform: scaleX(1); }
.pg-cc__tab:hover:not(.pg-cc__tab--active) { color: #1f2533; }

.pg-cc__modal-body { flex: 1; overflow-y: auto; padding: 1.5rem 2rem; min-height: 0; }
.pg-cc__panel--hidden { display: none; }
.pg-cc__intro { font-size: .9rem; color: #4b5563; line-height: 1.65; margin-bottom: 1.25rem; }

.pg-cc__toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; border-top: 1px solid #e8edf3; gap: 1rem;
}
.pg-cc__toggle-label strong { display: block; font-size: .95rem; color: #1f2533; margin-bottom: .2rem; }
.pg-cc__always-on { font-size: .78rem; color: #16a34a; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.pg-cc__always-on .bi { font-size: .7rem; }
/* Locked on, and it must look locked: there is nothing here to switch off. */
.pg-cc__toggle-track {
  flex-shrink: 0; width: 44px; height: 24px; background: #16a34a;
  border-radius: 12px; position: relative; opacity: .65; cursor: not-allowed;
}
.pg-cc__toggle-thumb {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
}
.pg-cc__cat-desc {
  font-size: .85rem; color: #6b7280; line-height: 1.6;
  margin-top: .5rem; padding-top: 1rem; border-top: 1px solid #e8edf3;
}
.pg-cc__cat-desc code { font-size: .82em; }

.pg-cc__accordion { border-top: 1px solid #e8edf3; }
.pg-cc__accordion:last-child { border-bottom: 1px solid #e8edf3; }
.pg-cc__accordion-head {
  display: flex; align-items: center; gap: .75rem; padding: 1rem 0;
  cursor: pointer; list-style: none; font-size: .95rem;
}
.pg-cc__accordion-head::-webkit-details-marker { display: none; }
.pg-cc__chevron { font-size: .8rem; color: #6b7280; transition: transform .2s; flex-shrink: 0; }
details[open] .pg-cc__chevron { transform: rotate(180deg); }
.pg-cc__acc-title { flex: 1; font-weight: 700; color: #1f2533; }
.pg-cc__count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: #eef1f8; border-radius: 50%;
  font-size: .75rem; font-weight: 700; color: #4b5563;
  margin-left: .4rem; vertical-align: middle;
}
.pg-cc__acc-always { font-size: .78rem; color: #16a34a; font-weight: 600; white-space: nowrap; }
.pg-cc__accordion-body { padding: 0 0 1rem; font-size: .88rem; color: #4b5563; line-height: 1.6; }
.pg-cc__accordion-body p { margin-bottom: .75rem; }

.pg-cc__detail-table { width: 100%; font-size: .82rem; border-collapse: collapse; margin-top: .5rem; }
.pg-cc__detail-table th {
  background: var(--ds-bg); color: #fff; padding: .5rem .75rem;
  text-align: left; font-weight: 600; white-space: nowrap;
}
.pg-cc__detail-table td { padding: .5rem .75rem; border-bottom: 1px solid #e8edf3; vertical-align: top; }
.pg-cc__detail-table tr:last-child td { border-bottom: none; }
.pg-cc__detail-table code {
  background: #eef1f8; color: #3a3f8f; padding: .1rem .35rem;
  border-radius: 4px; font-size: .8rem;
}
.pg-cc__about-link {
  display: inline-flex; align-items: center; color: var(--ds-brand);
  font-weight: 600; text-decoration: none; font-size: .9rem; margin-top: .5rem;
}
.pg-cc__about-link:hover { text-decoration: underline; }

.pg-cc__modal-footer { padding: 1.25rem 2rem; border-top: 1px solid #e8edf3; flex-shrink: 0; background: #fff; }
.pg-cc__modal-footer .pg-cc__btn-accept { width: 100%; padding: .85rem 2rem; font-size: 1rem; }

/* Footer "Cookie settings" reopen button - has to sit among <a> links without
   looking like a button. */
.pg-footer-cookie-btn {
  background: none; border: none; padding: 0; color: #aeb9d4;
  font-size: .85rem; cursor: pointer; text-align: left; transition: color .2s;
}
.pg-footer-cookie-btn:hover { color: #fff; }

@media (max-width: 767px) {
  .pg-cc__card-body { flex-direction: column; gap: 1rem; padding: 1.5rem 1.25rem 1rem; }
  .pg-cc__card-actions { width: 100%; }
  .pg-cc__btn-accept { width: 100%; text-align: center; }
  .pg-cc__card-footer { padding: .75rem 1.25rem 1.25rem; }
}
@media (max-width: 575px) {
  .pg-cc { align-items: flex-end; padding: 0; }
  .pg-cc__card, .pg-cc__modal { border-radius: 16px 16px 0 0; }
  .pg-cc__modal { max-height: 85vh; }
  .pg-cc__modal-header, .pg-cc__modal-body,
  .pg-cc__modal-footer, .pg-cc__tabs { padding-left: 1.25rem; padding-right: 1.25rem; }
}