:root{
  --primary:#0ea5e9;
  --secondary:#0b1a33;
  --gradient-start:#36d1dc;
  --gradient-end:#5b86e5;
}
body{ padding-top:72px; color:var(--secondary); }
.bg-hero{ background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); color:#fff; }
.section{ padding:4rem 0; }
.card{ border:0; box-shadow:0 10px 25px rgba(0,0,0,.08); transition:all .25s ease; }
.card:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.12); }
.badge-tech{ background:rgba(14,165,233,.1); color:#0369a1; border-radius:999px; padding:.35rem .65rem; }
.btn-primary{ background-color: var(--primary); border-color: var(--primary);}
.btn-primary:hover{ filter:brightness(.95); }
.glass{ backdrop-filter: blur(12px); background: rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.25); }
.pill{ padding:.35rem .75rem; border-radius:999px; font-size:.85rem; }
.hero-blob{ position:absolute; inset:0; opacity:.3; background: radial-gradient(60% 60% at 80% 20%, #fff, transparent 60%); }
.shadow-soft{ box-shadow: 0 10px 35px rgba(14,165,233,.25); }
.rounded-xl{ border-radius:1.25rem !important; }
.reveal{ opacity:0; transform: translateY(12px); transition: all .5s ease; }
.reveal.show{ opacity:1; transform:none; }
.features .icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(14,165,233,.1); }
@keyframes floaty{ 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
.floaty{ animation: floaty 6s ease-in-out infinite; }