:root{
    --bg-white:#ffffff;
    --bg-soft:#F7F5F2;
    --br-soft:#E7E1D9;
    --ink:#0b0b0c;
    --muted:#5b5b5f;
    --primary:#078ae6; /* bootstrap primary */
    --card-radius:18px;
}

body{ color:var(--ink); }
.bg-soft{ background:var(--bg-soft); }


.small, small {font-size: 1em;}

.text-bg-primary, .progress-bar {
    background: var(--primary) !important;
}

.nav-top-menu {
    background: var(--bg-white);
    border-bottom: 1px sold var(--br-soft);
}

.logo img {
    max-width: 120px;
}

.footer-logo img {
    max-width: 80px;
}

.nav-blur{
    background: rgba(255,255,255,.75);
}

.btn {
    padding: 12px 18px;
    font-size: 14px;
    border-radius: 25px;
}

.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.4rem .8rem;
    border-radius:999px;
    font-size:.9rem;
    border:1px solid var(--primary);
    color:var(--primary);
    background: var(--bg-white);
}

.hero{
    padding: 2.5rem 0 4rem;
}

.hero h1{
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1.05;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.hero p{ color:var(--muted); max-width: 60ch; }

.mock-card{
    border-radius: 20px;
    overflow:hidden;
}

.mock-card img {
    width: 100%;
    height: auto;
}

.mock-toolbar{
    height:44px;
    background: linear-gradient(180deg,#ffffff, #f6f6f6);
    border-bottom: 1px solid rgba(0,0,0,.06);
    display:flex;
    align-items:center;
    padding:0 .9rem;
    gap:.5rem;
    color:rgba(0,0,0,.5);
    font-size:.85rem;
}

.dot{ width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,.18); display:inline-block; }

.mock-body{
    padding: 1.2rem;
    background:
    radial-gradient(1200px 280px at 20% 0%, rgba(13,110,253,.18), transparent 60%),
    radial-gradient(900px 300px at 90% 10%, rgba(0,0,0,.06), transparent 55%),
    #fff;
    min-height: 320px;
    position:relative;
}

.floating-chip{
    position:absolute;
    top: 18px;
    right: 18px;
    border-radius: 14px;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
    padding:.6rem .75rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    font-size:.9rem;
    color:var(--muted);
    width: min(240px, 90%);
}

.stack-img{
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 18px 55px rgba(0,0,0,.09);
    background: #fff;
    overflow:hidden;
}

.stack-img .img-top{
    height: 34px;
    background: #f6f6f6;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display:flex;
    align-items:center;
    padding: 0 .85rem;
    gap:.45rem;
    color: rgba(0,0,0,.5);
    font-size:.85rem;
}

.stack-img .img-body{
    background:
    linear-gradient(120deg, rgba(13,110,253,.14), transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,.04), transparent 55%),
    #fff;
}

.stack-img .video-body{
    height: 460px;
    background:
    linear-gradient(120deg, rgba(13,110,253,.14), transparent 60%),
    linear-gradient(0deg, rgba(0,0,0,.04), transparent 55%),
    #fff;
}

.stack-img .img-body img{
    width: 100%;
    height: auto;
}

.section-title{
    font-weight:800;
    letter-spacing:-.02em;
}

.soft-divider{ border-top: 1px solid rgba(0,0,0,.06); }

.dark-panel{
    background: #004079;
    color:var(--bg-white);
    border-radius: 28px;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    overflow:hidden;
    position:relative;
}

.dark-panel::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
    radial-gradient(800px 240px at 20% 10%, rgba(13,110,253,.28), transparent 60%),
    radial-gradient(700px 260px at 75% 35%, rgba(255,255,255,.12), transparent 60%);
    pointer-events:none;
    filter: blur(0px);
}

.dark-panel > *{ position:relative; z-index:1; }

.logo-strip img{ height: 22px; opacity:.75; filter: grayscale(1); }
.logo-pill{
    display:inline-flex;
    gap:.7rem;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    opacity:.85;
}

.card-soft{
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--card-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,.06);
}

.card-soft-img {
    position: relative;
}

.card-soft img{
    width: 100%;
    height: auto;
}

.footer{
    background:#004079;
    color: rgba(255,255,255,.82);
}
.footer a{ color: rgba(255,255,255,.72); text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:underline; }

/* spacing similar to ref */
.section-pad{ padding: 4rem 0; }
.section-padb{ padding-bottom: 4rem; }
@media (max-width: 991.98px){
.section-pad{ padding: 3rem 0; }
}
/* Pricing - made to match YOUR existing styles (card-soft, pill, section-pad) */
.pricing-card{
    border-radius: var(--card-radius);
}

.pricing-card .pricing-head{
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background:
    radial-gradient(1200px 280px at 20% 0%, rgba(13,110,253,.14), transparent 60%),
    #fff;
}

.pricing-card .price{
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.05;
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
    margin: .6rem 0 .25rem;
}
.pricing-card .price small{
    font-weight:600;
    font-size: .95rem;
    color: var(--muted);
}
.pricing-card .sub{
    color: var(--muted);
    font-size:.92rem;
}

.pricing-card.recommended{
    border: 1px solid rgba(13,110,253,.25);
    box-shadow: 0 18px 55px rgba(13,110,253,.12);
    transform: translateY(-2px);
}
.pricing-ribbon{
    position:absolute;
    top: 14px;
    right: 14px;
    font-size:.78rem;
    padding:.35rem .6rem;
    border-radius:999px;
    background: rgba(13,110,253,.08);
    border: 1px solid rgba(13,110,253,.25);
    color: var(--primary);
    font-weight:600;
}

.feature-list{
    list-style:none;
    padding:0;
    margin: 0;
    display:grid;
    gap:.55rem;
}
.feature-list li{
    display:flex;
    gap:.55rem;
    align-items:flex-start;
    color: var(--muted);
    font-size:.95rem;
}
.feature-list i{ color: var(--primary); margin-top:.15rem; }

.billing-toggle{
    border:1px solid rgba(0,0,0,.08);
    border-radius:999px;
    background:#fff;
    padding:.25rem;
    display:inline-flex;
    gap:.25rem;
}
.billing-toggle .btn{
    border-radius:999px;
    padding:.45rem .9rem;
    font-weight:600;
}

/* Compare table - same rounded/shadow language */
.compare-wrap{
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--card-radius);
    overflow:hidden;
    background:#fff;
    box-shadow: 0 12px 40px rgba(0,0,0,.06);
}
.compare-wrap thead th{
    background:#fbfbfc;
    border-bottom:1px solid rgba(0,0,0,.06);
    vertical-align:top;
}
.compare-wrap th, .compare-wrap td{
    padding: 1rem .95rem;
    border-color: rgba(0,0,0,.06) !important;
}
.check{ color: var(--primary); font-weight:900; }
.dash{ color: rgba(0,0,0,.25); }