:root {
  --pf-ink: #1c1915;
  --pf-muted: #5e584e;
  --pf-paper: #fff;
  --pf-card: #fff;
  --pf-line: #e3d9c8;
  --pf-accent: #0f5c56;
  --pf-accent-ink: #f4fffd;
  --pf-warm: #b64a24;
  --pf-shadow: 0 18px 40px rgba(48, 32, 12, 0.08);
  --pf-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--pf-ink);
  background: var(--pf-paper);
  font-family: var(--pf-sans);
  font-size: 1.05rem;
  line-height: 1.55;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }

.pf-wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem 2rem; }
.pf-wrap--article { max-width: 80rem; }
@media (min-width: 640px) {
  .pf-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.pf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.pf-brand { display: inline-flex; align-items: center; gap: 0.48rem; font-weight: 800; text-decoration: none; font-size: 1.05rem; letter-spacing: -0.03em; }
.pf-logo { height: 3.7rem; width: auto; max-width: 100%; flex: none; display: block; object-fit: contain; object-position: left center; }
.pf-logo-foot { height: 2.45rem; margin: 0 0 0.55rem; }
.pf-menu {
  display: none;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  place-items: center;
  align-content: center;
  gap: 0.28rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.45);
  color: #1c1730;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pf-menu span {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.pf-nav-links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.pf-nav-links a { text-decoration: none; color: var(--pf-muted); font-weight: 600; }
.pf-nav-links a:hover { color: var(--pf-ink); }

.pf-btn, button.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.15rem;
  background: var(--pf-accent);
  color: var(--pf-accent-ink);
  text-decoration: none;
  cursor: pointer;
}
.pf-btn.alt { background: transparent; color: var(--pf-ink); box-shadow: inset 0 0 0 1px var(--pf-line); }
.pf-btn.danger { background: var(--pf-warm); }

.pf-hero { display: block; padding: 2.5rem 0 3.5rem; }
.pf-kicker { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; color: var(--pf-warm); font-weight: 600; }
h1, h2, h3 { font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
h1 { font-size: 1.7rem; line-height: 1.18; letter-spacing: -0.03em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.pf-list-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
.pf-hero h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
@media (min-width: 640px) {
  h1 { font-size: 2.15rem; }
  .pf-list-title { font-size: 1.875rem; }
}
.pf-lead { font-size: 1.15rem; color: var(--pf-muted); max-width: 38rem; }
.pf-hero-card {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 1.4rem;
  padding: 1.2rem;
  box-shadow: var(--pf-shadow);
}
.pf-hero-card strong { display: block; font-size: 1.25rem; }
.pf-hero-card span { color: var(--pf-muted); }
.pf-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.pf-chip { background: #efe7d8; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.9rem; }

.pf-section { padding: 1rem 0 3rem; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pf-card, .pf-faq details, .pf-article {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
}
.pf-step { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pf-accent); }
.pf-price { font-size: 2.15rem; font-weight: 800; margin: 0.2rem 0; letter-spacing: -0.03em; }
.pf-faq details + details { margin-top: 0.6rem; }
.pf-faq summary { cursor: pointer; font-weight: 600; }
.pf-articles { display: grid; gap: 0.7rem; }
.pf-article { display: flex; justify-content: space-between; gap: 1rem; text-decoration: none; }
.pf-article:hover { border-color: var(--pf-accent); }
.pf-article small { color: var(--pf-muted); white-space: nowrap; }
.pf-footer { border-top: 1px solid var(--pf-line); padding: 1.4rem 0 2rem; color: var(--pf-muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }
.pf-error { background: #fde8e2; color: #7a2614; border-radius: 0.8rem; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.pf-ok { background: #e5f4ef; color: #0f5c56; border-radius: 0.8rem; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }

.pf-form { display: grid; gap: 0.85rem; max-width: 36rem; }
.pf-form label { display: grid; gap: 0.3rem; font-weight: 600; }
.pf-form input, .pf-form textarea, .pf-form select {
  width: 100%;
  border: 1px solid var(--pf-line);
  background: white;
  border-radius: 0.8rem;
  padding: 0.75rem 0.85rem;
  color: var(--pf-ink);
}
.pf-form textarea { min-height: 8rem; resize: vertical; }
.pf-help { color: var(--pf-muted); font-weight: 400; font-size: 0.92rem; }
.pf-page { padding: 1rem 0 3rem; }
.pf-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.5rem; align-items: start; }

.pf-site-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; padding: 2.5rem 0 1rem; }
.pf-avatar, .pf-avatar img {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  object-fit: cover;
}
.pf-avatar {
  display: grid;
  place-items: center;
  background: #efe7d8;
  font-size: 2rem;
  overflow: hidden;
}
.pf-projects { display: grid; gap: 0.8rem; }
.pf-project a { color: var(--pf-accent); }

.pf-list-grid { display: grid; gap: 2.5rem; }
.pf-article-grid { display: grid; gap: 1.5rem; }
.pf-article-single { min-width: 0; }
.pf-static { max-width: 860px; }
.pf-side h2 { margin-bottom: 0.4rem; }
.pf-side a { display: block; padding: 0.55rem 0; border-bottom: 1px solid var(--pf-line); text-decoration: none; font-size: 0.84rem; font-weight: 700; line-height: 1.35; }
@media (min-width: 1024px) {
  .pf-list-grid { grid-template-columns: minmax(0, 2fr) minmax(17.5rem, 1fr); align-items: start; }
  .pf-article-grid { grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 20.5rem); gap: 1.75rem; align-items: start; }
  .pf-side { position: sticky; top: 1rem; }
}
.pf-blog-list { display: grid; }
.pf-blog-item { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; text-decoration: none; align-items: center; padding: 1rem 0; border-bottom: 1px solid #d1d5db; }
.pf-blog-item img, .pf-blog-thumb { width: 100%; height: 5rem; object-fit: cover; border-radius: 0.35rem; background: #e2e8f0; }
.pf-blog-item h2 { font-size: 0.875rem; font-weight: 700; line-height: 1.35; margin: 0; }
.pf-blog-item p { margin: 0.25rem 0 0; color: var(--pf-muted); }
@media (min-width: 640px) {
  .pf-blog-item { grid-template-columns: 8rem 1fr; }
  .pf-blog-item img, .pf-blog-thumb { height: 6rem; }
  .pf-blog-item h2 { font-size: 1rem; }
}
.pf-meta { color: var(--pf-muted); font-size: 0.92rem; }
.pf-pager { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.2rem; }
.pf-pager a, .pf-pager span { min-width: 2.2rem; text-align: center; text-decoration: none; border: 1px solid var(--pf-line); border-radius: 999px; padding: 0.35rem 0.7rem; background: white; }
.pf-pager .is-active { background: var(--pf-accent); color: var(--pf-accent-ink); border-color: var(--pf-accent); }
.pf-hero-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.75rem; margin: 1rem 0; }
.pf-sheet { font-family: var(--pf-font, var(--pf-sans)); color: var(--pf-ink); }
.pf-read h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; max-width: none; }
@media (min-width: 640px) {
  .pf-read h1 { font-size: 2.15rem; }
}
.pf-read .pf-meta a { color: inherit; text-decoration: none; font-weight: 600; }
.pf-read-hero { margin: 1.15rem 0 0; }
.pf-read-hero .pf-hero-img { margin: 0; border-radius: 0.75rem; }
.pf-read-hero figcaption { margin: 0.55rem 0.15rem 0; color: #64748b; font-size: 0.75rem; line-height: 1.5; }
.pf-source { margin-top: 1.6rem; color: var(--pf-muted); font-size: 0.92rem; }
.pf-prose {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 1.35rem;
  font-size: var(--pf-read, 17px);
  line-height: 1.75;
  color: #1e293b;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.pf-sheet .pf-side,
.pf-sheet .pf-side a { font-size: var(--pf-side, 14px); }
.pf-sheet .pf-side h2 { font-size: 1rem; }
.pf-prose h1,
.pf-prose h2,
.pf-prose h3,
.pf-prose h4 { color: #111827; letter-spacing: -0.02em; }
.pf-prose h1 { font-size: 2.25rem; font-weight: 800; margin: 2rem 0 1rem; line-height: 1.2; }
.pf-prose h2 { font-size: 1.875rem; font-weight: 700; margin: 1.8rem 0 0.85rem; line-height: 1.25; scroll-margin-top: 6.5rem; }
.pf-prose h3 { font-size: 1.5rem; font-weight: 700; margin: 1.6rem 0 0.75rem; line-height: 1.3; scroll-margin-top: 6.5rem; }
.pf-prose h4 { font-size: 1.25rem; font-weight: 600; margin: 1.4rem 0 0.6rem; }
.pf-prose p { margin: 0 0 1.25rem; }
.pf-prose ul,
.pf-prose ol { margin: 0 0 1.25rem; padding-left: 1.75rem; }
.pf-prose ul { list-style-type: disc; }
.pf-prose ol { list-style-type: decimal; }
.pf-prose li { display: list-item; margin-bottom: 0.5rem; }
.pf-prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}
.pf-prose a { color: var(--pf-accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; overflow-wrap: anywhere; }
.pf-prose pre {
  max-width: 100%;
  margin: 0 0 1.25rem;
  padding: 1rem;
  overflow-x: auto;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  white-space: pre;
}
.pf-prose code {
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  word-break: break-word;
}
.pf-prose pre code { padding: 0; }
.pf-prose img,
.pf-prose video,
.pf-prose embed,
.pf-prose object {
  max-width: 100%;
  height: auto;
  display: block;
}
.pf-prose img {
  border-radius: 8px;
  margin: 1.5rem auto;
}
.pf-prose figure { margin: 1.5rem 0; max-width: 100%; }
.pf-prose figure img { margin: 0 auto; }
.pf-prose figcaption {
  margin-top: 0.45rem;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.5;
}
.pf-prose iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 1.5rem auto;
  border: 0;
  border-radius: 8px;
}
.pf-prose .blog-also-read {
  margin: 0.85rem 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--pf-line, #e5e7eb);
  border-left: 3px solid var(--pf-accent, #111827);
  border-radius: 0.6rem;
  background: #f8fafc;
}
.pf-prose .blog-also-read-inner {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.pf-prose .blog-also-read-label {
  flex: none;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-accent, #b45309);
  line-height: 1.2;
}
.pf-prose .blog-also-read-link {
  color: var(--pf-ink, #111827);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
.pf-prose .blog-also-read-link:hover { color: var(--pf-accent); }
.pf-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.2rem 0 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  scrollbar-color: #94a3b8 #f1f5f9;
}
.pf-table-scroll::-webkit-scrollbar { height: 10px; }
.pf-table-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
.pf-table-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; }
.pf-prose table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.pf-table-scroll table { margin: 0; }
.pf-prose th,
.pf-prose td {
  border: 1px solid #e5e7eb;
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.pf-prose th {
  background: #f8fafc;
  font-weight: 700;
  white-space: nowrap;
}
.pf-prose td { min-width: 7.5rem; }
.pf-prose tbody tr:nth-child(even) { background: #f9fafb; }
.pf-prose * { max-width: 100%; box-sizing: border-box; }
.pf-prose .pf-table-scroll,
.pf-prose .pf-table-scroll > table,
.pf-prose .pf-table-scroll th,
.pf-prose .pf-table-scroll td { max-width: none; }
.pf-related { margin-top: 2.4rem; }
.pf-related h2 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.pf-related-grid { display: grid; }
.pf-related-card {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem;
  align-items: center;
  text-decoration: none;
  padding: 0.85rem 0;
  border-bottom: 1px solid #e5e7eb;
}
.pf-related-card img,
.pf-related-card .pf-blog-thumb { width: 100%; height: 4.2rem; object-fit: cover; border-radius: 0.35rem; background: #e2e8f0; }
.pf-related-card strong { display: block; font-size: 0.95rem; line-height: 1.35; }
.pf-related-card small { display: block; margin-top: 0.2rem; color: var(--pf-muted); font-size: 0.82rem; }
@media (min-width: 720px) {
  .pf-related-grid { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
}
.site-ad {
  display: block;
  width: 100%;
  max-width: 970px;
  margin: 16px auto;
  padding: 0 12px;
  text-align: center;
}
.site-ad > * { max-width: 100%; margin-left: auto; margin-right: auto; }
.site-ad--inarticle { margin: 24px auto; }
.site-ad--inarticle:not(:has(ins.adsbygoogle)):not(:has(iframe)) {
  width: auto;
  max-width: 100%;
  padding: 0;
}
.pf-prose .site-ad img,
.site-ad img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
}
.pf-home {
  isolation: isolate;
  background: #f6f5fb;
  color: #2e2748;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pf-home > main { flex: 1; }
.pf-sheet { background: #fff; border-bottom: 1px solid #e8ecf4; }
.pf-subpage { padding-top: 1.35rem; padding-bottom: 3rem; }
.pf-crumb-wrap { padding-top: 1rem; padding-bottom: 0; }
.pf-crumb { margin: 0 0 1rem; }
.pf-crumb ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
}
.pf-crumb ol::-webkit-scrollbar { display: none; }
.pf-crumb li { display: inline-flex; flex: none; align-items: center; white-space: nowrap; }
.pf-crumb a { color: #1c1730; font-weight: 600; text-decoration: none; }
.pf-crumb a:hover { color: #6d5bd0; }
.pf-crumb [aria-current="page"] { color: #6d5bd0; font-weight: 600; }
.pf-crumb-sep { margin: 0 0.45rem; color: #b7b0c9; }
.pf-top {
  background: #fff;
  border-bottom: 1px solid #e8ecf4;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.pf-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.85rem; padding-bottom: 0.85rem; min-width: 0; }
.pf-home .pf-nav-links { flex-wrap: wrap; justify-content: flex-end; gap: 0.85rem 1.1rem; min-width: 0; }
.pf-home .pf-brand { color: #111827; font-size: 1.05rem; flex-shrink: 1; min-width: 0; margin-right: auto; }
.pf-home .pf-nav-links a { color: #1f2937; font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.pf-home .pf-btn,
.pf-home .pf-nav-links a.pf-btn {
  background: #111827;
  color: #fff;
  border-radius: 999px;
  padding: 0.65rem 1.05rem;
  font-weight: 700;
  flex-shrink: 0;
}
.pf-home .pf-btn.alt,
.pf-home .pf-nav-links a.pf-btn.alt { background: #fff; color: #111827; box-shadow: inset 0 0 0 1px #d7dce8; }
.pf-home .pf-hero { padding: 2.4rem 0 2.2rem; }
.pf-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); gap: 2rem; align-items: center; }
.pf-home .pf-kicker { color: #b45309; }
.pf-home .pf-hero h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 700; letter-spacing: -0.035em; color: #1a1f2b; max-width: 16ch; margin-bottom: 0.8rem; }
.pf-home .pf-lead { color: #4b5563; font-size: 1.08rem; line-height: 1.7; }
.pf-preview {
  width: 100%;
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  border: 1px solid #e7ebf3;
}
.pf-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem;
  background: #f3f5fb;
  border-bottom: 1px solid #e7ebf3;
  color: #6b7280;
  font-size: 0.82rem;
}
.pf-preview-bar span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #ff5f57; }
.pf-preview-bar span:nth-child(2) { background: #febc2e; }
.pf-preview-bar span:nth-child(3) { background: #28c840; }
.pf-preview-bar em { margin-left: 0.45rem; font-style: normal; }
.pf-preview-body { padding: 1.3rem 1.25rem 1.4rem; }
.pf-preview-who { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.8rem; }
.pf-preview-avatar {
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: grid; place-items: center; background: #e8eefc; color: #1e3a8a; font-weight: 700;
}
.pf-preview-who p, .pf-preview-body > p { margin: 0.15rem 0 0; color: #6b7280; }
.pf-preview-work { margin-top: 1rem; padding: 0.8rem 0.9rem; border-radius: 0.8rem; background: #f8fafc; border: 1px solid #e7ebf3; }
.pf-preview-work span { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; }
.pf-home .pf-chip { background: #eef2ff; color: #1e3a8a; }
.pf-band { padding: 2.6rem 0; }
.pf-center-lead { margin: -0.6rem auto 1.3rem; text-align: center; }
.pf-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pf-quotes-page { grid-template-columns: repeat(2, 1fr); }
.pf-quote { background: #fff; border: 1px solid #e7ebf3; border-radius: 1rem; padding: 1.1rem 1.15rem; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); }
.pf-quote p { margin: 0 0 0.9rem; color: #1f2937; }
.pf-quote strong { display: block; }
.pf-quote span { color: #6b7280; font-size: 0.9rem; }
.pf-band-plain { background: #fff; }
.pf-section-title { text-align: center; font-size: clamp(1.6rem, 2.5vw, 2rem); margin-bottom: 1.6rem; }
.pf-home .pf-card { border-color: #e7ebf3; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); }
.pf-center { text-align: center; }
.pf-center .pf-lead, .pf-center .pf-actions { margin-left: auto; margin-right: auto; }
.pf-center .pf-actions,
.pf-actions.pf-center { justify-content: center; }
.pf-price-card {
  max-width: 28rem;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid #e7ebf3;
  border-radius: 1.2rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.pf-price-card .pf-actions { justify-content: center; }
.pf-faq-wrap { max-width: 40rem; }
.pf-home .pf-faq details { background: #fff; }
.pf-sitefoot { background: #fff; border-top: 1px solid #e7ebf3; padding: 2rem 0; }
.pf-sitefoot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
.pf-sitefoot p { color: #6b7280; max-width: 28rem; }
.pf-sitefoot nav { display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; }
.pf-sitefoot a { color: #1f2937; text-decoration: none; font-weight: 600; }
@media (max-width: 800px) {
  .pf-hero, .pf-grid, .pf-bento, .pf-split, .pf-site-hero, .pf-hero-grid, .pf-sitefoot-grid, .pf-quotes, .pf-quotes-page { grid-template-columns: 1fr; }
  .pf-bento-wide { grid-row: auto; }
  .pf-article { flex-direction: column; }
  .pf-home .pf-hero h1 { max-width: none; }
  .pf-home .pf-top-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand menu buy";
    align-items: center;
    column-gap: 0.55rem;
    row-gap: 0;
  }
  .pf-home .pf-brand {
    grid-area: brand;
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pf-home .pf-menu { display: grid; grid-area: menu; }
  .pf-home .pf-top-inner > .pf-btn { grid-area: buy; padding: 0.55rem 0.72rem; font-size: 0.88rem; }
  .pf-home .pf-logo { height: 3.35rem; }
  .pf-home .pf-nav-links {
    display: none;
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.45rem;
    border-radius: 1.1rem;
  }
  .pf-home .pf-nav-links.is-open { display: flex; }
  .pf-home .pf-nav-links a {
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
  }
  .pf-home .pf-nav-links a:hover { transform: none; }
  .pf-landing { background-attachment: scroll; }
  .pf-landing .pf-demo { grid-template-columns: 1fr; }
  .pf-landing .pf-demo .pf-actions { justify-content: flex-start; }
}

.pf-landing {
  isolation: isolate;
  background: #f6f5fb;
  color: #2e2748;
}
.pf-home::before,
.pf-landing::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, #f6f5fb 0%, #e6e2f3 100%);
}
.pf-landing .pf-hero,
.pf-landing .pf-band,
.pf-landing .pf-band-plain,
.pf-landing #isi,
.pf-landing #cara,
.pf-landing #testimoni,
.pf-landing #contoh,
.pf-landing #harga,
.pf-landing #faq,
.pf-landing #artikel { background: transparent; }
.pf-landing .pf-hero .pf-wrap,
.pf-landing .pf-band .pf-wrap { padding-bottom: 0; }
.pf-landing .pf-hero { padding: 1.1rem 0 2.4rem; }
.pf-landing .pf-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.85rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e4e9f2;
  color: #1d4ed8;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.pf-landing .pf-hero-grid { gap: 2.6rem; align-items: center; }
.pf-hero-copy { max-width: 36rem; }
.pf-landing .pf-hero-copy {
  padding: 1.55rem 1.45rem 1.35rem;
  border-radius: 1.35rem;
}
.pf-landing .pf-hero .pf-kicker {
  margin-bottom: 0.85rem;
  padding: 0.28rem 0.72rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.pf-landing .pf-hero h1 {
  max-width: 12em;
  margin-bottom: 0.9rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: #1c1730;
}
.pf-landing .pf-hero h1 span {
  background: linear-gradient(100deg, #6d5bd0, #8b7cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pf-landing .pf-hero .pf-lead {
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.75;
  color: #526072;
}
.pf-landing .pf-hero .pf-btn {
  padding: 0.82rem 1.2rem;
  font-weight: 600;
}
.pf-landing .pf-hero .pf-trust {
  display: grid;
  gap: 0.42rem;
  margin-top: 1.15rem;
}
.pf-landing .pf-hero .pf-trust li {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  color: #4f476c;
}
.pf-landing .pf-hero .pf-trust li::before {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  border-radius: 50%;
  background: #7c6cf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.6 11 12 5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
  box-shadow: none;
}
.pf-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}
.pf-trust li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #1f2937;
  font-size: 0.92rem;
  font-weight: 600;
}
.pf-trust li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #111827;
  box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.08);
}
.pf-landing .pf-preview {
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
}
.pf-landing .pf-preview-cover {
  height: 6.4rem;
  overflow: hidden;
  background: #e4dfef;
}
.pf-landing .pf-preview-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.pf-landing .pf-preview-body { padding-top: 0; }
.pf-landing .pf-preview-avatar {
  width: 4.6rem;
  height: 4.6rem;
  margin: -2.3rem 0 0.85rem;
  padding: 0;
  overflow: hidden;
  border: 3px solid #fff;
  background: #e7e2f2;
  box-shadow: 0 8px 18px rgba(80, 60, 120, 0.18);
}
.pf-landing .pf-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.pf-landing .pf-preview-who {
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 0.95rem;
}
.pf-landing .pf-preview-edu { margin-right: 1.6rem; }
.pf-preview-edu { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.pf-preview-edu-mark {
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 0.4rem;
  background: #f5c518;
  color: #111827;
}
.pf-preview-edu > div span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}
.pf-preview-edu strong { display: block; font-size: 0.86rem; line-height: 1.25; }
.pf-preview-note { margin: 0 0 0.15rem; color: #5c5478; }
.pf-preview-works { display: grid; gap: 0.65rem; margin-top: 0.85rem; }
.pf-landing .pf-preview-work {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.62rem 0.7rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
}
.pf-work-art {
  width: 2.7rem;
  height: 2.7rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  color: #fff;
  background: linear-gradient(145deg, #9b8cf8, #6d5bd0);
}
.pf-work-art svg { width: 1.2rem; height: 1.2rem; display: block; }
.pf-work-b .pf-work-art { background: linear-gradient(145deg, #f9a8c8, #e86b92); }
.pf-work-c .pf-work-art { background: linear-gradient(145deg, #8ec8f8, #6d7cf0); }
.pf-work-d .pf-work-art { background: linear-gradient(145deg, #f6d98a, #e09a3a); }
.pf-landing .pf-preview-work .pf-work-art {
  display: grid;
  place-items: center;
  color: #fff;
}
.pf-landing .pf-preview-work span {
  display: block;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.78rem;
  color: #6b7280;
}
.pf-landing .pf-preview-work strong { display: block; font-size: 0.95rem; color: #1c1730; }
.pf-bento-sample {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 1.15rem;
  padding: 0.75rem 0.85rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
}
.pf-bento-sample > span {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #6d5bd0;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.pf-bento-sample strong, .pf-bento-sample small { display: block; }
.pf-bento-sample small { color: #6b7280; }
.pf-bento-sample img {
  width: 3.4rem;
  height: 3.4rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.pf-landing .pf-bento-sample p {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #5c5478;
}
.pf-bento-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pf-bento-tags span {
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  background: rgba(109, 91, 208, 0.12);
  color: #5b4dc4;
  font-size: 0.75rem;
  font-weight: 600;
}
.pf-section-head { max-width: 36rem; margin: 0 auto 1.5rem; text-align: center; }
.pf-section-head .pf-section-title { margin-bottom: 0.45rem; }
.pf-section-head .pf-lead { margin: 0 auto; }
.pf-landing .pf-band { padding: 1.4rem 0 2.6rem; scroll-margin-top: 5rem; }
.pf-landing .pf-bento-wide { display: flex; flex-direction: column; }
.pf-landing .pf-bento-wide .pf-bento-sample { margin-top: auto; }
.pf-landing .pf-card {
  padding: 1.25rem 1.2rem 1.35rem;
}
.pf-feature-mark {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.85rem;
  border-radius: 0.75rem;
  background: #eef2ff;
  color: #1e3a8a;
}
.pf-landing .pf-step {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  margin: 0 0 0.9rem;
  border-radius: 0.75rem;
  background: #111827;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.pf-landing .pf-quote {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.2rem 1.2rem 1.15rem;
}
.pf-landing .pf-quote p { flex: 1; }
.pf-landing .pf-quote strong { margin-top: 1rem; }
.pf-landing .pf-quote::before {
  content: "“";
  display: block;
  margin-bottom: 0.15rem;
  color: #93c5fd;
  font-size: 2.3rem;
  line-height: 0.8;
  font-weight: 700;
}
.pf-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem 2rem;
  align-items: center;
  padding: 1.7rem 1.6rem;
  border-radius: 1.3rem;
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(96, 165, 250, 0.35), transparent 70%),
    #111827;
  color: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.pf-demo h2 { margin: 0 0 0.4rem; color: #fff; text-align: left; font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
.pf-demo .pf-lead { color: #d1d5db; margin: 0; }
.pf-demo .pf-kicker { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); color: #dbeafe; }
.pf-demo .pf-actions { margin-top: 0; }
.pf-demo .pf-btn.alt { background: #fff; color: #111827; box-shadow: none; }
.pf-landing .pf-price-card {
  max-width: 34rem;
  padding: 2.1rem 1.7rem 1.7rem;
  border-color: #dbe3f0;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}
.pf-includes { list-style: none; margin: 1.15rem 0 0; padding: 0; text-align: left; display: grid; gap: 0.6rem; }
.pf-includes li { display: flex; gap: 0.6rem; align-items: flex-start; color: #1f2937; }
.pf-includes li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.12rem;
  border-radius: 50%;
  background: #111827 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.6 11 12 5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}
.pf-landing .pf-faq details { padding: 0.95rem 1.05rem; }
.pf-landing .pf-faq summary { font-size: 1.02rem; }
.pf-landing .pf-article {
  padding: 0.95rem 1.05rem;
  box-shadow: 0 8px 20px rgba(109, 91, 208, 0.06);
}
.pf-landing .pf-top {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: #ebe4fb;
}
.pf-landing .pf-btn,
.pf-landing .pf-nav-links a.pf-btn,
.pf-landing .pf-btn.alt,
.pf-landing .pf-hero .pf-btn.alt,
.pf-landing .pf-demo .pf-btn.alt {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.14));
  color: #3a2d78;
  border: 1px solid rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(1.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 16px rgba(124, 108, 240, 0.14),
    0 0 0 1px rgba(168, 186, 214, 0.38),
    0 10px 24px rgba(90, 70, 180, 0.12);
  transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}
.pf-landing .pf-btn:hover,
.pf-landing .pf-btn.alt:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #1c1730;
  transform: scale(1.08);
}
.pf-landing .pf-kicker {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: #5b4dc4;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
}
.pf-landing .pf-section-title { font-weight: 600; letter-spacing: -0.03em; color: #2e2748; }
.pf-landing .pf-section-head .pf-lead,
.pf-landing .pf-card p,
.pf-landing .pf-price-card > p { color: #5c5478; line-height: 1.65; }
.pf-landing .pf-band-plain { background: transparent; }
.pf-landing .pf-quote::before { color: #c4b5fd; }
.pf-landing .pf-demo { color: #3b3260; }
.pf-landing .pf-demo h2 { color: #2e2748; font-weight: 600; }
.pf-landing .pf-demo .pf-lead { color: #5c5478; }
.pf-landing .pf-demo .pf-btn.alt { color: #3a2d78; }
.pf-landing .pf-price-card .pf-price { color: #6d5bd0; }
.pf-landing .pf-includes li::before {
  background: #7c6cf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2 6.6 11 12 5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}
.pf-landing .pf-sitefoot {
  background: rgba(255, 255, 255, 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
}
.pf-landing .pf-sitefoot a { color: #4c4470; font-weight: 600; }
.pf-landing .pf-hero .pf-wrap { position: relative; z-index: 1; }
@keyframes pf-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(12px, -10px, 0); }
}
.pf-home .pf-top,
.pf-landing .pf-top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 0.85rem;
}
.pf-home .pf-top-inner,
.pf-landing .pf-top-inner {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.pf-home .pf-top.is-scrolled .pf-top-inner,
.pf-landing .pf-top.is-scrolled .pf-top-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 1.4rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(70, 40, 110, 0.08),
    0 12px 28px rgba(50, 20, 90, 0.12);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
}
.pf-home .pf-nav-links,
.pf-landing .pf-nav-links {
  justify-content: center;
  gap: 0.1rem;
  padding: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(70, 40, 110, 0.08),
    0 8px 18px rgba(50, 20, 90, 0.1);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
}
.pf-home .pf-nav-links a,
.pf-landing .pf-nav-links a {
  padding: 0.38rem 0.78rem;
  border-radius: 999px;
  color: #3b3260;
  transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}
.pf-home .pf-nav-links a:hover,
.pf-landing .pf-nav-links a:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #1c1730;
  transform: scale(1.08);
}
.pf-home .pf-top-inner > .pf-btn,
.pf-landing .pf-top-inner > .pf-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12));
  color: #3a2d78;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(70, 40, 110, 0.08),
    0 8px 18px rgba(50, 20, 90, 0.1);
  transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}
.pf-home .pf-top-inner > .pf-btn:hover,
.pf-landing .pf-top-inner > .pf-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.28);
  color: #1c1730;
}
.pf-home .pf-nav-links a[aria-current="page"],
.pf-home .pf-nav-links a[aria-current="page"]:hover,
.pf-landing .pf-nav-links a[aria-current="page"],
.pf-landing .pf-nav-links a[aria-current="page"]:hover {
  background: rgba(109, 91, 208, 0.78);
  color: #fff;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 14px rgba(124, 108, 240, 0.32);
}
@media (min-width: 801px) {
  .pf-home .pf-top-inner,
  .pf-landing .pf-top-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  .pf-home .pf-brand,
  .pf-landing .pf-brand {
    justify-self: start;
    margin-right: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pf-home .pf-nav-links,
  .pf-landing .pf-nav-links { justify-self: center; flex-wrap: nowrap; }
  .pf-home .pf-top-inner > .pf-btn,
  .pf-landing .pf-top-inner > .pf-btn { justify-self: end; }
}
.pf-preview-stage { position: relative; }
.pf-float {
  position: absolute;
  z-index: 2;
  top: -0.65rem;
  right: 0.85rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(72, 52, 120, 0.1);
  color: #5b4dc4;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}
.pf-bento { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1rem; }
.pf-bento-wide { grid-row: span 2; }
@media (max-width: 800px) {
  .pf-bento { grid-template-columns: 1fr; }
  .pf-bento-wide { grid-row: auto; }
}
.pf-landing .pf-band-plain { background: transparent; }
.pf-landing .pf-hero-copy,
.pf-landing .pf-card,
.pf-landing .pf-quote,
.pf-landing .pf-article,
.pf-landing .pf-faq details,
.pf-landing .pf-preview,
.pf-landing .pf-price-card,
.pf-landing .pf-demo {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.22) 18%, rgba(255, 255, 255, 0.08) 52%, rgba(232, 226, 246, 0.22) 100%);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(92, 74, 140, 0.18),
    inset -1px 0 0 rgba(92, 74, 140, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 14px 28px rgba(72, 52, 120, 0.1),
    0 2px 6px rgba(72, 52, 120, 0.06);
  position: relative;
  isolation: isolate;
  transition: transform 0.32s ease, box-shadow 0.32s ease, background 0.32s ease;
}
.pf-landing .pf-hero-copy::after,
.pf-landing .pf-card::after,
.pf-landing .pf-quote::after,
.pf-landing .pf-article::after,
.pf-landing .pf-faq details::after,
.pf-landing .pf-preview::after,
.pf-landing .pf-price-card::after,
.pf-landing .pf-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.28) 34%, rgba(150, 130, 190, 0.16) 68%, rgba(255, 255, 255, 0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.pf-landing .pf-hero-copy:hover,
.pf-landing .pf-card:hover,
.pf-landing .pf-quote:hover,
.pf-landing .pf-article:hover,
.pf-landing .pf-faq details:hover,
.pf-landing .pf-preview:hover,
.pf-landing .pf-price-card:hover,
.pf-landing .pf-demo:hover {
  z-index: 2;
  transform: scale(1.035);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.28) 18%, rgba(255, 255, 255, 0.12) 52%, rgba(232, 226, 246, 0.26) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(92, 74, 140, 0.18),
    inset -1px 0 0 rgba(92, 74, 140, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 20px 36px rgba(72, 52, 120, 0.14),
    0 2px 6px rgba(72, 52, 120, 0.06);
}
.pf-landing .pf-chip,
.pf-landing .pf-feature-mark,
.pf-landing .pf-card .pf-step,
.pf-landing .pf-contact-mark,
.pf-landing .pf-preview-tabs button.is-active {
  background: rgba(255, 255, 255, 0.38);
  color: #5b4dc4;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
}
.pf-landing .pf-preview .pf-chip-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0;
  margin-top: 0.95rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(109, 91, 208, 0.14);
}
.pf-landing .pf-preview .pf-chip {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5c5478;
}
.pf-landing .pf-preview .pf-chip:not(:last-child)::after {
  content: "·";
  margin: 0 0.45rem;
  color: #b7b0cc;
  font-weight: 700;
}
.pf-landing .pf-feature-mark,
.pf-landing .pf-card .pf-step { border-radius: 0.95rem; }
.pf-landing .pf-card .pf-step { font-weight: 700; }
.pf-landing .pf-preview-bar {
  background: rgba(255, 255, 255, 0.28);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
.pf-landing .pf-card,
.pf-landing .pf-quote,
.pf-landing .pf-article,
.pf-landing .pf-faq details {
  border-radius: 1.35rem;
}
.pf-landing .pf-preview { min-height: 28rem; }
.pf-landing .pf-faq details[open] { border-left-color: rgba(124, 108, 240, 0.7); }
.pf-landing.pf-motion .pf-band {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pf-landing.pf-motion .pf-band.is-in { opacity: 1; transform: none; }
.pf-preview-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem 0.15rem;
}
.pf-preview-tabs button {
  border: 0;
  background: transparent;
  color: #5c5478;
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.pf-preview-tabs button.is-active { background: rgba(255, 255, 255, 0.38); color: #5b4dc4; }
.pf-preview-panel { display: none; }
.pf-preview-panel.is-active { display: block; animation: pf-fade-in 0.35s ease; }
.pf-preview-body--plain { padding-top: 1.1rem; }
.pf-landing .pf-preview-contact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
}
.pf-contact-mark {
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: #efeaff;
  color: #5b4dc4;
  border: 0;
}
.pf-contact-mark svg { width: 1.15rem; height: 1.15rem; display: block; }
.pf-contact-wa { background: #e5f6ec; color: #1c8a4a; }
.pf-contact-link { background: #e7f0ff; color: #3a6ed4; }
.pf-landing .pf-preview-contact .pf-contact-mark {
  display: grid;
  place-items: center;
  background: #efeaff;
  color: #5b4dc4;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pf-landing .pf-preview-contact .pf-contact-wa { background: #e5f6ec; color: #1c8a4a; }
.pf-landing .pf-preview-contact .pf-contact-link { background: #e7f0ff; color: #3a6ed4; }
.pf-landing .pf-preview-contact .pf-contact-ig { background: #fde8f3; color: #c43b78; }
.pf-landing .pf-preview-contact span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  color: #6b7280;
}
.pf-landing .pf-preview-contact strong { display: block; color: #1c1730; font-size: 0.95rem; }
@keyframes pf-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  .pf-float { right: 1rem; }
}
@media (max-width: 800px) {
  .pf-landing { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-float,
  .pf-preview-panel.is-active { animation: none; }
  .pf-landing.pf-motion .pf-band,
  .pf-landing .pf-hero-copy,
  .pf-landing .pf-card,
  .pf-landing .pf-quote,
  .pf-landing .pf-article,
  .pf-landing .pf-faq details,
  .pf-landing .pf-preview,
  .pf-landing .pf-price-card,
  .pf-landing .pf-demo,
  .pf-landing .pf-nav-links a,
  .pf-landing .pf-btn { transition: none; transform: none; }
  .pf-landing.pf-motion .pf-band,
  .pf-landing .pf-card,
  .pf-landing .pf-quote { opacity: 1; }
}

.pf-home:has(.pf-checkout) > main.pf-sheet,
.pf-home:has(.pf-article-list) > main.pf-sheet,
.pf-home:has(.pf-read) > main.pf-sheet,
.pf-home:has(.pf-product-page) > main.pf-sheet {
  background: transparent;
  border-bottom: 0;
}
.pf-home:has(.pf-checkout) .pf-sitefoot,
.pf-home:has(.pf-article-list) .pf-sitefoot,
.pf-home:has(.pf-read) .pf-sitefoot,
.pf-home:has(.pf-product-page) .pf-sitefoot {
  background: rgba(255, 255, 255, 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
}
.pf-home:has(.pf-article-list) .pf-sitefoot a,
.pf-home:has(.pf-read) .pf-sitefoot a { color: #4c4470; }
.pf-checkout {
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.4rem 0 0.6rem;
}
.pf-checkout .pf-kicker {
  display: inline-flex;
  margin: 0;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #5b4dc4;
  letter-spacing: 0.12em;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.pf-checkout h1 {
  max-width: 11ch;
  margin: 0.85rem 0 0.7rem;
  color: #1c1730;
  font-size: clamp(2.05rem, 3.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.pf-checkout .pf-lead {
  max-width: 28rem;
  margin: 0;
  color: #5c5478;
  font-size: 1.05rem;
  line-height: 1.65;
}
.pf-checkout .pf-form {
  position: relative;
  width: 100%;
  max-width: none;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: 1.35rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.38) 48%, rgba(232, 226, 246, 0.42) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(92, 74, 140, 0.12),
    0 16px 32px rgba(72, 52, 120, 0.1);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}
.pf-checkout .pf-form label {
  color: #1c1730;
  font-size: 0.92rem;
  font-weight: 600;
}
.pf-checkout .pf-form input {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(109, 91, 208, 0.16);
  border-radius: 0.85rem;
  color: #1c1730;
}
.pf-checkout .pf-form input:focus {
  outline: none;
  border-color: rgba(109, 91, 208, 0.55);
  box-shadow: 0 0 0 3px rgba(109, 91, 208, 0.14);
}
.pf-checkout .pf-help { color: #5c5478; margin: 0; }
.pf-checkout .pf-help strong { color: #1c1730; }
.pf-home .pf-checkout .pf-btn {
  width: 100%;
  margin-top: 0.2rem;
  background: #6d5bd0;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.1rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(109, 91, 208, 0.28);
}
.pf-home .pf-checkout .pf-btn:hover {
  background: #5b4bc4;
  color: #fff;
  transform: none;
}
@media (max-width: 800px) {
  .pf-checkout h1 { max-width: none; }
}

.pf-article-list > div > .pf-kicker,
.pf-article-single > .pf-kicker {
  display: inline-flex;
  margin: 0;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #5b4dc4;
  letter-spacing: 0.12em;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.pf-article-single > .pf-kicker a { color: inherit; text-decoration: none; }
.pf-article-list .pf-list-title,
.pf-read h1 {
  color: #1c1730;
  letter-spacing: -0.035em;
}
.pf-article-list .pf-list-title {
  margin: 0.75rem 0 0.45rem;
  font-size: clamp(2rem, 3vw, 2.45rem);
}
.pf-article-list .pf-lead { color: #5c5478; max-width: 36rem; }
.pf-article-list .pf-blog-list { gap: 0.75rem; margin-top: 1.35rem; }
.pf-article-list .pf-blog-item {
  padding: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 1.15rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.46) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 22px rgba(72, 52, 120, 0.08);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: #1c1730;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pf-article-list .pf-blog-item:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 28px rgba(72, 52, 120, 0.12);
}
.pf-article-list .pf-blog-item h2 { color: #1c1730; font-size: 1.05rem; }
.pf-article-list .pf-blog-item .pf-kicker {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: #6d5bd0;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}
.pf-article-list .pf-blog-item p,
.pf-article-list .pf-meta { color: #5c5478; }
.pf-article-list .pf-blog-item img,
.pf-article-list .pf-blog-thumb { border-radius: 0.75rem; }
.pf-article-list .pf-pager a,
.pf-article-list .pf-pager span {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(109, 91, 208, 0.16);
  color: #3a3358;
}
.pf-article-list .pf-pager .is-active {
  background: #6d5bd0;
  border-color: #6d5bd0;
  color: #fff;
}
.pf-article-single {
  padding: 1.45rem 1.45rem 1.6rem;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 32px rgba(72, 52, 120, 0.08);
}
.pf-read .pf-meta,
.pf-read .pf-source,
.pf-read .pf-read-hero figcaption { color: #5c5478; }
.pf-read .pf-hero-img { border-radius: 0.75rem; }
.pf-read .pf-prose img { border-radius: 8px; height: auto; }
.pf-read .pf-prose .site-ad img { border-radius: 0; margin: 0 auto; }
.pf-read .pf-prose { color: #1e293b; }
.pf-read .pf-prose a { color: #5b4dc4; }
.pf-read .pf-prose .blog-also-read {
  background: #f6f5fb;
  border-color: rgba(109, 91, 208, 0.16);
  border-left-color: #6d5bd0;
}
.pf-read .pf-prose .blog-also-read-label { color: #5b4dc4; }
.pf-read .pf-prose .blog-also-read-link { color: #1c1730; }
.pf-read .pf-related h2 { color: #1c1730; }
.pf-read .pf-related-grid { gap: 0.7rem; }
.pf-read .pf-related-card {
  padding: 0.65rem;
  border: 1px solid rgba(109, 91, 208, 0.12);
  border-radius: 0.95rem;
  background: #f6f5fb;
  color: #1c1730;
}
.pf-read .pf-related-card img,
.pf-read .pf-related-card .pf-blog-thumb { border-radius: 0.65rem; }
.pf-read .pf-related-card small { color: #5c5478; }
.pf-article-list .pf-side,
.pf-read .pf-side {
  padding: 1rem 1.05rem 0.35rem;
  border-radius: 1.2rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 24px rgba(72, 52, 120, 0.08);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.pf-article-list .pf-side h2,
.pf-read .pf-side h2 { color: #1c1730; }
.pf-article-list .pf-side a,
.pf-read .pf-side a {
  color: #3a3358;
  border-bottom-color: rgba(109, 91, 208, 0.12);
}
.pf-article-list .pf-side a:last-child,
.pf-read .pf-side a:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .pf-article-list .pf-side,
  .pf-read .pf-side { top: 5.75rem; }
}
@media (max-width: 800px) {
  .pf-article-single { padding: 1.05rem 0.95rem 1.2rem; }
}
.pf-toc { margin: 1.15rem 0 0; }
.pf-toc .blog-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.15rem;
  margin: 0;
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  border: 1px solid #e8eef5;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.pf-toc .blog-toc-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.pf-toc .blog-toc-title::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: #6d5bd0;
  box-shadow: 0 0 0 2px rgba(109, 91, 208, 0.28);
}
.pf-toc .blog-toc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #6d5bd0;
  color: #fff;
  cursor: pointer;
}
.pf-toc .blog-toc-toggle:hover { filter: brightness(1.05); }
.pf-toc-icon {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.75px solid #fff;
  border-bottom: 1.75px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.15s ease;
}
.pf-toc .blog-toc-toggle[aria-expanded="true"] .pf-toc-icon {
  transform: rotate(225deg) translate(-1px, -1px);
}
.pf-toc .blog-toc-list {
  counter-reset: pf-toc;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid #e8eef5;
  border-radius: 1rem;
  background: #fff;
}
.pf-toc .blog-toc-item {
  counter-increment: pf-toc;
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid #eef2f7;
}
.pf-toc .blog-toc-item:first-child { padding-top: 0; }
.pf-toc .blog-toc-item:last-child { padding-bottom: 0; border-bottom: 0; }
.pf-toc .blog-toc-link {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}
.pf-toc .blog-toc-link::before {
  content: counter(pf-toc, decimal-leading-zero);
  color: #6d5bd0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.45;
}
.pf-toc .blog-toc-sublist {
  list-style: none;
  margin: 0.4rem 0 0 2.15rem;
  padding: 0;
}
.pf-toc .blog-toc-sublink {
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
}
.pf-toc .blog-toc-link:hover,
.pf-toc .blog-toc-sublink:hover { color: #6d5bd0; }
@media (min-width: 640px) {
  .pf-toc { margin-top: 1.35rem; }
  .pf-toc .blog-toc-head {
    gap: 0.75rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  }
  .pf-toc .blog-toc-title { gap: 0.45rem; font-size: 0.78rem; letter-spacing: 0.08em; }
  .pf-toc .blog-toc-title::before {
    width: 0.45rem;
    height: 0.45rem;
    box-shadow: 0 0 0 3px rgba(109, 91, 208, 0.28);
  }
  .pf-toc .blog-toc-toggle { width: 2.1rem; height: 2.1rem; }
  .pf-toc-icon { width: 0.55rem; height: 0.55rem; border-right-width: 2px; border-bottom-width: 2px; }
}

.pf-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.pf-product {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
  text-decoration: none;
  color: #1c1730;
  border-radius: 1.2rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 24px rgba(72, 52, 120, 0.08);
}
.pf-product-open {
  display: grid;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}
.pf-product strong { font-size: 1.05rem; }
.pf-product-open > span:last-child { color: #5c5478; font-size: 0.92rem; line-height: 1.45; }
.pf-product-buy {
  justify-self: start;
  margin-top: 0.15rem;
  color: #3a2d78;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}
.pf-product-frame {
  display: grid;
  gap: 0.55rem;
  min-height: 8.5rem;
  margin-bottom: 0.45rem;
  padding: 0.7rem;
  border-radius: 0.9rem;
  background: #f4f1fb;
}
.pf-product-bar { height: 0.45rem; width: 38%; border-radius: 999px; background: rgba(28, 23, 48, 0.16); }
.pf-product-face { display: flex; align-items: center; gap: 0.65rem; }
.pf-product-avatar { width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: #6d5bd0; }
.pf-product-lines { display: grid; gap: 0.35rem; flex: 1; }
.pf-product-lines i { display: block; height: 0.42rem; border-radius: 999px; background: rgba(28, 23, 48, 0.14); }
.pf-product-lines i:first-child { width: 72%; }
.pf-product-lines i:nth-child(2) { width: 48%; }
.tone-ink { background: #2a2440; }
.tone-ink .pf-product-bar,
.tone-ink .pf-product-lines i { background: rgba(255, 255, 255, 0.28); }
.tone-ink .pf-product-avatar { background: #c4b5fd; }
.tone-paper { background: #fff; border: 1px solid rgba(109, 91, 208, 0.12); }
.tone-paper .pf-product-avatar { background: #1c1730; }
.tone-blush { background: #fde8f3; }
.tone-blush .pf-product-avatar { background: #e86b92; }
.tone-moss { background: #e7f6ee; }
.tone-moss .pf-product-avatar { background: #1c8a4a; }
.tone-amber { background: #fff4dc; }
.tone-amber .pf-product-avatar { background: #e09a3a; }
.pf-product-page .pf-section-head,
.pf-product-detail { max-width: 46rem; }
.pf-product-detail h1 {
  margin: 0.7rem 0 0.45rem;
  color: #1c1730;
  letter-spacing: -0.03em;
}
.pf-product-detail .pf-lead { color: #5c5478; }
.pf-product-stage { margin: 1.2rem 0 0.4rem; }
.pf-product-stage .pf-product-frame { min-height: 14rem; padding: 1.2rem; }
.pf-product-stage .pf-product-avatar { width: 3.4rem; height: 3.4rem; }
.pf-home .pf-product-detail .pf-btn.alt {
  background: rgba(255, 255, 255, 0.72);
  color: #3a2d78;
}
@media (max-width: 900px) {
  .pf-product-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pf-product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .pf-home .pf-nav-links,
  .pf-landing .pf-nav-links {
    display: none;
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.15rem;
    padding: 0.45rem;
    border-radius: 1.1rem;
  }
  .pf-home .pf-nav-links.is-open,
  .pf-landing .pf-nav-links.is-open { display: flex; }
  .pf-home .pf-nav-links a,
  .pf-landing .pf-nav-links a { transform: none; }
  .pf-home .pf-nav-links a:hover,
  .pf-landing .pf-nav-links a:hover { transform: none; }
}

/* folio themes */
body.pf-body-klasik { background: #f6f1e8; }
body.pf-body-studio { background: #14121c; color: #f6f3ff; }
body.pf-body-editorial { background: #f4efe6; }
body.pf-body-galeri { background: #fbf7f8; }
body.pf-body-lamaran { background: #e7f0ea; }
body.pf-body-kreator { background: #fff6e8; }
body[class*="pf-body-"] .pf-wrap { max-width: 46rem; }
body.pf-body-studio .pf-wrap,
body.pf-body-galeri .pf-wrap { max-width: 64rem; }
body.pf-body-editorial .pf-wrap,
body.pf-body-lamaran .pf-wrap { max-width: 60rem; }
body.pf-body-kreator .pf-wrap { max-width: 36rem; }

.pf-folio { padding: 2rem 0 1rem; }
.pf-folio .pf-block { padding: 0.2rem 0 1.35rem; }
.pf-label {
  margin: 0 0 0.7rem;
  font-family: var(--pf-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-muted);
}
.pf-folio-lead { margin: 0.2rem 0 0; color: var(--pf-muted); font-size: 1.15rem; line-height: 1.45; }
.pf-folio-contact { margin-top: 0.4rem; padding-top: 1.1rem; border-top: 1px solid var(--pf-line); }
.pf-folio-links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pf-folio-links a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--pf-line);
  background: #fff;
}

.pf-kl-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; padding-bottom: 1.4rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--pf-line); }
.pf-theme-klasik .pf-avatar { width: 8.5rem; height: 8.5rem; border: 4px solid #fff; box-shadow: 0 10px 24px rgba(48, 32, 12, 0.12); }
.pf-theme-klasik h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.15rem; }
.pf-kl-bio { max-width: 38rem; margin: 0; font-size: 1.08rem; }
.pf-kl-list { list-style: none; margin: 0; padding: 0; counter-reset: kl; }
.pf-kl-list li {
  counter-increment: kl;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: start;
  padding: 0.95rem 0;
  border-top: 1px solid var(--pf-line);
}
.pf-kl-list li::before {
  content: counter(kl, decimal-leading-zero);
  font-weight: 700;
  color: var(--pf-accent);
  padding-top: 0.15rem;
}
.pf-kl-list h3 { margin: 0 0 0.2rem; font-size: 1.15rem; }
.pf-kl-list p { margin: 0; color: var(--pf-muted); }
.pf-kl-list a { font-weight: 700; text-decoration: none; color: var(--pf-accent); white-space: nowrap; padding-top: 0.15rem; }

.pf-theme-studio { color: #f6f3ff; }
.pf-st-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: end; margin-bottom: 1.2rem; }
.pf-theme-studio .pf-avatar { width: 4.6rem; height: 4.6rem; background: #3a3358; color: #fff; }
.pf-theme-studio .pf-kicker,
.pf-theme-studio .pf-folio-lead,
.pf-theme-studio .pf-st-bio,
.pf-theme-studio .pf-label,
.pf-theme-studio .pf-st-list p { color: #c9c1e6; }
.pf-theme-studio h1 { font-size: clamp(3rem, 8vw, 5.4rem); line-height: 0.9; letter-spacing: -0.055em; margin: 0.15rem 0; }
.pf-st-bio { max-width: 38rem; font-size: 1.2rem; margin: 0 0 1.4rem; }
.pf-st-list { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.pf-st-list li {
  counter-increment: st;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.pf-st-list li::before { content: counter(st, decimal-leading-zero); color: #ddd6fe; font-weight: 700; padding-top: 0.35rem; }
.pf-st-list h3 { margin: 0 0 0.25rem; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -0.03em; }
.pf-st-list p { margin: 0; }
.pf-st-list a { color: #ddd6fe; font-weight: 700; text-decoration: none; white-space: nowrap; padding-top: 0.35rem; }
.pf-theme-studio .pf-chip { background: rgba(255, 255, 255, 0.12); color: #f6f3ff; }
.pf-theme-studio .pf-folio-contact { border-top-color: rgba(255, 255, 255, 0.16); }
.pf-theme-studio .pf-folio-links a { background: transparent; color: #f6f3ff; border-color: rgba(255, 255, 255, 0.22); }
.pf-st-skills { margin-top: 1.2rem; }

.pf-theme-editorial { font-family: Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", serif; }
.pf-ed-hero { padding-bottom: 1.2rem; border-bottom: 1px solid #d9d0c0; margin-bottom: 1.4rem; }
.pf-theme-editorial h1 { font-size: clamp(3rem, 7vw, 5rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.045em; max-width: 12ch; }
.pf-ed-dek { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.35; max-width: 34rem; margin: 0.6rem 0 0; color: #3d3830; }
.pf-ed-grid { display: grid; grid-template-columns: 16rem 1fr; gap: 2rem; align-items: start; }
.pf-theme-editorial .pf-avatar { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0.4rem; font-size: 2rem; }
.pf-theme-editorial aside p { margin: 0.9rem 0 0; color: #4e483f; }
.pf-theme-editorial .pf-chip { background: #efe6d6; font-family: var(--pf-sans); }
.pf-ed-list { list-style: none; margin: 0; padding: 0; counter-reset: ed; }
.pf-ed-list li { counter-increment: ed; padding: 1rem 0 1.1rem; border-top: 1px solid #d9d0c0; }
.pf-ed-list h3 { margin: 0 0 0.3rem; font-size: clamp(1.55rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.pf-ed-list h3::before { content: counter(ed, decimal-leading-zero); display: block; margin-bottom: 0.25rem; font-family: var(--pf-sans); font-size: 0.72rem; letter-spacing: 0.12em; color: #8a8172; font-weight: 700; }
.pf-ed-list p { margin: 0 0 0.4rem; color: #4e483f; }
.pf-ed-list a { color: #1c1915; font-weight: 700; }

.pf-gal-who { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; padding-bottom: 1.2rem; margin-bottom: 0.4rem; border-bottom: 1px solid #eadfe3; }
.pf-theme-galeri .pf-avatar { width: 4.8rem; height: 4.8rem; }
.pf-theme-galeri h1 { margin-bottom: 0.1rem; }
.pf-gal-who p { margin: 0.35rem 0 0; color: #5c4d54; }
.pf-theme-galeri .pf-chip-row { margin-top: 0.7rem; }
.pf-gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.pf-gal-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 24px rgba(70, 30, 45, 0.06); }
.pf-gal-cover {
  display: grid;
  place-items: end start;
  min-height: 9.5rem;
  padding: 1rem;
  background: #2b2438;
  color: #fff;
}
.pf-gal-cover span { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; max-width: 12ch; }
.pf-gal-card:nth-child(2) .pf-gal-cover { background: #8d3d55; }
.pf-gal-card:nth-child(3) .pf-gal-cover { background: #3d5c4e; }
.pf-gal-card:nth-child(4) .pf-gal-cover { background: #8a6232; }
.pf-gal-cap { padding: 0.85rem 1rem 1rem; }
.pf-gal-cap strong { display: block; margin-bottom: 0.2rem; }
.pf-gal-cap p { margin: 0 0 0.45rem; color: #5c4d54; }
.pf-gal-cap a { color: #8d3d55; font-weight: 700; text-decoration: none; }

.pf-lam-sheet { background: #fff; border: 1px solid #d5e6db; border-radius: 0.4rem; box-shadow: 0 16px 40px rgba(20, 60, 40, 0.06); padding: 1.35rem 1.35rem 1.1rem; }
.pf-lam-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 2px solid #146b38; }
.pf-lam-head h1 { margin-bottom: 0.1rem; font-size: clamp(1.8rem, 3vw, 2.3rem); }
.pf-theme-lamaran .pf-avatar { width: 4.6rem; height: 4.6rem; border-radius: 0.35rem; font-size: 1.2rem; }
.pf-lam { display: grid; grid-template-columns: 14.5rem 1fr; gap: 1.35rem; }
.pf-lam-side { border-right: 1px solid #e3f2e8; padding-right: 1rem; }
.pf-lam-side p { margin: 0 0 0.4rem; font-size: 0.95rem; }
.pf-lam-side a { color: #146b38; font-weight: 700; text-decoration: none; }
.pf-theme-lamaran .pf-chip { background: #e7f6ee; color: #146b38; }
.pf-lam-list { list-style: none; margin: 0; padding: 0; counter-reset: lam; }
.pf-lam-list li { counter-increment: lam; padding: 0.75rem 0 0.85rem 2rem; border-top: 1px solid #e3f2e8; position: relative; }
.pf-lam-list li::before { content: counter(lam, decimal-leading-zero); position: absolute; left: 0; top: 0.85rem; font-size: 0.75rem; font-weight: 700; color: #146b38; }
.pf-lam-list h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.pf-lam-list p { margin: 0 0 0.3rem; color: var(--pf-muted); }
.pf-lam-list a { color: #146b38; font-weight: 700; text-decoration: none; }

.pf-theme-kreator { text-align: center; }
.pf-theme-kreator .pf-avatar { width: 7.2rem; height: 7.2rem; margin: 0.4rem auto 0.85rem; border: 4px solid #fff; box-shadow: 0 12px 28px rgba(120, 70, 10, 0.12); }
.pf-theme-kreator h1 { margin-bottom: 0.15rem; font-size: clamp(1.8rem, 4vw, 2.3rem); }
.pf-theme-kreator .pf-folio-lead { margin-left: auto; margin-right: auto; }
.pf-theme-kreator .pf-chip-row { justify-content: center; }
.pf-theme-kreator .pf-chip { background: #ffe4b8; color: #7a4b0d; }
.pf-kr-social { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1.1rem 0 0.4rem; }
.pf-kr-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 7.5rem; text-decoration: none; background: #1c1915; color: #fff8ea; border-radius: 999px; padding: 0.7rem 1rem; font-weight: 700; font-size: 0.95rem; }
.pf-kr-bio { max-width: 32rem; margin: 0.8rem auto 0; color: var(--pf-muted); }
.pf-kr-works { display: grid; gap: 0.65rem; margin-top: 0.3rem; text-align: left; }
.pf-kr-works article { padding: 0.85rem 0.95rem; border-radius: 0.9rem; background: #fff; border: 1px solid #f0dfc0; }
.pf-kr-works h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.pf-kr-works p { margin: 0 0 0.35rem; color: var(--pf-muted); }
.pf-kr-works a { color: #7a4b0d; font-weight: 700; text-decoration: none; }

.pf-live-preview { margin: 1.2rem 0 0.4rem; border-radius: 1.15rem; overflow: hidden; border: 1px solid rgba(28, 23, 48, 0.1); background: #fff; box-shadow: 0 16px 40px rgba(48, 32, 12, 0.08); }
.pf-live-preview .pf-folio { padding: 1.25rem 1.25rem 0.4rem; }
.pf-live-preview .pf-theme-studio { padding: 1.35rem 1.25rem 0.5rem; border-radius: 0; }

.pf-thumb { display: grid; min-height: 8.5rem; margin-bottom: 0.45rem; padding: 0.75rem; border-radius: 0.9rem; background: #f4f1fb; overflow: hidden; }
.pf-thumb i { display: block; }
.thumb-klasik { grid-template-columns: 2.4rem 1fr; align-content: center; gap: 0.65rem; }
.thumb-klasik .t-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #6d5bd0; }
.thumb-klasik > span { display: grid; gap: 0.35rem; align-content: center; }
.thumb-klasik .t-line { height: 0.42rem; border-radius: 999px; background: rgba(28, 23, 48, 0.16); }
.thumb-klasik .short { width: 55%; }
.thumb-studio { background: #2a2440; align-content: end; gap: 0.4rem; }
.thumb-studio .t-name { height: 0.7rem; width: 62%; border-radius: 999px; background: #fff; }
.thumb-studio .t-sub { height: 0.38rem; width: 40%; border-radius: 999px; background: rgba(255, 255, 255, 0.45); }
.thumb-studio .t-block { height: 2.4rem; margin-top: 0.35rem; border-radius: 0.45rem; background: rgba(255, 255, 255, 0.12); }
.thumb-editorial { background: #fff; border: 1px solid rgba(109, 91, 208, 0.12); align-content: start; gap: 0.4rem; }
.thumb-editorial .t-kicker { width: 28%; height: 0.32rem; background: #1c1730; }
.thumb-editorial .t-title { width: 86%; height: 0.85rem; background: #1c1730; border-radius: 0.2rem; }
.thumb-editorial .t-row { height: 0.38rem; background: rgba(28, 23, 48, 0.12); }
.thumb-editorial .t-row:last-child { width: 70%; }
.thumb-galeri { background: #fde8f3; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.thumb-galeri .t-cell { min-height: 3.2rem; border-radius: 0.4rem; background: #fff; }
.thumb-lamaran { background: #e7f6ee; grid-template-columns: 0.7fr 1.3fr; gap: 0.45rem; }
.thumb-lamaran .t-side, .thumb-lamaran .t-main { min-height: 6.2rem; border-radius: 0.4rem; background: #fff; }
.thumb-kreator { background: #fff4dc; justify-items: center; align-content: center; gap: 0.45rem; }
.thumb-kreator .t-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e09a3a; }
.thumb-kreator .t-chips { display: flex; gap: 0.3rem; }
.thumb-kreator .t-chips i { width: 2.1rem; height: 0.7rem; border-radius: 999px; background: #fff; }

@media (max-width: 700px) {
  .pf-kl-hero, .pf-st-hero, .pf-ed-grid, .pf-lam, .pf-gal-grid, .pf-gal-who { grid-template-columns: 1fr; }
  .pf-kl-list li, .pf-st-list li { grid-template-columns: auto 1fr; }
  .pf-kl-list a, .pf-st-list a { grid-column: 2; }
  .pf-theme-editorial .pf-avatar { max-width: 14rem; }
  .pf-lam-side { border-right: 0; border-bottom: 1px solid #e3f2e8; padding-right: 0; padding-bottom: 0.8rem; }
  .pf-lam-head { align-items: flex-start; }
}