/* ==== Design System (ppai-ds) ==== */

    /* ============================================================
       Design System
    ============================================================ */
    :root{
      --accent:#0ea5e9; --accent-dark:#0369a1; --accent-subtle:rgba(14,165,233,.09);
      --danger:#e03e52;
      --surface:#fafaf9; --surface-2:#f8fafc; --surface-3:#f1f5f9;
      --nav-bg:rgba(250,250,249,.92);
      --border:rgba(0,0,0,.09); --border-strong:rgba(0,0,0,.16);
      --text-primary:#1c1917; --text-secondary:#57534e; --text-muted:#a8a29e;
      --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
      --shadow-md:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.05);
      --shadow-lg:0 12px 40px rgba(0,0,0,.13),0 4px 12px rgba(0,0,0,.07);
      --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:26px;
      --transition:all .18s cubic-bezier(.4,0,.2,1);
      /* ── Champagne accent (secondary, used sparingly) ── */
      --champagne:#D6B67D; --champagne-dark:#A17D3F; --champagne-tint:#FAF3E7;
      /* ── Type scale ── */
      --fs-3xl:2.4rem;   /* hero h1 */
      --fs-2xl:1.6rem;   /* section h2 */
      --fs-xl:1.25rem;   /* sub-heading h3 */
      --fs-lg:1.05rem;   /* lead / intro */
      --fs-base:0.95rem; /* body text */
      --fs-sm:0.82rem;   /* secondary / meta */
      --fs-xs:0.72rem;   /* labels / captions */
      --fs-2xs:0.58rem;  /* PRO badges / tiny pills */
    }
    .dark{
      --accent:#38bdf8; --accent-dark:#0ea5e9; --accent-subtle:rgba(56,189,248,.11);
      --nav-bg:rgba(15,17,23,.92);
      --surface:#1c1917; --surface-2:#292524; --surface-3:#3a3633;
      --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
      --text-primary:#f5f8ff; --text-secondary:#b8c8dc; --text-muted:#7a8fa8;
      --champagne:#DFC08D; --champagne-dark:#E6CB9D; --champagne-tint:rgba(217,184,118,.06);
      --shadow-sm:0 1px 3px rgba(0,0,0,.3);
      --shadow-md:0 4px 16px rgba(0,0,0,.4);
      --shadow-lg:0 12px 40px rgba(0,0,0,.55);
    }
    .compact .ppai-main          { margin-top:1rem!important; }
    .compact .ppai-page-header   { margin-bottom:1rem!important; padding-bottom:.75rem!important; }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html,body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;}
    html{background:#f5f5f4;}
    body{background:transparent;color:var(--text-primary);line-height:1.6;transition:background .2s,color .2s;}
    /* ── Global typography ── */
    .ppai-main p{font-size:var(--fs-base);line-height:1.7;}
    .ppai-main h1{font-size:var(--fs-3xl);line-height:1.2;}
    .ppai-main h2{font-size:var(--fs-2xl);line-height:1.3;}
    .ppai-main h3{font-size:var(--fs-xl);line-height:1.4;}
    .ppai-page-title{font-size:var(--fs-2xl)!important;}
    .ppai-page-description{font-size:var(--fs-lg)!important;}
    @media(max-width:768px){
      .ppai-main h1{font-size:2rem;}
      .ppai-main h2{font-size:1.35rem;}
      .ppai-main h3{font-size:1.1rem;}
      .ppai-page-title{font-size:1.35rem!important;}
    }

    /* Cookie banner */
    #ppai-cookie{
      position:fixed;bottom:0;left:0;right:0;
      background:var(--surface);border-top:2px solid var(--accent);
      padding:1rem 2rem;z-index:10000;
      display:none;align-items:center;justify-content:space-between;
      gap:1.5rem;flex-wrap:wrap;
      box-shadow:0 -4px 24px rgba(0,0,0,.12);
    }
    #ppai-cookie p{color:var(--text-secondary);font-size:var(--fs-sm);max-width:680px;margin:0;line-height:1.6;}
    #ppai-cookie a{color:var(--accent);text-decoration:underline;}
    .ck-btns{display:flex;gap:.7rem;flex-shrink:0;}
    .ck-btn{padding:.48rem 1.15rem;border-radius:var(--radius-sm);font-weight:600;font-size:var(--fs-sm);cursor:pointer;border:none;transition:var(--transition);font-family:inherit;}
    .ck-accept{background:var(--accent);color:#fff;}
    .ck-accept:hover{background:var(--accent-dark);}
    .ck-decline{background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border);}
    .ck-decline:hover{border-color:var(--accent);color:var(--accent);}
    @media(max-width:640px){
      #ppai-cookie{padding:.75rem 1rem;gap:.75rem;max-height:50vh;overflow-y:auto;}
      #ppai-cookie p{font-size:.8rem;}
      .ck-btns{width:100%;justify-content:flex-end;}
      .ck-btn{min-height:44px;padding:.5rem 1.1rem;font-size:.84rem;}
    }

    /* ============================================================
       Global SVG Animation System
    ============================================================ */
    svg{max-width:100%;height:auto;}
    @keyframes svg-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
    @keyframes svg-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.18);opacity:.85;}}
    @keyframes svg-spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
    @keyframes svg-spin-slow{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
    @keyframes svg-bounce{0%,100%{transform:translateY(0);}30%{transform:translateY(-6px);}60%{transform:translateY(-2px);}}
    @keyframes svg-glow{0%,100%{filter:drop-shadow(0 0 0px transparent);}50%{filter:drop-shadow(0 0 6px var(--accent));}}
    @keyframes svg-shake{0%,100%{transform:rotate(0deg);}20%{transform:rotate(-8deg);}40%{transform:rotate(8deg);}60%{transform:rotate(-4deg);}80%{transform:rotate(4deg);}}
    @keyframes svg-pop{0%{transform:scale(1);}40%{transform:scale(1.25);}70%{transform:scale(.92);}100%{transform:scale(1);}}
    @keyframes svg-wave{0%,100%{transform:rotate(0deg);}25%{transform:rotate(20deg);}75%{transform:rotate(-12deg);}}
    @keyframes svg-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
    @keyframes svg-logo-glow{
      0%{filter:drop-shadow(0 0 4px rgba(45,255,196,.6)) drop-shadow(0 0 1px rgba(45,255,196,.3));}
      25%{filter:drop-shadow(0 0 9px rgba(0,200,235,.85)) drop-shadow(0 0 3px rgba(0,200,235,.4));}
      50%{filter:drop-shadow(0 0 11px rgba(167,139,250,.9)) drop-shadow(0 0 4px rgba(124,58,237,.4));}
      75%{filter:drop-shadow(0 0 9px rgba(0,200,235,.85)) drop-shadow(0 0 3px rgba(0,200,235,.4));}
      100%{filter:drop-shadow(0 0 4px rgba(45,255,196,.6)) drop-shadow(0 0 1px rgba(45,255,196,.3));}
    }
    .svg-float{animation:svg-float 3s ease-in-out infinite;}
    .svg-pulse{animation:svg-pulse 2.2s ease-in-out infinite;}
    .svg-spin{animation:svg-spin 2s linear infinite;}
    .svg-spin-slow{animation:svg-spin-slow 6s linear infinite;}
    .svg-bounce{animation:svg-bounce 1.8s ease-in-out infinite;}
    .svg-glow{animation:svg-glow 2.5s ease-in-out infinite;}
    .svg-shake{animation:svg-shake 2s ease-in-out infinite;}
    .svg-pop{animation:svg-pop 2s ease-in-out infinite;}
    .svg-wave{animation:svg-wave 2s ease-in-out infinite;}
    .svg-bob{animation:svg-bob 3s ease-in-out infinite;}
    .svg-logo-glow{animation:svg-logo-glow 3s ease-in-out infinite;}
    /* Legacy icon class aliases → map to global keyframes */
    .icon-float{animation:svg-float 3s ease-in-out infinite;}
    .icon-pulse{animation:svg-pulse 2.2s ease-in-out infinite;}
    .icon-spin{animation:svg-spin 2s linear infinite;}
    .icon-bounce{animation:svg-bounce 1.8s ease-in-out infinite;}
    .icon-glow{animation:svg-glow 2.5s ease-in-out infinite;}
    .icon-shake{animation:svg-shake 2s ease-in-out infinite;}
    .icon-pop{animation:svg-pop 2s ease-in-out infinite;}
    .icon-wave{animation:svg-wave 2s ease-in-out infinite;}
    /* Dynamic icon colour cycling */
    @keyframes icon-colour-cycle{
      0%  {filter:drop-shadow(0 0 3px rgba(14,165,233,.55))  hue-rotate(0deg);}
      25% {filter:drop-shadow(0 0 4px rgba(249,115,22,.6))   hue-rotate(60deg);}
      50% {filter:drop-shadow(0 0 4px rgba(20,184,166,.6))   hue-rotate(140deg);}
      75% {filter:drop-shadow(0 0 4px rgba(251,146,60,.55))  hue-rotate(220deg);}
      100%{filter:drop-shadow(0 0 3px rgba(14,165,233,.55))  hue-rotate(360deg);}
    }
    /* Button / action icon — hover scale only (no looping) */
    button svg, .ppai-btn svg, a.ppai-btn svg,
    [role="button"] svg{transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
    button:hover svg, .ppai-btn:hover svg, a.ppai-btn:hover svg,
    [role="button"]:hover svg{transform:scale(1.25);}
    /* Colourful animated icon classes assigned by JS */
    .dyn-icon{transition:stroke .4s,fill .4s;}
    .dyn-icon-c1{stroke:#0ea5e9!important;} /* teal */
    .dyn-icon-c2{stroke:#f97316!important;} /* amber */
    .dyn-icon-c3{stroke:#14b8a6!important;} /* teal */
    .dyn-icon-c4{stroke:#f97316!important;} /* orange */
    .dyn-icon-c5{stroke:#e11d48!important;} /* rose */
    .dyn-icon-c6{stroke:#0ea5e9!important;} /* sky */
    .dyn-icon-c7{stroke:#f59e0b!important;} /* amber */
    .dyn-icon-c8{stroke:#10b981!important;} /* emerald */
    /* filled icons */
    .dyn-icon-fill.dyn-icon-c1{fill:#0ea5e9!important;stroke:none!important;}
    .dyn-icon-fill.dyn-icon-c2{fill:#f97316!important;stroke:none!important;}
    .dyn-icon-fill.dyn-icon-c3{fill:#14b8a6!important;stroke:none!important;}
    .dyn-icon-fill.dyn-icon-c4{fill:#f97316!important;stroke:none!important;}
    .dyn-icon-fill.dyn-icon-c5{fill:#e11d48!important;stroke:none!important;}
    .dyn-icon-fill.dyn-icon-c6{fill:#0ea5e9!important;stroke:none!important;}
    .dyn-icon-fill.dyn-icon-c7{fill:#f59e0b!important;stroke:none!important;}
    .dyn-icon-fill.dyn-icon-c8{fill:#10b981!important;stroke:none!important;}
    @media(prefers-reduced-motion:reduce){
      .svg-float,.svg-pulse,.svg-spin,.svg-spin-slow,.svg-bounce,
      .svg-glow,.svg-shake,.svg-pop,.svg-wave,.svg-bob,.svg-logo-glow,
      .icon-float,.icon-pulse,.icon-spin,.icon-bounce,.icon-glow,
      .icon-shake,.icon-pop,.icon-wave,.dyn-icon{animation:none;}
    }
    /* ── CUT-PAPER ICON SYSTEM ─────────────────────────────────────
       Shared keyframes for all 36 cut-paper animated icons.
       Each icon floats + has its own unique behaviour animation.
       Delays staggered so icons don't all move in sync.
    ───────────────────────────────────────────────────────────────── */
    @keyframes cp-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
    /* Shield: crack apart and rejoin */
    @keyframes cp-shield-l{0%,30%{transform:translate(0,0) rotate(0deg);}45%,55%{transform:translate(-5px,-3px) rotate(-6deg);}70%,100%{transform:translate(0,0) rotate(0deg);}}
    @keyframes cp-shield-r{0%,30%{transform:translate(0,0) rotate(0deg);}45%,55%{transform:translate(6px,3px) rotate(5deg);}70%,100%{transform:translate(0,0) rotate(0deg);}}
    @keyframes cp-crack{0%,28%{opacity:0;}35%,60%{opacity:1;}68%,100%{opacity:0;}}
    /* Lock: shackle lifts and drops */
    @keyframes cp-shackle{0%,20%{transform:translateY(0);}40%,60%{transform:translateY(-10px);}80%,100%{transform:translateY(0);}}
    @keyframes cp-lock-shake{60%{transform:translateX(0);}63%{transform:translateX(-2px);}66%{transform:translateX(2px);}69%{transform:translateX(-1px);}72%,100%{transform:translateX(0);}}
    /* Document: lines erase and rewrite */
    @keyframes cp-line1{0%,15%{stroke-dashoffset:0;opacity:.85;}35%,55%{stroke-dashoffset:30;opacity:0;}75%,100%{stroke-dashoffset:0;opacity:.85;}}
    @keyframes cp-line2{0%,20%{stroke-dashoffset:0;opacity:.85;}40%,60%{stroke-dashoffset:30;opacity:0;}80%,100%{stroke-dashoffset:0;opacity:.85;}}
    @keyframes cp-line3{0%,25%{stroke-dashoffset:0;opacity:.85;}45%,65%{stroke-dashoffset:20;opacity:0;}85%,100%{stroke-dashoffset:0;opacity:.85;}}
    /* Envelope: flap opens, letter slides out */
    @keyframes cp-letter{0%,20%{transform:translateY(0);}45%,65%{transform:translateY(-14px);}85%,100%{transform:translateY(0);}}
    @keyframes cp-flap{0%,20%{transform:rotateX(0deg);}45%,65%{transform:rotateX(-160deg);}85%,100%{transform:rotateX(0deg);}}
    /* Eye: blink */
    @keyframes cp-eye-top{0%,78%,100%{transform:scaleY(1);}88%{transform:scaleY(0.05);}}
    @keyframes cp-eye-bot{0%,78%,100%{transform:scaleY(1);}88%{transform:scaleY(0.05);}}
    @keyframes cp-pupil{0%,78%,100%{transform:scale(1);}88%{transform:scale(0.1);}}
    /* Database: rings pulse top-to-bottom */
    @keyframes cp-db-top{0%,10%,35%,100%{fill:#EF9F27;}22%{fill:#FAE096;}}
    @keyframes cp-db-r1{0%,25%,52%,100%{stroke:#FAC775;opacity:.6;}38%{stroke:#FFF0B3;opacity:1;}}
    @keyframes cp-db-r2{0%,40%,65%,100%{stroke:#FAC775;opacity:.4;}52%{stroke:#FFF0B3;opacity:.9;}}
    /* Phone: vibrate */
    @keyframes cp-phone{0%,15%,55%,100%{transform:rotate(0deg) translateX(0);}20%{transform:rotate(-8deg) translateX(-3px);}25%{transform:rotate(8deg) translateX(3px);}30%{transform:rotate(-6deg) translateX(-2px);}35%{transform:rotate(6deg) translateX(2px);}40%{transform:rotate(-4deg) translateX(-1px);}45%{transform:rotate(0deg) translateX(0);}}
    @keyframes cp-wave1{0%,15%,70%,100%{opacity:0;transform:scale(.7);}35%{opacity:.8;transform:scale(1);}50%{opacity:0;transform:scale(1.2);}}
    @keyframes cp-wave2{0%,20%,75%,100%{opacity:0;transform:scale(.7);}42%{opacity:.6;transform:scale(1);}58%{opacity:0;transform:scale(1.2);}}
    /* Sparkle: star spins in */
    @keyframes cp-star1{0%{transform:rotate(0deg) scale(.7);opacity:0;}30%{transform:rotate(180deg) scale(1.1);opacity:1;}60%,80%{transform:rotate(360deg) scale(1);opacity:1;}100%{transform:rotate(360deg) scale(.7);opacity:0;}}
    @keyframes cp-star2{0%,15%{transform:rotate(0deg) scale(.5);opacity:0;}45%{transform:rotate(-90deg) scale(1);opacity:.8;}70%{transform:rotate(-180deg) scale(.9);opacity:.6;}100%{transform:rotate(-180deg) scale(.5);opacity:0;}}
    @keyframes cp-star3{0%,30%{transform:scale(.3);opacity:0;}55%{transform:scale(1.2);opacity:1;}80%{transform:scale(.8);opacity:.5;}100%{transform:scale(.3);opacity:0;}}
    /* Person: bob */
    @keyframes cp-person{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
    /* Location: bounce drop */
    @keyframes cp-pin{0%,100%{transform:translateY(0);}40%{transform:translateY(-8px);}60%{transform:translateY(-3px);}}
    /* Credit card: shimmer sweep */
    @keyframes cp-card{0%,100%{transform:translateX(-100%);opacity:0;}40%,60%{transform:translateX(100%);opacity:.35;}}
    /* Passport: scan line sweeps */
    @keyframes cp-scan{0%,100%{transform:translateY(0);opacity:0;}20%{opacity:.6;}50%{transform:translateY(28px);opacity:.6;}70%{opacity:0;}}
    /* Globe/IP: spin */
    @keyframes cp-globe{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
    /* Upload: arrow bounces up */
    @keyframes cp-upload{0%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}60%{transform:translateY(-2px);}}
    /* Download: arrow drops */
    @keyframes cp-download{0%,100%{transform:translateY(0);}40%{transform:translateY(5px);}60%{transform:translateY(1px);}}
    /* Search: magnifier pulse + shake */
    @keyframes cp-search{0%,100%{transform:scale(1) rotate(0deg);}30%{transform:scale(1.08) rotate(-8deg);}60%{transform:scale(1) rotate(5deg);}}
    /* Check: stamp in */
    @keyframes cp-check{0%,70%,100%{transform:scale(1);}80%{transform:scale(1.18);}90%{transform:scale(.94);}}
    /* Warning: throb */
    @keyframes cp-warn{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
    /* Star/PRO: spin-wobble */
    @keyframes cp-star-pro{0%,100%{transform:rotate(0deg) scale(1);}25%{transform:rotate(15deg) scale(1.05);}75%{transform:rotate(-10deg) scale(.97);}}
    /* Settings gear: rotate */
    @keyframes cp-gear{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
    /* Extension/puzzle: wiggle */
    @keyframes cp-puzzle{0%,100%{transform:rotate(0deg);}20%{transform:rotate(-6deg);}40%{transform:rotate(6deg);}60%{transform:rotate(-3deg);}80%{transform:rotate(3deg);}}
    /* Chart bars: grow */
    @keyframes cp-bar1{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.6);}}
    @keyframes cp-bar2{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.4);}}
    @keyframes cp-bar3{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.75);}}
    /* Coffee: steam rises */
    @keyframes cp-steam1{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(-5px);opacity:0;}}
    @keyframes cp-steam2{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(-5px);opacity:0;}}
    @keyframes cp-steam3{0%,100%{transform:translateY(0);opacity:.4;}50%{transform:translateY(-5px);opacity:0;}}
    /* Share: nodes pulse */
    @keyframes cp-node{0%,100%{transform:scale(1);}50%{transform:scale(1.2);}}
    /* Scales: tip left-right */
    @keyframes cp-scales{0%,100%{transform:rotate(0deg);}30%{transform:rotate(6deg);}70%{transform:rotate(-6deg);}}
    /* Clipboard: check draws */
    @keyframes cp-clip-check{0%,40%{stroke-dashoffset:20;}70%,100%{stroke-dashoffset:0;}}
    /* Heart: beat */
    @keyframes cp-heart{0%,100%{transform:scale(1);}14%{transform:scale(1.12);}28%{transform:scale(1);}42%{transform:scale(1.08);}70%{transform:scale(1);}}
    /* Chat: dots pulse */
    @keyframes cp-dot1{0%,100%{opacity:.4;transform:scale(1);}20%{opacity:1;transform:scale(1.3);}}
    @keyframes cp-dot2{0%,100%{opacity:.4;transform:scale(1);}40%{opacity:1;transform:scale(1.3);}}
    @keyframes cp-dot3{0%,100%{opacity:.4;transform:scale(1);}60%{opacity:1;transform:scale(1.3);}}
    /* Info: pulse */
    @keyframes cp-info{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
    /* Contact email: flap opens */
    @keyframes cp-mail-flap{0%,20%,100%{transform:rotateX(0deg);}50%,70%{transform:rotateX(-140deg);}}
    /* Key: rotate */
    @keyframes cp-key{0%,100%{transform:rotate(0deg);}30%,50%{transform:rotate(-30deg);}80%{transform:rotate(0deg);}}
    /* Browser: address bar types */
    @keyframes cp-browser{0%,100%{width:8px;}50%{width:40px;}}
    /* Batch docs: fan out */
    @keyframes cp-batch{0%,100%{transform:translate(0,0) rotate(0deg);}40%,60%{transform:translate(4px,-4px) rotate(5deg);}}
    /* Code: brackets slide */
    @keyframes cp-code-l{0%,100%{transform:translateX(0);}50%{transform:translateX(-4px);}}
    @keyframes cp-code-r{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
    /* Language globe: slow spin */
    @keyframes cp-lang{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
    /* VPN: tunnel pulse */
    @keyframes cp-vpn{0%,100%{opacity:.8;transform:scaleX(1);}50%{opacity:.4;transform:scaleX(.85);}}

    /* ── Reduced motion: disable all cut-paper animations ── */
    @media(prefers-reduced-motion:reduce){
      [class*="cp-"]{animation:none!important;}
    }
    /* FAQ accordion toggle icons — subtle pop on open */
    .ppai-faq-icon svg{transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
    .ppai-faq-item.open .ppai-faq-icon svg{animation:svg-pop .3s cubic-bezier(.34,1.56,.64,1) forwards;}
    /* FAQ chevrons in faq.php — rotate on open (JS also handles) */
    .faq-chevron svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
    
    

    /* Nav */
    .ppai-nav{background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.75rem 0;position:sticky;top:0;z-index:9999;box-shadow:0 1px 12px rgba(0,0,0,.07);}
    .ppai-nav-inner{max-width:1320px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:.3rem;}
    .ppai-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;flex-shrink:0;margin-right:.6rem;}
    .ppai-logo img{width:32px;height:32px;border-radius:8px;object-fit:cover;}
    .ppai-logo-txt{font-size:1.18rem;font-weight:900;color:var(--text-primary);white-space:nowrap;letter-spacing:-.02em;}
    .ppai-nav-list{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;}
    .ppai-nav-link{padding:.4rem .85rem;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-sm);font-weight:500;font-size:.9rem;transition:var(--transition);white-space:nowrap;letter-spacing:.005em;}
    .nav-coffee{background:linear-gradient(90deg,#FF8C42,#FF5E5B,#FF8C42)!important;background-size:250% 100%!important;color:#fff!important;border-radius:999px!important;padding:.38rem .95rem!important;font-weight:700!important;box-shadow:0 2px 10px rgba(255,94,91,.35);position:relative!important;overflow:hidden!important;text-decoration:none!important;animation:nav-coffee-grad 3s ease infinite,nav-coffee-glow 2s ease-in-out infinite!important;}
    .nav-coffee::before{content:'';position:absolute;top:-50%;left:-60%;width:35%;height:200%;background:rgba(255,255,255,.2);transform:skewX(-20deg);animation:nav-coffee-shine 2.8s infinite;}
    .nav-coffee:hover{color:#fff!important;transform:translateY(-3px) scale(1.03)!important;box-shadow:0 8px 24px rgba(255,94,91,.6)!important;}
    @keyframes nav-coffee-grad{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
    @keyframes nav-coffee-glow{0%,100%{box-shadow:0 2px 10px rgba(255,94,91,.35);}50%{box-shadow:0 4px 20px rgba(255,94,91,.65),0 0 12px 2px rgba(255,140,66,.3);}}
    @keyframes nav-coffee-shine{0%{left:-60%;}60%,100%{left:120%;}}

    .ppai-nav-link:hover,.ppai-nav-link.active{color:var(--accent);background:var(--accent-subtle);font-weight:600;}
    .ppai-lang-wrap{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex-shrink:0;padding-left:.9rem;border-left:1px solid var(--border);align-self:stretch;justify-content:flex-start;padding-top:.1rem;}
    .ppai-lang-sel{padding:.36rem .55rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-primary);font-size:.79rem;cursor:pointer;font-family:inherit;}
    .ppai-lang-sel:focus{outline:none;border-color:var(--accent);}
    .ppai-mob-tog{display:none;background:var(--surface-2);border:1px solid var(--border);padding:.42rem;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-primary);position:relative;z-index:2010;-webkit-tap-highlight-color:transparent;}
    .ppai-mob-tog:hover svg{transform:rotate(90deg);}
    .ppai-mob-tog:active{background:var(--surface-3);}
    @media(max-width:960px){
      .ppai-nav-list{display:none;position:fixed;top:57px;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);flex-direction:column;padding:1rem;box-shadow:var(--shadow-md);z-index:9999;}
      .ppai-nav-list.open{display:flex;}
      .ppai-mob-tog{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;}
      .ppai-nav-inner{flex-wrap:nowrap;position:relative;gap:.5rem;}
      .ppai-lang-wrap{border-left:none;padding-left:0;margin-left:auto;align-self:auto;flex-shrink:0;}
    }
    /* ── Mobile: touch targets, safe area, fonts ── */
    @media(max-width:768px){
      /* Touch targets */
      .ppai-nav-link{min-height:44px;display:flex;align-items:center;}
      .btn{min-height:44px;padding:.85rem 1.5rem;}
      a[href]{-webkit-tap-highlight-color:rgba(0,201,167,.15);}
      /* Layout */
      .ppai-main{padding:0 1rem env(safe-area-inset-bottom, 3rem);}
      .ppai-page-title{font-size:1.75rem;}
      /* Prevent iOS font-size inflation */
      * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
      /* iOS input zoom prevention — font-size must be ≥16px */
      input, textarea, select {
        font-size: 16px !important;
      }
      /* Smooth scrolling globally */
      html { scroll-behavior: smooth; }
      /* Lang wrap: hide coffee link on small screens to avoid nav overflow */
      .ppai-lang-wrap a.nav-coffee{display:none;}
      /* Ensure lang selector doesn't overflow */
      .ppai-lang-sel{max-width:90px;}
    }
    @media(max-width:480px){
      /* On very small screens hide language selector too — accessed via settings */
      .ppai-lang-wrap{display:none;}
    }
    /* Safe area for notch/Dynamic Island on iPhone */
    @supports(padding: env(safe-area-inset-top)){
      .ppai-nav-inner {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
      }
    }
    /* Small phones (360px and below) */
    @media(max-width:360px){
      .ppai-main{padding:0 .75rem env(safe-area-inset-bottom, 2rem);}
      .ppai-page-title{font-size:1.5rem;}
    }

    /* Breadcrumb */
    .ppai-bc-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:.5rem 0;}
    .ppai-bc{max-width:1320px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--text-muted);flex-wrap:wrap;font-weight:500;}
    .ppai-bc a{color:var(--text-muted);text-decoration:none;transition:var(--transition);}
    .ppai-bc a:hover{color:var(--accent);}
    .ppai-bc .bc-sep{opacity:.4;}
    .ppai-bc .bc-now{color:var(--text-secondary);font-weight:600;}

    /* Main */
    .ppai-main{max-width:1320px;margin:1.75rem auto 0;padding:0 1.5rem 4rem;min-height:calc(100vh - 220px);position:relative;z-index:1;}
    .ppai-page-header{margin-bottom:2rem;padding:2rem 2.5rem 1.75rem;border-radius:var(--radius-xl);background:linear-gradient(120deg,#1e3a5f 0%,#0ea5e9 60%,#f97316 100%);border-bottom:none;text-align:center;}
    .ppai-page-title{font-size:2.4rem;font-weight:900;color:#fff;margin-bottom:.4rem;text-shadow:0 2px 12px rgba(0,0,0,.18);}
    .ppai-page-description{font-size:1.05rem;color:rgba(255,255,255,.88);text-align:center;}

    /* ── Mascot Widget ── */
    #ppai-mascot{
      position:fixed;bottom:24px;left:24px;z-index:9000;
      display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
      user-select:none;
    }
    #ppai-mascot.dismissed{display:none;}
    #ppai-mascot.dragging .mascot-shield-wrap{animation:none;cursor:grabbing;}
    #ppai-mascot.dragging{transition:none;}

    /* Minimised state — just a slim pill */
    #ppai-mascot.minimised .mascot-shield-wrap{
      width:90px;height:24px;border-radius:999px;
      background:linear-gradient(90deg,#1e3a5f,#0ea5e9);
      box-shadow:0 2px 10px rgba(14,165,233,.5);
      animation:none;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
    }
    #ppai-mascot.minimised .mascot-shield-wrap::before{
      content:'🛡 Privacy';
      color:white;font-size:.68rem;font-weight:700;white-space:nowrap;
      pointer-events:none;
    }
    #ppai-mascot.minimised .mascot-shield-wrap svg,
    #ppai-mascot.minimised .mascot-size-btn{display:none;}
    #ppai-mascot.minimised #mascot-panel{display:none!important;}
    /* Restore tooltip on minimised pill */
    #ppai-mascot.minimised .mascot-shield-wrap::after{
      content:'Restore';position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
      background:#1e3a5f;color:white;font-size:.68rem;font-weight:700;white-space:nowrap;
      padding:.2rem .5rem;border-radius:5px;pointer-events:none;opacity:0;transition:opacity .15s;
    }
    #ppai-mascot.minimised .mascot-shield-wrap:hover::after{opacity:1;}

    .mascot-shield-wrap{
      width:80px;height:80px;border-radius:50%;
      cursor:grab;
      background:linear-gradient(135deg,#1e3a5f,#0ea5e9);
      box-shadow:0 4px 20px rgba(14,165,233,.55);
      display:flex;align-items:center;justify-content:center;
      transition:width .3s cubic-bezier(.34,1.56,.64,1),
                  height .3s cubic-bezier(.34,1.56,.64,1),
                  border-radius .3s,box-shadow .2s;
      animation:mascot-bob 3s ease-in-out infinite;
      position:relative;
    }
    .mascot-shield-wrap:hover{box-shadow:0 6px 28px rgba(168,85,247,.65);}
    @keyframes mascot-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

    /* Size / minimise button */
    .mascot-size-btn{
      position:absolute;top:-9px;right:-9px;
      width:22px;height:22px;border-radius:50%;
      background:#0ea5e9;border:2px solid white;
      color:white;font-size:13px;font-weight:900;
      cursor:pointer;display:flex;align-items:center;justify-content:center;
      box-shadow:0 2px 8px rgba(14,165,233,.5);
      transition:background .15s,transform .15s;
      z-index:10;line-height:1;
    }
    .mascot-size-btn:hover{background:#0369a1;transform:scale(1.2);}

    /* Panel */
    .mascot-panel{
      background:var(--surface);border:1.5px solid rgba(14,165,233,.3);
      border-radius:var(--radius-lg);padding:1rem 1.1rem;
      box-shadow:0 8px 32px rgba(14,165,233,.18);
      min-width:220px;
      transform-origin:bottom left;
      animation:mascot-pop-in .25s cubic-bezier(.34,1.56,.64,1) forwards;
    }
    @keyframes mascot-pop-in{from{opacity:0;transform:scale(.85) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
    .mascot-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;}
    .mascot-panel-title{font-size:.83rem;font-weight:700;color:var(--text-primary);}
    .mascot-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.1rem;line-height:1;padding:0;transition:color .15s;}
    .mascot-close:hover{color:var(--danger);}
    .mascot-link{
      display:flex;align-items:center;gap:.65rem;
      padding:.7rem .8rem;border-radius:var(--radius-sm);
      text-decoration:none;color:var(--text-secondary);
      font-size:.87rem;font-weight:600;
      border:1px solid var(--border);background:var(--surface-2);
      margin-bottom:.5rem;transition:all .18s;cursor:pointer;
    }
    .mascot-link:last-child{margin-bottom:0;}
    .mascot-link:hover{border-color:rgba(14,165,233,.5);color:#0ea5e9;background:rgba(14,165,233,.07);transform:translateX(3px);}
    .mascot-link-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

    /* Eye blink */
    @keyframes ms-blink{0%,94%,100%{transform:scaleY(1);}96%,98%{transform:scaleY(0.08);}}
    .ms-eyelid-l{animation:ms-blink 5s ease-in-out infinite;transform-origin:19px 24px;}
    .ms-eyelid-r{animation:ms-blink 5s ease-in-out infinite .15s;transform-origin:33px 24px;}

    /* Mouth */
    @keyframes ms-mouth-smile{0%,100%{d:path("M20 33 Q26 38 32 33");}50%{d:path("M19 32 Q26 39 33 32");}}

    /* ── Mascot Speech Bubble ── */
    #mascot-bubble-tip{
      position:absolute;
      bottom:calc(100% + 10px);
      left:50%;
      transform:translateX(-50%);
      z-index:9001;
      pointer-events:none;
      white-space:nowrap;
    }
    #ppai-mascot.minimised #mascot-bubble-tip{display:none;}
    #ppai-mascot.dismissed #mascot-bubble-tip{display:none;}
    .mbubble{
      background:#fff;
      border:1.5px solid rgba(14,165,233,.35);
      border-radius:12px;
      padding:.55rem .95rem;
      font-size:.78rem;
      font-weight:700;
      color:#0ea5e9;
      white-space:nowrap;
      box-shadow:0 4px 18px rgba(14,165,233,.18);
      cursor:pointer;
      pointer-events:all;
      transition:opacity .4s ease, transform .4s ease;
      display:flex;align-items:center;gap:.45rem;
      text-decoration:none;
    }
    .dark .mbubble{background:#0c1f3a;border-color:rgba(56,189,248,.35);color:#38bdf8;}
    .mbubble:hover{background:rgba(14,165,233,.08);transform:scale(1.04);}
    /* Tail pointing down */
    .mbubble::after{
      content:'';
      position:absolute;
      bottom:-7px;
      left:50%;
      transform:translateX(-50%);
      border-left:7px solid transparent;
      border-right:7px solid transparent;
      border-top:7px solid rgba(14,165,233,.35);
    }
    .mbubble::before{
      content:'';
      position:absolute;
      bottom:-5px;
      left:50%;
      transform:translateX(-50%);
      border-left:6px solid transparent;
      border-right:6px solid transparent;
      border-top:6px solid #fff;
      z-index:1;
    }
    .dark .mbubble::before{border-top-color:#0c1f3a;}
    .mbubble-fade-out{opacity:0;transform:translateY(-4px)!important;}
    .mbubble-fade-in{opacity:1;transform:translateY(0)!important;}

    @keyframes ms-mouth-talk{0%,100%{d:path("M20 33 Q26 36 32 33");}25%{d:path("M21 31 Q26 38 31 31");}50%{d:path("M20 34 Q26 37 32 34");}75%{d:path("M21 32 Q26 39 31 32");}}
    .ms-mouth{animation:ms-mouth-smile 4s ease-in-out infinite;}
    .ms-mouth.talking{animation:ms-mouth-talk .4s ease-in-out infinite;}
    

/* ==== Shared Page Components (ppai-colour-system) ==== */

/* ══════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS — used across all cluster pages
   ══════════════════════════════════════════════════════ */

/* ── Standardised in-body link colour ── */
.ppai-main a:not([class]){color:var(--accent);font-weight:600;text-decoration:none;}
.ppai-main a:not([class]):hover{text-decoration:underline;text-underline-offset:3px;}

/* ── Related Resources bar ── */
.ppai-related{margin-top:3rem;padding:1.75rem 2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.ppai-related-label{color:var(--text-muted);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;}
.ppai-related-links{display:flex;flex-wrap:wrap;gap:.75rem;}
.ppai-related-link{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.15rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;font-size:var(--fs-base);font-weight:600;transition:var(--transition);}
.ppai-related-link:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm);}

/* ── Bottom trust strip (condensed, for cluster pages) ── */
.ppai-page-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:2.5rem;padding:1.25rem 2rem;background:var(--surface-2);border-radius:var(--radius-lg);border:1px solid var(--border);}
.ppai-page-trust-item{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);font-weight:700;color:var(--text-secondary);}
.ppai-page-trust-item svg{flex-shrink:0;}

/* ── Standardised back-to-tool CTA button ── */
.ppai-cta-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.75rem 1.75rem;background:var(--accent);color:#fff;text-decoration:none;border-radius:var(--radius-md);font-weight:800;font-size:var(--fs-base);transition:var(--transition);box-shadow:0 4px 16px rgba(0,201,167,.35);}
.ppai-cta-btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,201,167,.45);}
.ppai-cta-btn-wrap{text-align:center;margin:2.5rem 0;}

/* ── FAQ button standardised font size ── */
.ppai-faq-q{font-size:var(--fs-base);font-weight:600;color:var(--text-primary);flex:1;line-height:1.5;}
.ppai-faq-subtext{color:var(--text-secondary);font-size:var(--fs-sm);margin-top:.25rem;}

/* ── Section padding standardisation ── */
.ppai-section{padding:2.5rem 0;}
.ppai-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm);transition:var(--transition);}
.ppai-card+.ppai-card{margin-top:1.5rem;}

@media(max-width:640px){
  .ppai-related{padding:1.25rem;}
  .ppai-related-link{font-size:var(--fs-sm);padding:.6rem 1rem;}
  .ppai-page-trust{gap:.6rem 1rem;padding:1rem;}
  .ppai-cta-btn{width:100%;justify-content:center;}
}

/* ══════════════════════════════════════════════════════
   COLOUR SYSTEM — Gradient Heroes + Ambient Orbs
   ══════════════════════════════════════════════════════ */
.ppai-page-header{position:relative;overflow:hidden;padding:1.75rem 2rem 1.5rem;border-radius:var(--radius-xl);}
.ppai-page-header::before{content:'';position:absolute;top:-100px;right:-80px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none;z-index:0;transition:opacity .3s;}
.ppai-page-header::after{content:'';position:absolute;bottom:-80px;left:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none;z-index:0;opacity:.6;transition:opacity .3s;}
.ppai-page-title,.ppai-page-description{position:relative;z-index:1;}

/* ── Base page header — soft warm violet gradient, white text ── */
.ppai-page-header{margin-bottom:2rem;padding:2rem 2.5rem 1.75rem;border-radius:var(--radius-xl);background:linear-gradient(120deg,#1e3a5f 0%,#0ea5e9 60%,#f97316 100%);border-bottom:none;text-align:center;box-shadow:0 0 24px rgba(14,165,233,.2),0 4px 20px rgba(0,0,0,.06);}
.ppai-page-title{font-size:var(--fs-3xl);font-weight:900;color:#fff;margin-bottom:.5rem;text-shadow:0 2px 16px rgba(0,0,0,.25);letter-spacing:-.02em;line-height:1.15;}
.ppai-page-description{font-size:var(--fs-lg);color:rgba(255,255,255,.92);text-align:center;font-weight:400;line-height:1.6;max-width:680px;margin:0 auto;}
.ppai-page-description a{color:#fff!important;text-decoration:underline;text-underline-offset:3px;opacity:.95;}
.ppai-page-description a:hover{opacity:1;}

/* ── Per-page soft warm violet/lavender/rose palette ── */
body[data-page="index"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0ea5e9);box-shadow:0 0 22px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="clean-document"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0ea5e9);box-shadow:0 0 22px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="features"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#f97316);box-shadow:0 0 22px rgba(249,115,22,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="faq"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0ea5e9);box-shadow:0 0 22px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="pii-types"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#e9c46a);box-shadow:0 0 22px rgba(30,58,95,.28),0 4px 18px rgba(0,0,0,.06);}
body[data-page="pii-quiz"] .ppai-page-header{background:linear-gradient(135deg,#0ea5e9,#1e3a5f);box-shadow:0 0 22px rgba(14,165,233,.28),0 4px 18px rgba(0,0,0,.06);}
body[data-page="compliance"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0369a1);box-shadow:0 0 22px rgba(30,58,95,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="language"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0ea5e9);box-shadow:0 0 22px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="about"] .ppai-page-header{background:linear-gradient(135deg,#0ea5e9,#1e3a5f);box-shadow:0 0 22px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="install-extension"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0ea5e9);box-shadow:0 0 22px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="pro"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#f97316);box-shadow:0 0 22px rgba(249,115,22,.28),0 4px 18px rgba(0,0,0,.06);}
body[data-page="privacy-services"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#e9c46a);box-shadow:0 0 22px rgba(30,58,95,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="affiliate-comparison"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0ea5e9);box-shadow:0 0 22px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="gdpr-ai-compliance"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0369a1);box-shadow:0 0 22px rgba(30,58,95,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="pii-vs-phi"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#f97316);box-shadow:0 0 22px rgba(249,115,22,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="remove-pii-before-ai"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0ea5e9);box-shadow:0 0 22px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="contact"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#f97316);box-shadow:0 0 22px rgba(249,115,22,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="privacy"] .ppai-page-header,
body[data-page="terms"] .ppai-page-header,
body[data-page="refund-policy"] .ppai-page-header{background:linear-gradient(135deg,#1e3a5f,#0ea5e9);box-shadow:0 0 18px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}
body[data-page="settings"] .ppai-page-header,
body[data-page="buy-coffee"] .ppai-page-header,
body[data-page="recommend"] .ppai-page-header{background:linear-gradient(135deg,#0ea5e9,#1e3a5f);box-shadow:0 0 18px rgba(14,165,233,.22),0 4px 18px rgba(0,0,0,.06);}

/* Dark mode */
html.dark .ppai-page-header{filter:brightness(.75) saturate(1.1);}
html.dark .ppai-page-header::before{opacity:.28;}
html.dark .ppai-page-header::after{opacity:.18;}

/* ══════════════════════════════════════════════════════
   GLOBAL AMBIENT COLOUR
   ══════════════════════════════════════════════════════ */

/* Stat numbers — gradient text */
.stat-number{background:linear-gradient(135deg,#0ea5e9,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:900;letter-spacing:-.03em;}

/* Privacy services category dividers */
.ps-category{border-top:3px solid transparent;padding-top:1.5rem;}
.ps-category:nth-child(1){border-image:linear-gradient(90deg,#0ea5e9,transparent) 1;}
.ps-category:nth-child(2){border-image:linear-gradient(90deg,#f97316,transparent) 1;}
.ps-category:nth-child(3){border-image:linear-gradient(90deg,#7c3aed,transparent) 1;}
.ps-category:nth-child(4){border-image:linear-gradient(90deg,#d97706,transparent) 1;}
.ps-category:nth-child(5){border-image:linear-gradient(90deg,#059669,transparent) 1;}

/* Ambient background wash — fixed so it spans the full viewport */
body{background-image:radial-gradient(ellipse 1000px 700px at 8% 0%,rgba(14,165,233,.07) 0%,transparent 65%),radial-gradient(ellipse 800px 600px at 92% 100%,rgba(249,115,22,.06) 0%,transparent 65%);background-attachment:fixed;}
html.dark{background:#0d1117;}
html.dark body{background:transparent;}

/* ══════════════════════════════════════════════════════
   ICON CHIP + BADGE UTILITIES
   ══════════════════════════════════════════════════════ */
.ppai-chip{width:40px;height:40px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem;transition:transform .18s;}
.ppai-chip:hover{transform:scale(1.08);}
.chip-mint   {background:rgba(14,165,233,.12);  color:#0369a1;}
.chip-blue   {background:rgba(37,99,235,.15);   color:#2563eb;}
.chip-green  {background:rgba(5,150,105,.15);   color:#059669;}
.chip-purple {background:rgba(124,58,237,.15);  color:#7c3aed;}
.chip-rose   {background:rgba(225,29,72,.14);   color:#e11d48;}
.chip-amber  {background:rgba(217,119,6,.15);   color:#d97706;}
.chip-indigo {background:rgba(14,165,233,.12);  color:#0369a1;}
.chip-red    {background:rgba(224,62,82,.14);   color:#e03e52;}
.chip-sky    {background:rgba(2,132,199,.15);   color:#0284c7;}
.chip-slate  {background:rgba(100,116,139,.14); color:#64748b;}
html.dark .chip-mint  {background:rgba(0,212,176,.2);}
html.dark .chip-blue  {background:rgba(37,99,235,.2);}
html.dark .chip-green {background:rgba(5,150,105,.2);}
html.dark .chip-purple{background:rgba(124,58,237,.2);}
html.dark .chip-rose  {background:rgba(225,29,72,.2);}
html.dark .chip-amber {background:rgba(217,119,6,.2);}
html.dark .chip-indigo{background:rgba(14,165,233,.2);}
html.dark .chip-red   {background:rgba(224,62,82,.2);}
html.dark .chip-sky   {background:rgba(2,132,199,.2);}
html.dark .chip-slate {background:rgba(100,116,139,.2);}

.ppai-section-title{display:flex;align-items:center;gap:.75rem;font-size:1.4rem;font-weight:800;color:var(--text-primary);margin-bottom:1rem;}
.ppai-section-title::before{content:'';display:block;width:4px;height:1.3em;border-radius:2px;background:var(--accent);flex-shrink:0;}

.ppai-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .75rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.03em;}
.ppai-badge-mint  {background:rgba(0,201,167,.14); color:#007a65;border:1px solid rgba(0,201,167,.35);}
.ppai-badge-blue  {background:rgba(37,99,235,.12);  color:#1a4fbf;border:1px solid rgba(37,99,235,.3);}
.ppai-badge-amber {background:rgba(217,119,6,.13);  color:#b45309;border:1px solid rgba(217,119,6,.3);}
.ppai-badge-rose  {background:rgba(225,29,72,.12);  color:#be185d;border:1px solid rgba(225,29,72,.3);}
.ppai-badge-purple{background:rgba(124,58,237,.12); color:#6d28d9;border:1px solid rgba(124,58,237,.3);}
html.dark .ppai-badge-mint  {color:#38bdf8;}
html.dark .ppai-badge-blue  {color:#60a5fa;}
html.dark .ppai-badge-amber {color:#fbbf24;}
html.dark .ppai-badge-rose  {color:#fb7185;}
html.dark .ppai-badge-purple{color:#c4b5fd;}


/* ==== Dynamic Effects (orbs, grid mesh, data streams, scroll reveals) ==== */

/* ── Canvas layer ── */
#ppai-fx-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:1;
}
body{position:relative;}
.ppai-main,footer,[id="ppai-mascot"],[id="ppai-btt"]{position:relative;z-index:1;}

/* ── Global tooltips ── */
.ppai-tip-wrap{position:relative;display:inline-flex;}
.ppai-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:rgba(15,23,42,.92);color:#e2e8f0;font-size:.8rem;font-weight:500;white-space:nowrap;padding:.45rem .85rem;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease;box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:100;}
.ppai-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(15,23,42,.92);}
.ppai-tip-wrap:hover .ppai-tip{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── Scroll reveal ── */
.ppai-reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.ppai-reveal.ppai-visible{
  opacity:1;
  transform:translateY(0);
}
.ppai-reveal-delay-1{transition-delay:.1s;}
.ppai-reveal-delay-2{transition-delay:.2s;}
.ppai-reveal-delay-3{transition-delay:.3s;}
/* ── Global shimmer effect for major CTA buttons ── */
.ppai-shimmer{position:relative;overflow:hidden;}
.ppai-shimmer::before{
  content:'';
  position:absolute;top:-50%;left:-60%;
  width:35%;height:200%;
  background:rgba(255,255,255,.22);
  transform:skewX(-20deg);
  animation:ppai-shimmer-sweep 2.8s infinite;
  pointer-events:none;
}
@keyframes ppai-shimmer-sweep{0%{left:-60%;}60%,100%{left:120%;}}