/* ==========================================================
   ChatATB v1 — Unified Dark Theme (Mobile-first)
   ========================================================== */
:root{
  --bg:#0b1020;
  --panel:#11172a;
  --muted:#9aa5b1;
  --text:#e6eef8;
  --brand1:#6C5CE7;
  --brand2:#00D2FF;
  --ring:0 0 0 3px rgba(108,92,231,.25);
}

/* ============== Base ============== */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%,#15213c 0%,transparent 50%),
    radial-gradient(1000px 600px at 100% 0,#0f1b34 0%,transparent 50%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ============== Layout ============== */
.container{max-width:1120px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* ============== Brand ============== */
.brand{display:flex;align-items:center;gap:6px;padding:4px 8px}
.brand img{width:60px;height:60px;image-rendering:crisp-edges;vertical-align:middle}
.brand h1{margin:0;font-size:26px;font-weight:700;letter-spacing:.1px;line-height:1;position:relative;top:1px}

/* (favicons) */
link[rel="icon"],link[rel="shortcut icon"]{width:96px;height:96px}
link[rel="apple-touch-icon"]{width:180px;height:180px}

/* ============== Buttons ============== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:44px;line-height:1;
  padding:12px 16px;border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#fff;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus{outline:0;box-shadow:var(--ring)}
.btn.ghost{background:transparent;border:1px solid #2a3959}

/* ============== Hero ============== */
.hero{display:grid;gap:20px;padding:32px 0}
.hero h2{font-size:clamp(28px,7vw,42px);line-height:1.1;margin:0 0 12px}
.hero p{font-size:16px;color:var(--muted);margin:0 0 20px}
.hero .row{display:grid;grid-template-columns:1fr;gap:10px}
.hero .row .btn{width:100%}
.hero .row [data-modal].btn{width:auto;justify-self:start}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:#b8c6dc;font-size:13px;padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.2);border:1px solid #1f2b4d;
}
.hero-visual{border-radius:24px;overflow:hidden;border:1px solid #1b2747}
.hero-visual img{width:100%;height:auto;max-height:260px;object-fit:contain;display:block;opacity:.9}

/* ============== Cards / Tiles ============== */
.card{
  background:linear-gradient(180deg,#0f152a,#0d1426);
  border:1px solid #1c2646;border-radius:20px;padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tile{
  position:relative;padding:18px;border:1px solid #1b2747;border-radius:16px;
  background:linear-gradient(180deg,#0f172a,#0e1426);
  transition:transform .12s ease,border-color .12s ease;
}
.tile:hover{transform:translateY(-1px);border-color:#2a3d6f}
.tile h3{margin:12px 0 4px;font-size:18px}
.tile p{margin:0;color:#9fb0c7;font-size:14px}
/* If you still use absolute badges on tiles */
.badge{
  position:absolute;top:10px;right:10px;padding:6px 10px;border-radius:999px;
  background:rgba(108,92,231,.15);border:1px solid rgba(108,92,231,.35);
  font-size:12px;color:#cdd6ff
}

/* ============== Chat Elements ============== */
.input{
  background:#091022;border:1px solid #243357;border-radius:12px;
  color:#e8f0ff;padding:12px 14px;min-width:220px
}
.chatbox{
  height:380px;overflow:auto;border:1px solid #1b2747;border-radius:18px;padding:16px;
  background:linear-gradient(180deg,#0d1429,#0c1122)
}
.msg{display:flex;gap:12px;margin:8px 0}
.msg .bubble{
  padding:12px 14px;border-radius:14px;border:1px solid #1b2747;background:#0c1226;max-width:72%
}
.msg.user .bubble{background:linear-gradient(180deg,#0f1b39,#0d1427)}
.timestamp{color:#7f8cac;font-size:12px;margin-top:4px}

/* ============== Code / kbd ============== */
kbd{
  background:#11192d;border:1px solid #243155;border-radius:8px;padding:2px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#d7e2ff;font-size:13px
}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:#0a1020;border:1px solid #1b2747;border-radius:10px;padding:10px;display:block;overflow:auto
}

/* ============== Modal ============== */
.modal-backdrop{position:fixed;inset:0;background:rgba(7,12,26,.55);display:none;align-items:center;justify-content:center;padding:24px;z-index:40}
.modal{
  width:min(720px,96vw);background:#0c1224;border:1px solid #1b2747;border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);display:none;transform:translateY(20px);transition:transform .25s ease
}
.modal header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1b2747;padding:14px 18px}
.modal header h4{margin:0;font-size:18px}
.modal .content{padding:18px;color:#c9d6ee}
.close{background:transparent;border:0;color:#9fb0c7;font-size:22px;cursor:pointer}

/* ============== Footer ============== */
footer{padding:48px 0;color:#8293ad}
.small{font-size:12px;color:#97a7c6}
.sep{height:1px;background:#1b2747;margin:18px 0}
footer .row{display:grid;gap:6px}

/* ============== Tablet+ Tweaks ============== */
@media (min-width:720px){
  .hero{grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:48px 0}
  .hero .row{grid-template-columns:auto auto auto;gap:12px}
  .hero .row .btn{width:auto}
  .chatbox{height:480px}
  footer .row{grid-template-columns:auto auto;align-items:center}
}

/* ============== Larger Grids ============== */
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}