/* ===========================
   PyMT4 — custom.css (calm aurora)
   =========================== */

/* 1) Material Symbols (Rounded) —icon font */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400..700,0..1,0..200');

.material-symbols-rounded{
  font-family: 'Material Symbols Rounded';
  font-weight: 500;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: normal;
  white-space: nowrap;
}

/* 2) Background: Calm Aurora - soft purple lights, very slow motion */
body { background-color:#0d0f13; } /* spare tone */

body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(70% 70% at 80% 30%, rgba(147,51,234,.10), transparent 65%),
    radial-gradient(55% 55% at 40% 80%, rgba(88,28,135,.08), transparent 60%);
  filter: blur(30px);
  animation: auroraDrift 80s ease-in-out infinite;
  opacity:.9;
}
@keyframes auroraDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%,1%,0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
.md-container, .md-main, .md-content { position: relative; z-index: 1; }

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

/* 3) Main grid 3×3 */
.home-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 2.2rem;
}
@media (max-width: 960px){ .home-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .home-grid{ grid-template-columns: 1fr; } }

/* 4) Cards: glass + gradient frame */
.card{
  position:relative; display:block;
  padding:1.25rem 1.2rem; min-height:200px;
  border-radius:16px; text-decoration:none; color:inherit;
  background:
    linear-gradient(180deg, rgba(13,17,23,.86), rgba(13,17,23,.82)) padding-box,
    linear-gradient(135deg, rgb(var(--g1)), rgb(var(--g2))) border-box;
  border:1px solid transparent;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(4px);
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.card.centered{ display:flex; flex-direction:column; align-items:center; text-align:center; }

.card h3{ margin:0 0 .35rem; font-weight:800; letter-spacing:.2px; }
.card p{ margin:0; font-size:.95rem; line-height:1.35rem; opacity:.9; }

/* 5)Centered icon with gradient fill (no jumps) */
.card .material-symbols-rounded{
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  margin: .25rem 0 .6rem;
  background: linear-gradient(135deg, rgb(var(--g1)), rgb(var(--g2)));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 24px rgba(var(--g1), .26));
}

/* 6) Hover Cards: Easy Lift and Inner Shade*/
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.36);
  background:
    linear-gradient(180deg, rgba(13,17,23,.9), rgba(13,17,23,.86)) padding-box,
    linear-gradient(135deg, rgb(var(--g1)), rgb(var(--g2))) border-box;
}

/* 7)Side color glow (soft, color = card gradient)) */
.card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(60% 90% at -12% 50%, rgba(var(--g1), .18), transparent 60%),
    radial-gradient(60% 90% at 112% 50%, rgba(var(--g2), .18), transparent 60%);
  opacity:0; transition: opacity .22s ease;
}
.card:hover::after{ opacity:.7; }

/* 8)Row Palette (Gradients)*/
.card.infra{
  --g1: 99,102,241;   /* indigo-500 */
  --g2: 147,51,234;   /* purple-600 */
}
.card.practical{
  --g1: 45,212,191;   /* teal-400 */
  --g2: 34,197,94;    /* green-500 */
}
.card.strategy{
  --g1: 251,146,60;   /* orange-400 */
  --g2: 236,72,153;   /* pink-500 */
}

/* 9) API Small Center Box Styles */
.md-banner { background: transparent; box-shadow: none; }
.top-api-pill{
  display:flex; justify-content:center; align-items:center;
  padding: .35rem 0 .55rem;
}
.top-api-btn{
  display:inline-flex; gap:.45rem; align-items:center; justify-content:center;
  padding:.48rem .9rem;
  background:#3f51b5; color:#fff; text-decoration:none; font-weight:800;
  border-radius:12px; line-height:1;
  box-shadow: 0 6px 14px rgba(31,45,120,.28), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.top-api-btn .material-symbols-rounded{
  font-size: 1.1rem;
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.top-api-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(31,45,120,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
  background:#4456c6; color:#EAF2FF;
}
@media (max-width: 600px){
  .top-api-btn{ padding:.44rem .8rem; border-radius:10px; }
  .top-api-btn .material-symbols-rounded{ font-size: 1rem; }
}

/* 10) Accessibility */
@media (prefers-reduced-motion: reduce){
  .card{ transition: none !important; }
}

/* === API pill banner === */
.top-api-pill {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.2rem auto 1.5rem;
  z-index: 5;
}

.top-api-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #3f51b5, #3949ab);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(63,81,181,0.35);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}

.top-api-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(63,81,181,0.55);
  background: linear-gradient(135deg, #5c6bc0, #3f51b5);
}

.top-api-btn .material-symbols-rounded {
  font-size: 1.3rem;
  color: #fff;
}