:root {
  --trs-navy: #071428;
  --trs-navy-2: #0b1f3a;
  --trs-blue: #1565c0;
  --trs-sky: #1e88e5;
  --trs-cyan: #00acc1;
  --trs-accent: #5b7cfa;
  --trs-text: #1c2434;
  --trs-muted: #5b677a;
  --trs-line: #e6ebf2;
  --trs-bg: #f5f7fb;
  --trs-white: #ffffff;
  --trs-radius: 18px;
  --trs-shadow: 0 18px 50px rgba(7, 20, 40, .08);
  --trs-shadow-lg: 0 30px 70px rgba(7, 20, 40, .14);
  --trs-header: 84px;
  --trs-font: "Plus Jakarta Sans", system-ui, sans-serif;
  --trs-display: "Outfit", var(--trs-font);
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--trs-font);
  color: var(--trs-text);
  background: var(--trs-white);
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--trs-blue); text-decoration: none; }
a:hover { color: var(--trs-navy-2); }
.container-xl { max-width: 1180px; }

.trs-topbar {
  background: var(--trs-navy);
  color: rgba(255,255,255,.82);
  font-size: 13px;
  padding: 8px 0;
}
.trs-topbar a { color: inherit; }
.trs-topbar i { color: var(--trs-sky); margin-right: 6px; }

.trs-navbar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--trs-line);
  position: sticky;
  top: 0;
  z-index: 1040;
  min-height: var(--trs-header);
}
.trs-navbar .navbar-toggler {
  border: 1px solid var(--trs-line);
  padding: .4rem .55rem;
}
.trs-navbar .navbar-toggler:focus { box-shadow: none; }
.trs-navbar .navbar-brand img { height: 46px; width: auto; border-radius: 8px; }
.trs-navbar .nav-link {
  color: var(--trs-navy-2) !important;
  font-weight: 600;
  font-size: 14.5px;
  padding: .55rem .7rem !important;
  position: relative;
}
.trs-navbar .nav-link:hover,
.trs-navbar .nav-link.active { color: var(--trs-blue) !important; }
.trs-navbar .dropdown-menu {
  border: 0;
  border-radius: 14px;
  box-shadow: var(--trs-shadow-lg);
  padding: .6rem;
  min-width: 240px;
}
.trs-navbar .dropdown-item {
  border-radius: 10px;
  font-weight: 500;
  padding: .55rem .8rem;
}
@media (min-width: 1200px) {
  .trs-navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
.btn-quote {
  background: linear-gradient(135deg, var(--trs-blue), var(--trs-cyan));
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: .65rem 1.2rem !important;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(21,101,192,.28);
}
.btn-quote:hover { color: #fff !important; filter: brightness(1.05); }

.btn-primary, .btn-trs {
  --bs-btn-bg: var(--trs-blue);
  --bs-btn-border-color: var(--trs-blue);
  --bs-btn-hover-bg: #0f4fa3;
  --bs-btn-hover-border-color: #0f4fa3;
  border-radius: 999px;
  font-weight: 700;
  padding: .75rem 1.35rem;
}
.btn-outline-light, .btn-outline-primary, .btn-outline-dark {
  border-radius: 999px;
  font-weight: 700;
  padding: .75rem 1.35rem;
}
.btn-ghost {
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  background: transparent;
  border-radius: 999px;
  font-weight: 700;
  padding: .75rem 1.35rem;
}
.btn-ghost:hover { background: #fff; color: var(--trs-navy); }

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 80% 10%, rgba(30,136,229,.35), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(0,172,193,.22), transparent 32%),
    linear-gradient(160deg, #06101f 0%, #0b2a52 55%, #0a3a6a 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
  animation: gridShift 18s linear infinite;
}
@keyframes gridShift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 48px, 48px 0; }
}
.hero-content { position: relative; z-index: 2; padding: 110px 0 90px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #d7e8ff;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero h1 {
  font-family: var(--trs-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.7rem);
  line-height: 1.12;
  margin: 1rem 0 1rem;
  max-width: 18ch;
}
.hero .lead {
  color: rgba(255,255,255,.78);
  max-width: 38rem;
  font-size: 1.08rem;
}
.hero .lead p { margin-bottom: .4em; }
.hero .lead p:last-child { margin-bottom: 0; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 28px; color: rgba(255,255,255,.8); font-size: 14px; }
.trust-row strong { color: #fff; display: block; font-size: 18px; }

.hero-visual { position: relative; z-index: 2; }
.hero-panel {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--trs-shadow-lg);
  backdrop-filter: blur(10px);
}
.hero-panel img, .hero-panel .panel-art {
  border-radius: 16px;
  width: 100%;
  min-height: 320px;
  height: 360px;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}
.panel-art {
  background:
    linear-gradient(180deg, rgba(7,20,40,.12), rgba(7,20,40,.55)),
    url("../images/it/hero-code.svg") center/cover;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  color: #fff;
}
.float-card {
  position: absolute;
  background: #fff;
  color: var(--trs-text);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--trs-shadow-lg);
  font-size: 13px;
  font-weight: 600;
  animation: floatY 4.5s ease-in-out infinite;
}
.float-card i { color: var(--trs-blue); margin-right: 8px; }
.float-card.c1 { top: 18px; left: -12px; }
.float-card.c2 { bottom: 40px; right: -8px; animation-delay: 1.2s; }
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.section { padding: 88px 0; }
.section-muted { background: var(--trs-bg); }
.section-dark {
  background: var(--trs-navy);
  color: #fff;
}
.section-title {
  font-family: var(--trs-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -.02em;
  margin-bottom: .6rem;
}
.section-kicker {
  color: var(--trs-blue);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-lead { color: var(--trs-muted); max-width: 640px; }

.stat-grid { margin-top: -48px; position: relative; z-index: 3; }
.stat-card, .info-card, .service-card, .project-card, .blog-card, .team-card, .tech-card {
  background: #fff;
  border: 1px solid var(--trs-line);
  border-radius: var(--trs-radius);
  box-shadow: var(--trs-shadow);
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover, .info-card:hover, .service-card:hover, .project-card:hover, .blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--trs-shadow-lg);
}
.stat-card { padding: 22px; text-align: center; }
.stat-card .num {
  font-family: var(--trs-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--trs-navy);
}
.stat-card span { color: var(--trs-muted); font-size: 14px; }

.icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(21,101,192,.1);
  color: var(--trs-blue);
  font-size: 20px;
  margin-bottom: 14px;
}

.service-card { padding: 26px; }
.service-card h3 { font-size: 1.15rem; font-weight: 700; }
.service-card p { color: var(--trs-muted); min-height: 72px; }
.link-arrow { font-weight: 700; color: var(--trs-blue); }
.link-arrow i { transition: transform .2s; }
.link-arrow:hover i { transform: translateX(4px); }

.project-card { overflow: hidden; }
.project-card .thumb {
  height: 210px;
  background: var(--trs-navy-2) center/cover no-repeat;
  position: relative;
}
.project-card .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(7,20,40,.55));
}
.project-card .body { padding: 20px 22px 24px; }
.chip {
  display: inline-block;
  background: rgba(21,101,192,.1);
  color: var(--trs-blue);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: .2rem .65rem;
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-bar .btn { padding: .4rem 1rem; font-size: 14px; }

.process-item { text-align: center; padding: 10px; }
.process-item .step {
  width: 54px; height: 54px; border-radius: 50%;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--trs-navy);
  color: #fff;
  font-weight: 700;
}
.process-item h3 { font-size: 1rem; }

.quote-block {
  background: #fff;
  border-radius: var(--trs-radius);
  padding: 28px;
  box-shadow: var(--trs-shadow);
  height: 100%;
}
.quote-block img {
  width: 52px; height: 52px; object-fit: cover; border-radius: 50%;
}
.quote-block p, .quote-block .quote-text { font-style: italic; color: #334; }

.cta-band {
  background:
    radial-gradient(circle at 90% 20%, rgba(30,136,229,.35), transparent 30%),
    linear-gradient(135deg, #0b1f3a, #123a6b);
  color: #fff;
  border-radius: 28px;
  padding: 48px;
}
.page-hero {
  background:
    linear-gradient(120deg, rgba(7,20,40,.88), rgba(21,101,192,.62)),
    url("../images/it/banner.svg") center/cover no-repeat;
  color: #fff;
  padding: 92px 0 72px;
}
.page-hero h1 { font-family: var(--trs-display); font-weight: 700; }
.breadcrumb { background: none; padding: 0; margin: 12px 0 0; }
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active { color: rgba(255,255,255,.8); }

.contact-card, .form-card {
  background: #fff;
  border-radius: var(--trs-radius);
  box-shadow: var(--trs-shadow);
  padding: 28px;
  border: 1px solid var(--trs-line);
}
.form-control, .form-select {
  border-radius: 12px;
  padding: .75rem .9rem;
  border-color: #d9e1ec;
}
.form-control:focus, .form-select:focus {
  border-color: var(--trs-sky);
  box-shadow: 0 0 0 .2rem rgba(30,136,229,.15);
}

.trs-footer {
  background: #07101d;
  color: rgba(255,255,255,.78);
  padding-top: 64px;
}
.trs-footer h3, .trs-footer h2 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.trs-footer a { color: rgba(255,255,255,.78); }
.trs-footer a:hover { color: #fff; }
.trs-footer ul { list-style: none; padding: 0; margin: 0; }
.trs-footer li { margin-bottom: 8px; }
.trs-footer .brand-logo { background: #fff; display: inline-block; border-radius: 10px; padding: 8px 10px; }
.trs-footer .brand-logo img { height: 42px; }
.socials a {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08); margin-right: 6px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 40px;
  padding: 18px 0;
  font-size: 14px;
}

.accordion-item { border-radius: 14px !important; overflow: hidden; margin-bottom: 10px; border: 1px solid var(--trs-line); }
.accordion-button:not(.collapsed) { background: #eef5ff; color: var(--trs-navy); box-shadow: none; }

.blog-card .thumb { height: 200px; background: #0b1f3a center/cover; }
.blog-card .body { padding: 20px; }
.team-card { text-align: center; padding: 24px; }
.team-card img { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; margin-bottom: 12px; }
.tech-card { padding: 16px 10px; text-align: center; }
.tech-card i { font-size: 26px; color: var(--trs-blue); }
.tech-card .fw-bold { font-size: 13px; line-height: 1.3; }

.job-card {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--trs-line); border-radius: 16px; padding: 22px;
  margin-bottom: 12px;
}

.content-prose h2, .content-prose h3 { font-family: var(--trs-display); margin-top: 1.4em; }
.content-prose p, .content-prose li { color: #334155; }
.content-prose p:last-child, .quote-text p:last-child { margin-bottom: 0; }
.quote-text p { color: inherit; }
.service-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}

.empty-state { padding: 48px 20px; text-align: center; color: var(--trs-muted); }

.map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(.15); }

.alert { border: 0; border-radius: 14px; }

.offcanvas { --bs-offcanvas-width: min(320px, 100%); }
.offcanvas-body a {
  display: block;
  padding: 12px 4px;
  font-weight: 600;
  color: var(--trs-navy-2);
  border-bottom: 1px solid var(--trs-line);
}
.offcanvas-body a.btn { border-bottom: 0; margin-top: 12px; text-align: center; }

.it-photo, .content-prose img, .project-detail-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.service-card p { min-height: 0; }

@media (min-width: 992px) {
  .service-card p { min-height: 72px; }
}

@media (max-width: 1199.98px) {
  .trs-navbar .navbar-brand img { height: 40px; }
  .hero h1 { max-width: none; }
}

@media (max-width: 991px) {
  .hero { min-height: auto; }
  .hero-content { padding: 56px 0 28px; }
  .hero-panel .panel-art { min-height: 220px; height: 240px; }
  .float-card { display: none; }
  .cta-band { padding: 28px 20px; border-radius: 20px; }
  .job-card { flex-direction: column; align-items: flex-start; }
  .stat-grid { margin-top: 16px; }
  .page-hero { padding: 56px 0 40px; }
  .section { padding: 56px 0; }
  .map-wrap iframe { height: 280px; }
  .filter-bar .btn { width: auto; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 575px) {
  .section { padding: 48px 0; }
  .trs-topbar { display: none; }
  .trs-navbar { min-height: 68px; }
  .trs-navbar .navbar-brand img { height: 34px; }
  .hero-content { padding: 36px 0 12px; }
  .hero .btn-primary, .hero .btn-ghost,
  .cta-band .btn,
  .form-card .btn[type="submit"],
  .job-card .btn {
    width: 100%;
    text-align: center;
  }
  .process-item { padding: 8px 4px; }
  .quote-block { padding: 20px; }
  .form-card, .contact-card { padding: 20px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-fabs {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.site-fab {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.site-fab:hover { color: #fff; transform: translateY(-2px); }
.site-fab-wa { background: #25d366; }
.site-fab-wa:hover { background: #1ebe5d; }
.site-fab-top {
  background: var(--trs-blue);
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}
.site-fab-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.site-fab-top:hover { background: var(--trs-navy-2); }

@media (max-width: 575px) {
  .site-fabs { right: 12px; bottom: 16px; }
  .site-fab { width: 48px; height: 48px; font-size: 22px; }
}
.row { --bs-gutter-x: 1.5rem; }
h1, h2, .section-title { overflow-wrap: anywhere; }