* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--psb-font-body);
  color: var(--psb-text);
  background: var(--psb-background);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.psb-container { width: min(calc(100% - 40px), var(--psb-container)); margin-inline: auto; }

.psb-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--psb-border);
}
.psb-header-inner {
  min-height: 72px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.psb-brand { display:flex; align-items:center; gap:12px; font-weight:800; }
.psb-logo {
  width: 42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--psb-primary); color:white; font-weight:800;
}
.psb-nav { display:flex; align-items:center; gap:6px; }
.psb-nav a { padding:9px 12px; border-radius:10px; color:var(--psb-muted); font-weight:600; font-size:14px; }
.psb-nav a:hover { background:var(--psb-surface-soft); color:var(--psb-primary); }

.psb-hero { padding: 72px 0 54px; }
.psb-hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center; }
.psb-eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
  border-radius:var(--psb-radius-pill); background:var(--psb-surface-soft);
  color:var(--psb-primary); font-size:12px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase;
}
.psb-hero h1 { margin:16px 0 12px; font-size:clamp(34px,5vw,58px); line-height:1.08; letter-spacing:-.04em; }
.psb-hero p { margin:0; max-width:650px; color:var(--psb-muted); font-size:17px; }
.psb-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }

.psb-btn {
  border:0; cursor:pointer; min-height:44px; padding:0 18px;
  border-radius:var(--psb-radius-pill); font-weight:800; transition:.18s ease;
}
.psb-btn-primary { background:var(--psb-primary); color:white; box-shadow:var(--psb-shadow-sm); }
.psb-btn-primary:hover { background:var(--psb-primary-strong); transform:translateY(-1px); }
.psb-btn-secondary { background:var(--psb-surface); color:var(--psb-primary); border:1px solid var(--psb-border); }

.psb-card {
  background:var(--psb-surface); border:1px solid var(--psb-border);
  border-radius:var(--psb-radius-lg); box-shadow:var(--psb-shadow-sm);
  padding:24px;
}
.psb-icon {
  width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
  font-weight:900; flex:0 0 auto;
}
.psb-icon-green { background:#e3f5ed; color:#23865b; }
.psb-icon-blue { background:#e5f0fb; color:#3978b9; }
.psb-icon-orange { background:#fff0dc; color:#c88418; }
.psb-icon-purple { background:#eee8fb; color:#7452a8; }
.psb-icon-pink { background:#fde9f0; color:#b54f76; }
.psb-icon-teal { background:#e0f4f1; color:#087f73; }

.psb-feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding-bottom:70px; }
.psb-feature { display:flex; gap:14px; align-items:flex-start; }
.psb-feature h3 { margin:0 0 3px; font-size:16px; }
.psb-feature p { margin:0; color:var(--psb-muted); font-size:13px; }

.psb-progress { height:var(--psb-progress-height); background:#e7eeeb; border-radius:var(--psb-radius-pill); overflow:hidden; }
.psb-progress > span { display:block; height:100%; width:25%; background:var(--psb-primary); border-radius:inherit; }

.psb-status-list { display:grid; gap:10px; }
.psb-status { display:flex; align-items:center; gap:12px; padding:13px 0; }
.psb-status-dot { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900; background:#eef1f0; color:var(--psb-muted); }
.psb-status.done .psb-status-dot { background:#e3f5ed; color:var(--psb-success); }
.psb-status.active .psb-status-dot { background:#e0f4f1; color:var(--psb-primary); }
.psb-status small { display:block; color:var(--psb-muted); }

.psb-bottom-sheet {
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(15,35,32,.36); align-items:flex-end; justify-content:center;
}
.psb-bottom-sheet.is-open { display:flex; }
.psb-sheet {
  width:min(100%,560px); background:white; border-radius:24px 24px 0 0;
  padding:10px 20px 24px; box-shadow:0 -15px 45px rgba(0,0,0,.16);
}
.psb-sheet-handle { width:44px; height:4px; border-radius:99px; background:#d7dfdc; margin:4px auto 18px; }
.psb-choice {
  width:100%; border:1px solid var(--psb-border); background:white;
  padding:15px; border-radius:15px; display:flex; align-items:center; gap:13px;
  cursor:pointer; text-align:left; margin-top:9px;
}
.psb-choice:hover { border-color:var(--psb-primary); background:var(--psb-surface-soft); }

.psb-footer { padding:28px 0; border-top:1px solid var(--psb-border); color:var(--psb-muted); font-size:13px; }

@media (max-width: 1199px) {
  .psb-hero-grid { grid-template-columns:1fr; }
  .psb-feature-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 767px) {
  .psb-container { width:min(calc(100% - 28px), var(--psb-container)); }
  .psb-header-inner { min-height:62px; }
  .psb-nav { display:none; }
  .psb-hero { padding:42px 0 34px; }
  .psb-hero p { font-size:15px; }
  .psb-feature-grid { grid-template-columns:1fr; padding-bottom:40px; }
  .psb-card { padding:18px; }
}
.psb-empty{padding:15px;border:1px dashed var(--psb-border);border-radius:15px;color:var(--psb-muted);font-size:14px;margin-top:9px}
.psb-choice:focus-visible{outline:3px solid rgba(31,111,148,.18);outline-offset:2px}
.psb-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
