/* ThinklytixAI theme on top of mie.css: the MIE pages and the company pages share the home page's
   colours and type (dark, mint + blue from the logo, Geist with an Instrument Serif accent). */
:root {
  --bg:#03070a; --rail:#02050a; --top:#03070ae6; --pn:#0b141a; --ctl:#0f1a21; --hov:#13212a; --varl:#0a1318;
  --bd:#1a262d; --grid:#15212a; --track:#1a252d; --band:#2b3a44; --mark:#c2ccd3;
  --t:#f2f6f7; --t2:#a2afb6; --t3:#7a8990;
  --acc:#6ff0d2; --onacc:#03100d; --acc-soft:#6ff0d21f; --acc-t:#6ff0d2; --glow:#6ff0d233;
  --warn:#ffb65c; --warn-t:#ffb65c; --warn-soft:#ffb65c24; --crit:#ff6b6b; --crit-t:#ff8f86; --crit-soft:#ff6b6b24;
  --s1:#7ea2ff; --s2:#6ff0d2; --teal:#6ff0d2; --mid:#5bc4d8; --blue:#7ea2ff;
  --shadow-lift:0 40px 100px -24px #000000cc, 0 0 0 1px #1a262d;
  --shadow-glow:0 0 80px 0 #6ff0d22e;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Instrument Serif",Georgia,serif;
}
body { letter-spacing: -.005em; }
/* headline accent: serif italic with the logo gradient, as on the home page */
h1 em, h2 em, .h-xl em, .h-1 em, .h-2 em {
  font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.01em;
  background: linear-gradient(95deg, var(--acc), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
}
h1, h2, .h-xl, .h-1, .h-2 { letter-spacing: -.035em; }
/* buttons: pill shapes like the home page */
.btn { border-radius: 999px; }
.btn-pri { background: var(--t); border-color: var(--t); color: var(--bg); }
.btn-pri:hover { background: #fff; }
/* header: ThinklytixAI link back from the MIE pages */
.nav .links a.up { color: var(--t3); font-size: 13px; margin-right: 6px; }
.nav .links a.up:hover { color: var(--acc); }
.nav .logo img { border-radius: 8px; }

/* ---------- ThinklytixAI pages: platform + industries ---------- */
.dcard { border-radius: 18px; border: 1px solid var(--bd); background: #0a1217cc; backdrop-filter: blur(12px); box-shadow: var(--shadow-lift), var(--shadow-glow); overflow: hidden; max-width: 460px; margin-left: auto; }
.dcard .dh { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bd); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.dcard .dh b { display: inline-flex; gap: 8px; align-items: center; color: var(--t); font-weight: 500; }
.dcard .dh b i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.dcard .srcs { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--bd); }
.dcard .srcs span { font: 500 10.5px/1 var(--mono); letter-spacing: .04em; color: var(--t2); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--bd); background: var(--pn); }
.dcard .r { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 13px 16px; }
.dcard .r + .r { border-top: 1px solid var(--bd); }
.dcard .r small { font: 500 10px/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dcard .r p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--t); }
.dcard .k1 small { color: var(--blue); } .dcard .k2 small { color: var(--warn); } .dcard .k3 small { color: var(--acc); }
.dcard .ap { grid-column: 2; font: 500 10.5px/1 var(--mono); color: var(--t3); }
.conns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; }
.conns div { background: var(--pn); padding: 18px 20px; display: grid; gap: 6px; }
.conns small { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.conns b { font-size: 15px; font-weight: 500; color: var(--t); }
.codebox { margin: 0; padding: 22px; border-radius: 14px; border: 1px solid var(--bd); background: #060b0e; overflow-x: auto; font: 400 13px/1.75 var(--mono); color: #c9d6db; }
.codebox .k { color: var(--blue); } .codebox .s { color: var(--acc); } .codebox .c { color: var(--t3); } .codebox .n { color: var(--warn); }
.prodgrid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 12px; }
.prodgrid a { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 14px; border: 1px solid var(--bd); background: var(--pn); color: var(--t2); font-size: 14px; transition: border-color .2s, transform .2s; }
.prodgrid a:hover { text-decoration: none; border-color: var(--band); transform: translateY(-2px); }
.prodgrid a.live { border-color: #6ff0d259; background: linear-gradient(135deg, #6ff0d21a, #7ea2ff10), var(--pn); }
.prodgrid small { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.prodgrid .live small { color: var(--acc); }
.prodgrid b { font-size: 17px; font-weight: 600; color: var(--t); }
/* architecture diagram (platform page) */
.arch { border-radius: 20px; border: 1px solid var(--bd); background: #060c10; padding: 18px; overflow-x: auto; }
.arch svg { display: block; width: 100%; min-width: 860px; height: auto; }
.arch .lb { font: 500 12px var(--mono); letter-spacing: .08em; fill: #a2afb6; text-transform: uppercase; }
.arch .tt { font: 600 15px var(--sans); fill: #f2f6f7; }
.arch .st { font: 400 12px var(--sans); fill: #7a8990; }
.arch .ln { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1.4; }
.arch .ln.hot { stroke: rgba(111,240,210,.35); stroke-dasharray: 3 5; animation: archf 1.4s linear infinite; }
@keyframes archf { to { stroke-dashoffset: -16; } }
.arch .card { fill: #0b141a; stroke: rgba(255,255,255,.12); }
.arch .core { fill: url(#coreG); stroke: rgba(111,240,210,.55); stroke-width: 1.4; }
.arch .layer { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.1); }
.arch .pk { fill: #6ff0d2; filter: url(#glow); } .arch .pk.w { fill: #ffb65c; } .arch .pk.b { fill: #7ea2ff; }
@media (max-width: 1000px) { .prodgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prodgrid a.live { grid-column: 1 / -1; } .dcard { margin: 0; max-width: none; } }
@media (max-width: 600px) { .conns, .prodgrid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .arch .ln.hot { animation: none; } }