/* =============================
   index_css.css (put in /static)
   ============================= */
:root{
  --blue: #2563eb;            /* indigo-600 */
  --blue-500: #3b82f6;        /* blue-500 */
  --edge: rgba(37, 99, 235, .38);
  --ink: #0f172a;             /* slate-900 */
}

html,body{height:100%; background:#f8f9fc; font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--ink)}

.ssd {
    margin-top: -600;
}

.shell{min-height:100vh; padding:clamp(16px,3vw,28px);}

.tile{border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.97)); border:1px solid var(--edge); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 4px rgba(37,99,235,.04), 0 10px 24px rgba(37,99,235,.12); transition:transform .35s ease, box-shadow .35s ease}
.tile:hover{transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 0 0 6px rgba(37,99,235,.06), 0 18px 42px rgba(37,99,235,.18)}
.tile-title{font-weight:800; letter-spacing:.3px}

.desc-pill{border:1px solid var(--edge); border-radius:999px; padding:12px 18px; background:linear-gradient(180deg,#fff,#f7f9ff); font-weight:600; box-shadow:0 8px 18px rgba(16,24,40,.05)}

.btn-neo{--ring:0 0 0 0 rgba(59,130,246,0); border-radius:999px; padding:12px 22px; border:1px solid var(--edge); background:linear-gradient(180deg,#ffffff,#f3f7ff); color:#0b1324; font-weight:700; letter-spacing:.2px; box-shadow:var(--ring), 0 10px 18px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.05); transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn-neo:hover{transform:translateY(-2px); --ring:0 0 0 8px rgba(59,130,246,.12); box-shadow:var(--ring), 0 16px 26px rgba(16,24,40,.12); background:linear-gradient(180deg,#ffffff,#eef5ff)}
.btn-neo:active{transform:translateY(0)}
.btn-neo:focus{outline:2px solid var(--blue-500); outline-offset:2px}

/* Animations */
@keyframes fade-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(-3vh)}}
.fade-up{opacity:0; animation:rise .6s ease-out forwards; animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}