/* =============================================
   ProfitNaptár – Landing oldal stílus
   Színrendszer: világos alap, sötétkék gerinc, smaragd akcentus
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ===== DESIGN SYSTEM — 5 colors + accent ===== */
  --navy: #0F1B2D;            /* dark section bg */
  --navy-light: #1B2B42;      /* cards on dark */
  --bg: #FAFAF7;              /* light section bg */
  --card: #FFFFFF;            /* cards on light */
  --text: #1A2433;            /* body text */
  --text-muted: #5A6678;      /* secondary text */
  --accent: #0E9E6E;          /* the ONE action color */
  --accent-h: #0B855C;        /* accent hover */
  --accent-soft: rgba(14,158,110,0.10);
  --accent-line: rgba(14,158,110,0.30);

  /* ---- legacy names remapped onto the new palette ---- */
  --pn-navy: var(--navy);
  --pn-navy-2: var(--navy-light);
  --pn-navy-soft: var(--navy-light);
  --pn-bg: var(--bg);
  --pn-bg-alt: #F2F2EC;
  --pn-card: var(--card);
  --pn-emerald: var(--accent);
  --pn-emerald-h: var(--accent-h);
  --pn-emerald-l: var(--accent-soft);
  --pn-gold: var(--navy);        /* gold removed → navy */
  --pn-ink: var(--text);
  --pn-ink-soft: var(--text-muted);
  --pn-ink-dim: var(--text-muted);
  --pn-on-navy: #FFFFFF;
  --pn-on-navy-dim: #C2CCDC;
  --pn-line: rgba(15,27,45,0.08);
  --pn-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --pn-shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --pn-radius: 18px;
  --pn-maxw: 1100px;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--pn-bg);
  color: var(--pn-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* =============================================
   HERO – sötétkék belépő
   ============================================= */
.pn-hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(36,52,99,0.55), transparent 60%),
    linear-gradient(160deg, var(--pn-navy) 0%, var(--pn-navy-2) 100%);
  color: var(--pn-on-navy);
  padding: 88px 24px 96px;
}

.pn-hero__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.pn-hero__content { max-width: 560px; }

.pn-hero__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pn-on-navy);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 14px;
  border-radius: 999px;
}

.pn-hero__title {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  margin: 22px 0 18px;
  letter-spacing: -0.01em;
}

.pn-hero__text {
  font-size: 17px;
  color: var(--pn-on-navy-dim);
  margin-bottom: 14px;
}

.pn-hero__cta {
  display: inline-block;
  margin-top: 14px;
  background: var(--pn-emerald);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15,157,110,0.35);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pn-hero__cta:hover {
  background: var(--pn-emerald-h);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,157,110,0.42);
}
.pn-hero__cta:active { transform: translateY(0); }

.pn-hero__quote {
  margin-top: 30px;
  padding-left: 18px;
  border-left: 3px solid var(--pn-emerald);
  font-style: italic;
  color: var(--pn-on-navy-dim);
  font-size: 15px;
}

.pn-hero__visual { display: flex; justify-content: center; }

.pn-hero__image {
  width: 100%;
  border-radius: 14px;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.45));
}

.pn-hero__image-caption {
  display: none;
  text-align: center;
  font-size: 12px;
  color: var(--pn-on-navy-dim);
  margin-top: 12px;
}

/* =============================================
   PAIN – világos szekció
   ============================================= */
.pn-pain {
  background: var(--pn-bg);
  padding: 88px 24px;
}

.pn-pain__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.pn-pain__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--pn-ink);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.pn-pain__lead {
  font-size: 18px;
  color: var(--pn-ink-soft);
  margin-bottom: 26px;
}
.pn-pain__lead strong { color: var(--pn-ink); }

.pn-pain__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}

.pn-pain__tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--pn-ink-soft);
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(22,32,60,0.04);
  transition: transform .15s ease, color .15s ease, border-color .15s ease;
}
.pn-pain__tag:hover {
  transform: translateY(-2px);
  color: var(--pn-emerald);
  border-color: var(--pn-emerald);
}

.pn-pain__rhythm { margin-bottom: 26px; }
.pn-pain__rhythm p {
  font-size: 18px;
  color: var(--pn-ink-soft);
  margin: 2px 0;
}

.pn-pain__body {
  font-size: 18px;
  color: var(--pn-ink-soft);
  max-width: 640px;
  margin: 0 auto 32px;
}
.pn-pain__body strong { color: var(--pn-ink); }

.pn-pain__quote {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  background: var(--pn-emerald-l);
  border-left: 4px solid var(--pn-emerald);
  border-radius: 12px;
  padding: 22px 26px;
  font-style: italic;
  color: var(--pn-ink);
  font-size: 16px;
  box-shadow: var(--pn-shadow);
}

/* =============================================
   Reszponzív
   ============================================= */
@media (max-width: 900px) {
  .pn-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .pn-hero__content { max-width: none; }
  .pn-hero__visual { order: -1; }
}

@media (max-width: 680px) {
  .pn-hero { padding: 56px 20px 64px; }
  .pn-pain { padding: 56px 20px; }
  .pn-hero__title { font-size: 30px; }
  .pn-hero__text, .pn-pain__lead, .pn-pain__body, .pn-pain__rhythm p { font-size: 16px; }
  .pn-pain__title { font-size: 26px; }
  .pn-pain__quote { padding: 18px 20px; }
}

/* =============================================
   VALUE – Mit kapsz (világos, smaragd akcentus)
   ============================================= */
.pn-value {
  background: var(--pn-bg-alt);
  padding: 72px 24px;
}

.pn-value__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.pn-value__eyebrow {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: var(--pn-ink);
  line-height: 1.2;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.pn-value__headline {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  color: var(--pn-ink);
  line-height: 1.1;
  padding-left: 18px;
  border-left: 5px solid var(--pn-emerald);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

.pn-value__lead {
  font-size: 17px;
  color: var(--pn-ink-soft);
  margin-bottom: 12px;
  max-width: 460px;
}

.pn-value__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pn-value__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  border-left: 3px solid var(--pn-emerald);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: var(--pn-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pn-value__item:hover {
  transform: translateX(4px);
  box-shadow: var(--pn-shadow-lg);
}

.pn-value__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pn-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.pn-value__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--pn-ink);
}

@media (max-width: 900px) {
  .pn-value__inner { grid-template-columns: 1fr; gap: 36px; }
  .pn-value__lead { max-width: none; }
}

@media (max-width: 680px) {
  .pn-value { padding: 56px 20px; }
  .pn-value__lead { font-size: 16px; }
  .pn-value__label { font-size: 16px; }
}

/* =============================================
   BANNER – sötétkék kiemelő sáv
   ============================================= */
.pn-banner {
  background: var(--pn-bg-alt);
  padding: 0 24px 72px;
}

.pn-banner__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
  background:
    linear-gradient(160deg, var(--pn-navy) 0%, var(--pn-navy-2) 100%);
  border-top: 3px solid var(--pn-emerald);
  border-radius: var(--pn-radius);
  padding: 40px 48px;
  text-align: center;
  box-shadow: var(--pn-shadow-lg);
}

.pn-banner__title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--pn-on-navy);
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.pn-banner__accent { color: var(--pn-emerald); }

.pn-banner__text {
  font-size: 16px;
  color: var(--pn-on-navy-dim);
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 680px) {
  .pn-banner { padding: 0 20px 56px; }
  .pn-banner__inner { padding: 30px 24px; }
  .pn-banner__text { font-size: 15px; }
}

/* =============================================
   GLANCE – Egy pillantás (üzleti iránytű kép)
   ============================================= */
.pn-glance {
  background: var(--pn-bg);
  padding: 80px 24px;
}

.pn-glance__inner {
  max-width: 880px;
  margin: 0 auto;
}

.pn-glance__figure {
  margin: 0;
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius);
  padding: 14px;
  box-shadow: var(--pn-shadow-lg);
}

.pn-glance__image {
  width: 100%;
  border-radius: 12px;
}

.pn-glance__caption {
  display: none;
  text-align: center;
  font-size: 12px;
  color: var(--pn-ink-dim);
  margin-top: 12px;
}

@media (max-width: 680px) {
  .pn-glance { padding: 56px 16px; }
  .pn-glance__figure { padding: 8px; }
}

.pn-glance--alt { background: var(--pn-bg-alt); }

/* =============================================
   VIDEO – Működés közben (sötétkék gerinc)
   ============================================= */
.pn-video {
  background:
    radial-gradient(1000px 460px at 50% -10%, rgba(36,52,99,0.5), transparent 60%),
    linear-gradient(160deg, var(--pn-navy) 0%, var(--pn-navy-2) 100%);
  color: var(--pn-on-navy);
  padding: 88px 24px;
}

.pn-video__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
}

.pn-video__title {
  text-align: center;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 30px;
}

.pn-video__text {
  max-width: 760px;
  margin: 0 auto 36px;
}
.pn-video__text p {
  font-size: 16px;
  color: var(--pn-on-navy-dim);
  margin-bottom: 14px;
}
.pn-video__text strong { color: var(--pn-on-navy); font-weight: 700; }

.pn-video__status {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pn-on-navy-dim);
  margin-bottom: 22px;
}

.pn-video__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

.pn-video__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
}

.pn-video__thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pn-video__thumb-label {
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}

.pn-video__meta { padding: 18px 20px; }

.pn-video__card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pn-on-navy);
  margin-bottom: 4px;
}

.pn-video__card-sub {
  font-size: 14px;
  color: var(--pn-on-navy-dim);
}

.pn-video__cta {
  display: block;
  width: max-content;
  margin: 0 auto;
  background: var(--pn-emerald);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 15px 32px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15,157,110,0.35);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pn-video__cta:hover {
  background: var(--pn-emerald-h);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,157,110,0.42);
}

@media (max-width: 820px) {
  .pn-video__grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 680px) {
  .pn-video { padding: 56px 20px; }
  .pn-video__text p { font-size: 15px; }
}

/* =============================================
   AUDIENCE – Kiknek készült
   ============================================= */
.pn-audience {
  background: var(--pn-bg);
  padding: 88px 24px;
}

.pn-audience__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
  text-align: center;
}

.pn-audience__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pn-emerald);
  background: var(--pn-emerald-l);
  border: 1px solid rgba(15,157,110,0.25);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.pn-audience__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  color: var(--pn-ink);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.pn-audience__lead {
  font-size: 17px;
  color: var(--pn-ink-soft);
  max-width: 680px;
  margin: 0 auto 44px;
}

.pn-audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
  margin-bottom: 40px;
}

.pn-audience__card {
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: var(--pn-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pn-audience__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pn-shadow-lg);
}

.pn-audience__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pn-emerald-l);
  font-size: 22px;
  margin-bottom: 16px;
}

.pn-audience__card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--pn-ink);
  margin-bottom: 10px;
}

.pn-audience__card-text {
  font-size: 15px;
  color: var(--pn-ink-soft);
  line-height: 1.55;
}

.pn-audience__note {
  max-width: 720px;
  margin: 0 auto;
  background: var(--pn-bg-alt);
  border: 1px solid var(--pn-line);
  border-radius: 14px;
  padding: 22px 28px;
  font-size: 15px;
  color: var(--pn-ink-soft);
}

@media (max-width: 900px) {
  .pn-audience__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pn-audience { padding: 56px 20px; }
  .pn-audience__grid { grid-template-columns: 1fr; }
}

/* =============================================
   TRUST – Nem vakon vásárolsz
   ============================================= */
.pn-trust {
  background: var(--pn-bg-alt);
  padding: 88px 24px;
}

.pn-trust__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
  text-align: center;
}

.pn-trust__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  color: var(--pn-ink);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.pn-trust__lead {
  font-size: 17px;
  color: var(--pn-ink-soft);
  max-width: 700px;
  margin: 0 auto 44px;
}

.pn-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

.pn-trust__card {
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  border-radius: 14px;
  padding: 30px 24px;
  box-shadow: var(--pn-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pn-trust__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pn-shadow-lg);
}

.pn-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--pn-emerald-l);
  font-size: 24px;
  margin-bottom: 16px;
}

.pn-trust__card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pn-ink);
  margin-bottom: 10px;
}

.pn-trust__card-text {
  font-size: 14px;
  color: var(--pn-ink-soft);
  line-height: 1.55;
}

.pn-trust__closing {
  font-size: 16px;
  color: var(--pn-ink-soft);
  margin-bottom: 28px;
}

.pn-trust__cta {
  display: inline-block;
  background: var(--pn-emerald);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 15px 32px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15,157,110,0.35);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pn-trust__cta:hover {
  background: var(--pn-emerald-h);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,157,110,0.42);
}

@media (max-width: 900px) {
  .pn-trust__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pn-trust { padding: 56px 20px; }
  .pn-trust__grid { grid-template-columns: 1fr; }
}

/* =============================================
   TIERS – Ezüst / Arany / Gyémánt
   ============================================= */
.pn-tiers {
  background: var(--pn-bg);
  padding: 88px 24px;
}

.pn-tiers__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
  text-align: center;
}

.pn-tiers__title {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  color: var(--pn-ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.pn-tiers__lead {
  font-size: 17px;
  color: var(--pn-ink-soft);
  max-width: 680px;
  margin: 0 auto 44px;
}

.pn-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
  align-items: start;
  margin-bottom: 36px;
}

.pn-tiers__card {
  position: relative;
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--pn-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pn-tiers__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pn-shadow-lg);
}
.pn-tiers__card--gold {
  border-color: var(--pn-gold);
  box-shadow: 0 16px 40px rgba(199,154,35,0.20);
}

.pn-tiers__ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--pn-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
}

.pn-tiers__head {
  padding: 22px 24px;
  color: #fff;
}
.pn-tiers__card--silver  .pn-tiers__head { background: linear-gradient(160deg, #5b6680, #424c63); }
.pn-tiers__card--gold    .pn-tiers__head { background: linear-gradient(160deg, #d4af37, #b8960c); }
.pn-tiers__card--diamond .pn-tiers__head { background: linear-gradient(160deg, var(--pn-navy-2), var(--pn-navy)); }

.pn-tiers__level {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-bottom: 6px;
}

.pn-tiers__head-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}

.pn-tiers__list {
  list-style: none;
  padding: 22px 24px 8px;
  margin: 0;
}
.pn-tiers__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--pn-ink);
  margin-bottom: 12px;
}
.pn-tiers__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pn-emerald);
  font-weight: 800;
}

.pn-tiers__desc {
  padding: 4px 24px 26px;
  font-size: 14px;
  color: var(--pn-ink-soft);
  line-height: 1.55;
}

.pn-tiers__closing {
  font-size: 15px;
  color: var(--pn-ink-soft);
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .pn-tiers__grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 600px) {
  .pn-tiers { padding: 56px 20px; }
}

/* =============================================
   PRICE – Árazás
   ============================================= */
.pn-price {
  background: var(--pn-bg-alt);
  padding: 88px 24px;
}

.pn-price__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
  text-align: center;
}

.pn-price__title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  color: var(--pn-ink);
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 0 auto 18px;
}

.pn-price__lead {
  font-size: 16px;
  color: var(--pn-ink-soft);
  max-width: 680px;
  margin: 0 auto 10px;
}

.pn-price__card {
  max-width: 560px;
  margin: 40px auto 0;
  background: var(--pn-card);
  border: 2px solid var(--pn-emerald);
  border-radius: 22px;
  padding: 40px 40px 36px;
  box-shadow: 0 24px 60px rgba(15,157,110,0.18);
  text-align: center;
}

.pn-price__logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pn-navy);
  border-radius: 16px;
  font-size: 30px;
}

.pn-price__product {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pn-ink-dim);
  margin-bottom: 10px;
}

.pn-price__amount {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  color: var(--pn-navy);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.pn-price__terms {
  font-size: 14px;
  color: var(--pn-ink-soft);
  margin-bottom: 18px;
}

.pn-price__note {
  font-size: 13px;
  color: var(--pn-ink-dim);
  line-height: 1.5;
  margin-bottom: 16px;
}

.pn-price__daily {
  display: inline-block;
  background: rgba(199,154,35,0.12);
  border: 1px solid rgba(199,154,35,0.35);
  color: var(--pn-gold);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.pn-price__list {
  list-style: none;
  padding: 0;
  margin: 0 auto 22px;
  max-width: 380px;
  text-align: left;
}
.pn-price__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--pn-ink);
  margin-bottom: 11px;
}
.pn-price__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pn-emerald);
  font-weight: 800;
}

.pn-price__guarantee {
  display: inline-block;
  background: var(--pn-emerald-l);
  border: 1px solid rgba(15,157,110,0.25);
  color: var(--pn-emerald-h);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.pn-price__closing {
  font-size: 14px;
  color: var(--pn-ink-soft);
  line-height: 1.55;
  margin-bottom: 24px;
}

.pn-price__cta {
  display: block;
  background: var(--pn-emerald);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 28px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15,157,110,0.35);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pn-price__cta:hover {
  background: var(--pn-emerald-h);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,157,110,0.42);
}

.pn-price__cta-secondary {
  display: block;
  margin-top: 12px;
  background: transparent;
  color: var(--pn-ink-soft);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 13px 28px;
  border: 1px solid var(--pn-line);
  border-radius: 12px;
  transition: border-color .15s ease, color .15s ease;
}
.pn-price__cta-secondary:hover {
  border-color: var(--pn-ink-soft);
  color: var(--pn-ink);
}

@media (max-width: 600px) {
  .pn-price { padding: 56px 20px; }
  .pn-price__card { padding: 32px 22px 28px; }
}

/* =============================================
   FINAL – Záró CTA (sötétkék gerinc lezárás)
   ============================================= */
.pn-final {
  background:
    radial-gradient(1000px 460px at 50% -10%, rgba(36,52,99,0.5), transparent 60%),
    linear-gradient(160deg, var(--pn-navy) 0%, var(--pn-navy-2) 100%);
  color: var(--pn-on-navy);
  padding: 96px 24px;
}

.pn-final__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.pn-final__title {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.pn-final__accent { color: var(--pn-emerald); }

.pn-final__lead {
  font-size: 17px;
  color: var(--pn-on-navy-dim);
  max-width: 600px;
  margin: 0 auto 28px;
}

.pn-final__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}
.pn-final__pill {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pn-on-navy);
}

.pn-final__text {
  font-size: 16px;
  color: var(--pn-on-navy-dim);
  margin-bottom: 12px;
}
.pn-final__text--accent {
  color: var(--pn-emerald);
  font-weight: 600;
}

.pn-final__guarantee {
  display: inline-block;
  margin: 14px 0 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pn-on-navy-dim);
}

.pn-final__cta {
  display: inline-block;
  background: var(--pn-emerald);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15,157,110,0.4);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pn-final__cta:hover {
  background: var(--pn-emerald-h);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15,157,110,0.48);
}

@media (max-width: 600px) {
  .pn-final { padding: 64px 20px; }
  .pn-final__pill { font-size: 14px; padding: 10px 16px; }
}

/* =============================================
   FAQ – Gyakori kérdések
   ============================================= */
.pn-faq {
  background: var(--pn-bg);
  padding: 88px 24px;
}

.pn-faq__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.pn-faq__badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pn-emerald);
  margin-bottom: 12px;
}

.pn-faq__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  color: var(--pn-ink);
  letter-spacing: -0.01em;
  margin-bottom: 40px;
}

.pn-faq__list {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pn-faq__item {
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(22,32,60,0.04);
}

.pn-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--pn-ink);
  text-align: left;
  font-family: inherit;
}

.pn-faq__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pn-emerald-l);
  color: var(--pn-emerald-h);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: transform .2s ease;
}
.pn-faq__q[aria-expanded="true"] .pn-faq__icon { transform: rotate(45deg); }

.pn-faq__a {
  padding: 0 22px 20px;
}
.pn-faq__a p {
  font-size: 15px;
  color: var(--pn-ink-soft);
  line-height: 1.6;
}

/* =============================================
   PAY – Fizetési bizalmi sáv
   ============================================= */
.pn-pay {
  background: var(--pn-bg-alt);
  border-top: 1px solid var(--pn-line);
  padding: 40px 24px;
}

.pn-pay__inner {
  max-width: var(--pn-maxw);
  margin: 0 auto;
  text-align: center;
}

.pn-pay__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pn-ink);
  margin-bottom: 6px;
}

.pn-pay__sub {
  font-size: 13px;
  color: var(--pn-ink-dim);
  margin-bottom: 18px;
}

.pn-pay__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.pn-pay__card {
  background: var(--pn-card);
  border: 1px solid var(--pn-line);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pn-ink-soft);
  letter-spacing: 0.02em;
}

@media (max-width: 600px) {
  .pn-faq { padding: 56px 20px; }
  .pn-faq__q { font-size: 15px; padding: 16px 18px; }
}

/* ===== Footer / lábléc ===== */
.pn-footer{background:var(--pn-navy);color:#fff;padding:56px 20px;text-align:center;}
.pn-footer__inner{max-width:720px;margin:0 auto;}
.pn-footer__logo{margin-bottom:22px;}
.pn-footer__logo-img{display:inline-block;width:130px;height:auto;background:#fff;border-radius:14px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.pn-footer__logo-fallback{font-size:1.25rem;font-weight:700;color:var(--pn-gold);}
.pn-footer__tagline{font-size:1.05rem;line-height:1.6;color:#e7ecf6;margin:0 0 10px;}
.pn-footer__tagline strong{color:var(--pn-gold);font-weight:700;}
.pn-footer__copy{font-size:.9rem;color:#9aa6c4;margin:0 0 26px;}
.pn-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.pn-footer__link{display:inline-block;padding:11px 22px;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:#e7ecf6;text-decoration:none;font-size:.95rem;transition:background .18s ease,border-color .18s ease;}
.pn-footer__link:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);}
@media (max-width:560px){.pn-footer__links{flex-direction:column;}.pn-footer__link{width:100%;}}

/* ============================================================
   DESIGN SYSTEM OVERRIDES — Round 1 (colors/type/space/cards/buttons)
   ============================================================ */

/* ---- Typography base ---- */
html, body{font-family:"Manrope",system-ui,-apple-system,sans-serif;}
body{color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;}
p, li, span, a, label, div{font-size:inherit;}
body{font-size:17px;font-weight:400;}
h1,h2,h3,strong,b{font-weight:800;letter-spacing:-0.01em;}
.pn-hero__title{font-size:clamp(2.2rem,5vw,3.8rem)!important;font-weight:800;letter-spacing:-0.02em;line-height:1.1;}
.pn-pain__title,.pn-value__headline,.pn-banner__title,.pn-video__title,.pn-audience__title,.pn-trust__title,.pn-tiers__title,.pn-price__title,.pn-final__title,.pn-faq__title{font-size:clamp(1.7rem,3.5vw,2.5rem)!important;font-weight:800;line-height:1.15;letter-spacing:-0.015em;}
/* breathing room under H2 */
.pn-value__headline,.pn-audience__title,.pn-trust__title,.pn-tiers__title,.pn-price__title,.pn-final__title,.pn-faq__title,.pn-pain__title,.pn-banner__title,.pn-video__title{margin-bottom:40px!important;}
.pn-value__headline + .pn-value__lead,.pn-audience__title + .pn-audience__lead,.pn-trust__title + .pn-trust__lead,.pn-tiers__title + .pn-tiers__lead{margin-top:-24px;}
/* secondary text muted */
.pn-hero__text,.pn-pain__lead,.pn-value__lead,.pn-banner__text,.pn-glance__caption,.pn-video__text,.pn-audience__lead,.pn-trust__lead,.pn-tiers__lead,.pn-price__lead,.pn-final__lead,.pn-audience__card-text,.pn-trust__card-text{color:var(--text-muted);}
/* numbers tabular */
.pn-price__amount,.pn-price__daily,.pn-value__num,.pn-price__terms,.pn-footer__copy{font-variant-numeric:tabular-nums;}
/* prose width */
.pn-hero__text,.pn-pain__lead,.pn-value__lead,.pn-banner__text,.pn-audience__lead,.pn-trust__lead,.pn-tiers__lead,.pn-price__lead,.pn-final__lead{max-width:65ch;}

/* ---- Section spacing & layout ---- */
.pn-pain,.pn-value,.pn-banner,.pn-glance,.pn-video,.pn-audience,.pn-trust,.pn-tiers,.pn-price,.pn-final,.pn-faq,.pn-pay{padding-top:clamp(64px,9vw,112px)!important;padding-bottom:clamp(64px,9vw,112px)!important;}
.pn-hero{padding-top:clamp(64px,8vw,96px)!important;padding-bottom:clamp(64px,9vw,112px)!important;}
.pn-hero__inner,.pn-pain__inner,.pn-value__inner,.pn-banner__inner,.pn-glance__inner,.pn-video__inner,.pn-audience__inner,.pn-trust__inner,.pn-tiers__inner,.pn-price__inner,.pn-final__inner,.pn-faq__inner,.pn-pay__inner,.pn-footer__inner{max-width:1100px!important;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;}

/* ---- Unified cards ---- */
.pn-value__item,.pn-audience__card,.pn-trust__card,.pn-tiers__card,.pn-faq__item,.pn-glance__figure,.pn-video__card{border-radius:18px!important;padding:28px!important;border:1px solid rgba(15,27,45,.08)!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;background:var(--card);transition:box-shadow .2s ease!important;transform:none!important;}
.pn-value__item:hover,.pn-audience__card:hover,.pn-trust__card:hover,.pn-tiers__card:hover,.pn-video__card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)!important;transform:none!important;}
/* cards inside dark sections */
.pn-video__card{background:var(--navy-light)!important;border:1px solid rgba(255,255,255,.08)!important;}
.pn-faq__q{padding:20px 24px!important;}
.pn-faq__a p{padding:0 24px 22px!important;}

/* ---- Unified buttons ---- */
.pn-hero__cta,.pn-trust__cta,.pn-price__cta,.pn-final__cta,.pn-video__cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px!important;border-radius:12px!important;background:var(--accent)!important;color:#fff!important;font-weight:600!important;font-size:1.0625rem!important;border:none!important;box-shadow:none!important;transition:background .2s ease!important;letter-spacing:0;text-decoration:none;}
.pn-hero__cta:hover,.pn-trust__cta:hover,.pn-price__cta:hover,.pn-final__cta:hover,.pn-video__cta:hover{background:var(--accent-h)!important;transform:none!important;}
/* secondary / ghost button */
.pn-price__cta-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px!important;border-radius:12px!important;background:transparent!important;color:var(--text)!important;font-weight:600!important;border:1px solid rgba(15,27,45,.20)!important;box-shadow:none!important;transition:border-color .2s,background .2s!important;}
.pn-price__cta-secondary:hover{background:rgba(15,27,45,.04)!important;border-color:rgba(15,27,45,.35)!important;transform:none!important;}

/* ---- Pricing emphasis ---- */
.pn-price__amount{font-size:clamp(2.5rem,6vw,3.5rem)!important;font-weight:800!important;color:var(--text)!important;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.pn-price__card{position:relative;border:1px solid rgba(15,27,45,.08)!important;border-radius:18px!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;overflow:hidden;}
.pn-price__card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);}
/* daily badge: gold -> muted navy/accent-soft */
.pn-price__daily{background:var(--accent-soft)!important;border:1px solid var(--accent-line)!important;color:var(--accent-h)!important;font-variant-numeric:tabular-nums;}
.pn-price__list li::before,.pn-tiers__list li::before{color:var(--accent)!important;}

/* ---- Gold removal across tiers / accents ---- */
.pn-tiers__card--gold{border-color:var(--accent)!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;}
.pn-tiers__ribbon{background:var(--accent)!important;color:#fff!important;}
.pn-tiers__level{color:var(--text-muted)!important;}
.pn-footer__tagline strong,.pn-footer__logo-fallback{color:#fff!important;}
/* eyebrows / badges -> muted, no green elsewhere */
.pn-value__eyebrow,.pn-audience__badge,.pn-faq__badge,.pn-hero__badge{color:var(--text-muted)!important;}
.pn-hero__badge{background:rgba(255,255,255,.06)!important;color:var(--pn-on-navy-dim)!important;border:1px solid rgba(255,255,255,.12)!important;}
/* icons -> navy/muted, not green */
.pn-audience__icon,.pn-trust__icon{color:var(--navy)!important;}

/* ---- Final CTA stays in palette ---- */
.pn-final__pill{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;}
.pn-final__text--accent{color:#fff!important;}

/* ---- Mobile: grids to 1 column, no overflow ---- */
html,body{overflow-x:hidden;}
@media (max-width:480px){
  .pn-value__list,.pn-audience__grid,.pn-trust__grid,.pn-tiers__grid,.pn-video__grid{grid-template-columns:1fr!important;}
  body{font-size:17px;}
}

/* ---- Round 1 cleanup: neutralize remaining green badges/tiles ---- */
.pn-audience__badge{background:rgba(15,27,45,.05)!important;border:1px solid rgba(15,27,45,.10)!important;color:var(--text-muted)!important;}
.pn-faq__badge,.pn-value__eyebrow{color:var(--text-muted)!important;}
.pn-audience__icon,.pn-trust__icon{background:rgba(15,27,45,.05)!important;border:1px solid rgba(15,27,45,.08)!important;}
/* trust closing / cta containers stay accent only on the button */
.pn-trust__closing,.pn-tiers__closing,.pn-price__closing,.pn-price__guarantee{color:var(--text-muted)!important;}

/* ---- Tier headers: remove gold/off-palette gradients -> navy family ---- */
.pn-tiers__card--silver .pn-tiers__head{background:#5A6678!important;}
.pn-tiers__card--gold .pn-tiers__head{background:var(--navy)!important;}
.pn-tiers__card--diamond .pn-tiers__head{background:var(--navy-light)!important;}
.pn-tiers__head{color:#fff!important;}
.pn-tiers__level{color:rgba(255,255,255,.75)!important;opacity:1;}

/* ============================================================
   ROUND 2 — motion, mockup, texture, sticky, micro-interactions
   ============================================================ */

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out;will-change:opacity,transform;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---- Hero quick entrance (no scroll wait) ---- */
@keyframes pnHeroIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.pn-hero__inner > *{animation:pnHeroIn .4s ease-out both;}
.pn-hero__visual{animation:pnHeroIn .5s ease-out .08s both;}
.pn-hero__visual.reveal{opacity:1;transform:none;}

/* ---- Hero browser mockup ---- */
.pn-mockup{position:relative;width:100%;}
.pn-mockup__glow{position:absolute;inset:-12% -8% -8% -8%;background:radial-gradient(60% 60% at 70% 35%,rgba(14,158,110,.12),transparent 70%);filter:blur(8px);z-index:0;pointer-events:none;}
.pn-mockup__frame{position:relative;z-index:1;background:#0c1626;border:1px solid rgba(255,255,255,.10);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);}
.pn-mockup__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#111d31;border-bottom:1px solid rgba(255,255,255,.07);}
.pn-mockup__dots{display:inline-flex;gap:6px;}
.pn-mockup__dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.20);display:block;}
.pn-mockup__dots i:first-child{background:#ff5f57;}.pn-mockup__dots i:nth-child(2){background:#febc2e;}.pn-mockup__dots i:nth-child(3){background:#28c840;}
.pn-mockup__url{flex:1;font-size:12px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);border-radius:7px;padding:5px 12px;text-align:center;font-variant-numeric:tabular-nums;}
.pn-mockup__frame .pn-hero__image{display:block;width:100%;height:auto;border-radius:0;box-shadow:none;}

/* ---- Dark section texture (consistent faint line grid) ---- */
.pn-hero,.pn-banner,.pn-video,.pn-final{position:relative;}
.pn-hero::after,.pn-banner::after,.pn-video::after,.pn-final::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(120% 120% at 50% 0%,#000 35%,transparent 85%);-webkit-mask-image:radial-gradient(120% 120% at 50% 0%,#000 35%,transparent 85%);}
.pn-hero__inner,.pn-banner__inner,.pn-video__inner,.pn-final__inner{position:relative;z-index:1;}

/* ---- FAQ native details/summary ---- */
details.pn-faq__item{background:var(--card);border:1px solid rgba(15,27,45,.08);border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:12px;overflow:hidden;transition:box-shadow .2s ease;}
details.pn-faq__item[open]{box-shadow:0 8px 24px rgba(0,0,0,.08);border-left:3px solid var(--accent);}
.pn-faq__q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:14px 22px;cursor:pointer;font-weight:600;color:var(--text);}
.pn-faq__q::-webkit-details-marker{display:none;}
.pn-faq__q::marker{content:"";}
.pn-faq__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:20px;line-height:1;color:var(--accent);transition:transform .2s ease;}
details.pn-faq__item[open] .pn-faq__icon{transform:rotate(45deg);}
.pn-faq__a{padding:0 22px 18px;color:var(--text-muted);}
.pn-faq__a p{margin:0;}

/* ---- Sticky mobile CTA ---- */
.pn-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);transition:transform .3s ease;background:rgba(15,27,45,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.10);display:none;}
.pn-stickybar.is-on{transform:translateY(0);}
.pn-stickybar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1100px;margin:0 auto;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));}
.pn-stickybar__price{line-height:1.1;color:#fff;}
.pn-stickybar__price strong{display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;}
.pn-stickybar__price span{font-size:12px;color:var(--pn-on-navy-dim);}
.pn-stickybar__cta{flex:none;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:12px;background:var(--accent);color:#fff;font-weight:600;text-decoration:none;transition:background .2s ease;}
.pn-stickybar__cta:hover{background:var(--accent-h);}
@media (max-width:768px){.pn-stickybar{display:block;}}

/* ---- Micro-interactions ---- */
.pn-hero__cta,.pn-trust__cta,.pn-price__cta,.pn-final__cta,.pn-video__cta{transition:background .2s ease,transform .2s ease,box-shadow .2s ease!important;}
.pn-hero__cta:hover,.pn-trust__cta:hover,.pn-price__cta:hover,.pn-final__cta:hover,.pn-video__cta:hover{transform:translateY(-2px)!important;box-shadow:0 10px 26px rgba(14,158,110,.32)!important;}
.pn-hero__cta:active,.pn-trust__cta:active,.pn-price__cta:active,.pn-final__cta:active,.pn-video__cta:active{transform:translateY(0)!important;}
/* footer/text links underline on hover */
.pn-footer__link{position:relative;}
.pn-tiers__list a,.pn-footer__tagline a,.pn-faq__a a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease;}
.pn-tiers__list a:hover,.pn-footer__tagline a:hover,.pn-faq__a a:hover{border-bottom-color:currentColor;}
/* focus-visible for keyboard nav */
a:focus-visible,button:focus-visible,summary:focus-visible,.pn-faq__q:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

/* ---- Reduced motion: disable everything ---- */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-visible{opacity:1!important;transform:none!important;transition:none!important;}
  .pn-hero__inner > *,.pn-hero__visual{animation:none!important;}
  .pn-stickybar{transition:none!important;}
  *{scroll-behavior:auto!important;}
  .pn-hero__cta:hover,.pn-trust__cta:hover,.pn-price__cta:hover,.pn-final__cta:hover,.pn-video__cta:hover{transform:none!important;}
}

/* ============================================================
   HERO — mobile refinement (≤768px). Desktop untouched.
   ============================================================ */
@media (max-width:768px){
  /* single column, image on top, then content; consistent vertical rhythm */
  .pn-hero__inner{display:flex;flex-direction:column;gap:28px;align-items:stretch;}
  .pn-hero__visual{order:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;width:100%;}
  .pn-hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:none;}

  /* mockup fills width with side padding, centered */
  .pn-mockup{width:100%;max-width:520px;margin:0 auto;padding:0 18px;}

  /* caption below image, centered, smaller, muted, 8px gap (gap handles spacing) */
  .pn-hero__image-caption{order:2;margin:0;text-align:center;font-size:13px;color:var(--pn-on-navy-dim);}
  .pn-mockup{order:1;}

  /* badge: smaller + tighter so it fits one line; capsule kept; centered wrap fallback */
  .pn-hero__badge{font-size:11px;letter-spacing:0.01em;padding:10px 18px;border-radius:999px;text-align:center;white-space:nowrap;align-self:flex-start;}

  /* title cap */
  .pn-hero__title{font-size:clamp(1.6rem,7vw,2.2rem)!important;line-height:1.15!important;margin:0!important;overflow-wrap:break-word;}
  .pn-hero__text{margin:0;}
}



/* ============================================================
   HERO MOCKUP — mobile (≤768px): hide browser bar, enlarge image.
   Desktop untouched.
   ============================================================ */
@media (max-width:768px){
  /* give freed space to the image: only 12px side padding */
  .pn-mockup{padding:0 12px;max-width:560px;}
  /* hide the browser chrome (dots + url bar) on mobile */
  .pn-mockup__bar{display:none;}
  /* frame: no inner padding, keep rounded corners; image now rounds at top too */
  .pn-mockup__frame{border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.40);}
  .pn-mockup__frame .pn-hero__image{border-radius:14px;width:100%;height:auto;display:block;}
}

/* ============================================================
   GLANCE images — crop wrapper. Desktop: transparent pass-through.
   ============================================================ */
.pn-glance__crop{position:relative;border-radius:12px;overflow:hidden;}
.pn-glance__crop .pn-glance__image{display:block;width:100%;height:auto;border-radius:12px;}

/* Mobile (≤768px): fixed-height frame, top visible, fade at bottom (Solution A) */
@media (max-width:768px){
  .pn-glance__figure{padding:10px;}
  .pn-glance__crop{max-height:65vh;overflow:hidden;border:1px solid var(--pn-line);box-shadow:var(--pn-shadow);}
  .pn-glance__crop .pn-glance__image{border-radius:12px;}
  /* bottom fade overlay — 60px, blends to section background */
  .pn-glance__crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--pn-card));}
}