:root {
  --green: #1D9E75;
  --green-light: #E1F5EE;--green-mid: #9FE1CB;
  --purple:#7F77DD;--purple-light:#EEEDFE;--purple-deep:#3C3489;
  --teal:#1D9E75;--teal-light:#E1F5EE;--teal-deep:#0F6E56;
  --amber: #BA7517;--amber-light: #FAEEDA;
  --coral: #D85A30;--coral-light: #FAECE7;
  --pink:#D4537E;
  --pink-light:#FBEAF0;
  --pink-deep:#72243E;
  --bg: #0d0b14;
  --bg-soft: #151221;
  --card: rgba(255, 255, 255, 0.04);
  --border: rgba(168, 85, 247, 0.16);
  --text: #f5f3ff;
  --text-soft: #b9b3c9;
  --primary: #8b5cf6;
  --primary-soft: #a78bfa;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  --font-main: 'DM Sans', sans-serif;
  --font-code: 'Fira Code', monospace;
  --text-secondary: #b9b3c9; /* aqui é das letras do processo */
  --radius-lg: 12px; /* aqui deixa a borda arredondada do processo */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top, rgba(139, 92, 246, 0.14), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: min(1120px, 90%);
  margin: 0 auto;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(16px);
  background: rgba(13, 11, 20, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
}

.logo-img {
  height: 32px;
  width: auto;
}

/* ── Language Switcher ── */
.lang-switcher {
  display: flex;
  gap: 10px;
  margin-left: 20px;
}

.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s;
}

.lang-btn:hover { transform: scale(1.1); }
.lang-btn img { width: 24px; height: auto; border-radius: 2px; }

.lang-en { display: none !important; }
body.en-mode .lang-en { display: inline-block !important; }
body.en-mode .lang-pt { display: none !important; }

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-links a {
  color: var(--text-soft);
  transition: 0.25s;
}

.nav-links a:hover {
  color: var(--primary-soft);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
}

.hero {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  padding: 72px 0 40px;
}

.hero-content {
  max-width: 760px;
}

.eyebrow {
  color: var(--primary-soft);
  margin-bottom: 14px;
  font-size: 0.95rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

.hero-text {
  max-width: 680px;
  color: var(--text-soft);
  margin-bottom: 28px;
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Hero ── */
    .hero-title {
      border: 0.5px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      margin-bottom: 1.5rem;
      background: var(--bg);
    }
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--green-light);
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 1rem;
    }
    .hero-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green);
      animation: pulse 1.8s infinite;
    }

    .hero-tag-sublime{
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:var(--purple-light);
      color:var(--purple-deep);
      font-size:14px;
      font-weight:500;
      padding:4px 12px;
      border-radius:20px;
      margin-bottom:1rem;
    }
    .hero-dot-sublime{
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--purple);
      animation:pulse 1.8s infinite;
    }

  .hero-playwright{border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:2rem;margin-bottom:1.5rem;background:var(--bg)}
  .hero-tag-playwright{display:inline-flex;align-items:center;gap:6px;background:var(--pink-light);color:var(--pink-deep);font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;margin-bottom:1rem}
  .hero-dot-playwright{width:7px;height:7px;border-radius:50%;background:var(--pink);animation:pulse 1.8s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  .hero-playwright h1{font-size:22px;font-weight:600;line-height:1.3;margin-bottom:.5rem}
  .hero-sub-playwright{font-size:15px;color:var(--text-secondary);line-height:1.6}

  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  .hero-title h1 { font-size: 22px; font-weight: 600; line-height: 1.3; margin-bottom: .5rem; }
  .hero-sub { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }
  .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.25rem; }
  .pill { font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 20px; border: 0.5px solid; }
  .pill-green { background: var(--green-light); color: var(--teal-deep); border-color: #5DCAA5; }
  .pill-amber { background: var(--amber-light); color: var(--amber); border-color: #EF9F27; }
  .pill-coral { background: var(--coral-light); color: var(--coral); border-color: #F0997B; }
  .pill-purple{background:var(--purple-light);color:var(--purple-deep);border-color:#AFA9EC;}
  .pill-teal{background:var(--teal-light);color:var(--teal-deep);border-color:#5DCAA5;}
  .pill-pink{background:var(--pink-light);color:var(--pink-deep);border-color:#ED93B1}


.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 600;
  transition: 0.25s ease;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: #7c3aed;
}

.btn-secondary {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
}

.section {
  padding: 88px 0;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 28px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.card h3 {
  margin-bottom: 10px;
}

.card p + p {
  margin-top: 14px;
}

.project-card {
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.32);
}

.tag {
  display: inline-block;
  margin: 8px 0 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--primary-soft);
  font-size: 0.9rem;
}

.tag-green {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.tag-yellow {
  background-color: #fff3e0;
  color: #b26a00;
  border: 1px solid #ffcc80;
}

.tag-orange {
  background-color: #fbe9e7;
  color: #d84315;
  border: 1px solid #ffab91;
}

.tag-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  border-radius: 999px;

  background: rgba(16, 185, 129, 0.15); /* verde suave */
  color: #065f46;

  font-size: 0.9rem;
  border: none; /* 👈 remove qualquer borda */
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #10b981; /* verde */
  border-radius: 50%;
  position: relative;
} 

/* animação pulsando */
.dot::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #10b981;
  opacity: 0.6;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}



@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .nav-links {
    position: absolute;
    top: 72px;
    right: 5%;
    width: 220px;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    background: #171322;
    border: 1px solid var(--border);
    display: none;
  }

  .nav-links.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  a {
  color: #a855f7;
  transition: 0.3s;
  }

  a:hover {
    text-decoration: underline;
  }

  .project-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease;
  }
  .project-link:hover {
    transform: translateY(-5px); /* Dá um efeito visual legal ao passar o mouse */
  }

}

/* Accordion Styles */
.accordion-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 20px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color 0.3s;
}

.accordion-item:hover {
  border-color: rgba(168, 85, 247, 0.4);
}

.accordion-header {
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header::-webkit-details-marker {
  display: none;
}

.accordion-content {
  padding: 0 20px 20px;
  border-top: 1px solid var(--border);
  /* color: var(--text-soft); */
}

.accordion-item[open] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-icon {
  color: var(--primary-soft);
  transition: transform 0.3s;
  font-size: 0.8rem;
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.card-item {
  background: rgba(168, 85, 247, 0.4);
  padding: 16px;
  border-radius: 12px;
  color: #e5e7eb;
  font-size: 0.95rem;
  transition: 0.2s ease;
  border: 1px solid rgba(255,255,255,0.05);
}

.card-item:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, 0.3);
}

.card-number {
  font-size: 0.8rem;
  color: #22c55e;
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
}

/* ── Section label ── */
    .section-label {
      font-size: 11px; font-weight: 500;
      letter-spacing: .08em; color: var(--text-secondary);
      text-transform: uppercase; margin-bottom: .75rem;
    }

    /* ── Process flow ── */
    .process-flow {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 1.5rem;
    }
    .proc-step {
      flex: 1;
      background: var(--bg);
      border: 0.5px solid var(--border);
      border-radius: var(--radius-lg);
      padding: .9rem 1rem;
      text-align: center;
    }
    .proc-num { font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--text-secondary); text-transform: uppercase; margin-bottom: 4px; }
    .proc-icon { font-size: 20px; margin-bottom: 6px; }
    .proc-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
    .proc-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
    .proc-arrow { text-align: center; color: var(--text-secondary); font-size: 16px; padding: 0 4px; }

    /* ── Learnings ── */
    .learnings { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 1.5rem; }
    .learn-card { background: var(--bg); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; display: flex; gap: 10px; align-items: flex-start; }
    .learn-num { font-size: 20px; font-weight: 600; color: var(--purple); min-width: 28px; }
    .learn-card h4 { font-size: 16px; font-weight: 500; margin-bottom: 3px; }
    .learn-card p  { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

/* ── Challenges ── */
    .card-box { background: var(--bg); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; }
    .challenge-item { display: flex; gap: 12px; padding: .75rem 0; border-bottom: 0.5px solid var(--border); }
    .challenge-item:last-child { border-bottom: none; }
    .ch-marker { width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
    .ch-green { background: var(--green); }
    .ch-coral { background: var(--coral); }
    .ch-content h4 { font-size: 16px; font-weight: 500; margin-bottom: 3px; }
    .ch-content p  { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
    .ch-content code { font-family: var(--font-code); font-size: 11px; background: var(--border); padding: 1px 5px; border-radius: 4px; }

    /* Highlights Projeto Sublime */
  .highlights{margin-bottom:1.5rem}
  .card-box-sublime{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.5rem}
  .hl-item{display:flex;gap:12px;padding:.75rem 0;border-bottom:0.5px solid var(--border)}
  .hl-item:last-child{border-bottom:none}
  .hl-dot{width:6px;height:6px;border-radius:50%;margin-top:7px;flex-shrink:0}
  .dot-purple{background:var(--purple)}
  .dot-teal{background:var(--teal)}
  .dot-amber{background:var(--amber)}
  .dot-coral{background:var(--coral)}
  .dot-pink{background: var(--pink);}
  .hl-content h4{font-size:16px;font-weight:500;margin-bottom:3px}
  .hl-content p{font-size:14px;color:var(--text-secondary);line-height:1.5}
  .hl-content code{font-family:var(--font-code);font-size:11px;background:var(--border);padding:1px 5px;border-radius:4px}

    /* ── Stack grid ── */
    .stack-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 1.5rem; }
    .stack-card { background: var(--bg); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding:.9rem;text-align: center; }
    .stack-icon { font-size: 22px; margin-bottom: .5rem; }
    .stack-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
    .stack-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

    /* Stack Projeto Sublime */
    .stack-grid-sublime{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.5rem}
    .stack-card-sublime{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:.9rem;text-align:center}
    .stack-icon-sublime{font-size:20px;margin-bottom:.4rem}
    .stack-card-sublime h3{font-size:16px;font-weight:500;margin-bottom:3px}
    .stack-card-sublime p{font-size:14px;color:var(--text-secondary);line-height:1.4}

  code{font-family:var(--font-code);font-size:11px;background:var(--border);padding:1px 5px;border-radius:4px}

  
/* ── Responsive ── */
@media (max-width: 768px) {
  .process-flow { 
    flex-direction: column; 
    align-items: stretch;
    gap: 12px; 
  }
  .proc-arrow { transform: rotate(90deg); margin: 8px 0; }
  .stack-grid { grid-template-columns: 1fr 1fr; }
  .scen-grid { grid-template-columns: 1fr; }
  .val-grid { grid-template-columns: 1fr; }
  .learnings { grid-template-columns: 1fr; }
  .strategy-grid{grid-template-columns:1fr;} /* projeto sublime */
  .stack-grid-sublime{grid-template-columns:repeat(2,1fr);} /* projeto sublime */
  
  /* Ajustes do Funil no Mobile */
  .funnel { grid-template-columns: 1fr; }
  .funnel-step { 
    border: 0.5px solid var(--border) !important; 
    border-top: none; 
    padding: 1.5rem 1rem 3rem;
  }
  .funnel-step + .funnel-step { border-top: none !important; }
  .funnel-step:first-child { 
    border-top: 0.5px solid var(--border) !important; 
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; 
  }
  .funnel-step:last-child { 
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); 
    padding-bottom: 1.5rem; 
  }
  .funnel-arrow {
    right: auto; 
    left: 50%; 
    top: auto; 
    bottom: -13px;
    transform: translateX(-50%) rotate(90deg);
    z-index: 10;
  }
}


/* Status bar */
  .status-bar{background:var(--teal-light);border:0.5px solid #5DCAA5;border-radius:var(--radius-lg);padding:1rem 1.25rem;display:flex;align-items:center;gap:12px;margin-bottom:1.5rem}
  .status-dot{width:10px;height:10px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite;flex-shrink:0}
  .status-text{font-size:14px;color:var(--teal-deep);font-weight:500}
  .status-sub{font-size:13px;color:var(--teal-deep);opacity:.8}

  /* Timeline */
  .timeline{margin-bottom:1.5rem;position:relative}
  .timeline-line{position:absolute;left:18px;top:24px;bottom:24px;width:1px;background:var(--border)}
  .tl-item{display:flex;gap:16px;margin-bottom:1rem;position:relative}
  .tl-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:0.5px solid var(--border);background:var(--bg);z-index:1}
  .tl-content{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:.85rem 1rem;flex:1}
  .tl-phase{font-size:14px;font-weight:500;letter-spacing:.07em;color:var(--text-secondary);text-transform:uppercase;margin-bottom:2px}
  .tl-title{font-size:16px;font-weight:500;margin-bottom:4px}
  .tl-desc{font-size:14px;color:var(--text-secondary);line-height:1.5}
  .badge-prod{display:inline-block;font-size:12px;font-weight:500;background:var(--teal-light);color:var(--teal-deep);padding:2px 10px;border-radius:20px;margin-top:5px}

  /* Strategy */
  .strategy-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
  .strat-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1rem}
  .strat-icon{font-size:18px;margin-bottom:.5rem}
  .strat-card h3{font-size:16px;font-weight:500;margin-bottom:.5rem}
  .strat-card p{font-size:14px;color:var(--text-secondary);line-height:1.5}

  /* Test types */
  .test-types{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:1.5rem;margin-bottom:1.5rem}
  .tt-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1rem}
  .tt-label{font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.6rem}
  .tt-label-purple{color:var(--purple)}
  .tt-label-teal{color:var(--teal)}
  .tt-label-amber{color:var(--amber)}
  .tt-title{font-size:16px;font-weight:500;margin-bottom:.4rem}
  .tt-desc{font-size:14px;color:var(--color-text-secondary);line-height:1.5}
  .tag-row-sublime{display:flex;flex-wrap:wrap;gap:4px;margin-top:.6rem}
  .tag-sublime{font-size:12px;padding:2px 8px;border-radius:20px}
  .tag-purple-sublime{background:var(--purple-light);color:var(--purple-deep)}
  .tag-teal-sublime{background:var(--teal-light);color:var(--teal-deep)}
  .tag-amber-sublime{background:var(--amber-light);color:var(--amber)}

  /* Funnel steps */
  .funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-bottom:1.5rem;position:relative}
  .funnel-step{background:var(--bg);border:0.5px solid var(--border);padding:.8rem .6rem;text-align:center;position:relative}
  .funnel-step:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
  .funnel-step:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
  .funnel-step+.funnel-step{border-left:none}
  .funnel-num{font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:4px}
  .funnel-icon{font-size:18px;margin-bottom:4px}
  .funnel-title{font-size:14px;font-weight:500;line-height:1.3}
  .funnel-arrow{position:absolute;right:-8px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--text-secondary);z-index:2;background:var(--bg);padding:2px;transition: transform 0.3s ease}

/* Scenarios */
  .scen-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:1.5rem;margin-bottom:1.5rem}
  .scen-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1rem}
  .scen-type{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
  .type-happy{color:var(--teal)}
  .type-unhappy{color:var(--coral)}
  .type-validation{color:var(--amber)}
  .scen-title{font-size:16px;font-weight:500;margin-bottom:.4rem}
  .scen-desc{font-size:14px;color:var(--text-secondary);line-height:1.5}
  .tag-row-playwright{display:flex;flex-wrap:wrap;gap:4px;margin-top:.6rem}
  .tag-playwright{font-size:12px;padding:2px 8px;border-radius:20px}
  .tag-teal{background:var(--teal-light);color:var(--teal-deep)}
  .tag-coral{background:var(--coral-light);color:var(--coral)}
  .tag-amber{background:var(--amber-light);color:var(--amber)}
  .tag-pink{background:var(--pink-light);color:var(--pink-deep)}

  /* Validations */
  .val-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
  .val-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:1rem}
  .val-title{font-size:16px;font-weight:500;margin-bottom:.6rem}
  .val-list{list-style:none}
  .val-list li{font-size:14px;color:var(--text-secondary);line-height:1.6;padding:2px 0;display:flex;gap:6px;align-items:flex-start}
  .val-list li::before{content:"·";color:var(--pink);font-weight:700;flex-shrink:0;margin-top:1px}
  code{font-family:var(--font-code);font-size:11px;background:var(--border);padding:1px 5px;border-radius:4px}

  .project-link {
    text-decoration: none;
    transition: all 0.2s ease;
}

.project-link:hover {
    text-decoration: underline;
    color: #6c63ff; /* opcional */
}
.badge-prod-port{
  display:inline-block;
  font-size:12px;
  font-weight:500;
  background:var(--purple-light);
  color:var(--purple-deep);
  padding:2px 10px;
  border-radius:20px;
  margin-top:5px
}