/* ============================================================
   AGENCE WEB PREMIUM — Shared premium chrome (all pages)
   navbar, footer, whatsapp float, reveal, polish
   ============================================================ */
:root {
    --p-pink: #FF1FA8;
    --p-cyan: #00D4FF;
    --p-violet: #7c3aed;
    --p-bg: #050008;
    --p-card: rgba(255, 255, 255, 0.045);
    --p-border: rgba(255, 255, 255, 0.12);
    --p-text: #e8e8f0;
    --p-muted: #9a9ab0;
    --p-font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
}

/* --- Fixed navbar --- */
.p-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.4rem;
    background: rgba(5, 0, 8, 0.82);
    border-bottom: 1px solid rgba(255, 31, 168, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: box-shadow 0.3s ease;
}
.p-nav.scrolled { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); }
.p-nav-logo {
    font-family: var(--p-font-display);
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.p-nav-logo .p-logo-ic {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--p-pink), var(--p-cyan));
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.95rem; color: #fff;
    box-shadow: 0 0 18px rgba(255, 31, 168, 0.5);
}
.p-nav-logo em { font-style: normal; background: linear-gradient(90deg, var(--p-pink), var(--p-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.p-nav-links { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.p-nav-links a {
    color: var(--p-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    transition: all 0.25s ease;
    letter-spacing: 0.02em;
}
.p-nav-links a:hover { color: #fff; background: rgba(255, 31, 168, 0.12); }
.p-nav-wa {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff; font-weight: 700; font-size: 0.82rem;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.4);
    transition: transform 0.25s ease;
    white-space: nowrap;
}
.p-nav-wa:hover { transform: translateY(-2px) scale(1.04); }
.p-nav-burger {
    display: none;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--p-border);
    color: #fff; font-size: 1.2rem;
    cursor: pointer; align-items: center; justify-content: center;
}
@media (max-width: 860px) {
    .p-nav-links { display: none; }
    .p-nav-burger { display: inline-flex; }
    .p-nav.open .p-nav-links {
        display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem;
        position: absolute; top: 100%; left: 0; right: 0;
        background: rgba(8, 0, 14, 0.97);
        border-bottom: 1px solid rgba(255, 31, 168, 0.2);
        padding: 0.8rem 1rem 1rem;
    }
    .p-nav.open .p-nav-links a { padding: 0.7rem 0.9rem; }
    .p-nav .p-nav-wa { padding: 0.5rem 0.8rem; font-size: 0.76rem; }
}

/* --- Footer --- */
.p-footer {
    margin-top: 2rem;
    padding: 2.8rem 1.5rem 2rem;
    background: linear-gradient(180deg, transparent, rgba(18, 6, 42, 0.9));
    border-top: 1px solid rgba(255, 31, 168, 0.15);
    text-align: center;
}
.p-footer-inner { max-width: 1080px; margin: 0 auto; }
.p-footer-links { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; margin-bottom: 1.4rem; }
.p-footer-links a { color: var(--p-muted); text-decoration: none; font-size: 0.86rem; transition: color 0.2s ease; }
.p-footer-links a:hover { color: var(--p-cyan); }
.p-footer-social { display: flex; gap: 0.7rem; justify-content: center; margin-bottom: 1.4rem; }
.p-footer-social a {
    width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--p-border);
    color: #fff; text-decoration: none; font-size: 1rem;
    transition: all 0.25s ease;
}
.p-footer-social a:hover { background: rgba(255, 31, 168, 0.18); border-color: var(--p-pink); transform: translateY(-3px); }
.p-footer-contact { color: var(--p-muted); font-size: 0.82rem; line-height: 1.9; margin-bottom: 1.2rem; }
.p-footer-contact a { color: var(--p-cyan); text-decoration: none; }
.p-footer-disc { font-size: 0.66rem; color: rgba(154, 154, 176, 0.7); max-width: 640px; margin: 0 auto; line-height: 1.6; }
.p-footer-copy { font-size: 0.74rem; color: var(--p-muted); margin-top: 1rem; }

/* --- WhatsApp float (reuse wa-float from main site styles) --- */
.wa-float {
    position: fixed;
    right: 1.3rem;
    bottom: 1.3rem;
    z-index: 99995;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366, #128C7E);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
    transition: transform 0.25s ease;
    animation: waPulse 2.6s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1) translateY(-2px); }
@keyframes waPulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); }
    50% { box-shadow: 0 8px 34px rgba(37, 211, 102, 0.7), 0 0 0 12px rgba(37, 211, 102, 0.08); }
}
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }

/* --- Page header adjustment for fixed nav --- */
.p-nav + *, body > .top, body > header, .top { scroll-margin-top: 90px; }
body { padding-top: 0; }
body:has(.p-nav) > .top, body:has(.p-nav) > header, body:has(.p-nav) .top { padding-top: calc(3rem + 56px) !important; }

/* hide duplicated old logo/footer when chrome injected */
body:has(.p-nav) .top .logo:first-child, body:has(.p-nav) footer:not(.p-footer) { display: none; }

/* --- Reveal animation --- */
.p-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.p-reveal.p-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .p-reveal { opacity: 1 !important; transform: none !important; } }

/* --- Shared CTA buttons polish --- */
.p-btn {
    display: inline-block;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.p-btn-primary { background: linear-gradient(135deg, var(--p-pink), var(--p-violet)); color: #fff; box-shadow: 0 10px 30px rgba(255, 31, 168, 0.35); }
.p-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(255, 31, 168, 0.55); }
.p-btn-wa { background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35); }
.p-btn-wa:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(37, 211, 102, 0.55); }

/* --- Chatbot trigger --- */
.p-chat-fab {
    position: fixed;
    left: 1.3rem;
    bottom: 1.3rem;
    z-index: 99990;
    width: 54px; height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--p-pink), var(--p-violet));
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.35rem;
    box-shadow: 0 10px 30px rgba(255, 31, 168, 0.45);
    cursor: pointer;
    transition: transform 0.25s ease;
}
.p-chat-fab:hover { transform: scale(1.08); }

/* ---- Accessibility ---- */
:focus-visible { outline: 2px solid #00D4FF; outline-offset: 3px; border-radius: 4px; }
.p-nav a:focus-visible, .p-nav button:focus-visible, .p-chat-fab:focus-visible { outline: 2px solid #00D4FF; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .p-reveal, .wa-float, * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Light theme for subpages ---- */
html[data-theme="light"] body { background: #f4f4fb; color: #1a1a2e; }
html[data-theme="light"] .top { background: linear-gradient(180deg, #e8e4ff, #f4f4fb); }
html[data-theme="light"] .top h1 { background: linear-gradient(90deg, #d3138a, #0099cc); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .sub, html[data-theme="light"] .meta { color: #555; }
html[data-theme="light"] .wrap p, html[data-theme="light"] .article p, html[data-theme="light"] .desc { color: #3a3a4e; }
html[data-theme="light"] h2 { color: #d3138a; }
html[data-theme="light"] .faq-item, html[data-theme="light"] .plan, html[data-theme="light"] .off,
html[data-theme="light"] .pack, html[data-theme="light"] .step, html[data-theme="light"] .g-item,
html[data-theme="light"] .w-item, html[data-theme="light"] .stp, html[data-theme="light"] .inc,
html[data-theme="light"] .qr-card, html[data-theme="light"] .pay-card, html[data-theme="light"] .alt,
html[data-theme="light"] .blog-card, html[data-theme="light"] .type, html[data-theme="light"] .opt,
html[data-theme="light"] .pay-opt, html[data-theme="light"] .method, html[data-theme="light"] .code-box {
    background: #fff; border-color: #ddd; color: #333;
}
html[data-theme="light"] .faq-item p, html[data-theme="light"] .plan li, html[data-theme="light"] .off li,
html[data-theme="light"] .pack li { color: #444; }
html[data-theme="light"] .plan b, html[data-theme="light"] .off b, html[data-theme="light"] .pack b,
html[data-theme="light"] .step b, html[data-theme="light"] .w-item b, html[data-theme="light"] .g-item b,
html[data-theme="light"] .stp b, html[data-theme="light"] .type b, html[data-theme="light"] .qr-card b,
html[data-theme="light"] .pay-card h2, html[data-theme="light"] .pay-opt b, html[data-theme="light"] .blog-card h3,
html[data-theme="light"] .inc b, html[data-theme="light"] .faq-item b { color: #111; }
html[data-theme="light"] table { background: #fff; }
html[data-theme="light"] th { background: rgba(211,19,138,.1); color: #222; }
html[data-theme="light"] td { border-color: #eee; color: #333; }
html[data-theme="light"] td b { color: #111; }
html[data-theme="light"] .promo { background: rgba(211,19,138,.08); }
html[data-theme="light"] .p-footer { background: linear-gradient(180deg, transparent, #e6e2fa); border-color: rgba(211,19,138,.15); }
html[data-theme="light"] .p-nav { background: rgba(255,255,255,.9); border-color: rgba(211,19,138,.15); }
html[data-theme="light"] .p-nav-logo { color: #111; }
html[data-theme="light"] .p-nav-links a { color: #555; }
html[data-theme="light"] .p-nav-links a:hover { color: #111; background: rgba(211,19,138,.08); }
html[data-theme="light"] .p-footer-links a, html[data-theme="light"] .p-footer-contact, html[data-theme="light"] .p-footer-copy { color: #555; }
html[data-theme="light"] .p-footer-links a:hover { color: #0099cc; }
html[data-theme="light"] .p-chat-fab { box-shadow: 0 10px 30px rgba(211,19,138,.3); }
html[data-theme="light"] .p-reveal { transition-duration: .5s; }
@media (max-width: 860px) {
    .p-theme-btn { width: 36px; height: 36px; font-size: .9rem; }
}
@media (max-width: 480px) {
    .p-nav .p-nav-wa { padding: .45rem .65rem; font-size: .7rem; }
    .p-theme-btn { width: 34px; height: 34px; }
}