/* Sageros shared styles for public pages */
html { font-family: 'Inter', sans-serif; }
body { overflow-x: hidden; background: #f5f6f8; color: #3c414d; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #eef1f6; }
::-webkit-scrollbar-thumb { background: #cdd2dd; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #b9bfcd; }

.card { background: #fff; border: 1px solid #e7e9ef; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* ---------- Soft aurora blobs ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .4; }
.orb1 { width: 520px; height: 520px; background: #bcd2ff; top: -140px; left: -80px; animation: float1 18s ease-in-out infinite; }
.orb2 { width: 460px; height: 460px; background: #bff0da; top: 6%; right: -120px; animation: float2 22s ease-in-out infinite; }
.orb3 { width: 420px; height: 420px; background: #e0d6fb; top: 38%; left: 34%; animation: float3 20s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(60px,80px) scale(1.15);} }
@keyframes float2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-80px,60px) scale(1.1);} }
@keyframes float3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-70px) scale(1.2);} }

/* ---------- Animated grid ---------- */
.grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(#161a2208 1px,transparent 1px),linear-gradient(90deg,#161a2208 1px,transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(ellipse 75% 55% at 50% 0%,#000 35%,transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%,#000 35%,transparent 100%); animation: gridmove 22s linear infinite; }
@keyframes gridmove { from{background-position:0 0,0 0;} to{background-position:54px 54px,54px 54px;} }

/* ---------- Gradient text ---------- */
.grad { background: linear-gradient(90deg,#2f6feb,#12b981,#7c48ec,#2f6feb); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s linear infinite; }
@keyframes shimmer { to{background-position:300% 0;} }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s}

/* ---------- Card sheen + tilt ---------- */
.tilt { transform-style: preserve-3d; transition: transform .15s ease; will-change: transform; }
.sheen { position: relative; overflow: hidden; }
.sheen::before { content:''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(47,111,235,.10),transparent 42%); opacity: 0; transition: opacity .3s; }
.sheen:hover::before { opacity: 1; }

/* ---------- Marquee ---------- */
.marquee { display: flex; gap: 3rem; width: max-content; animation: scrollx 30s linear infinite; }
@keyframes scrollx { to{transform:translateX(-50%);} }

/* ---------- Pulse dot ---------- */
@keyframes ping2 { 0%{box-shadow:0 0 0 0 rgba(18,185,129,.5);} 70%{box-shadow:0 0 0 8px rgba(18,185,129,0);} 100%{box-shadow:0 0 0 0 rgba(18,185,129,0);} }
.ping { animation: ping2 2s infinite; }

/* ---------- Spinner ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .7s linear infinite; }

/* ---------- Shimmer skeleton ---------- */
.skeleton { position:relative; overflow:hidden; background:#eef1f6; border-radius:8px; }
.skeleton::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:shimmer-sweep 1.5s infinite; }
@keyframes shimmer-sweep { 100% { transform: translateX(100%); } }

/* ---------- Flow line dash ---------- */
.flowline { stroke-dasharray: 8 8; animation: dash 1s linear infinite; }
@keyframes dash { to{stroke-dashoffset:-16;} }

/* ---------- Blink caret ---------- */
.caret::after { content:'▋'; color:#37e0a6; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0;} }

/* ---------- Float badge ---------- */
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.bob { animation: bob 4s ease-in-out infinite; }
.bob2 { animation: bob 5s ease-in-out infinite; animation-delay: -1.5s; }

/* ---------- Prose (content pages) ---------- */
.prose-s h2 { color:#161a22; font-weight:700; font-size:1.5rem; margin-top:2rem; margin-bottom:.75rem; }
.prose-s h3 { color:#161a22; font-weight:600; font-size:1.125rem; margin-top:1.5rem; margin-bottom:.5rem; }
.prose-s p { color:#3c414d; line-height:1.7; margin-bottom:1rem; }
.prose-s ul { margin:0 0 1rem 0; padding-left:1.25rem; list-style:disc; color:#3c414d; }
.prose-s ul li { margin-bottom:.4rem; line-height:1.6; }
.prose-s a { color:#1f5fd8; text-decoration:underline; text-underline-offset:2px; }
.prose-s strong { color:#161a22; font-weight:600; }

@media (prefers-reduced-motion: reduce) {
  *,*::before { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}