/* =====================================
   CleanLiving 2026 UI
   Namespace: pb-
   ===================================== */

:root{
  --pb-bg: #f4f6f3;
  --pb-surface: rgba(255,255,255,.78);
  --pb-glass: rgba(255,255,255,.62);

  --pb-primary: #8fb3a2;
  --pb-accent: #5f9ea0;

  --pb-ink: #1c2422;
  --pb-muted: #6e7a76;

  --pb-radius-sm: 10px;
  --pb-radius-md: 18px;
  --pb-radius-lg: 26px;

  --pb-shadow-soft: 0 10px 30px rgba(0,0,0,.06);
  --pb-shadow-glass: 0 20px 50px rgba(0,0,0,.08);

  --pb-motion-fast: 140ms;
  --pb-motion-med: 260ms;
  --pb-motion-slow: 420ms;
  --pb-ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ===========================
   Base
   =========================== */

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--pb-bg);
  color: var(--pb-ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.75;
}

/* Ambient depth wash */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(80% 40% at 70% 10%, rgba(143,179,162,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}

/* ===========================
   Typography
   =========================== */

h1, h2, h3{
  font-weight:600;
  letter-spacing:.01em;
}

h1{
  font-size:2.5rem;
}

h2{
  font-size:1.6rem;
}

p{
  margin:0 0 1.4em;
}

/* REQUIRED justification */
article p,
section p,
main p,
p {
  text-align: justify !important;
  text-justify: inter-word !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  hyphens: auto !important;
}

/* ===========================
   Header + Nav (Modern Glass)
   =========================== */

.pb-header{
  position:sticky;
  top:0;
  z-index:100;
  padding:1rem 1rem;
}

.pb-nav{
  max-width:1080px;
  margin:0 auto;
  padding:.7rem 1rem;
  display:flex;
  justify-content:center;
  gap:.6rem;

  background: var(--pb-glass);
  backdrop-filter: blur(14px) saturate(120%);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-soft);
}

.pb-nav a{
  padding:.45rem .9rem;
  border-radius: var(--pb-radius-md);
  color: var(--pb-ink);
  text-decoration:none;
  font-weight:500;
  transition:
    background var(--pb-motion-fast) var(--pb-ease),
    transform var(--pb-motion-fast) var(--pb-ease),
    color var(--pb-motion-fast) var(--pb-ease);
}

.pb-nav a:hover{
  background: rgba(143,179,162,.18);
  transform: translateY(-1px);
  color: var(--pb-accent);
}

/* ===========================
   Layout
   =========================== */

.pb-container{
  max-width:980px;
  margin:0 auto;
  padding:4rem 1.5rem 5rem;
}

/* ===========================
   Hero Card
   =========================== */

.pb-hero{
  margin:2.8rem 0 3.6rem;
  background: var(--pb-surface);
  backdrop-filter: blur(10px);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-glass);
  overflow:hidden;
}

.pb-hero img{
  width:100%;
  display:block;
}

/* ===========================
   Sections as Panels
   =========================== */

.pb-section{
  background: var(--pb-surface);
  backdrop-filter: blur(10px);
  padding:2.2rem 2.2rem 1.6rem;
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-soft);
  margin-bottom:2.6rem;
  transform: translateY(12px);
  opacity:0;
  transition:
    transform var(--pb-motion-slow) var(--pb-ease),
    opacity var(--pb-motion-slow) var(--pb-ease);
}

.pb-section.is-seen{
  transform: translateY(0);
  opacity:1;
}

/* ===========================
   Footer – Glass Closure
   =========================== */

.pb-footer{
  padding:4rem 1rem 5rem;
  display:flex;
  justify-content:center;
}

.pb-footer p{
  margin:0;
  padding:.9rem 1.6rem;
  font-size:.9rem;
  color: var(--pb-muted);

  background: var(--pb-glass);
  backdrop-filter: blur(14px) saturate(120%);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-soft);
}

/* ===========================
   Back to Top
   =========================== */

.pb-to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:46px;
  height:46px;
  border-radius:14px;
  background: var(--pb-primary);
  color:#10201a;
  font-weight:700;
  line-height:46px;
  text-align:center;
  cursor:pointer;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition:
    opacity .25s ease,
    transform .25s ease,
    background .2s ease;
  z-index:9999;
}

.pb-to-top:hover{
  background:#ffffff;
}

.pb-to-top.pb-show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* ===========================
   Reading Progress
   =========================== */

.pb-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background: linear-gradient(90deg, var(--pb-accent), transparent);
  z-index:9998;
}