/* secure — generated by convert.py from "Bitnet Secure.dc.html".
   Shared rules live in base.css; only page-specific rules belong here. */

.svc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); transition: all var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; height: 100% }
.svc-card:hover { box-shadow: var(--shadow-lg); border-color: var(--azure-200); transform: translateY(-3px) }
.ic { margin-bottom: 16px }
.ph { font-family: var(--font-mono); font-size: .85em; color: var(--warning); background: var(--warning-bg); border-radius: var(--radius-xs); padding: 1px 7px; white-space: nowrap }
.faq-q { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--border); padding: 22px 2px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--azure-deep) }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .35s ease }
.svc-grid>div { position: relative; overflow: hidden; min-height: 252px; padding: 32px 30px!important }
.svc-grid>div>* { position: relative; z-index: 1 }
.svc-wm { position: absolute!important; right: -14px; bottom: -16px; width: 118px; height: 118px; color: var(--azure-100); opacity: .65; z-index: 0!important; pointer-events: none }
@media (max-width:900px) {
.svc-grid { grid-template-columns: 1fr!important }
.pkg-grid { grid-template-columns: 1fr!important }
.two-col { grid-template-columns: 1fr!important }
.proof-grid { grid-template-columns: 1fr 1fr!important }
}
@keyframes bnMarquee {from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.mq-track { display: flex; align-items: center; width: max-content; animation: bnMarquee 34s linear infinite }
.mq:hover .mq-track { animation-play-state: paused }
.mq img { margin-right: clamp(38px,5vw,72px); filter: grayscale(1); opacity: .55; transition: opacity var(--dur-base) }
.mq img:hover { opacity: 1 }
body { background: linear-gradient(168deg,#eaf2fb 0%,#d3e2f2 26%,#aecbe8 58%,#7fa9d6 100%) no-repeat fixed!important; background-attachment: fixed!important }
.card { background: rgba(255,255,255,.42)!important; backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); border: 1px solid rgba(255,255,255,.5)!important; box-shadow: 0 10px 34px rgba(48,65,81,.16)!important }
.card:hover { background: rgba(255,255,255,.55)!important; border-color: rgba(255,255,255,.72)!important }
[style*="background:#fff"] { background: rgba(255,255,255,.72)!important; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(255,255,255,.6) }
[style*="background:var(--neutral-50)"] { background: rgba(255,255,255,.22)!important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
[style*="background:var(--azure-50)"] { background: rgba(96,159,210,.24)!important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.4) }
[style*="background:var(--azure-deep)"] { background: rgba(40,60,77,.5)!important; backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); border: 1px solid rgba(255,255,255,.22) }