/* =========================================================
   portfolio.css  —  Aryal Akash Portfolio
   Scope: all classes are prefixed with pf- to avoid
   collisions with your existing utilities.css / style.css
   ========================================================= */

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pf-white:       #FAFAF8;
  --pf-stone:       #F4F2ED;
  --pf-stone2:      #E8E5DF;
  --pf-ink:         #1C1C1A;
  --pf-ink2:        #5A5955;
  --pf-ink3:        #9B9893;
  --pf-green:       #1D9E75;
  --pf-green-light: #E1F5EE;
  --pf-green-mid:   #9FE1CB;
  --pf-green-dark:  #0F6E56;
  --pf-radius:      10px;
  --pf-radius-lg:   14px;
  --pf-nav-h:       64px;
  --pf-serif:       'DM Serif Display', Georgia, serif;
  --pf-sans:        'Inter', system-ui, sans-serif;
  --pf-max:         900px;
}

body {
  font-family: var(--pf-sans);
  background: var(--pf-white);
  color: var(--pf-ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--pf-sans); }

/* ── Layout helpers ──────────────────────────────────────── */
.pf-container {
  max-width: var(--pf-max);
  margin: 0 auto;
  padding: 0 2rem;
}

.pf-section        { padding: 4rem 0; }
.pf-section--tinted { background: var(--pf-stone); }

.pf-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* ── Typography helpers ──────────────────────────────────── */
.pf-eyebrow {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pf-green);
  font-weight: 500;
  margin-bottom: 1rem;
}

.pf-section-label {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pf-ink3);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.pf-text-link {
  font-size: 13px;
  color: var(--pf-green);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .15s;
}
.pf-text-link:hover { gap: 7px; }

/* ── Buttons ─────────────────────────────────────────────── */
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--pf-radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}

.pf-btn--primary {
  background: var(--pf-ink);
  color: var(--pf-white);
}
.pf-btn--primary:hover { background: #2e2e2b; }

.pf-btn--ghost {
  background: transparent;
  color: var(--pf-ink);
  border: 1px solid var(--pf-stone2);
}
.pf-btn--ghost:hover { border-color: var(--pf-ink2); }

.pf-btn--sm { padding: 8px 16px; font-size: 13px; }
.pf-btn--full { width: 100%; justify-content: center; }

/* ── Chips / Tags ────────────────────────────────────────── */
.pf-chip {
  display: inline-block;
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 100px;
  font-size: 11px;
  padding: 3px 10px;
  color: var(--pf-ink2);
  font-weight: 400;
}
.pf-chip--green {
  background: var(--pf-green-light);
  border-color: var(--pf-green-mid);
  color: var(--pf-green-dark);
}

.pf-tag {
  display: inline-block;
  background: var(--pf-white);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 100px;
  font-size: 11px;
  padding: 3px 10px;
  color: var(--pf-ink2);
}

/* ── Navbar ──────────────────────────────────────────────── */
.pf-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(250, 250, 248, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid var(--pf-stone2);
  height: var(--pf-nav-h);
}

.pf-nav__inner {
  max-width: var(--pf-max);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.pf-nav__logo {
  font-family: var(--pf-serif);
  font-size: 20px;
  color: var(--pf-ink);
  margin-right: auto;
  flex-shrink: 0;
}

.pf-nav__links {
  list-style: none;
  display: flex;
  gap: 1.75rem;
}

.pf-nav__link {
  font-size: 14px;
  color: var(--pf-ink2);
  transition: color .15s;
}
.pf-nav__link:hover,
.pf-nav__link.is-active { color: var(--pf-ink); }

/* Available pill */
.pf-avail-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--pf-green-light);
  color: var(--pf-green-dark);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 100px;
  border: 0.5px solid var(--pf-green-mid);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.pf-avail-pill:hover { background: #c2edd9; }

.pf-avail-pill__dot {
  width: 7px;
  height: 7px;
  background: var(--pf-green);
  border-radius: 50%;
  animation: pf-pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pf-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* Mobile toggle — hidden on desktop */
.pf-nav__toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--pf-ink);
  cursor: pointer;
  padding: 4px;
}

/* ── Hero ────────────────────────────────────────────────── */
.pf-hero {
  padding: 5rem 0 4rem;
}

.pf-hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}

.pf-hero__h1 {
  font-family: var(--pf-serif);
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1;
  color: var(--pf-ink);
  margin-bottom: 1.25rem;
}
.pf-hero__h1 em {
  font-style: italic;
  color: var(--pf-green);
}

.pf-hero__lead {
  font-size: 16px;
  color: var(--pf-ink2);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.pf-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Profile card */
.pf-hero__card {
  width: 210px;
  flex-shrink: 0;
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 16px;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.pf-hero__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pf-green-light);
  border: 1.5px solid var(--pf-green-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pf-serif);
  font-size: 26px;
  color: var(--pf-green-dark);
  margin-bottom: 4px;
}

.pf-hero__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink);
}

.pf-hero__location {
  font-size: 12px;
  color: var(--pf-ink3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.pf-hero__location i { font-size: 13px; }

.pf-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 4px;
}

/* ── Services ────────────────────────────────────────────── */
.pf-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pf-service-card {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  padding: 1.35rem 1.25rem;
}

.pf-service-card__icon {
  font-size: 22px;
  color: var(--pf-green);
  display: block;
  margin-bottom: .75rem;
}

.pf-service-card__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink);
  margin-bottom: .4rem;
}

.pf-service-card__desc {
  font-size: 13px;
  color: var(--pf-ink2);
  line-height: 1.6;
}

/* ── Project cards ───────────────────────────────────────── */
.pf-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pf-projects-grid--full {
  grid-template-columns: repeat(2, 1fr);
}

.pf-proj-card {
  background: var(--pf-white);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.pf-proj-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.07);
}

.pf-proj-card__thumb {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.pf-proj-card__body {
  padding: 1rem 1.2rem 1.25rem;
}

.pf-proj-card__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: .65rem;
}

.pf-proj-card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--pf-ink);
  margin-bottom: .35rem;
}

.pf-proj-card__desc {
  font-size: 13px;
  color: var(--pf-ink2);
  line-height: 1.6;
  margin-bottom: .75rem;
}

/* Image thumbnail (real photo from storage) */
.pf-proj-card__thumb--img {
  background: var(--pf-stone);
  padding: 0;
}
.pf-proj-card__thumb--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback thumb when no image is set */
.pf-proj-card__thumb--empty {
  background: var(--pf-stone);
  color: var(--pf-ink3);
  font-size: 32px;
}

/* Empty state when $projects is empty */
.pf-projects-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4rem 0;
  color: var(--pf-ink3);
  font-size: 14px;
}
.pf-projects-empty i { font-size: 36px; }

/* ── Testimonials ────────────────────────────────────────── */
.pf-testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pf-testi-card {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  padding: 1.35rem 1.25rem;
}

.pf-testi-card__quote {
  font-size: 14px;
  color: var(--pf-ink2);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: .85rem;
}

.pf-testi-card__who {
  font-size: 12px;
  color: var(--pf-ink3);
  font-weight: 500;
}

/* ── CTA band ────────────────────────────────────────────── */
.pf-cta-band {
  background: var(--pf-ink);
  padding: 4rem 0;
  text-align: center;
}

.pf-cta-band__h2 {
  font-family: var(--pf-serif);
  font-size: 32px;
  color: var(--pf-white);
  margin-bottom: .75rem;
}

.pf-cta-band__sub {
  font-size: 15px;
  color: rgba(250,250,248,.65);
  margin-bottom: 2rem;
}

/* ── Page header ─────────────────────────────────────────── */
.pf-page-header {
  padding: 3.5rem 0 2rem;
  border-bottom: 0.5px solid var(--pf-stone2);
}

.pf-page-header__h1 {
  font-family: var(--pf-serif);
  font-size: clamp(30px, 4vw, 42px);
  color: var(--pf-ink);
  margin-bottom: .5rem;
}

.pf-page-header__sub {
  font-size: 15px;
  color: var(--pf-ink2);
}

/* ── Filter bar ──────────────────────────────────────────── */
.pf-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.pf-filter-btn {
  background: transparent;
  border: 0.5px solid var(--pf-stone2);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--pf-ink2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pf-filter-btn:hover,
.pf-filter-btn.is-on {
  background: var(--pf-ink);
  color: var(--pf-white);
  border-color: var(--pf-ink);
}

/* ── Blog layout ─────────────────────────────────────────── */
.pf-blog-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  padding-bottom: 4rem;
}

.pf-blog-main { display: flex; flex-direction: column; gap: 0; }

.pf-blog-card {
  padding: 1.75rem 0;
  border-bottom: 0.5px solid var(--pf-stone2);
}
.pf-blog-card:first-child { padding-top: 0; }
.pf-blog-card:last-child { border-bottom: none; }

.pf-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .5rem;
}

.pf-blog-card__date {
  font-size: 12px;
  color: var(--pf-ink3);
}

.pf-blog-card__title {
  font-family: var(--pf-serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--pf-ink);
  margin-bottom: .55rem;
}
.pf-blog-card__title a:hover { color: var(--pf-green); }

.pf-blog-card__excerpt {
  font-size: 14px;
  color: var(--pf-ink2);
  line-height: 1.7;
  margin-bottom: .85rem;
}

/* Sidebar */
.pf-blog-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.pf-sidebar-card {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  padding: 1.25rem;
}
.pf-sidebar-card--green {
  background: var(--pf-green-light);
  border-color: var(--pf-green-mid);
}

.pf-sidebar-card__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--pf-ink);
  margin-bottom: 1rem;
}

.pf-sidebar-card__body {
  font-size: 13px;
  color: var(--pf-ink2);
  line-height: 1.65;
  margin-bottom: .85rem;
}

.pf-cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.pf-cat-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--pf-ink2);
}

.pf-cat-list li a { color: var(--pf-ink2); transition: color .15s; }
.pf-cat-list li a:hover,
.pf-cat-list li span:first-child { cursor: default; }

.pf-cat-list__count {
  font-size: 12px;
  color: var(--pf-ink3);
}

.pf-pagination { margin-top: 2rem; }

/* ── Contact ─────────────────────────────────────────────── */
.pf-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3.5rem;
  padding-bottom: 5rem;
}

.pf-contact-info { display: flex; flex-direction: column; gap: 1.5rem; }

.pf-avail-box {
  background: var(--pf-green-light);
  border: 0.5px solid var(--pf-green-mid);
  border-radius: var(--pf-radius-lg);
  padding: 1.25rem;
}

.pf-avail-box__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--pf-green-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: .4rem;
}

.pf-avail-box__desc {
  font-size: 13px;
  color: var(--pf-green-dark);
  opacity: .85;
  line-height: 1.6;
}

.pf-contact-blurb {
  font-size: 15px;
  color: var(--pf-ink2);
  line-height: 1.75;
}

.pf-contact-details {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.pf-contact-details li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--pf-ink2);
}

.pf-contact-details i {
  font-size: 18px;
  color: var(--pf-green);
  flex-shrink: 0;
}

.pf-contact-details a { color: var(--pf-ink2); transition: color .15s; }
.pf-contact-details a:hover { color: var(--pf-green); }

/* Form */
.pf-contact-form-wrap { display: flex; flex-direction: column; gap: 0; }

.pf-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pf-form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1rem;
}

.pf-form-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--pf-ink2);
  letter-spacing: .02em;
}

.pf-form-input {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--pf-ink);
  font-family: var(--pf-sans);
  outline: none;
  transition: border-color .15s;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.pf-form-input:focus { border-color: var(--pf-green); }
.pf-form-input.is-invalid { border-color: #e24b4a; }

.pf-form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239B9893' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }

.pf-form-textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.65;
}

.pf-form-error {
  font-size: 12px;
  color: #a32d2d;
}

/* Alerts */
.pf-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--pf-radius);
  font-size: 14px;
  margin-bottom: 1.25rem;
}
.pf-alert--success {
  background: var(--pf-green-light);
  color: var(--pf-green-dark);
  border: 0.5px solid var(--pf-green-mid);
}
.pf-alert--error {
  background: #fcebeb;
  color: #a32d2d;
  border: 0.5px solid #f7c1c1;
}

/* ── Footer ──────────────────────────────────────────────── */
.pf-footer {
  border-top: 0.5px solid var(--pf-stone2);
  padding: 3rem 0;
  background: var(--pf-white);
}

.pf-footer__inner {
  max-width: var(--pf-max);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 1rem 3rem;
  align-items: start;
}

.pf-footer__logo {
  font-family: var(--pf-serif);
  font-size: 20px;
  color: var(--pf-ink);
}

.pf-footer__tagline {
  font-size: 13px;
  color: var(--pf-ink3);
  margin-top: 4px;
}

.pf-footer__nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding-top: 4px;
}

.pf-footer__nav a {
  font-size: 13px;
  color: var(--pf-ink2);
  transition: color .15s;
}
.pf-footer__nav a:hover { color: var(--pf-ink); }

.pf-footer__social {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-top: 4px;
}

.pf-footer__social a {
  font-size: 18px;
  color: var(--pf-ink3);
  transition: color .15s;
}
.pf-footer__social a:hover { color: var(--pf-green); }

.pf-footer__copy {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--pf-ink3);
  padding-top: .5rem;
  border-top: 0.5px solid var(--pf-stone2);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .pf-nav__links {
    display: none;
    position: absolute;
    top: var(--pf-nav-h);
    left: 0; right: 0;
    background: var(--pf-white);
    border-bottom: 0.5px solid var(--pf-stone2);
    flex-direction: column;
    padding: 1rem 2rem 1.5rem;
    gap: 1rem;
  }
  .pf-nav__links.is-open { display: flex; }
  .pf-nav__toggle { display: block; }
  .pf-avail-pill { display: none; }

  .pf-hero__grid    { grid-template-columns: 1fr; }
  .pf-hero__card    { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 12px; padding: 1.25rem; }
  .pf-hero__avatar  { width: 52px; height: 52px; font-size: 20px; }

  .pf-services          { grid-template-columns: 1fr; }
  .pf-projects-grid     { grid-template-columns: 1fr; }
  .pf-projects-grid--full { grid-template-columns: 1fr; }
  .pf-testi-grid        { grid-template-columns: 1fr; }
  .pf-blog-layout       { grid-template-columns: 1fr; }
  .pf-blog-sidebar      { order: -1; }
  .pf-contact-grid      { grid-template-columns: 1fr; gap: 2rem; }
  .pf-form-row          { grid-template-columns: 1fr; }

  .pf-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .pf-footer__copy { border-top: none; }
}


/* =========================================================
   Downloads page
   ========================================================= */

.pf-dl-stack {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: 5rem;
}

/* ── Card shell ──────────────────────────────────────────── */
.pf-dl-card {
  border: 0.5px solid var(--pf-stone2);
  border-radius: 18px;
  overflow: hidden;
  background: var(--pf-white);
}

/* ── Header band ─────────────────────────────────────────── */
.pf-dl-card__band {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 2rem;
  position: relative;
}

.pf-dl-card__band--green { background: #0F6E56; }
.pf-dl-card__band--blue  { background: #185FA5; }

.pf-dl-card__band-icon {
  font-size: 42px;
  line-height: 1;
  flex-shrink: 0;
}

.pf-dl-card__band-title {
  font-family: var(--pf-serif);
  font-size: 24px;
  color: #fff;
  font-weight: 400;
  margin-bottom: 3px;
}

.pf-dl-card__band-sub {
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

/* Platform pill — sits at right end of band */
.pf-dl-platform {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}

.pf-dl-platform--android {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,.3);
}

.pf-dl-platform--blue {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,.3);
}

/* ── Body ────────────────────────────────────────────────── */
.pf-dl-card__body {
  padding: 2rem;
}

/* ── Badges ──────────────────────────────────────────────── */
.pf-dl-badges {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.pf-dl-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
}

.pf-dl-badge--green { background: var(--pf-green-light); color: var(--pf-green-dark); border: 0.5px solid var(--pf-green-mid); }
.pf-dl-badge--blue  { background: #E6F1FB; color: #185FA5; border: 0.5px solid #B5D4F4; }
.pf-dl-badge--red   { background: #FCEBEB; color: #A32D2D; border: 0.5px solid #F7C1C1; }
.pf-dl-badge--stone { background: var(--pf-stone); color: var(--pf-ink2); border: 0.5px solid var(--pf-stone2); }

/* ── Description ─────────────────────────────────────────── */
.pf-dl-desc {
  font-size: 15px;
  color: var(--pf-ink2);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* ── Feature grid ────────────────────────────────────────── */
.pf-dl-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.5rem;
}

.pf-dl-features--list {
  grid-template-columns: repeat(2, 1fr);
}

.pf-dl-feature {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--pf-ink2);
}

.pf-dl-feature i {
  font-size: 15px;
  color: var(--pf-green);
  flex-shrink: 0;
}

/* ── Divider ─────────────────────────────────────────────── */
.pf-dl-divider {
  height: 0.5px;
  background: var(--pf-stone2);
  margin: 1.5rem 0;
}

/* ── Meta line ───────────────────────────────────────────── */
.pf-dl-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--pf-ink3);
  margin-bottom: 1.75rem;
}

.pf-dl-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pf-dl-meta i { font-size: 15px; }

/* ── Download button overrides ───────────────────────────── */
.pf-btn--green {
  background: var(--pf-green);
  color: #fff;
}
.pf-btn--green:hover { background: var(--pf-green-dark); color: #fff; }

.pf-btn--download {
  padding: 13px 28px;
  font-size: 15px;
  border-radius: 12px;
}

.pf-dl-actions {
  margin-bottom: 2rem;
}

/* ── Install steps box ───────────────────────────────────── */
.pf-dl-steps {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
  border-radius: 12px;
  padding: 1.5rem;
}

.pf-dl-steps__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink);
  margin-bottom: 1rem;
}

.pf-dl-steps__title i { font-size: 17px; color: var(--pf-green); }

.pf-dl-steps__list {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 1.25rem;
}

.pf-dl-steps__list li {
  font-size: 14px;
  color: var(--pf-ink2);
  line-height: 1.65;
}

.pf-dl-steps__list code {
  background: var(--pf-stone2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  color: var(--pf-ink);
  font-family: var(--pf-sans);
}

/* Info / warning callouts inside steps */
.pf-dl-info,
.pf-dl-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}

.pf-dl-info {
  background: var(--pf-green-light);
  border: 0.5px solid var(--pf-green-mid);
  color: var(--pf-green-dark);
}

.pf-dl-warning {
  background: #FFF8ED;
  border: 0.5px solid #FAC775;
  color: #633806;
}

.pf-dl-info i,
.pf-dl-warning i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .pf-dl-card__band      { flex-wrap: wrap; padding: 1.35rem 1.25rem; }
  .pf-dl-card__body      { padding: 1.25rem; }
  .pf-dl-card__band-icon { font-size: 32px; }
  .pf-dl-platform        { margin-left: 0; }
  .pf-dl-features        { grid-template-columns: 1fr 1fr; }
  .pf-dl-features--list  { grid-template-columns: 1fr; }
  .pf-dl-meta            { gap: 1rem; }
  .pf-btn--download      { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .pf-dl-features { grid-template-columns: 1fr; }
}


/* =========================================================
   Blog index — premium overhaul
   ========================================================= */

/* ── Featured (first) card ───────────────────────────────── */
.pf-blog-card--featured {
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  margin-bottom: 1px; /* collapsed by gap on parent */
}

.pf-blog-card--featured .pf-blog-card__img-wrap {
  display: block;
  aspect-ratio: 16/7;
  overflow: hidden;
  background: var(--pf-stone);
}

.pf-blog-card--featured .pf-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.pf-blog-card--featured:hover .pf-blog-card__img { transform: scale(1.02); }

.pf-blog-card--featured .pf-blog-card__body {
  padding: 1.75rem;
}

.pf-blog-card__title--lg {
  font-family: var(--pf-serif);
  font-size: clamp(20px, 3vw, 28px) !important;
  line-height: 1.2 !important;
  margin-bottom: .75rem !important;
}

/* ── Standard card (row layout) ──────────────────────────── */
.pf-blog-card {
  padding: 0;
  border-bottom: 0.5px solid var(--pf-stone2);
  border-radius: 0;
}
.pf-blog-card:first-child { border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0; }
.pf-blog-card:last-of-type { border-bottom: none; }

.pf-blog-card__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
}

.pf-blog-card__thumb-wrap {
  display: block;
  overflow: hidden;
  background: var(--pf-stone);
  border-radius: 0;
}

.pf-blog-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.pf-blog-card:hover .pf-blog-card__thumb { transform: scale(1.04); }

.pf-blog-card__body {
  padding: 1.35rem 1.5rem;
}

/* Meta row (chip + date + read time) */
.pf-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}

.pf-blog-card__date {
  font-size: 12px;
  color: var(--pf-ink3);
}

.pf-blog-card__read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--pf-ink3);
}
.pf-blog-card__read i { font-size: 13px; }

/* Title */
.pf-blog-card__title {
  font-family: var(--pf-serif);
  font-size: 18px;
  line-height: 1.3;
  color: var(--pf-ink);
  margin-bottom: .45rem;
}
.pf-blog-card__title a { color: inherit; transition: color .15s; }
.pf-blog-card__title a:hover { color: var(--pf-green); }

/* Excerpt */
.pf-blog-card__excerpt {
  font-size: 13px;
  color: var(--pf-ink2);
  line-height: 1.65;
  margin-bottom: .8rem;
}

/* ── Empty state ─────────────────────────────────────────── */
.pf-blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4rem 0;
  color: var(--pf-ink3);
  font-size: 14px;
}
.pf-blog-empty i { font-size: 36px; }

/* ── Pagination ──────────────────────────────────────────── */
.pf-pagination { margin-top: 2rem; }

/* Laravel default pagination — minimal restyle */
.pf-pagination nav { display: flex; justify-content: center; }
.pf-pagination span, .pf-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--pf-ink2);
  border: 0.5px solid var(--pf-stone2);
  margin: 0 3px;
  transition: background .15s, color .15s;
}
.pf-pagination a:hover { background: var(--pf-stone); color: var(--pf-ink); }
.pf-pagination [aria-current="page"] span {
  background: var(--pf-ink);
  color: var(--pf-white);
  border-color: var(--pf-ink);
}

/* ── Sidebar search ──────────────────────────────────────── */
.pf-sidebar-search {
  position: relative;
}
.pf-sidebar-search .pf-form-input {
  padding-right: 40px;
  margin-bottom: 0;
}
.pf-sidebar-search__btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--pf-ink3);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  transition: color .15s;
}
.pf-sidebar-search__btn:hover { color: var(--pf-green); }

/* ── Category list active state ──────────────────────────── */
.pf-cat-list li { border-radius: 6px; padding: 3px 6px; transition: background .12s; }
.pf-cat-list li:hover { background: var(--pf-stone); }
.pf-cat-list li.is-active { background: var(--pf-stone); }
.pf-cat-list li.is-active a { color: var(--pf-ink); font-weight: 500; }
.pf-cat-list li a { color: var(--pf-ink2); transition: color .15s; }
.pf-cat-list li a:hover { color: var(--pf-green); }

/* ── Sidebar CTA card ────────────────────────────────────── */
.pf-sidebar-card--cta {
  background: var(--pf-stone);
  border: 0.5px solid var(--pf-stone2);
}
.pf-sidebar-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--pf-green-dark);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

/* ── Blog responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .pf-blog-card__row { grid-template-columns: 90px 1fr; }
  .pf-blog-card__body { padding: 1rem; }
  .pf-blog-card--featured .pf-blog-card__body { padding: 1.25rem; }
}
@media (max-width: 520px) {
  .pf-blog-card__row { grid-template-columns: 1fr; }
  .pf-blog-card__thumb-wrap { aspect-ratio: 16/7; height: auto; }
  .pf-blog-card__thumb { width: 100%; height: 100%; }
}


/* =========================================================
   Single post
   ========================================================= */

/* ── Post hero ───────────────────────────────────────────── */
.pf-post-hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 0.5px solid var(--pf-stone2);
}

.pf-post-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pf-ink3);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.pf-post-breadcrumb a { color: var(--pf-ink3); transition: color .15s; }
.pf-post-breadcrumb a:hover { color: var(--pf-green); }
.pf-post-breadcrumb i { font-size: 12px; }

.pf-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.pf-post-title {
  font-family: var(--pf-serif);
  font-size: clamp(28px, 4.5vw, 46px);
  line-height: 1.12;
  color: var(--pf-ink);
  margin-bottom: 1.5rem;
  max-width: 780px;
}

/* Author strip */
.pf-post-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pf-post-author__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pf-green-light);
  border: 1.5px solid var(--pf-green-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pf-serif);
  font-size: 17px;
  color: var(--pf-green-dark);
  flex-shrink: 0;
}

.pf-post-author__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--pf-ink);
}
.pf-post-author__role {
  font-size: 12px;
  color: var(--pf-ink3);
}

/* ── Cover image ─────────────────────────────────────────── */
.pf-post-cover {
  padding: 2rem 0 0;
}

.pf-post-cover__img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--pf-radius-lg);
  display: block;
  border: 0.5px solid var(--pf-stone2);
}

/* ── Post layout (content + sticky sidebar) ──────────────── */
.pf-post-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 3.5rem;
  padding-bottom: 5rem;
  align-items: start;
}

.pf-post-sidebar {
  position: sticky;
  top: calc(var(--pf-nav-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Share buttons ───────────────────────────────────────── */
.pf-share-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  border: 0.5px solid var(--pf-stone2);
  background: var(--pf-stone);
  color: var(--pf-ink2);
  font-family: var(--pf-sans);
  width: 100%;
}
.pf-share-btn:hover { background: var(--pf-stone2); color: var(--pf-ink); }
.pf-share-btn i { font-size: 15px; }

/* ── Related posts list ──────────────────────────────────── */
.pf-related-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.pf-related-list li {
  border-bottom: 0.5px solid var(--pf-stone2);
}
.pf-related-list li:last-child { border-bottom: none; }

.pf-related-list__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: .75rem 0;
  transition: color .15s;
}
.pf-related-list__link:hover .pf-related-list__title { color: var(--pf-green); }

.pf-related-list__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--pf-ink);
  line-height: 1.4;
  transition: color .15s;
}
.pf-related-list__date {
  font-size: 11px;
  color: var(--pf-ink3);
}

/* ── Back link ───────────────────────────────────────────── */
.pf-post-back {
  padding: 0 0 3rem;
}

/* ── Prose (blog body content) ───────────────────────────── */
.prose {
  font-size: 16px;
  line-height: 1.8;
  color: var(--pf-ink2);
  max-width: 680px;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--pf-serif);
  color: var(--pf-ink);
  line-height: 1.25;
  margin: 2rem 0 .75rem;
}
.prose h1 { font-size: 32px; }
.prose h2 { font-size: 26px; border-bottom: 0.5px solid var(--pf-stone2); padding-bottom: .5rem; }
.prose h3 { font-size: 20px; }
.prose h4 { font-size: 17px; }

.prose p { margin-bottom: 1.35rem; }

.prose a { color: var(--pf-green); text-decoration: underline; text-decoration-color: var(--pf-green-mid); text-underline-offset: 3px; transition: color .15s; }
.prose a:hover { color: var(--pf-green-dark); }

.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.35rem; }
.prose li { margin-bottom: .5rem; }

.prose blockquote {
  border-left: 3px solid var(--pf-green);
  padding: .75rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--pf-green-light);
  border-radius: 0 8px 8px 0;
  color: var(--pf-ink);
  font-style: italic;
}

.prose code {
  background: var(--pf-stone2);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  color: var(--pf-ink);
  font-family: 'Courier New', monospace;
}

.prose pre {
  background: #1C1C1A;
  border-radius: var(--pf-radius);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}
.prose pre code {
  background: none;
  color: #d4d4d4;
  padding: 0;
  font-size: 14px;
  line-height: 1.65;
}

.prose img {
  width: 100%;
  border-radius: var(--pf-radius);
  border: 0.5px solid var(--pf-stone2);
  margin: 1.5rem 0;
}

.prose hr {
  border: none;
  border-top: 0.5px solid var(--pf-stone2);
  margin: 2.5rem 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 1.5rem;
}
.prose th, .prose td {
  text-align: left;
  padding: 10px 14px;
  border: 0.5px solid var(--pf-stone2);
}
.prose th {
  background: var(--pf-stone);
  font-weight: 500;
  color: var(--pf-ink);
}
.prose tr:hover td { background: var(--pf-stone); }

/* ── Single post responsive ──────────────────────────────── */
@media (max-width: 768px) {
  .pf-post-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pf-post-sidebar {
    position: static;
    order: -1;
  }
  .pf-post-cover__img { border-radius: var(--pf-radius); max-height: 260px; }
  .prose { font-size: 15px; }
  .prose h2 { font-size: 22px; }
}


/* =========================================================
   Free Tools section — home page
   ========================================================= */

.pf-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* ── Tool card (entire card is a link) ───────────────────── */
.pf-tool-card {
  display: flex;
  flex-direction: column;
  background: var(--pf-white);
  border: 0.5px solid var(--pf-stone2);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.pf-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.07);
  border-color: var(--pf-green-mid);
}

/* Icon wrap — coloured top band */
.pf-tool-card__icon-wrap {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
  transition: filter .18s;
}

.pf-tool-card__icon-wrap i { font-size: 30px; }

.pf-tool-card__icon-wrap--green {
  background: var(--pf-green-light);
  color: var(--pf-green);
}

.pf-tool-card__icon-wrap--stone {
  background: var(--pf-stone);
}

.pf-tool-card__icon-wrap--blue {
  background: #E6F1FB;
  color: #185FA5;
}

.pf-tool-card:hover .pf-tool-card__icon-wrap--green { background: #c2edd9; }
.pf-tool-card:hover .pf-tool-card__icon-wrap--stone  { background: var(--pf-stone2); }
.pf-tool-card:hover .pf-tool-card__icon-wrap--blue   { background: #cde3f7; }

/* Body */
.pf-tool-card__body {
  padding: 1rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}

.pf-tool-card__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: .2rem;
}

.pf-tool-card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--pf-ink);
}

.pf-tool-card__desc {
  font-size: 13px;
  color: var(--pf-ink2);
  line-height: 1.6;
  flex: 1;
}

.pf-tool-card__cta {
  margin-top: .5rem;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .pf-tools-grid { grid-template-columns: 1fr; }
  .pf-tool-card  { flex-direction: row; }
  .pf-tool-card__icon-wrap {
    width: 90px;
    height: auto;
    min-height: 90px;
    flex-shrink: 0;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .pf-tool-card { flex-direction: column; }
  .pf-tool-card__icon-wrap { width: 100%; height: 80px; }
}