/* Hide scrollbars similar to your original */
::-webkit-scrollbar { display: none; }

:root{
    --primary:#2563EB;
    --navy:#0B1220;
    --softblue:#EFF6FF;
    --success:#22C55E;
    --accent:#F59E0B;
}

.app-body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.font-heading{
    font-family: Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.text-navy{ color: var(--navy) !important; }
.bg-navy{ background: var(--navy) !important; }
.bg-softblue{ background: var(--softblue) !important; }
.text-accent{ color: var(--accent) !important; }

.btn-primary{
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover{
    filter: brightness(0.92);
}

.brand-icon{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.brand-text{ font-family: Poppins, Inter, sans-serif; font-weight: 800; color: var(--navy); }

.footer-icon{ background: var(--primary); }

.footer-link{
    color: rgba(255,255,255,.6);
    text-decoration:none;
}
.footer-link:hover{ color:#fff; }

.hero-section{
    background: linear-gradient(135deg, var(--navy), #0b1b3a, var(--navy));
}
.hero-pill{
    background: rgba(239,246,255,.10);
    border: 1px solid rgba(96,165,250,.35);
    border-radius: 999px;
    backdrop-filter: blur(10px);
}

.hero-glow{
    position:absolute;
    width: 380px;
    height: 380px;
    border-radius: 999px;
    filter: blur(60px);
    opacity: .15;
}
.hero-glow-1{ top: 40px; left: 40px; background: var(--primary); }
.hero-glow-2{ bottom: 40px; right: 40px; background: #2563eb; }

.card-hover{ transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover{ transform: translateY(-2px); box-shadow: 0 1rem 2rem rgba(0,0,0,.08) !important; }

.step-badge{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 800;
    font-family: Poppins, Inter, sans-serif;
    box-shadow: 0 .5rem 1rem rgba(37,99,235,.25);
    margin-bottom: 18px;
}

.icon-box{
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.bg-softblue{ background: var(--softblue) !important; }
.bg-primary-soft{ background: rgba(37,99,235,.10); }
.bg-success-soft{ background: rgba(34,197,94,.10); }
.bg-accent-soft{ background: rgba(245,158,11,.10); }
.bg-info-soft{ background: rgba(13,202,240,.12); }

.pricing-header{
    background: linear-gradient(90deg, var(--primary), #2563eb);
}

.who-badge{
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18);
    color: #fff !important;
    padding: .85rem 1rem;
    border-radius: .75rem;
    font-size: 1rem;
    font-weight: 700;
}

/* --- How It Works --- */
.step-card { position: relative; }
.step-number{
    position:absolute;
    left: -18px;
    top: 28px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 800;
    font-family: Poppins, Inter, sans-serif;
    box-shadow: 0 .75rem 1.5rem rgba(37,99,235,.25);
}

/* timeline */
.timeline{
    position: relative;
    padding-left: 44px;
}
.timeline:before{
    content:'';
    position:absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(to bottom, var(--primary), #60a5fa, var(--success));
}
.timeline-item{
    position: relative;
    margin-bottom: 18px;
}
.timeline-dot{
    position:absolute;
    left: 0;
    top: 18px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: #fff;
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12);
}
.bg-purple-soft{ background: rgba(168,85,247,.12); }
.text-purple{ color: #7c3aed !important; }
.bg-teal-soft{ background: rgba(20,184,166,.12); }
.text-teal{ color: #0f766e !important; }

/* chat UI */
.chat{ display: flex; flex-direction: column; gap: 16px; }
.chat-row{ display:flex; gap: 12px; align-items:flex-start; }
.chat-row-right{ justify-content:flex-end; }
.chat-avatar{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex: 0 0 auto;
}
.chat-ai{ background: var(--primary); color:#fff; }
.chat-user{ background: #e5e7eb; color:#4b5563; }

.chat-bubble{
    max-width: 520px;
    padding: 12px 14px;
    border-radius: 18px;
    line-height: 1.35;
}
.chat-left{
    background: #f3f4f6;
    border-top-left-radius: 6px;
    color: #111827;
}
.chat-right{
    background: var(--primary);
    border-top-right-radius: 6px;
    color: #fff;
}
.chat-meta{
    margin-top: 6px;
    font-size: 12px;
    opacity: .75;
}

/* --- Pricing Page --- */
.pricing-single-header{
    background: linear-gradient(90deg, var(--primary), #2563eb);
}
.pricing-pill{
    position:absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.18);
    color:#fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .4px;
}
.pricing-setup-chip{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
}

.mini-icon-box{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 16px;
}

.addon-dashed{
    border: 2px dashed #d1d5db;
    background: linear-gradient(135deg, #f9fafb, #ffffff);
}
.addon-badge{
    position:absolute;
    top: 16px;
    right: 16px;
    background: rgba(245,158,11,.18);
    color: var(--accent);
    font-weight: 800;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
}

.comparison-featured{
    position: relative;
}
.comparison-pill{
    position:absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.18);
    color:#fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .4px;
}

.netgain-pill{
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1.5rem; /* roughly h2 */
    color: #fff;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
}

.netgain{
    color: #86efac;              /* brighter green */
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* --- Features Page --- */

.feature-pill{
    border: 1px solid rgba(37,99,235,.25);
    background: rgba(37,99,235,.10);
    color: var(--primary);
}
.feature-pill-primary{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.25); color: var(--primary); }
.feature-pill-accent{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); color: var(--accent); }
.feature-pill-info{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.25); color: #3b82f6; }

.mini-icon-circle{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.follow-card{
    padding: 1rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06);
}

/* extra soft color helpers */
.bg-pink-soft{ background: rgba(236,72,153,.12); }
.text-pink{ color: #db2777 !important; }

.bg-indigo-soft{ background: rgba(99,102,241,.12); }
.text-indigo{ color: #4f46e5 !important; }


.accordion-button{
    font-weight: 700;
}
.accordion-button:focus{
    box-shadow: none;
}
.accordion-item{
    background: #fff;
}

.step-badge{
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1.25rem;
}

.mini-icon-circle{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
}