/* ═══════════════════════════════════════════════
   Nepatech Client Onboarding — Stylesheet v1.2
   Hero + CTA + centred layout + WP overrides
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@600;700;800&display=swap');

:root {
    --npt-blue: #003893;
    --npt-red: #DC143C;
    --npt-white: #FFFFFF;
    --npt-dark: #0a0e1a;
    --npt-card: #111827;
    --npt-border: #1e293b;
    --npt-muted: #94a3b8;
    --npt-accent: #3b82f6;
    --npt-green: #10b981;
    --npt-purple: #8b5cf6;
}

/* ── Scoped Reset ── */
#nepatech-onboarding-root,
#nepatech-onboarding-root *,
#nepatech-onboarding-root *::before,
#nepatech-onboarding-root *::after {
    box-sizing: border-box;
    margin: 0; padding: 0; float: none;
    letter-spacing: normal; text-transform: none; text-decoration: none;
}
#nepatech-onboarding-root h2,
#nepatech-onboarding-root h3,
#nepatech-onboarding-root p,
#nepatech-onboarding-root label,
#nepatech-onboarding-root span,
#nepatech-onboarding-root div,
#nepatech-onboarding-root a,
#nepatech-onboarding-root button,
#nepatech-onboarding-root input,
#nepatech-onboarding-root textarea {
    margin: 0; padding: 0; border: none; background: none;
    color: inherit; font-family: inherit; font-size: inherit;
    line-height: inherit; text-align: inherit; text-transform: none;
    letter-spacing: normal; text-decoration: none;
    box-shadow: none; outline: none;
}

/* ── Animations ── */
@keyframes npt-fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes npt-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.7; }
}
@keyframes npt-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

.npt-anim   { animation: npt-fadeUp 0.45s ease both; }
.npt-pulse  { animation: npt-pulse 1.4s ease-in-out infinite; }

/* ═══════════════════════════════════════════════
   ROOT — Full-width breakout
   ═══════════════════════════════════════════════ */
.npt-root {
    color: var(--npt-white) !important;
    font-family: 'DM Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    overflow: hidden;
    background: transparent !important;
}

/* ═══════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════ */
.npt-hero {
    background: linear-gradient(180deg, #070b14 0%, var(--npt-dark) 100%) !important;
    padding: 80px 24px 60px !important;
    text-align: center !important;
    position: relative;
    border-bottom: 1px solid var(--npt-border) !important;
}
.npt-hero-inner {
    max-width: 680px;
    margin: 0 auto !important;
}
.npt-hero-badge {
    display: inline-block !important;
    padding: 6px 18px !important;
    border-radius: 20px !important;
    background: rgba(59,130,246,0.12) !important;
    border: 1px solid rgba(59,130,246,0.3) !important;
    color: var(--npt-accent) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'DM Mono', monospace !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
}
.npt-hero-title {
    font-size: 38px !important;
    font-weight: 800 !important;
    font-family: 'Playfair Display', serif !important;
    color: var(--npt-white) !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
}
.npt-hero-desc {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--npt-muted) !important;
    font-family: 'DM Sans', sans-serif !important;
    margin-bottom: 36px !important;
    max-width: 580px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.npt-hero-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: center !important;
    margin-bottom: 40px !important;
}
.npt-hero-feat {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    text-align: left !important;
}
.npt-hero-feat-icon {
    font-size: 20px !important;
    flex-shrink: 0;
    width: 36px !important; height: 36px !important;
    min-width: 36px;
    display: flex !important; align-items: center; justify-content: center;
    background: rgba(59,130,246,0.08) !important;
    border: 1px solid var(--npt-border) !important;
    border-radius: 10px !important;
}
.npt-hero-feat-text {
    font-size: 15px !important;
    color: #cbd5e1 !important;
    font-family: 'DM Sans', sans-serif !important;
    line-height: 1.4 !important;
}
.npt-hero-arrow {
    font-size: 14px !important;
    color: var(--npt-accent) !important;
    font-family: 'DM Mono', monospace !important;
    font-weight: 500 !important;
    animation: npt-bounce 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════
   MAIN WIDGET AREA
   ═══════════════════════════════════════════════ */
.npt-main {
    background: var(--npt-dark) !important;
    padding: 0 !important;
}
.npt-wrap {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 56px 32px 64px !important;
    width: 100% !important;
    text-align: left !important;
}

/* ── Header ── */
.npt-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 40px !important;
    justify-content: flex-start !important;
}
.npt-logo {
    width: 46px !important; height: 46px !important;
    min-width: 46px;
    border-radius: 12px !important; flex-shrink: 0;
    background: linear-gradient(135deg, var(--npt-blue), var(--npt-red)) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-weight: 700 !important; font-size: 18px !important; color: var(--npt-white) !important;
}
.npt-title {
    font-size: 20px !important; font-weight: 700 !important;
    color: var(--npt-white) !important;
    line-height: 1.3 !important;
}
.npt-sub {
    font-size: 11px !important; color: var(--npt-muted) !important;
    font-family: 'DM Mono', monospace !important;
    text-transform: uppercase !important; letter-spacing: 0.08em !important;
    margin-top: 3px !important;
}

/* ── Progress bar ── */
.npt-prog {
    display: flex !important; align-items: center !important;
    margin-bottom: 36px !important; gap: 0;
    width: 100% !important;
}
.npt-prog-dot {
    width: 44px !important; height: 44px !important;
    min-width: 44px;
    border-radius: 50% !important; flex-shrink: 0;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 17px !important;
    transition: all 0.35s ease;
    position: relative; z-index: 2;
}
.npt-prog-dot--done,
.npt-prog-dot--active {
    background: linear-gradient(135deg, var(--npt-blue), var(--npt-accent)) !important;
    border: 2px solid var(--npt-accent) !important;
    color: var(--npt-white) !important;
}
.npt-prog-dot--active { box-shadow: 0 0 20px rgba(59,130,246,0.3); }
.npt-prog-dot--pending {
    background: var(--npt-card) !important;
    border: 2px solid var(--npt-border) !important;
    color: var(--npt-muted) !important;
}
.npt-prog-line {
    flex: 1; height: 3px; min-width: 20px;
    margin: 0 4px !important; transition: background 0.35s ease;
}
.npt-prog-line--done    { background: var(--npt-accent) !important; }
.npt-prog-line--pending { background: var(--npt-border) !important; }

.npt-prog-label { display: none; justify-content: center; margin-bottom: 20px; }
.npt-prog-label span {
    font-size: 13px !important; font-weight: 600;
    color: var(--npt-accent) !important;
    font-family: 'DM Mono', monospace !important;
    text-transform: uppercase !important;
}

/* ── Card ── */
.npt-card {
    background: var(--npt-card) !important;
    border: 1px solid var(--npt-border) !important;
    border-radius: 20px !important;
    padding: 36px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

/* ── Step titles ── */
.npt-step-title {
    font-size: 26px !important; font-weight: 700 !important;
    color: var(--npt-white) !important;
    font-family: 'Playfair Display', serif !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
.npt-step-desc {
    color: var(--npt-muted) !important;
    font-size: 14px !important; line-height: 1.6 !important;
    margin-bottom: 28px !important;
    text-align: left !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* ── Form fields ── */
.npt-label {
    display: block !important;
    font-size: 11px !important; font-weight: 600 !important;
    text-transform: uppercase !important; letter-spacing: 0.1em !important;
    color: var(--npt-accent) !important; margin-bottom: 8px !important;
    font-family: 'DM Mono', monospace !important;
    text-align: left !important;
}
.npt-field { margin-bottom: 20px !important; }

.npt-input,
.npt-textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    background: var(--npt-dark) !important;
    border: 1px solid var(--npt-border) !important;
    border-radius: 10px !important;
    color: var(--npt-white) !important;
    font-size: 15px !important;
    font-family: 'DM Sans', sans-serif !important;
    outline: none !important;
    transition: border 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.5 !important;
    -webkit-appearance: none; appearance: none;
    height: auto !important;
    min-height: 48px;
    display: block !important;
}
.npt-input:focus,
.npt-textarea:focus {
    border-color: var(--npt-accent) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}
.npt-textarea { min-height: 100px !important; resize: vertical; }
.npt-input::placeholder,
.npt-textarea::placeholder { color: rgba(148,163,184,0.45) !important; font-size: 14px !important; }

.npt-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important; width: 100% !important;
}

/* ── Service cards ── */
.npt-svc-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important; width: 100% !important;
}
.npt-svc {
    padding: 18px 20px !important;
    background: var(--npt-card) !important;
    cursor: pointer;
    border: 2px solid var(--npt-border) !important;
    border-radius: 14px !important;
    text-align: left !important;
    transition: all 0.2s ease;
    position: relative;
    font-family: 'DM Sans', sans-serif !important;
    color: var(--npt-white) !important;
    width: 100% !important; display: block !important;
}
.npt-svc:hover { border-color: rgba(59,130,246,0.5) !important; }
.npt-svc--on { border-color: var(--npt-accent) !important; background: rgba(59,130,246,0.08) !important; }
.npt-svc-name { font-size: 15px !important; font-weight: 600 !important; margin-bottom: 3px !important; color: var(--npt-white) !important; }
.npt-svc-desc { font-size: 12px !important; color: var(--npt-muted) !important; margin-bottom: 6px !important; }
.npt-svc-price { font-size: 13px !important; font-family: 'DM Mono', monospace !important; }
.npt-svc-price--on  { color: var(--npt-accent) !important; }
.npt-svc-price--off { color: var(--npt-muted) !important; }
.npt-svc-check {
    position: absolute; top: 12px; right: 14px;
    width: 24px !important; height: 24px !important; border-radius: 50% !important;
    background: var(--npt-accent) !important;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 13px !important; color: var(--npt-white) !important; border: none !important;
}

/* ── Chips ── */
.npt-chips { display: flex !important; gap: 10px; flex-wrap: wrap; }
.npt-chip {
    padding: 11px 20px !important; border-radius: 28px !important;
    cursor: pointer;
    border: 2px solid var(--npt-border) !important;
    background: transparent !important;
    color: var(--npt-muted) !important;
    font-size: 14px !important; font-weight: 600 !important;
    font-family: 'DM Sans', sans-serif !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.npt-chip:hover { border-color: rgba(59,130,246,0.5) !important; }
.npt-chip--on {
    border-color: var(--npt-accent) !important;
    background: rgba(59,130,246,0.12) !important;
    color: var(--npt-accent) !important;
}

/* ── AI Brief ── */
.npt-ai {
    background: linear-gradient(135deg, var(--npt-card), #0f172a) !important;
    border: 1px solid var(--npt-border) !important;
    border-radius: 16px !important; padding: 30px !important;
    position: relative; overflow: hidden; width: 100% !important;
}
.npt-ai-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--npt-blue), var(--npt-accent), var(--npt-purple)) !important; }
.npt-ai-header { display: flex !important; align-items: center; gap: 12px; margin-bottom: 20px; }
.npt-ai-icon { width: 38px !important; height: 38px !important; min-width: 38px; border-radius: 10px !important; flex-shrink: 0; background: linear-gradient(135deg, var(--npt-accent), var(--npt-purple)) !important; display: flex !important; align-items: center; justify-content: center; font-size: 18px !important; }
.npt-ai-name { font-size: 14px !important; font-weight: 700 !important; color: var(--npt-white) !important; }
.npt-ai-sub { font-size: 11px !important; color: var(--npt-muted) !important; font-family: 'DM Mono', monospace !important; }
.npt-ai-body { color: #cbd5e1 !important; font-size: 14px !important; line-height: 1.8 !important; white-space: pre-wrap; font-family: 'DM Sans', sans-serif !important; }
.npt-ai-loading { text-align: center !important; padding: 40px 0 !important; }
.npt-ai-loading-text { color: var(--npt-accent) !important; font-size: 15px !important; font-weight: 600 !important; }
.npt-ai-loading-sub { color: var(--npt-muted) !important; font-size: 12px !important; margin-top: 6px !important; }

/* ── Complete ── */
.npt-done { text-align: center !important; padding: 36px 0 !important; }
.npt-done-emoji { font-size: 60px !important; margin-bottom: 18px !important; display: block !important; }
.npt-done-title { font-size: 28px !important; font-weight: 700 !important; color: var(--npt-white) !important; font-family: 'Playfair Display', serif !important; margin-bottom: 12px !important; line-height: 1.3 !important; }
.npt-done-desc { color: var(--npt-muted) !important; font-size: 14px !important; line-height: 1.6 !important; max-width: 480px; margin: 0 auto 32px !important; font-family: 'DM Sans', sans-serif !important; }
.npt-done-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 14px; width: 100% !important; }
.npt-done-item { background: var(--npt-card) !important; border: 1px solid var(--npt-border) !important; border-radius: 14px !important; padding: 20px !important; text-align: center !important; }
.npt-done-item-icon { font-size: 28px !important; margin-bottom: 8px !important; display: block !important; }
.npt-done-item-label { font-size: 13px !important; font-weight: 600 !important; color: var(--npt-white) !important; margin-bottom: 4px !important; }
.npt-done-item-status { font-size: 11px !important; color: var(--npt-green) !important; font-weight: 700 !important; font-family: 'DM Mono', monospace !important; }

/* ── Navigation ── */
.npt-nav { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; }
.npt-nav-back, .npt-nav-next, .npt-nav-restart {
    padding: 13px 26px !important; border-radius: 10px !important;
    font-size: 14px !important; font-weight: 600 !important;
    font-family: 'DM Sans', sans-serif !important;
    cursor: pointer; transition: all 0.25s ease;
    display: inline-flex !important; align-items: center; justify-content: center;
    text-decoration: none !important;
}
.npt-nav-back { border: 1px solid var(--npt-border) !important; background: transparent !important; color: var(--npt-muted) !important; }
.npt-nav-back:disabled { color: var(--npt-border) !important; cursor: default; }
.npt-nav-next { border: none !important; color: var(--npt-white) !important; font-weight: 700 !important; }
.npt-nav-next--on { background: linear-gradient(135deg, var(--npt-blue), var(--npt-accent)) !important; box-shadow: 0 4px 20px rgba(59,130,246,0.25) !important; }
.npt-nav-next--on:hover { box-shadow: 0 6px 28px rgba(59,130,246,0.35) !important; transform: translateY(-1px); }
.npt-nav-next:disabled { background: var(--npt-border) !important; color: var(--npt-muted) !important; cursor: default; box-shadow: none !important; }
.npt-nav-step { font-size: 12px !important; color: var(--npt-muted) !important; font-family: 'DM Mono', monospace !important; }
.npt-nav-restart { border: 2px solid var(--npt-accent) !important; background: transparent !important; color: var(--npt-accent) !important; }
.npt-nav-restart:hover { background: rgba(59,130,246,0.1) !important; }

/* ── Footer ── */
.npt-footer { text-align: center !important; margin-top: 44px !important; padding-top: 22px !important; border-top: 1px solid var(--npt-border) !important; }
.npt-footer p { font-size: 11px !important; color: var(--npt-muted) !important; font-family: 'DM Mono', monospace !important; margin: 0 !important; }

/* ═══════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════ */
.npt-cta {
    background: linear-gradient(180deg, var(--npt-dark) 0%, #070b14 100%) !important;
    padding: 80px 24px 90px !important;
    text-align: center !important;
    border-top: 1px solid var(--npt-border) !important;
}
.npt-cta-inner {
    max-width: 800px;
    margin: 0 auto !important;
}
.npt-cta-title {
    font-size: 34px !important;
    font-weight: 800 !important;
    font-family: 'Playfair Display', serif !important;
    color: var(--npt-white) !important;
    line-height: 1.25 !important;
    margin-bottom: 18px !important;
}
.npt-cta-desc {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--npt-muted) !important;
    font-family: 'DM Sans', sans-serif !important;
    margin-bottom: 48px !important;
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.npt-cta-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px !important;
    margin-bottom: 48px !important;
    text-align: center !important;
}
.npt-cta-item {
    background: var(--npt-card) !important;
    border: 1px solid var(--npt-border) !important;
    border-radius: 16px !important;
    padding: 30px 24px !important;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.npt-cta-item:hover {
    border-color: rgba(59,130,246,0.3) !important;
    transform: translateY(-3px);
}
.npt-cta-item-icon {
    font-size: 36px !important;
    margin-bottom: 16px !important;
    display: block !important;
}
.npt-cta-item-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--npt-white) !important;
    margin-bottom: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.npt-cta-item-desc {
    font-size: 13px !important;
    color: var(--npt-muted) !important;
    line-height: 1.6 !important;
    font-family: 'DM Sans', sans-serif !important;
}
.npt-cta-btn {
    display: inline-block !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--npt-blue), var(--npt-accent)) !important;
    color: var(--npt-white) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'DM Sans', sans-serif !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 24px rgba(59,130,246,0.3) !important;
    margin-bottom: 16px !important;
    border: none !important;
}
.npt-cta-btn:hover {
    box-shadow: 0 8px 36px rgba(59,130,246,0.4) !important;
    transform: translateY(-2px);
    color: var(--npt-white) !important;
    text-decoration: none !important;
}
.npt-cta-note {
    font-size: 13px !important;
    color: var(--npt-muted) !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .npt-wrap { padding: 40px 20px 48px !important; }
    .npt-hero { padding: 60px 20px 48px !important; }
    .npt-hero-title { font-size: 30px !important; }
    .npt-hero-desc { font-size: 15px !important; }
    .npt-cta { padding: 60px 20px 70px !important; }
    .npt-cta-title { font-size: 28px !important; }
    .npt-cta-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .npt-card { padding: 28px 22px !important; }
}

@media (max-width: 639px) {
    .npt-wrap { padding: 28px 16px 40px !important; }
    .npt-hero { padding: 48px 16px 40px !important; }
    .npt-hero-title { font-size: 26px !important; }
    .npt-hero-desc { font-size: 14px !important; margin-bottom: 28px !important; }
    .npt-hero-feat-text { font-size: 13px !important; }
    .npt-prog { margin-bottom: 16px !important; }
    .npt-prog-dot { width: 36px !important; height: 36px !important; min-width: 36px; font-size: 14px !important; }
    .npt-prog-label { display: flex !important; }
    .npt-card { padding: 22px 18px !important; border-radius: 14px !important; }
    .npt-step-title { font-size: 20px !important; }
    .npt-step-desc { font-size: 13px !important; margin-bottom: 20px !important; }
    .npt-grid-2 { grid-template-columns: 1fr !important; }
    .npt-svc-grid { grid-template-columns: 1fr !important; }
    .npt-chip { padding: 9px 14px !important; font-size: 12px !important; }
    .npt-ai { padding: 20px 16px !important; }
    .npt-ai-body { font-size: 13px !important; }
    .npt-done-emoji { font-size: 44px !important; }
    .npt-done-title { font-size: 22px !important; }
    .npt-nav-back, .npt-nav-next { padding: 11px 18px !important; font-size: 13px !important; }
    .npt-input, .npt-textarea { font-size: 16px !important; }
    .npt-cta { padding: 48px 16px 56px !important; }
    .npt-cta-title { font-size: 24px !important; }
    .npt-cta-desc { font-size: 14px !important; }
    .npt-cta-btn { padding: 14px 32px !important; font-size: 15px !important; }
}

@media (max-width: 480px) {
    .npt-done-grid { grid-template-columns: 1fr !important; }
    .npt-card { padding: 18px 14px !important; }
    .npt-hero-title { font-size: 23px !important; }
}