:root {
  --pts-ink: #111827;
  --pts-muted: #64748b;
  --pts-soft: #f8fafc;
  --pts-card: #ffffff;
  --pts-border: #e2e8f0;
  --pts-blue: #2563eb;
  --pts-blue-dark: #1d4ed8;
  --pts-sky: #0ea5e9;
  --pts-cyan: #06b6d4;
  --pts-orange: #f97316;
  --pts-green: #16a34a;
  --pts-amber: #f59e0b;
  --pts-navy: #0f172a;
  --pts-radius: 1.35rem;
  --pts-shadow: 0 22px 65px rgba(15, 23, 42, 0.10);
  --pts-shadow-soft: 0 14px 34px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pts-ink);
  background:
    radial-gradient(circle at 5% 0%, rgba(37, 99, 235, 0.10), transparent 28rem),
    radial-gradient(circle at 95% 6%, rgba(6, 182, 212, 0.11), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 35%, #ffffff 100%);
  line-height: 1.65;
}

a {
  color: var(--pts-blue);
  text-decoration: none;
}

a:hover {
  color: var(--pts-blue-dark);
  text-decoration: underline;
}

.navbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.78);
}

.navbar-brand {
  font-weight: 950;
  letter-spacing: -0.045em;
  color: var(--pts-ink);
}

.brand-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  margin-right: .6rem;
  object-fit: contain;
  vertical-align: middle;
}

.nav-link {
  color: #334155;
  font-weight: 800;
  font-size: .95rem;
}

.nav-link:hover,
.nav-link.active {
  color: var(--pts-blue);
}

.btn {
  border-radius: 999px;
  font-weight: 900;
  padding: .82rem 1.16rem;
}

.btn-primary {
  background: var(--pts-blue);
  border-color: var(--pts-blue);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.22);
}

.btn-primary:hover {
  background: var(--pts-blue-dark);
  border-color: var(--pts-blue-dark);
}

.btn-outline-primary {
  color: var(--pts-blue);
  border-color: rgba(37, 99, 235, .42);
}

.btn-outline-primary:hover {
  background: var(--pts-blue);
  border-color: var(--pts-blue);
}

.hero {
  padding: 5.8rem 0 4.7rem;
  position: relative;
  overflow: hidden;
}

.hero:before {
  content: "";
  position: absolute;
  width: 56rem;
  height: 56rem;
  border-radius: 999px;
  top: -38rem;
  right: -28rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 66%);
  pointer-events: none;
}

.hero-shell {
  position: relative;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 2rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.75)),
    radial-gradient(circle at top right, rgba(14, 165, 233, .14), transparent 35rem);
  box-shadow: var(--pts-shadow);
  overflow: hidden;
}

.hero-copy {
  padding: clamp(2rem, 5vw, 4.8rem);
}

.hero h1,
.content-wrap h1 {
  font-size: clamp(2.55rem, 5vw, 5.2rem);
  line-height: .96;
  letter-spacing: -0.075em;
  font-weight: 950;
}

.hero-subtitle {
  color: #475569;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  max-width: 49rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: .43rem .76rem;
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 950;
  margin-bottom: 1rem;
}

.eyebrow-dark {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}

.visual-card {
  height: 100%;
  min-height: 31rem;
  background:
    radial-gradient(circle at 75% 28%, rgba(249, 115, 22, .38), transparent 10rem),
    radial-gradient(circle at 20% 85%, rgba(6, 182, 212, .28), transparent 14rem),
    linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #fff;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  overflow: hidden;
}

.visual-card:after {
  content: "";
  position: absolute;
  inset: auto -10% -22% 35%;
  height: 17rem;
  background: rgba(255,255,255,.06);
  border-radius: 999px 999px 0 0;
  transform: rotate(-7deg);
}

.live-widget {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 1.35rem;
  padding: 1rem;
  backdrop-filter: blur(12px);
}

.pulse-dot {
  width: .8rem;
  height: .8rem;
  background: #22c55e;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
  animation: pulse 1.8s infinite;
  display: inline-block;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.shelf-graphic {
  position: relative;
  z-index: 1;
  margin: 2.4rem 0 1.6rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.4rem;
  padding: 1rem;
  background: rgba(255,255,255,.07);
}

.shelf-line {
  height: .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  margin-top: .9rem;
}

.box-row {
  display: flex;
  align-items: end;
  gap: .8rem;
  padding: 0 .6rem;
  min-height: 8rem;
}

.box {
  width: 28%;
  border-radius: .85rem .85rem .35rem .35rem;
  background: linear-gradient(180deg, #93c5fd, #2563eb);
  box-shadow: 0 18px 35px rgba(0,0,0,.25);
}

.box:nth-child(1) { height: 4.2rem; }
.box:nth-child(2) { height: 7rem; background: linear-gradient(180deg, #67e8f9, #0891b2); }
.box:nth-child(3) { height: 5.4rem; background: linear-gradient(180deg, #bfdbfe, #3b82f6); }

.signup-box {
  background: #fff;
  border: 1px solid var(--pts-border);
  border-radius: var(--pts-radius);
  padding: 1.35rem;
  box-shadow: var(--pts-shadow-soft);
}

.form-control,
.form-select {
  border-radius: .92rem;
  border-color: #cbd5e1;
  padding: .88rem 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(37,99,235,.72);
  box-shadow: 0 0 0 .25rem rgba(37,99,235,.12);
}

.form-check-input {
  border-color: #cbd5e1;
}

.section {
  padding: 4.8rem 0;
}

.section-alt {
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border-top: 1px solid var(--pts-border);
  border-bottom: 1px solid var(--pts-border);
}

.section-title {
  font-size: clamp(2rem, 3.35vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -0.065em;
  font-weight: 950;
  margin-bottom: .85rem;
}

.section-lead {
  color: var(--pts-muted);
  max-width: 50rem;
  font-size: 1.08rem;
}

.card-soft {
  border: 1px solid var(--pts-border);
  border-radius: var(--pts-radius);
  box-shadow: var(--pts-shadow-soft);
  background: var(--pts-card);
}

.card-lift {
  transition: transform .18s ease, box-shadow .18s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(15,23,42,.10);
}

.status-card {
  border: 1px dashed rgba(37, 99, 235, 0.36);
  background:
    linear-gradient(135deg, rgba(239,246,255,.98), rgba(255,255,255,.98)),
    radial-gradient(circle at top right, rgba(6, 182, 212, .12), transparent 16rem);
  border-radius: var(--pts-radius);
  padding: 1.45rem;
}

.metric-card {
  border: 1px solid var(--pts-border);
  border-radius: 1.05rem;
  padding: 1.15rem;
  background: rgba(255,255,255,.8);
  min-height: 100%;
}

.metric-number {
  font-size: 2rem;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.badge-soft {
  border-radius: 999px;
  font-weight: 950;
  padding: .5rem .68rem;
  font-size: .78rem;
}

.badge-blue { color: #1e40af; background: #dbeafe; }
.badge-green { color: #166534; background: #dcfce7; }
.badge-amber { color: #92400e; background: #fef3c7; }
.badge-red { color: #991b1b; background: #fee2e2; }
.badge-dark { color: #e0f2fe; background: rgba(15,23,42,.8); }

.stock-item,
.alert-item {
  border: 1px solid var(--pts-border);
  border-radius: 1.1rem;
  background: #fff;
  padding: 1.05rem;
  margin-bottom: .9rem;
}

.product-price {
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: 1.35rem;
}

.check-step {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, var(--pts-blue), var(--pts-cyan));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  margin-bottom: .85rem;
  box-shadow: 0 14px 28px rgba(37,99,235,.20);
}

.icon-circle {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 1rem;
  background: #eff6ff;
  color: var(--pts-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.42rem;
  margin-bottom: .9rem;
}

.content-page {
  padding: 5.2rem 0 4.4rem;
}

.content-hero {
  padding: 4.8rem 0 3rem;
}

.content-wrap {
  max-width: 900px;
}

.content-wrap h2 {
  font-size: clamp(1.65rem, 2.55vw, 2.25rem);
  letter-spacing: -0.052em;
  line-height: 1.1;
  font-weight: 950;
  margin-top: 2.55rem;
  margin-bottom: .75rem;
}

.content-wrap h3 {
  font-size: 1.25rem;
  font-weight: 900;
  margin-top: 1.55rem;
}

.content-wrap p,
.content-wrap li {
  color: #475569;
  font-size: 1.035rem;
}

.content-wrap .lead {
  font-size: 1.18rem;
  color: #334155;
}

.callout {
  border: 1px solid rgba(37, 99, 235, .16);
  border-left: .38rem solid var(--pts-blue);
  background: #eff6ff;
  border-radius: 1rem;
  padding: 1.15rem;
  margin: 1.45rem 0;
}

.warning-callout {
  border-left-color: var(--pts-amber);
  background: #fffbeb;
  border-color: #fde68a;
}

.success-callout {
  border-left-color: var(--pts-green);
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.table {
  vertical-align: middle;
}

.table thead th {
  color: #475569;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom-color: var(--pts-border);
}

.footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .22), transparent 22rem),
    linear-gradient(135deg, #0f172a, #111827);
  color: #dbeafe;
  padding: 3.7rem 0 2rem;
}

.footer a {
  color: #dbeafe;
}

.footer a:hover {
  color: #fff;
}

.footer .small,
.footer small {
  color: #94a3b8;
}

.footer-disclosure {
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.06);
  border-radius: 1rem;
  padding: .95rem;
  color: #bfdbfe;
}

.anchor-offset {
  scroll-margin-top: 6rem;
}

.ac-alert-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(249, 115, 22, .10), transparent 20rem),
    radial-gradient(circle at 10% 15%, rgba(37, 99, 235, .11), transparent 25rem);
}

.comparison-table td,
.comparison-table th {
  padding: 1rem;
}

@media (max-width: 991px) {
  .hero { padding-top: 4.5rem; }
  .visual-card { min-height: 24rem; }
  .navbar .btn { margin-top: .75rem; width: 100%; }
}

@media (max-width: 575px) {
  .hero-shell { border-radius: 1.25rem; }
  .hero-copy { padding: 1.4rem; }
  .section { padding: 3.4rem 0; }
  .signup-box { padding: 1rem; }
  .box-row { min-height: 6rem; }
  .box:nth-child(1) { height: 3rem; }
  .box:nth-child(2) { height: 5rem; }
  .box:nth-child(3) { height: 3.9rem; }
}



/* Cookie notice */
.pts-cookie-notice {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  max-width: 980px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.96);
  color: #e0f2fe;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 22px 60px rgba(15,23,42,.28);
  display: none;
}

.pts-cookie-notice.is-visible {
  display: block;
}

.pts-cookie-notice a {
  color: #93c5fd;
}

.pts-cookie-notice .btn {
  box-shadow: none;
  padding: .55rem .9rem;
}

/* Admin */
.pts-admin-body {
  background: #f8fafc;
}

.pts-admin-sidebar {
  background: #0f172a;
  min-height: 100vh;
}

.pts-admin-sidebar a {
  color: #cbd5e1;
  display: block;
  padding: .72rem .9rem;
  border-radius: .75rem;
  text-decoration: none;
  font-weight: 700;
}

.pts-admin-sidebar a:hover,
.pts-admin-sidebar a.active {
  background: rgba(255,255,255,.09);
  color: #fff;
}

.pts-admin-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.pts-admin-table th {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
}