/* ================================================================
   نوت نوت — Marketing Homepage Stylesheet (RTL)
   ================================================================ */

@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/vazirmatn/Vazirmatn-FD-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/vazirmatn/Vazirmatn-FD-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/vazirmatn/Vazirmatn-FD-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/vazirmatn/Vazirmatn-FD-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../vendor/vazirmatn/Vazirmatn-FD-ExtraBold.woff2') format('woff2');
}

:root{
    --bg:            #f7f7fb;
    --surface:       #ffffff;
    --ink:           #15172b;
    --ink-soft:      #565a72;
    --ink-faint:     #94979f;
    --border:        #eaeaf2;

    --brand-1:       #4f46e5;
    --brand-2:       #7c3aed;
    --brand-3:       #06b6d4;
    --accent:        #ff6b4a;

    --grad-brand:    linear-gradient(135deg, var(--brand-1), var(--brand-2));
    --grad-hero-bg:  linear-gradient(180deg, #fbfbfe 0%, #f7f7fb 60%);
    --grad-soft:     linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);

    --radius-lg:     28px;
    --radius-md:     20px;
    --radius-sm:     12px;
    --radius-pill:   999px;

    --shadow-sm:     0 2px 10px rgba(21,23,43,.06);
    --shadow-md:     0 14px 34px rgba(21,23,43,.10);
    --shadow-lg:     0 26px 60px rgba(79,70,229,.20);

    --container:     1180px;
    --header-h:      78px;
    --ease:          cubic-bezier(.22,1,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body.np{
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Vazirmatn','Tahoma',sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.np.nav-open,
body.np.modal-open{ overflow: hidden; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin:0; padding:0; list-style:none; }

.np-wrap{
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
}

.np-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--grad-soft);
    color: var(--brand-1);
    font-size: .82rem;
    font-weight: 600;
}
.np-eyebrow svg{ width:14px; height:14px; flex:none; }

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 13px 26px;
    border-radius: var(--radius-pill);
    font-size: .95rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
    white-space: nowrap;
}
.btn svg{ width:1.1em; height:1.1em; flex:none; }
.btn-sm{ padding: 9px 18px; font-size: .85rem; }
.btn-primary{
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 10px 24px rgba(79,70,229,.32);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(79,70,229,.4); }
.btn-ghost{
    background: transparent;
    color: var(--ink);
    border-color: var(--border);
}
.btn-ghost:hover{ background:#fff; border-color:#d8d8e6; }
.btn-outline-light{
    background: rgba(255,255,255,.08);
    color:#fff;
    border-color: rgba(255,255,255,.35);
}
.btn-outline-light:hover{ background: rgba(255,255,255,.18); }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.np-header{
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-h);
    z-index: 60;
    display:flex;
    align-items:center;
    transition: background .25s var(--ease), box-shadow .25s var(--ease), backdrop-filter .25s var(--ease);
}
.np-header .np-wrap{ display:flex; align-items:center; gap:28px; height:100%; }
.np-header.is-scrolled{
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(21,23,43,.06), 0 12px 24px rgba(21,23,43,.05);
}

.np-logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--ink);
    flex: none;
}
.np-logo-mark{
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--grad-brand);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:1.05rem;
    box-shadow: 0 8px 18px rgba(79,70,229,.35);
    flex: none;
}

.np-nav{ display:flex; align-items:center; gap:6px; }
.np-nav-item{ position: relative; }
.np-nav-link{
    display:flex; align-items:center; gap:6px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: .94rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: none; border: none;
    transition: color .2s, background .2s;
}
.np-nav-link:hover, .np-nav-item.is-open .np-nav-link{ color: var(--ink); background: rgba(79,70,229,.07); }
.np-nav-link .chev{ width:14px; height:14px; transition: transform .25s var(--ease); }
.np-nav-item.is-open .chev{ transform: rotate(180deg); }

.np-spacer{ flex:1; }
.np-actions{ display:flex; align-items:center; gap:10px; flex:none; }

.np-burger{
    display:none;
    width: 42px; height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    align-items:center; justify-content:center;
    flex: none;
}
.np-burger svg{ width:20px; height:20px; }

/* ---------- Dropdown / mega menu ---------- */
.np-drop{
    position:absolute;
    top: calc(100% + 14px);
    inset-inline-start: 0;
    background:#fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    padding: 10px;
    min-width: 240px;
    opacity:0; visibility:hidden; transform: translateY(8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 50;
}
.np-nav-item.is-open .np-drop{ opacity:1; visibility:visible; transform:translateY(0); }

.np-drop-link{
    display:flex; align-items:center; gap:10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size:.9rem; font-weight:600; color: var(--ink-soft);
}
.np-drop-link:hover{ background: var(--grad-soft); color: var(--brand-1); }
.np-drop-link svg{ width:18px; height:18px; flex:none; color: var(--brand-1); }

.np-mega{
    inset-inline-start: 50%;
    transform: translate(-50%, 8px);
    width: min(720px, 90vw);
    padding: 22px;
}
[dir="rtl"] .np-mega{ transform: translate(50%, 8px); }
.np-nav-item.is-open .np-mega{ transform: translate(-50%,0); }
[dir="rtl"] .np-nav-item.is-open .np-mega{ transform: translate(50%,0); }

.np-mega-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.np-mega-item{
    display:flex; align-items:flex-start; gap:12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    transition: background .2s;
}
.np-mega-item:hover{ background: var(--bg); }
.np-mega-icon{
    width: 38px; height: 38px;
    border-radius: 11px;
    display:flex; align-items:center; justify-content:center;
    flex: none; color:#fff;
}
.np-mega-icon svg{ width:19px; height:19px; }
.np-mega-text strong{ display:block; font-size:.88rem; font-weight:700; margin-bottom:2px; }
.np-mega-text span{ display:block; font-size:.78rem; color: var(--ink-faint); line-height:1.5; }

/* ---------- Mobile nav ---------- */
.np-mobile-nav{
    position: fixed; inset:0; z-index: 80;
    background:#fff;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
    overflow-y:auto;
    padding: 22px 22px 40px;
}
[dir="rtl"] .np-mobile-nav{ transform: translateX(-100%); }
body.nav-open .np-mobile-nav{ transform: translateX(0); }
.np-mobile-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 22px; }
.np-mobile-close{ width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center; }
.np-mobile-close svg{ width:18px;height:18px; }
.np-accordion-btn{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding: 16px 4px; border:none; background:none; border-bottom:1px solid var(--border);
    font-size:1rem; font-weight:700; color:var(--ink);
}
.np-accordion-btn svg{ width:16px;height:16px; transition: transform .25s; color: var(--ink-faint); }
.np-accordion-btn.is-open svg{ transform: rotate(180deg); }
.np-accordion-panel{ max-height:0; overflow:hidden; transition: max-height .25s var(--ease); }
.np-accordion-panel .np-drop-link{ padding: 12px 8px; }
.np-mobile-plain{ display:block; padding: 16px 4px; border-bottom:1px solid var(--border); font-weight:700; }
.np-mobile-actions{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }

/* ---------- Hero ---------- */
.np-hero{
    position:relative;
    padding: calc(var(--header-h) + 64px) 0 40px;
    background: var(--grad-hero-bg);
    overflow:hidden;
}
.np-blob{
    position:absolute;
    width: 480px; height:480px;
    border-radius:50%;
    filter: blur(90px);
    opacity:.45;
    z-index:0;
}
.np-blob-1{ background:#6366f1; top:-180px; inset-inline-end:-140px; }
.np-blob-2{ background:#06b6d4; bottom:-220px; inset-inline-start:-160px; opacity:.3; }
.np-blob-3{ background:#f0abfc; top:160px; inset-inline-start:30%; opacity:.25; }

.np-hero-grid{
    position:relative; z-index:1;
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items:center;
}
.np-hero h1{
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    line-height:1.22;
    font-weight: 800;
    margin: 18px 0 18px;
    letter-spacing: -.01em;
}
.np-hero h1 span{
    background: var(--grad-brand);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.np-hero p.lead{
    font-size: 1.08rem;
    color: var(--ink-soft);
    line-height:1.9;
    max-width: 540px;
    margin: 0 0 30px;
}
.np-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 30px; }
.np-hero-proof{ display:flex; align-items:center; gap:12px; font-size:.85rem; color: var(--ink-faint); }
.np-avatars{ display:flex; }
.np-avatars span{
    width:30px;height:30px;border-radius:50%;
    border:2px solid #fff;
    background: var(--grad-brand);
    margin-inline-start:-10px;
    box-shadow: var(--shadow-sm);
}
.np-avatars span:first-child{ margin-inline-start:0; }

.np-pillrow{ margin-top: 38px; }
.np-pillrow-label{ font-size:.82rem; color:var(--ink-faint); font-weight:600; margin-bottom:12px; }
.np-pills{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.np-pills::-webkit-scrollbar{ display:none; }
.np-pill{
    flex:none;
    display:flex; align-items:center; gap:8px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background:#fff;
    border:1px solid var(--border);
    font-size:.84rem; font-weight:600; color: var(--ink-soft);
    transition: border-color .2s, color .2s, transform .2s;
}
.np-pill:hover{ border-color: var(--brand-1); color: var(--brand-1); transform: translateY(-2px); }
.np-pill svg{ width:16px;height:16px; }
.np-pill.is-active{ background: var(--grad-brand); color:#fff; border-color:transparent; }

/* hero mock visual */
.np-hero-visual{ position:relative; height: 420px; }
.np-mock-card{
    position:absolute;
    background:#fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.np-mock-main{
    inset-inline-start: 6%; top: 8%;
    width: 88%;
    padding: 18px;
    animation: npFloat 7s ease-in-out infinite;
}
.np-mock-dots{ display:flex; gap:6px; margin-bottom:14px; }
.np-mock-dots i{ width:9px;height:9px;border-radius:50%; background:var(--border); }
.np-mock-dots i:nth-child(1){ background:#ff6b6b; }
.np-mock-dots i:nth-child(2){ background:#ffd166; }
.np-mock-dots i:nth-child(3){ background:#06d6a0; }
.np-mock-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.np-mock-col{ background:var(--bg); border-radius:12px; padding:8px; }
.np-mock-col-title{ font-size:.68rem; font-weight:700; color:var(--ink-faint); margin:2px 4px 8px; }
.np-mock-chip{ background:#fff; border-radius:8px; padding:8px; margin-bottom:7px; box-shadow:0 1px 3px rgba(21,23,43,.08); }
.np-mock-chip .tag{ width:24px; height:4px; border-radius:3px; margin-bottom:6px; }
.np-mock-chip .ln{ height:6px; border-radius:3px; background:var(--border); }
.np-mock-chip .ln.w70{ width:70%; }
.np-mock-chip .ln.w40{ width:40%; margin-top:4px; }

.np-mock-chat{
    inset-inline-end: -4%; bottom: 10%;
    width: 230px; padding: 14px;
    animation: npFloat 6s ease-in-out infinite .4s;
}
.np-mock-chat-row{ display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; }
.np-mock-chat-avatar{ width:24px;height:24px;border-radius:50%; background:var(--grad-brand); flex:none; }
.np-mock-chat-bubble{ background:var(--bg); border-radius:10px; padding:8px 10px; font-size:.74rem; color:var(--ink-soft); line-height:1.5; }
.np-mock-typing{ display:flex; gap:4px; padding:8px 10px; }
.np-mock-typing i{ width:6px;height:6px;border-radius:50%; background: var(--brand-1); opacity:.5; animation: npBlink 1.2s infinite; }
.np-mock-typing i:nth-child(2){ animation-delay:.2s; }
.np-mock-typing i:nth-child(3){ animation-delay:.4s; }

.np-mock-badge{
    inset-inline-start: -6%; bottom: -2%;
    padding: 12px 16px;
    display:flex; align-items:center; gap:10px;
    font-size:.82rem; font-weight:700;
    animation: npFloat 5.5s ease-in-out infinite .2s;
}
.np-mock-badge .ok{
    width:26px;height:26px;border-radius:50%;
    background:#e8fbf3; color:#10b981;
    display:flex;align-items:center;justify-content:center;
}
.np-mock-badge .ok svg{ width:14px;height:14px; }

@keyframes npFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
@keyframes npBlink{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* ---------- Section shell ---------- */
.np-section{ padding: 90px 0; }
.np-section-head{ max-width: 640px; margin: 0 auto 50px; text-align:center; }
.np-section-head h2{ font-size: clamp(1.6rem,3vw,2.4rem); font-weight:800; margin:14px 0 12px; }
.np-section-head p{ color:var(--ink-soft); font-size:1rem; line-height:1.85; }

.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Showcase cards ---------- */
.np-showcase{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.np-show-card{
    border-radius: var(--radius-lg);
    padding: 40px;
    color:#fff;
    position:relative;
    overflow:hidden;
    min-height: 420px;
    display:flex; flex-direction:column;
}
.np-show-card.alt{ color: var(--ink); }
.np-show-card .eyebrow{ font-size:.78rem; font-weight:700; opacity:.85; margin-bottom:10px; letter-spacing:.02em; }
.np-show-card h3{ font-size:1.55rem; font-weight:800; line-height:1.4; margin:0 0 12px; max-width:380px; }
.np-show-card p{ opacity:.92; line-height:1.85; max-width: 360px; margin:0 0 26px; font-size:.95rem; }
.np-show-1{ background: linear-gradient(150deg,#4f46e5 0%, #7c3aed 60%, #a855f7 100%); }
.np-show-2{ background: linear-gradient(150deg,#fdf4ff 0%, #f5f3ff 100%); border:1px solid var(--border); }

.np-kanban-mock{ margin-top:auto; display:flex; gap:10px; }
.np-kanban-col{ flex:1; background: rgba(255,255,255,.14); border-radius:12px; padding:8px; }
.np-kanban-col .bar{ height:5px; border-radius:3px; background:rgba(255,255,255,.5); width:60%; margin:4px 4px 8px; }
.np-kanban-card{ background:rgba(255,255,255,.92); border-radius:8px; height:30px; margin-bottom:6px; }

.np-chat-mock{ margin-top:auto; background:#fff; border-radius:14px; padding:14px; box-shadow:var(--shadow-md); }
.np-chat-mock .row{ display:flex; gap:8px; margin-bottom:10px; align-items:flex-start; }
.np-chat-mock .bubble{ background:var(--bg); border-radius:10px; padding:9px 12px; font-size:.82rem; color:var(--ink-soft); line-height:1.6; }
.np-chat-mock .bubble.me{ background: var(--grad-brand); color:#fff; margin-inline-start:auto; }
.np-chat-mock .row.end{ justify-content:flex-end; }

/* ---------- Services grid ---------- */
.np-services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.np-svc-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    scroll-margin-top: calc(var(--header-h) + 16px);
}
.np-svc-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.np-svc-icon{
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; margin-bottom:18px;
}
.np-svc-icon svg{ width:24px; height:24px; }
.np-svc-card h3{ font-size:1.05rem; font-weight:700; margin:0 0 8px; }
.np-svc-card p{ font-size:.86rem; color:var(--ink-soft); line-height:1.8; margin:0 0 16px; }
.np-svc-link{ font-size:.84rem; font-weight:700; color:var(--brand-1); display:inline-flex; align-items:center; gap:6px; }
.np-svc-link svg{ width:14px;height:14px; transition: transform .2s; }
.np-svc-link:hover svg{ transform: translateX(-3px); }
[dir="rtl"] .np-svc-link:hover svg{ transform: translateX(3px); }

/* ---------- Stats ---------- */
.np-stats{
    display:grid; grid-template-columns: repeat(4,1fr);
    background: var(--ink); color:#fff;
    border-radius: var(--radius-lg);
    padding: 46px 30px;
}
.np-stat{ text-align:center; border-inline-end: 1px solid rgba(255,255,255,.12); }
.np-stat:last-child{ border-inline-end:none; }
.np-stat b{ display:block; font-size: clamp(1.6rem,3vw,2.2rem); font-weight:800; margin-bottom:6px; }
.np-stat span{ font-size:.82rem; color:rgba(255,255,255,.65); }

/* ---------- Pricing ---------- */
.np-pricing{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; align-items:stretch; }
.np-price-card{
    background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg);
    padding: 34px 28px; display:flex; flex-direction:column;
}
.np-price-card.is-popular{ border-color: var(--brand-1); box-shadow: var(--shadow-lg); position:relative; transform: translateY(-10px); }
.np-price-badge{
    position:absolute; top:-14px; inset-inline-start:28px;
    background: var(--grad-brand); color:#fff; font-size:.74rem; font-weight:700;
    padding:5px 14px; border-radius: var(--radius-pill);
}
.np-price-card h3{ font-size:1.1rem; font-weight:700; margin:0 0 6px; }
.np-price-card .price{ font-size:2.1rem; font-weight:800; margin: 10px 0 4px; }
.np-price-card .price small{ font-size:.85rem; font-weight:600; color:var(--ink-faint); }
.np-price-card .desc{ font-size:.85rem; color:var(--ink-soft); margin-bottom:22px; }
.np-price-feats{ margin-bottom:26px; flex:1; }
.np-price-feats li{ display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--ink-soft); padding:8px 0; }
.np-price-feats svg{ width:16px;height:16px; color:#10b981; flex:none; }

/* ---------- CTA banner ---------- */
.np-cta-banner{
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,#4f46e5,#7c3aed 60%,#06b6d4);
    padding: 64px 40px;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
}
.np-cta-banner h2{ font-size: clamp(1.5rem,3vw,2.1rem); font-weight:800; margin: 0 0 14px; }
.np-cta-banner p{ opacity:.92; max-width:520px; margin:0 auto 28px; line-height:1.8; }
.np-cta-banner .btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.np-footer{ background:#101124; color:rgba(255,255,255,.7); padding: 70px 0 26px; }
.np-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.np-footer-brand p{ font-size:.88rem; line-height:1.9; margin: 16px 0 20px; max-width:280px; color:rgba(255,255,255,.55); }
.np-footer .np-logo{ color:#fff; }
.np-social{ display:flex; gap:10px; }
.np-social a{ width:36px;height:36px;border-radius:50%; background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; transition: background .2s; }
.np-social a:hover{ background: var(--grad-brand); }
.np-social svg{ width:16px;height:16px; }
.np-footer h4{ color:#fff; font-size:.92rem; font-weight:700; margin:0 0 18px; }
.np-footer ul li{ margin-bottom:12px; }
.np-footer ul a{ font-size:.86rem; color:rgba(255,255,255,.55); transition: color .2s; }
.np-footer ul a:hover{ color:#fff; }
.np-footer-bottom{
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top:24px;
    display:flex; justify-content:space-between; align-items:center;
    font-size:.82rem; color:rgba(255,255,255,.45);
    flex-wrap:wrap; gap:10px;
}

/* ---------- Auth modal ---------- */
.np-modal-overlay{
    position:fixed; inset:0; z-index:100;
    background: rgba(15,16,33,.55);
    backdrop-filter: blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding: 18px;
    opacity:0; visibility:hidden;
    transition: opacity .25s var(--ease), visibility .25s;
}
.np-modal-overlay.is-open{ opacity:1; visibility:visible; }
.np-modal{
    width:100%; max-width: 860px;
    background:#fff;
    border-radius: var(--radius-lg);
    overflow:hidden;
    display:grid; grid-template-columns: 1fr 1fr;
    box-shadow: 0 40px 90px rgba(0,0,0,.35);
    transform: scale(.94) translateY(10px);
    transition: transform .3s var(--ease);
    max-height: 88vh;
}
.np-modal-overlay.is-open .np-modal{ transform:none; }
.np-modal-form{ padding: 46px 40px; position:relative; overflow-y:auto; }
.np-modal-close{
    position:absolute; top:18px; inset-inline-end:18px;
    width:36px;height:36px;border-radius:50%;
    background: var(--bg); border:none;
    display:flex; align-items:center; justify-content:center;
}
.np-modal-close svg{ width:16px;height:16px; }
.np-modal-form h3{ font-size:1.4rem; font-weight:800; margin: 0 0 6px; }
.np-modal-form .sub{ font-size:.87rem; color: var(--ink-faint); margin-bottom: 26px; }

.np-field{ margin-bottom:16px; }
.np-field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:8px; }
.np-field input{
    width:100%; padding:13px 16px;
    border:1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family:inherit; font-size:.95rem; background: var(--bg);
    transition: border-color .2s, background .2s;
}
.np-field input:focus{ outline:none; border-color: var(--brand-1); background:#fff; }
.np-field-error{ color:#e11d48; font-size:.78rem; margin-top:6px; display:none; }
.np-otp-note{ background: var(--grad-soft); color: var(--brand-1); border-radius: var(--radius-sm); padding:12px 14px; font-size:.82rem; margin-bottom:16px; line-height:1.7; }
.np-otp-note b{ direction:ltr; display:inline-block; }
.np-dev-otp{ background:#fff7e6; border:1px solid #ffd166; border-radius:var(--radius-sm); padding:10px 14px; font-size:.85rem; margin-bottom:16px; display:none; }
.np-back{ background:none;border:none;color:var(--brand-1);font-weight:700;font-size:.85rem;padding:0;margin-top:16px; }
.np-timer{ text-align:center; font-size:.82rem; color:var(--ink-faint); margin-top:14px; }
.np-resend{ background:none;border:none;color:var(--brand-1);font-weight:700;display:none; }

.np-modal-step{ display:none; }
.np-modal-step.active{ display:block; }

.np-modal-visual{
    position:relative;
    background: linear-gradient(150deg,#4f46e5 0%,#7c3aed 55%,#06b6d4 100%);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.np-modal-visual > svg{ position:absolute; top:10%; inset-inline-start:14%; width:22px; height:22px; color:rgba(255,255,255,.55); }
.np-orbit{ position:relative; width:300px; height:300px; }
.np-orbit-ring{
    position:absolute; inset:30px;
    border:1.5px dashed rgba(255,255,255,.28);
    border-radius:50%;
}
.np-orbit-center{
    position:absolute; top:50%; inset-inline-start:50%; transform:translate(-50%,-50%);
    width:84px;height:84px;border-radius:50%;
    background:rgba(255,255,255,.16);
    backdrop-filter: blur(4px);
    display:flex;align-items:center;justify-content:center;
    color:#fff; font-weight:800; font-size:1.5rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset;
}
[dir="rtl"] .np-orbit-center{ transform: translate(50%,-50%); }
.np-orbit-icon{
    position:absolute; width:46px;height:46px;border-radius:50%;
    background:rgba(255,255,255,.94);
    display:flex;align-items:center;justify-content:center;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    animation: npFloat 5s ease-in-out infinite;
}
.np-orbit-icon svg{ width:20px;height:20px; }
.np-spark{ position:absolute; color:rgba(255,255,255,.85); animation: npBlink 2.4s infinite; }
.np-spark svg{ width:18px; height:18px; }

@media (max-width: 960px){
    .np-nav, .np-actions .btn-ghost{ display:none; }
    .np-burger{ display:flex; }
    .np-hero-grid{ grid-template-columns:1fr; }
    .np-hero-visual{ height:320px; margin-top:10px; }
    .np-showcase{ grid-template-columns:1fr; }
    .np-services-grid{ grid-template-columns: repeat(2,1fr); }
    .np-pricing{ grid-template-columns:1fr; }
    .np-price-card.is-popular{ transform:none; }
    .np-stats{ grid-template-columns: repeat(2,1fr); row-gap:28px; }
    .np-stat:nth-child(2){ border-inline-end:none; }
    .np-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
    .np-modal{ grid-template-columns:1fr; }
    .np-modal-visual{ display:none; }
}
@media (max-width: 600px){
    .np-wrap{ padding:0 18px; }
    .np-section{ padding:64px 0; }
    .np-services-grid{ grid-template-columns:1fr; }
    .np-footer-grid{ grid-template-columns:1fr; gap:30px; }
    .np-mock-chat{ display:none; }
    .np-hero-ctas .btn{ width:100%; }
    .np-hero-ctas{ flex-direction:column; }
}