:root{
    --muted: #94a3b8; /* slate-400 */
    --brand: #60a5fa; /* blue-400 */
    --brand-2:#22d3ee; /* cyan-400 */
    --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
    /* --shadow: 0 10px 30px rgba(0,0,0,.35); */
    --radius: 18px;
    --bg:#f8fafc;
    --bg-soft:#ffffff;
    --text:#0f172a;
    --muted:#334155;
    --chip:#eef2ff;
    --card:#ffffff;
    --border:#e5e7eb;
}
*{
    box-sizing:border-box
}
    html,body{margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";}
    a{color:inherit; text-decoration:none}
    .container{max-width:1100px; margin:0 auto; padding:0 20px}
    header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(12px); background:linear-gradient(180deg, rgba(11,16,32,.9), rgba(11,16,32,.4)); border-bottom:1px solid var(--border)}
    .nav{display:flex; align-items:center; gap:18px; padding:16px 0}
    .nav .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
    .brand .logo{width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); display:grid; place-items:center; color:#0b1020; font-weight:900}
    .nav a{opacity:.9}
    .spacer{flex:1}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); transition:transform .06s ease, box-shadow .2s ease; box-shadow: var(--shadow)}
    .btn:hover{transform:translateY(-1px)}
    .btn.primary{border-color:transparent; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b1020; font-weight:700}

    /* Hero */
    .hero{position:relative; padding:80px 0 60px; overflow:hidden}
    .grid-bg{position:absolute; inset:-20%; background:radial-gradient(ellipse at 30% 10%, rgba(96,165,250,.15), transparent 40%), radial-gradient(ellipse at 70% 20%, rgba(34,211,238,.12), transparent 45%)}
    .hero-inner{position:relative; display:grid; gap:22px}
    .kicker{color:var(--brand-2); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem}
    .h1{font-size:clamp(28px, 5vw, 54px); line-height:1.1; font-weight:900; letter-spacing:.2px}
    .h1 .accent{
        background:linear-gradient(135deg, var(--brand), var(--brand-2));
        -webkit-background-clip:text;
        background-clip:text;
        /* color:transparent */
    }
    .sub{color:var(--muted); max-width:70ch}
    .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}

    /* Sections */
    section{padding:56px 0; border-top:1px solid var(--border)}
    .section-title{font-size:22px; font-weight:800; margin:0 0 18px}
    .chips{display:flex; flex-wrap:wrap; gap:10px}
    .chip{
      padding:8px 12px;
      border:1px solid var(--border);
      border-radius:999px;
      background:var(--chip);
      font-size:.9rem
    }
   .no_chip{
      padding:8px 12px;
      background:var(--card);
      font-size:1rem
   }
    .cards{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px}
    .card{grid-column:span 12; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    @media (min-width: 780px){ .card.half{grid-column:span 6} .card.third{grid-column:span 4} }

    .card h3{margin:0 0 6px; font-size:1.1rem}
    .meta{color:var(--muted); font-size:.9rem}
    .list{margin:10px 0 0 0; padding:0 0 0 18px}
    .list li{margin:4px 0}

    /* Timeline */
    .timeline{position:relative; margin:8px 0 0 0}
    .timeline::before{content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--border)}
    .tl-item{position:relative; padding-left:34px; margin:16px 0}
    .tl-item::before{content:""; position:absolute; left:2px; top:.35rem; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-2)); border:2px solid var(--bg)}

    /* Footer */
    footer{border-top:1px solid var(--border); padding:28px 0; color:var(--muted)}

    /* Utilities */
    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
    .row{display:flex; gap:12px; flex-wrap:wrap}
    .right{margin-left:auto}

    /* Print */
    @media print{
      header, .cta, .grid-bg, .btn{display:none !important}
      section{padding:20px 0}
      body{background:#fff; color:#000}
    }

/* TOOLTIPS */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  color: rgb(16, 185, 129);
  text-decoration: underline;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* position above the word */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%; /* arrow below the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* #table */
table {
  border-radius: 5%;
  border-collapse:collapse;width:100%;
  max-width:900px;
}
tr{
  border: 1px solid var(--muted);
}
th {
  padding: 3px 3px 3px 5px;
  text-transform: capitalize;
  color: var(--brand);
  text-align:left;

}
td{
  padding: 3px 3px 3px 5px;
}