/* =========================================================
   POPTEXT — scoped variant
   PopText animates 3D text in Blender, so the page's own
   signature is animated, bouncy type on a dark viewport-like
   stage — the product demonstrating itself. Punchy dual accent
   (violet + orange) instead of the studio green or Chipan's
   signal green, so this reads as its own tool, same pattern
   as Screen DNA's brass/desk theme.
   ========================================================= */
:root{
  --pt-bg:#141018;
  --pt-panel:#1c1624;
  --pt-line:rgba(255,255,255,0.09);
  --pt-ink:#f3eefc;
  --pt-muted:#a89bc0;
  --pt-violet:#b98CFF;
  --pt-orange:#FF9A4D;
  --pt-display:'Fredoka','Inter',sans-serif;
  --pt-mono:'Courier Prime','Courier New',monospace;
  --pt-sans:'Inter',-apple-system,sans-serif;
  /* alternating section bands */
  --pt-band-1:transparent;
  --pt-band-2:#1a1422;
  --pt-band-manual:#f6f3fa;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.01ms !important;transition-duration:.01ms !important;} }
body{
  margin:0;background:var(--pt-bg);color:var(--pt-ink);
  font-family:var(--pt-sans);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 85% 0%, rgba(185,140,255,0.14), transparent 45%),
    radial-gradient(circle at 5% 90%, rgba(255,154,77,0.10), transparent 45%);
  background-attachment:fixed;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--pt-violet);outline-offset:3px;}

/* ---------- header ---------- */
header.pt-header{
  position:sticky;top:0;z-index:50;
  background:rgba(20,16,24,0.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--pt-line);
}
.pt-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px;}
.pt-back{font-family:var(--pt-mono);font-size:12px;color:var(--pt-muted);text-decoration:none;white-space:nowrap;}
.pt-back:hover{color:var(--pt-violet);}
.pt-wordmark{
  font-family:var(--pt-display);font-weight:700;font-size:17px;letter-spacing:0.01em;
  text-decoration:none;color:var(--pt-ink);display:flex;align-items:center;gap:8px;
}
.pt-wordmark .pop{color:var(--pt-orange);}
.pt-nav-links{display:flex;gap:26px;font-size:14px;}
.pt-nav-links a{text-decoration:none;color:var(--pt-muted);}
.pt-nav-links a:hover{color:var(--pt-ink);}
@media(max-width:640px){ .pt-nav-links{display:none;} }

/* ---------- hero: kinetic type stage ---------- */
.pt-hero{padding:72px 0 56px;position:relative;overflow:hidden;}
.pt-stage{
  background:var(--pt-panel);border:1px solid var(--pt-line);border-radius:16px;
  padding:64px 32px;text-align:center;margin-bottom:44px;overflow:hidden;position:relative;
}
.pt-stage-grid{
  position:absolute;inset:0;opacity:0.5;
  background-image:linear-gradient(var(--pt-line) 1px, transparent 1px), linear-gradient(90deg, var(--pt-line) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse at center, black 40%, transparent 75%);
}
.pt-kinetic{position:relative;font-family:var(--pt-display);font-weight:700;font-size:clamp(40px,8vw,88px);letter-spacing:0.01em;margin:0;line-height:1;}
.pt-kinetic span{display:inline-block;animation:pt-pop 2.4s cubic-bezier(.34,1.56,.64,1) infinite;}
.pt-kinetic span:nth-child(1){color:var(--pt-violet);animation-delay:0s;}
.pt-kinetic span:nth-child(2){color:var(--pt-orange);animation-delay:0.12s;}
.pt-kinetic span:nth-child(3){color:var(--pt-ink);animation-delay:0.24s;}
.pt-kinetic span:nth-child(4){color:var(--pt-violet);animation-delay:0.36s;}
.pt-kinetic span:nth-child(5){color:var(--pt-orange);animation-delay:0.48s;}
.pt-kinetic span:nth-child(6){color:var(--pt-ink);animation-delay:0.60s;}
.pt-kinetic span:nth-child(7){color:var(--pt-violet);animation-delay:0.72s;}
@keyframes pt-pop{
  0%, 55%, 100%{transform:translateY(0) scale(1);}
  18%{transform:translateY(-16px) scale(1.1);}
  34%{transform:translateY(0) scale(0.94);}
  44%{transform:translateY(-4px) scale(1.03);}
}
@media (prefers-reduced-motion: reduce){
  /* This wordmark IS the product demo, not decoration, so instead of killing
     it entirely (like the sitewide reduced-motion rule above does), give it
     a small, non-jarring opacity pulse instead of the full bounce. The
     explicit !important + higher specificity here is needed to beat the
     universal *{animation-duration:.01ms !important} rule above. */
  .pt-kinetic span{
    animation-name: pt-pop-reduced;
    animation-duration: 2.4s !important;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
}
@keyframes pt-pop-reduced{
  0%, 45%, 100%{opacity:1;}
  22%{opacity:0.45;}
}
.pt-stage-caption{position:relative;font-family:var(--pt-mono);font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--pt-muted);margin:22px 0 0;}

.pt-hero-copy{max-width:640px;margin:0 auto;text-align:center;}
.pt-eyebrow{
  font-family:var(--pt-mono);font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--pt-orange);margin:0 0 14px;
}
.pt-hero h1{font-family:var(--pt-display);font-weight:600;font-size:clamp(24px,3.4vw,32px);margin:0 0 16px;line-height:1.3;}
.pt-hero .lead{color:var(--pt-muted);font-size:17px;margin:0 0 30px;}
.pt-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;
  font-family:var(--pt-sans);border:1.5px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-violet{background:var(--pt-violet);color:#1b1424;}
.btn-violet:hover{background:#c9a8ff;box-shadow:0 8px 22px rgba(185,140,255,0.30);}
.btn-outline{border-color:rgba(243,238,252,0.3);color:var(--pt-ink);}
.btn-outline:hover{border-color:var(--pt-ink);}

/* ---------- features ---------- */
.pt-section{padding:56px 0;}
.pt-section-head{max-width:640px;margin:0 0 32px;}
.pt-label{font-family:var(--pt-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--pt-orange);margin:0 0 12px;}
.pt-section-head h2{font-family:var(--pt-display);font-weight:700;font-size:clamp(24px,3vw,30px);margin:0;}
.pt-section-head p{color:var(--pt-muted);font-size:16.5px;margin:12px 0 0;max-width:60ch;line-height:1.6;}

.pt-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media(max-width:700px){ .pt-feature-grid{grid-template-columns:1fr;} }
.pt-feature{
  background:var(--pt-panel);border:1px solid var(--pt-line);border-radius:12px;
  padding:26px 28px;
}
.pt-feature .ico{
  width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--pt-violet), var(--pt-orange));
  margin-bottom:16px;font-family:var(--pt-display);font-weight:700;color:#1b1424;font-size:15px;
}
.pt-feature h3{margin:0 0 8px;font-family:var(--pt-display);font-weight:600;font-size:17px;}
.pt-feature p{margin:0;color:var(--pt-muted);font-size:15px;line-height:1.6;}

/* ---------- placeholder demo image ---------- */
.pt-demo{border-radius:14px;overflow:hidden;border:1px solid var(--pt-line);}
.pt-demo img{width:100%;display:block;}

/* ---------- sticky sub-nav (one-stop wayfinding: overview / features / get started / manual / faq) ---------- */
.pt-subnav{
  position:sticky;top:57px;z-index:40;
  background:rgba(20,16,24,0.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--pt-line);
  overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;
}
.pt-subnav::-webkit-scrollbar{display:none;}
.pt-subnav-inner{display:flex;gap:6px;padding:10px 28px;max-width:1080px;margin:0 auto;white-space:nowrap;}
.pt-subnav a{
  font-size:13px;font-weight:600;color:var(--pt-muted);text-decoration:none;
  padding:7px 14px;border-radius:999px;transition:background-color .15s ease,color .15s ease;
}
.pt-subnav a:hover{color:var(--pt-ink);}
.pt-subnav a.active{background:rgba(185,140,255,0.16);color:var(--pt-violet);}

/* ---------- why grid ---------- */
.pt-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:820px){ .pt-why-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .pt-why-grid{grid-template-columns:1fr;} }
.pt-why{padding:4px 0;}
.pt-why h4{margin:0 0 6px;font-family:var(--pt-display);font-weight:600;font-size:15.5px;color:var(--pt-ink);}
.pt-why p{margin:0;color:var(--pt-muted);font-size:14.5px;line-height:1.6;}

/* ---------- grouped feature list (richer than single-line cards) ---------- */
.pt-feature-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media(max-width:760px){ .pt-feature-groups{grid-template-columns:1fr;} }
.pt-fgroup{background:var(--pt-panel);border:1px solid var(--pt-line);border-radius:14px;padding:26px 28px;}
.pt-fgroup-img{border-radius:10px;overflow:hidden;margin:0 0 18px;border:1px solid var(--pt-line);}
.pt-fgroup-img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.pt-fgroup h3{margin:0 0 14px;font-family:var(--pt-display);font-weight:600;font-size:17px;display:flex;align-items:center;gap:10px;}
.pt-fgroup ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;}
.pt-fgroup li{color:var(--pt-muted);font-size:14.5px;line-height:1.55;padding-left:18px;position:relative;}
.pt-fgroup li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--pt-violet),var(--pt-orange));}
.pt-fgroup li strong{color:var(--pt-ink);}

/* ---------- gallery (capture placeholders) ---------- */
.pt-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:700px){ .pt-gallery{grid-template-columns:1fr;} }
.pt-gallery figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--pt-line);background:var(--pt-panel);}
.pt-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.pt-gallery figcaption{padding:10px 14px;font-size:12.5px;color:var(--pt-muted);font-family:var(--pt-mono);}

/* ---------- numbered steps (install / get started) ---------- */
.pt-steps{list-style:none;margin:0;padding:0;counter-reset:pt-step;display:grid;gap:14px;}
.pt-steps li{
  counter-increment:pt-step;position:relative;padding:18px 22px 18px 62px;
  background:var(--pt-panel);border:1px solid var(--pt-line);border-radius:12px;
}
.pt-steps li::before{
  content:counter(pt-step);position:absolute;left:20px;top:18px;
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--pt-violet),var(--pt-orange));color:#1b1424;
  font-family:var(--pt-display);font-weight:700;font-size:13px;
}
.pt-steps p{margin:0;color:var(--pt-muted);font-size:15px;line-height:1.6;}
.pt-steps strong{color:var(--pt-ink);}
.pt-acc-body code, .pt-steps code{
  font-family:var(--pt-mono);font-size:0.92em;background:rgba(128,128,128,0.18);
  padding:1px 6px;border-radius:4px;color:inherit;
}
.pt-req-note{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--pt-mono);font-size:12.5px;color:var(--pt-muted);
  padding:8px 14px;border:1px solid var(--pt-line);border-radius:999px;
}
.pt-req-note strong{color:var(--pt-orange);}

/* ---------- definition list for settings inside the manual ---------- */
.pt-dl{margin:14px 0 0;display:grid;gap:10px;}
.pt-dl dt{font-family:var(--pt-sans);font-weight:700;font-size:14.5px;color:var(--pt-ink);}
.pt-dl dd{margin:2px 0 0;color:var(--pt-muted);font-size:14.5px;line-height:1.6;}
.pt-manual-sub{margin:22px 0 0;}
.pt-manual-sub:first-child{margin-top:0;}
.pt-manual-sub h4{margin:0;font-family:var(--pt-display);font-weight:600;font-size:15px;color:var(--pt-orange);}
.pt-manual-tip{
  margin:16px 0 0;padding:12px 16px;border-radius:10px;
  background:rgba(185,140,255,0.08);border:1px solid rgba(185,140,255,0.22);
  font-size:14px;color:var(--pt-muted);line-height:1.6;
}
.pt-manual-tip strong{color:var(--pt-violet);}

/* ---------- accordion (manual chapters + FAQ) ---------- */
.pt-accordion{display:grid;gap:10px;}
.pt-acc-item{
  background:var(--pt-panel);border:1px solid var(--pt-line);border-radius:12px;overflow:hidden;
}
.pt-acc-item summary{
  list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:14px;
  font-family:var(--pt-display);font-weight:600;font-size:16px;color:var(--pt-ink);
}
.pt-acc-item summary::-webkit-details-marker{display:none;}
.pt-acc-num{
  font-family:var(--pt-mono);font-size:12px;color:var(--pt-orange);flex:none;
  width:24px;
}
.pt-acc-title{flex:1;}
.pt-acc-chev{
  flex:none;color:var(--pt-muted);transition:transform .2s ease;font-size:13px;
}
.pt-acc-item[open] .pt-acc-chev{transform:rotate(180deg);}
.pt-acc-body{padding:0 22px 24px 60px;color:var(--pt-muted);font-size:15px;line-height:1.65;}
.pt-acc-body p{margin:0 0 12px;}
.pt-acc-body p:last-child{margin-bottom:0;}
.pt-acc-body ul{margin:0 0 12px;padding-left:18px;}
.pt-acc-body li{margin-bottom:6px;}
@media(max-width:640px){ .pt-acc-body{padding-left:22px;} }

/* ---------- final CTA banner ---------- */
.pt-cta-banner{
  border-radius:16px;padding:44px 40px;text-align:center;
  background:linear-gradient(135deg, rgba(185,140,255,0.14), rgba(255,154,77,0.10));
  border:1px solid var(--pt-line);
}
.pt-cta-banner h2{font-family:var(--pt-display);font-weight:700;font-size:clamp(24px,3vw,30px);margin:0 0 10px;}
.pt-cta-banner p{color:var(--pt-muted);font-size:16px;margin:0 0 24px;max-width:52ch;margin-left:auto;margin-right:auto;}
.pt-cta-stores-label{
  font-family:var(--pt-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--pt-orange);margin:0 auto 14px !important;text-align:center;
}
.pt-cta-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.pt-cta-substore-note{
  font-size:13px !important;color:var(--pt-muted);margin:14px auto 0 !important;text-align:center;
}
.pt-cta-manual-link{
  display:block;margin:22px auto 0;font-size:14px;color:var(--pt-muted);
  text-decoration:underline;text-underline-offset:3px;text-align:center;width:fit-content;
}
.pt-cta-manual-link:hover{color:var(--pt-ink);}

/* ---------- alternating section bands ---------- */
.pt-band-1{background:var(--pt-band-1);}
.pt-band-2{background:var(--pt-band-2);}
.pt-band-manual{
  background:var(--pt-band-manual);
  /* re-theme every component inside this section for a light "reading mode":
     everything below already reads its color from these custom properties,
     so overriding them here re-skins cards, borders, and text without
     touching a single component rule. */
  --pt-panel:#ffffff;
  --pt-line:rgba(36,28,48,0.12);
  --pt-ink:#241c30;
  --pt-muted:#5a4f6e;
  --pt-violet:#6d3fc2;
  --pt-orange:#a34f14;
}
.pt-band-manual .pt-section-head h2{color:var(--pt-bg);}
.pt-band-manual .pt-section-head p{color:var(--pt-muted);}

/* ---------- footer ---------- */
footer.pt-footer{border-top:1px solid var(--pt-line);padding:40px 0;}
.pt-foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.pt-foot-links{display:flex;gap:20px;font-size:13px;}
.pt-foot-links a{text-decoration:none;color:var(--pt-muted);}
.pt-foot-links a:hover{color:var(--pt-violet);}
.pt-foot-meta{font-size:12px;color:var(--pt-muted);font-family:var(--pt-mono);}

@media(max-width:640px){
  .wrap{padding:0 20px;}
  .pt-section{padding:44px 0;}
  .pt-stage{padding:44px 20px;}
}