/* ---------- What we do ---------- */
.whatwedo-row{
  padding: 4rem 2rem 3rem;
  background: transparent;
  color: var(--text);
}

.what-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  width:100%;
}

.what-item {
  background: var(--surface);
  border: 0;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-soft);

  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
  gap: 1rem;
}

.what-icon{font-size:2.5rem;line-height:1;color:var(--text);}
.what-title{font-size:1.2rem;margin:0;color:var(--text);}
.what-desc{font-size:.95rem;flex:1;color:var(--text);opacity:.9;}

/* Use global .btn for CTA; keep a hook for layout */
.btn.go{}

/* Responsive grid */
@media(max-width:768px){.what-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.what-grid{grid-template-columns:1fr}}

/* ---------- Tabs ---------- */
.tabs {margin: 0 auto; max-width: 1100px;}
.tabs-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;}
.tab-list{display:flex;gap:1rem;list-style:none;padding:0;margin:0;font-size:1rem;font-weight:500;flex-wrap:wrap}
.tab-list li{cursor:pointer;padding:.35rem .85rem;border-radius:8px;color:var(--text);background:transparent;}
.tab-list li.active{background: var(--btn-bg); color: var(--btn-text);}

.tab-arrows{display:flex;gap:.5rem;margin-left:auto}
.tab-arrow{
  background: var(--btn-bg);
  border:none;
  color: var(--btn-text);
  font-size:1rem;
  line-height:1;
  border-radius:50%;
  width:32px;
  height:32px;
  cursor:pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.tab-arrow:hover{
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
  transform: translateY(-2px);
}
.tab-arrow:disabled{opacity:.35;cursor:not-allowed}

.tab-panels{width:100%;}
.tab-panel{display:none;animation:fade .35s ease}
.tab-panel.active{display:block}

@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (min-width: 1024px) {
  .whatwedo-row { max-width: 100%; }
}

.section-title {
  margin: 0;
  font-size: 1.8rem;
  color: var(--text);
  font-weight: 600;
  text-align: center;
  padding-bottom: 2rem;
}