/* ========= Techdoods — Services Page Styles ========= */
/* Inherits brand variables from styles.css (:root colors, etc.) */

/* Sub-hero variant */
.hero--sub{
  padding:56px 0 40px;
  background:
    radial-gradient(900px 320px at 110% -10%, rgba(42,164,255,.14), rgba(42,164,255,0) 60%),
    radial-gradient(700px 260px at -10% 0%, rgba(54,178,74,.12), rgba(54,178,74,0) 60%),
    linear-gradient(180deg, var(--td-navy-900), var(--td-navy-800));
  color:#e9f3ff;
}
.hero--sub h1{ color:#fff; margin:0 0 8px }
.hero--sub .lead{ color:#d7e8ff }

/* -------- Tabs -------- */
.tabs{ width:100% }
.tabs__list{
  display:flex; flex-wrap:wrap; gap:10px;
  border-bottom:1px solid var(--td-gray-200);
  margin:0 0 18px; padding:0 2px 8px;
}
.tabs__tab{
  appearance:none; border:0; background:transparent;
  color:var(--td-gray-700); font-weight:700;
  padding:.6rem .9rem; border-radius:10px;
  cursor:pointer; position:relative;
}
.tabs__tab:hover{ color:var(--td-blue-600); background:var(--td-gray-100) }
.tabs__tab.is-active{
  color:var(--td-navy-900); background:var(--td-white);
}
.tabs__tab.is-active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-9px; height:3px;
  background:linear-gradient(90deg,var(--td-blue-600),var(--td-blue-500));
  border-radius:3px;
}
.tabs__panel{ margin-top:8px }
.tabs__panel[hidden]{ display:none !important }

/* -------- Cards (sections) -------- */
.service-card{
  background:var(--td-white);
  border:1px solid var(--td-gray-200);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-sm);
  transition:transform .14s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(31,126,219,.22);
}
.service-card h3{ margin-top:0; color:var(--td-gray-900) }

/* CTA buttons inside cards align nicely */
.service-card .btn{ margin-top:8px }

/* -------- Tables -------- */
.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:12px;
  border:1px solid var(--td-gray-200);
  box-shadow:var(--shadow-sm);
}
.price-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px; /* allow horizontal scroll on small screens */
  background:#fff;
}
.price-table thead th{
  background:linear-gradient(0deg,#f7fbff,#fff);
  color:var(--td-navy-900);
  text-align:left;
  padding:14px 14px;
  font-weight:800;
  border-bottom:1px solid var(--td-gray-200);
  position:sticky; top:0; /* nice when table overflows vertically */
}
.price-table tbody th,
.price-table tbody td{
  padding:12px 14px;
  vertical-align:top;
  border-bottom:1px solid var(--td-gray-200);
  color:var(--td-gray-800);
}
.price-table tbody tr:nth-child(odd){ background:var(--td-gray-100) }
.price-table tbody tr:hover{ background:#eef6ff }
.price-table em{ color:var(--td-gray-600) }

/* List styling reused for terms/discounts */
.trust-list{ padding-left:18px; margin:8px 0 0 }
.trust-list li{ margin:.45rem 0; color:var(--td-gray-700) }

/* -------- Buttons (borrow brand styles, tweak spacing) -------- */
.btn{ font-weight:700; border-radius:999px; padding:.75rem 1.1rem }
.btn-primary{
  background:linear-gradient(90deg,var(--td-blue-600),var(--td-blue-500));
  color:#fff; border:0; box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ filter:brightness(1.07) }
.btn-secondary{
  background:#fff; color:var(--td-blue-600);
  border:1px solid rgba(42,164,255,.3);
}
.btn-secondary:hover{ background:var(--td-gray-100) }

/* -------- Utilities -------- */
.center{text-align:center}
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* --- Pricing badges for bundles --- */
.price-badge{
  display:inline-flex; align-items:baseline; gap:6px;
  background:linear-gradient(90deg, var(--td-blue-600), var(--td-blue-500));
  color:#fff; border-radius:999px; padding:8px 14px; font-weight:800;
  box-shadow:var(--shadow-sm); margin:6px 0 10px;
}
.price-amount{ font-size:1.25rem; line-height:1 }
.price-unit{ font-size:.9rem; opacity:.9 }

/* --- “Most Popular” ribbon --- */
.ribbon{
  position:absolute; top:12px; right:-10px;
  background:var(--td-green-500); color:#fff; font-weight:800;
  padding:6px 12px; border-radius:999px; box-shadow:var(--shadow-sm);
  font-size:.8rem;
}

/* -------- Responsive -------- */
@media (max-width: 960px){
  .hero--sub{ padding:48px 0 34px }
  .price-table{ min-width:660px }
}
@media (max-width: 640px){
  .tabs__list{ gap:8px }
  .tabs__tab{ padding:.55rem .75rem }
  .service-card{ padding:16px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important }
}