/* Public website (landing, about, plans, contact, legal). Colours come from the default theme (themes.css). */
.site-body { background: var(--bs-body-bg) !important; padding-bottom: 0 !important; }
.site-nav { background: rgba(var(--bs-body-bg-rgb), .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--bs-border-color-translucent); }
.site-nav .nav-link { font-weight: 500; }
.site-nav .nav-link.active, .site-nav .nav-link:hover { color: var(--app-primary); }

.site-hero { background: var(--app-gradient); color: #fff; padding: 4.5rem 0 5rem; position: relative; overflow: hidden; }
.site-hero::before, .site-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.site-hero::before { width: 520px; height: 520px; right: -160px; top: -200px; }
.site-hero::after { width: 300px; height: 300px; left: -120px; bottom: -160px; }
.site-hero .container { position: relative; z-index: 1; }
.site-pill { display: inline-flex; gap: .4rem; align-items: center; background: rgba(255,255,255,.16); border-radius: 2rem; padding: .35rem .9rem; font-size: .85rem; }
.opacity-90 { opacity: .9; }

/* phone mock-up in the hero */
.site-phone { width: 290px; border-radius: 2.6rem; padding: .7rem; background: #0f172a; box-shadow: 0 30px 60px rgba(0,0,0,.35); transform: rotate(-3deg); }
.site-phone-screen { background: #f4f6fb; border-radius: 2rem; overflow: hidden; color: #1e293b; padding-bottom: .8rem; }
.sp-bar { background: var(--app-gradient); color: #fff; padding: 1.1rem 1rem .7rem; font-weight: 600; font-size: .9rem; }
.sp-hero { margin: .8rem; padding: 1rem; border-radius: 1.2rem; background: var(--app-gradient); color: #fff; box-shadow: 0 10px 20px rgba(var(--app-primary-rgb), .3); }
.sp-amt { font-size: 1.5rem; font-weight: 700; }
.sp-btn { display: inline-block; margin-top: .4rem; background: #fff; color: var(--app-primary-dark); border-radius: 2rem; padding: .2rem .7rem; font-size: .75rem; font-weight: 600; }
.sp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; background: #fff; margin: 0 .8rem .6rem; padding: .7rem .3rem; border-radius: 1rem; }
.sp-tiles .m-tile { font-size: .62rem; color: #1e293b; }
.sp-tiles .m-tile .ico { width: 38px; height: 38px; border-radius: .8rem; font-size: 1rem; }
.sp-row { display: flex; align-items: center; gap: .6rem; background: #fff; margin: 0 .8rem .4rem; padding: .55rem .7rem; border-radius: .9rem; font-size: .75rem; }
.sp-row span:nth-child(2) { flex: 1; } .sp-row small { color: #64748b; }
.sp-dot { width: 30px; height: 30px; border-radius: .7rem; display: flex; align-items: center; justify-content: center; background: rgba(var(--app-primary-rgb), .12); color: var(--app-primary); }

.site-chip { border: 1px solid var(--bs-border-color); border-radius: 2rem; padding: .3rem .9rem; font-size: .85rem; background: var(--bs-body-bg); }
.site-soft { background: rgba(var(--app-primary-rgb), .05); }
.site-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1.25rem; box-shadow: 0 6px 24px rgba(15, 23, 42, .06); transition: transform .15s, box-shadow .15s; }
a .site-card:hover, .site-plan:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15, 23, 42, .1); }
.site-icon { width: 64px; height: 64px; border-radius: 1.2rem; background: var(--app-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; box-shadow: 0 10px 22px rgba(var(--app-primary-rgb), .3); }
.site-icon.sm { width: 48px; height: 48px; border-radius: .95rem; font-size: 1.3rem; flex: none; }
.site-step { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: rgba(var(--app-primary-rgb), .1); color: var(--app-primary); display: flex; align-items: center; justify-content: center; font-size: 2rem; position: relative; }
.site-step .n { position: absolute; top: -4px; right: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--app-gradient); color: #fff; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.site-plan { position: relative; }
.site-plan.featured { border: 2px solid var(--app-primary); }
.site-badge { position: absolute; top: -12px; right: 1rem; background: var(--app-gradient); color: #fff; font-size: .75rem; font-weight: 600; border-radius: 2rem; padding: .2rem .75rem; }
.site-cta { background: var(--app-gradient); color: #fff; border-radius: 1.6rem; padding: 2.2rem; margin: 0; box-shadow: 0 18px 40px rgba(var(--app-primary-rgb), .3); }
.site-page-head { background: var(--app-gradient); color: #fff; padding: 3rem 0 2.6rem; }
.site-prose h2 { font-size: 1.3rem; font-weight: 700; margin-top: 1.6rem; }
.site-prose h2:first-child { margin-top: 0; }
.site-prose h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.2rem; }
.site-prose p, .site-prose li { color: var(--bs-secondary-color); line-height: 1.75; }

.site-footer { background: #0f172a; color: #e2e8f0; }
.site-footer a { color: #e2e8f0; text-decoration: none; opacity: .85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }
.site-social { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #fff !important; }
.site-social.dark { background: rgba(var(--app-primary-rgb), .12); color: var(--app-primary) !important; }

@media (max-width: 991.98px) {
    .site-hero { padding: 3rem 0 3.5rem; }
    .site-hero h1 { font-size: 2rem; }
    .site-nav .navbar-collapse { padding-top: .5rem; }
}