/* 
    Created on : Jan 22, 2026, 12:15:05 AM
    Author     : trivu
*/

/* =========================
   10 Labs — styles.css
   Bootstrap 5.3+ theme-aware
   ========================= */

/* ---------- Theme variables (Bootstrap theme-aware) ---------- */
:root{
  --tc-radius-xl: 1.25rem;
  --tc-radius-lg: 1rem;
  --tc-radius-md: .85rem;

  --tc-border: rgba(255,255,255,.10);
  --tc-border-soft: rgba(255,255,255,.08);

  --tc-shadow: 0 16px 40px rgba(0,0,0,.28);
  --tc-shadow-soft: 0 10px 28px rgba(0,0,0,.18);

  --tc-hero-minh: 72vh;
}

/* Light theme adjustments */
html[data-bs-theme="light"]{
  --tc-border: rgba(0,0,0,.12);
  --tc-border-soft: rgba(0,0,0,.08);
  --tc-shadow: 0 16px 40px rgba(0,0,0,.14);
  --tc-shadow-soft: 0 10px 28px rgba(0,0,0,.10);
}

/* ---------- Base ---------- */
body{
  overflow-x: hidden;
}

.tc-topbar{
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bs-body-bg) 80%, transparent);
}

.tc-badge{
  border: 1px solid var(--tc-border-soft);
}

.tc-nav{
  background: color-mix(in oklab, var(--bs-body-bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tc-border-soft);
}

.navbar .nav-link{
  color: color-mix(in oklab, var(--bs-body-color) 86%, var(--bs-secondary));
}
.navbar .nav-link:hover{
  color: var(--bs-body-color);
}

.tc-mark{
  display:inline-grid;
  place-items:center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: -.02em;
  border: 1px solid var(--tc-border);
  box-shadow: var(--tc-shadow-soft);
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(13,110,253,.28), transparent 60%),
    radial-gradient(120% 120% at 80% 80%, rgba(13,202,240,.22), transparent 60%),
    color-mix(in oklab, var(--bs-body-bg) 86%, rgba(255,255,255,.06));
}

.tc-cta{
  box-shadow: 0 12px 26px rgba(13,110,253,.18);
}

/* ---------- Sections ---------- */
.tc-section{
  position: relative;
}

.tc-section-alt{
  border-top: 1px solid var(--tc-border-soft);
  border-bottom: 1px solid var(--tc-border-soft);
  background:
    radial-gradient(1200px 380px at 50% 0%, rgba(13,110,253,.10), transparent 60%),
    radial-gradient(1200px 380px at 50% 100%, rgba(13,202,240,.08), transparent 60%);
}

/* Add a little extra spacing on large screens */
@media (min-width: 992px){
  .py-lg-6{
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

/* ---------- Hero ---------- */
.tc-hero{
  min-height: var(--tc-hero-minh);
  border-bottom: 1px solid var(--tc-border-soft);
  background:
    radial-gradient(1200px 520px at 20% 20%, rgba(13,110,253,.20), transparent 60%),
    radial-gradient(1000px 480px at 80% 30%, rgba(13,202,240,.16), transparent 55%),
    radial-gradient(900px 520px at 60% 85%, rgba(25,135,84,.08), transparent 55%),
    linear-gradient(180deg, color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.04)), var(--bs-body-bg));
}

.tc-hero-fade{
  position:absolute;
  inset:auto 0 0 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--bs-body-bg));
  pointer-events:none;
}

/* Hero pill */
.tc-pill{
  border: 1px solid var(--tc-border-soft);
  border-radius: 999px;
  padding: .55rem .85rem;
  background: color-mix(in oklab, var(--bs-body-bg) 90%, rgba(255,255,255,.06));
  box-shadow: var(--tc-shadow-soft);
}

/* KPI */
.tc-kpi{
  border: 1px solid var(--tc-border-soft);
  border-radius: var(--tc-radius-lg);
  padding: .9rem 1rem;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.04));
}
.tc-kpi-num{
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.tc-kpi-label{
  font-size: .92rem;
  color: var(--bs-secondary-color);
}

/* Hero panel */
.tc-hero-panel{
  position: relative;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  padding: 1.25rem;
  box-shadow: var(--tc-shadow);
  background:
    radial-gradient(900px 440px at 20% 20%, rgba(13,110,253,.16), transparent 60%),
    radial-gradient(900px 440px at 80% 80%, rgba(13,202,240,.12), transparent 60%),
    color-mix(in oklab, var(--bs-body-bg) 88%, rgba(255,255,255,.05));
  overflow: hidden;
}

.tc-hero-grid{
  position:absolute;
  inset:-1px;
  opacity:.55;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 40% 30%, rgba(0,0,0,1), rgba(0,0,0,.2) 60%, transparent 76%);
  pointer-events:none;
}

html[data-bs-theme="light"] .tc-hero-grid{
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
}

/* Inner card */
.tc-hero-card{
  position: relative;
  border: 1px solid var(--tc-border-soft);
  border-radius: calc(var(--tc-radius-xl) - .35rem);
  padding: 1rem;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.06));
}

.tc-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(13,202,240,.95);
  box-shadow: 0 0 0 6px rgba(13,202,240,.10);
}

.tc-hero-lines{
  display:grid;
  gap: .55rem;
  margin-top: .75rem;
}
.tc-line{
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--tc-border-soft);
  background:
    linear-gradient(90deg,
      rgba(13,110,253,.28),
      rgba(13,202,240,.22),
      rgba(255,255,255,.06));
}

.tc-hero-mini{
  display:grid;
  gap: .6rem;
}
.tc-mini{
  border: 1px solid var(--tc-border-soft);
  border-radius: .9rem;
  padding: .75rem .85rem;
  background: color-mix(in oklab, var(--bs-body-bg) 94%, rgba(255,255,255,.04));
}
.tc-mini-title{
  font-weight: 800;
  letter-spacing: -.01em;
}
.tc-mini-sub{
  font-size: .92rem;
  color: var(--bs-secondary-color);
}

/* Chips */
.tc-chip{
  border: 1px solid var(--tc-border-soft);
}

/* Glow */
.tc-hero-glow{
  position:absolute;
  width: 520px;
  height: 520px;
  right: -220px;
  bottom: -240px;
  background: radial-gradient(circle at 30% 30%, rgba(13,110,253,.25), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(13,202,240,.20), transparent 60%);
  filter: blur(18px);
  opacity: .9;
  pointer-events:none;
}

/* ---------- Feature cards ---------- */
.tc-feature{
  height:100%;
  border: 1px solid var(--tc-border-soft);
  border-radius: var(--tc-radius-xl);
  padding: 1.15rem 1.15rem 1.25rem;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.04));
  box-shadow: var(--tc-shadow-soft);
  transition: transform .22s ease, border-color .22s ease;
}
.tc-feature:hover{
  transform: translateY(-3px);
  border-color: var(--tc-border);
}

.tc-feature-icon{
  display:inline-grid;
  place-items:center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--tc-border-soft);
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(13,110,253,.18), transparent 60%),
    color-mix(in oklab, var(--bs-body-bg) 90%, rgba(255,255,255,.05));
  box-shadow: var(--tc-shadow-soft);
  font-size: 1.15rem;
}

/* ---------- Capability rows ---------- */
.tc-cap{
  height:100%;
  border: 1px solid var(--tc-border-soft);
  border-radius: var(--tc-radius-xl);
  padding: 1.1rem 1.15rem;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.03));
  box-shadow: var(--tc-shadow-soft);
  transition: transform .22s ease, border-color .22s ease;
}
.tc-cap:hover{
  transform: translateY(-2px);
  border-color: var(--tc-border);
}
.tc-cap-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--tc-border-soft);
  display:grid;
  place-items:center;
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(13,202,240,.18), transparent 60%),
    color-mix(in oklab, var(--bs-body-bg) 90%, rgba(255,255,255,.05));
  font-size: 1.2rem;
}

/* ---------- Projects ---------- */
.tc-project{
  height:100%;
  border-radius: var(--tc-radius-xl);
  border: 1px solid var(--tc-border);
  box-shadow: var(--tc-shadow);
  overflow:hidden;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.03));
}

.tc-project-header{
  padding: 1.2rem 1.2rem 1rem;
  border-bottom: 1px solid var(--tc-border-soft);
  background:
    radial-gradient(900px 240px at 20% 30%, rgba(13,110,253,.18), transparent 60%),
    radial-gradient(900px 240px at 80% 30%, rgba(13,202,240,.12), transparent 60%);
}

.tc-project--tc .tc-project-header{
  background:
    radial-gradient(900px 240px at 20% 30%, rgba(13,110,253,.22), transparent 60%),
    radial-gradient(900px 240px at 80% 30%, rgba(25,135,84,.10), transparent 60%);
}

.tc-project--nojor .tc-project-header{
  background:
    radial-gradient(900px 240px at 20% 30%, rgba(13,202,240,.18), transparent 60%),
    radial-gradient(900px 240px at 80% 30%, rgba(255,193,7,.10), transparent 60%);
}

.tc-project-mark{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  border: 1px solid var(--tc-border-soft);
  background: color-mix(in oklab, var(--bs-body-bg) 90%, rgba(255,255,255,.06));
  box-shadow: var(--tc-shadow-soft);
  font-size: 1.35rem;
}

.tc-project-body{
  padding: 1.2rem;
}

.tc-project-links{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tc-project-meta{
  display:grid;
  gap: .75rem;
}

.tc-meta{
  border: 1px solid var(--tc-border-soft);
  border-radius: .95rem;
  padding: .75rem .85rem;
  background: color-mix(in oklab, var(--bs-body-bg) 94%, rgba(255,255,255,.03));
}
.tc-meta-k{
  font-size: .84rem;
  color: var(--bs-secondary-color);
}
.tc-meta-v{
  font-size: .96rem;
}

/* ---------- Steps ---------- */
.tc-step{
  height:100%;
  border: 1px solid var(--tc-border-soft);
  border-radius: var(--tc-radius-xl);
  padding: 1.15rem 1.15rem 1.25rem;
  background: color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.03));
  box-shadow: var(--tc-shadow-soft);
  transition: transform .22s ease, border-color .22s ease;
}
.tc-step:hover{
  transform: translateY(-3px);
  border-color: var(--tc-border);
}
.tc-step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: .82rem;
  border: 1px solid var(--tc-border-soft);
  background: color-mix(in oklab, var(--bs-body-bg) 90%, rgba(255,255,255,.06));
}

/* ---------- Outcomes ---------- */
.tc-outcome{
  height:100%;
  border: 1px solid var(--tc-border-soft);
  border-radius: var(--tc-radius-xl);
  padding: 1.15rem 1.15rem 1.25rem;
  background:
    radial-gradient(900px 260px at 30% 10%, rgba(13,110,253,.12), transparent 60%),
    color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.03));
  box-shadow: var(--tc-shadow-soft);
}

/* ---------- Contact ---------- */
.tc-contact{
  border-top: 1px solid var(--tc-border-soft);
  background:
    radial-gradient(1200px 420px at 15% 20%, rgba(13,110,253,.12), transparent 60%),
    radial-gradient(1200px 420px at 85% 80%, rgba(13,202,240,.10), transparent 60%);
}

.tc-contact-panel,
.tc-form{
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  box-shadow: var(--tc-shadow);
  background: color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.03));
  padding: 1.25rem;
}

.tc-contact-points{
  display:grid;
  gap: .6rem;
}
.tc-point{
  display:flex;
  align-items:flex-start;
  gap: .65rem;
  padding: .65rem .75rem;
  border-radius: .95rem;
  border: 1px solid var(--tc-border-soft);
  background: color-mix(in oklab, var(--bs-body-bg) 94%, rgba(255,255,255,.03));
}
.tc-point i{
  margin-top: .1rem;
  color: color-mix(in oklab, var(--bs-primary) 85%, var(--bs-info));
}

/* Inputs */
.form-control,
.form-select{
  border-radius: .9rem;
  border-color: var(--tc-border-soft);
}
.form-control:focus,
.form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.18);
  border-color: rgba(13,110,253,.55);
}

/* Footer */
footer{
  background: color-mix(in oklab, var(--bs-body-bg) 92%, rgba(255,255,255,.02));
}

/* ---------- Reduced motion support ---------- */
@media (prefers-reduced-motion: reduce){
  .tc-feature,
  .tc-cap,
  .tc-step{
    transition: none !important;
  }
}