/* Pillars refined with animated accents */

:root{
    --brand-red:#e11d2a;
    --brand-gray:#1a1d24;
    --brand-light:#f4f4f5;
    --text:#ffffff;
    --muted:#9ca3af;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--brand-dark);color:var(--text)}
  .pillars{padding: 2rem 0rem; max-width: 100%; margin: auto; text-align: center; background: #ffffff;}
  .pillars h2{font-size: 40px;  margin-bottom: 12px; color: #000; font-weight: 700;}
  .pillars p.lead{color: #000; max-width: 720px; margin: 0 auto 3rem; font-size: 16px;}
  .pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem}
  .pillar{--accent:#22d3ee; position:relative;overflow:hidden;background:#1f1f24;padding:1.7rem;border-radius:18px;transition:transform .3s,box-shadow .3s, border-color .3s; text-align:left; border:1px solid rgba(255,255,255,.06)}
  .pillar:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.5);}
  .pillar span.badge{display:inline-block;padding:.3rem .8rem;border-radius:50px;background:var(--brand-red);font-size:.6rem;font-weight:600;margin-bottom:.8rem}
  .pillar h3{margin: .3rem 0 1rem;  display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; unicode-bidi: isolate;}
  .pillar p{display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; unicode-bidi: isolate; color: #d4d4d8; font-size: 0.70rem; margin-bottom: 1rem; margin-top: 0px;}
  .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
  .chip{padding: .35rem .8rem; border-radius: 50px; background: #27272a; font-size: .6rem; color: #f4f4f5;}
  .pillar a{color:var(--brand-red);font-weight:600;text-decoration:none}
  .pillar a:hover{text-decoration:underline}
  /* Accent background: subtle grid + corner orb + floating icon */
  .pillar::before{content:""; position:absolute; inset:-1px; background:
    radial-gradient(600px 300px at 120% -10%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    z-index:0; opacity:.75; pointer-events:none}
  .pillar::after{content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent) 55%, transparent), transparent 65%); filter:blur(10px); opacity:.6; z-index:0}
  .pillar .icon{position:absolute; right:14px; top:14px; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, color-mix(in oklab, var(--accent) 35%, transparent), transparent); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(3px); z-index:1; opacity:.9}
  .icon svg{width:22px; height:22px; opacity:.9}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .pillar .icon{animation:floaty 5s ease-in-out infinite}