:root {
   --ink: #121417;
   --muted: #5f6670;
   --line: #d8dde3;
   --panel: #f4f6f8;
   --surface: #ffffff;
   --accent: #1f6f8b;
   --accent-dark: #174f63;
   --accent-soft: #e5f3f7;
   --warning: #f3b23b;
   --max: 1180px;
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   color: var(--ink);
   background: var(--surface);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   line-height: 1.55;
   overflow-x: hidden;
}

img {
   display: block;
   max-width: 100%;
}

a {
   color: inherit;
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 20;
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 28px;
   min-height: 84px;
   padding: 14px clamp(18px, 4vw, 52px);
   background: rgba(255, 255, 255, 0.94);
   border-bottom: 1px solid var(--line);
   backdrop-filter: blur(12px);
}

.site-header > *,
.hero-content,
.hero-panel,
.text-stack,
.contact-copy,
.contact-card {
   min-width: 0;
}

.brand img {
   width: 170px;
   height: 56px;
   object-fit: contain;
}

.main-nav {
   display: flex;
   justify-content: center;
   gap: 8px;
   min-width: 0;
   max-width: 100%;
}

.main-nav a,
.header-call {
   border-radius: 999px;
   padding: 9px 14px;
   color: var(--muted);
   font-size: 0.95rem;
   font-weight: 700;
   text-decoration: none;
   transition: background-color 160ms ease, color 160ms ease;
}

.main-nav a:hover,
.header-call:hover {
   color: var(--ink);
   background: var(--panel);
}

.header-call {
   color: #ffffff;
   background: var(--accent-dark);
}

.header-call:hover {
   color: #ffffff;
   background: var(--accent);
}

.section {
   max-width: var(--max);
   margin: 0 auto;
   padding: clamp(54px, 8vw, 104px) clamp(18px, 4vw, 42px);
}

.hero {
   display: grid;
   grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
   align-items: center;
   gap: clamp(34px, 6vw, 76px);
   min-height: calc(100vh - 84px);
}

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

.eyebrow {
   margin: 0 0 14px;
   color: var(--accent-dark);
   font-size: 0.82rem;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

h1,
h2,
h3,
p {
   margin-top: 0;
}

h1 {
   max-width: 11ch;
   margin-bottom: 24px;
   font-size: clamp(2.75rem, 7vw, 5.8rem);
   line-height: 0.96;
   letter-spacing: 0;
   overflow-wrap: normal;
}

h2 {
   margin-bottom: 16px;
   font-size: clamp(2rem, 4vw, 3.25rem);
   line-height: 1.05;
   letter-spacing: 0;
}

h3 {
   margin-bottom: 10px;
   font-size: 1.25rem;
   line-height: 1.2;
}

.intro {
   max-width: 670px;
   margin-bottom: 30px;
   color: var(--muted);
   font-size: clamp(1.05rem, 2vw, 1.25rem);
   overflow-wrap: break-word;
}

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

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 48px;
   border: 1px solid transparent;
   border-radius: 6px;
   padding: 12px 18px;
   font-weight: 800;
   text-decoration: none;
}

.button-primary {
   color: #ffffff;
   background: var(--accent-dark);
}

.button-primary:hover {
   background: var(--accent);
}

.button-secondary {
   color: var(--accent-dark);
   background: var(--accent-soft);
   border-color: #c5e2eb;
}

.button-secondary:hover {
   background: #d5ebf2;
}

.hero-panel {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: clamp(22px, 3vw, 32px);
   background: linear-gradient(180deg, #ffffff 0%, var(--panel) 100%);
   box-shadow: 0 24px 60px rgba(18, 20, 23, 0.08);
}

.hero-panel::before {
   content: "";
   display: block;
   width: 100%;
   height: 160px;
   margin-bottom: 22px;
   background: url("images/tdvn-logo.png") center / contain no-repeat;
}

.hero-panel h2 {
   font-size: 1.5rem;
}

dl {
   margin: 0;
}

.hero-panel div {
   padding: 16px 0;
   border-top: 1px solid var(--line);
}

dt {
   color: var(--muted);
   font-size: 0.82rem;
   font-weight: 800;
   text-transform: uppercase;
}

dd {
   margin: 4px 0 0;
   font-weight: 800;
   overflow-wrap: break-word;
}

.section-heading {
   max-width: 780px;
   margin-bottom: 32px;
}

.section-heading p:last-child,
.text-stack p,
.contact-copy p {
   color: var(--muted);
   font-size: 1.08rem;
}

.service-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   border-top: 1px solid var(--line);
   border-left: 1px solid var(--line);
}

.service-grid article {
   min-height: 270px;
   padding: 26px;
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   background: #ffffff;
}

.service-grid article:nth-child(even) {
   background: var(--panel);
}

.service-index {
   display: inline-block;
   margin-bottom: 54px;
   color: var(--accent-dark);
   font-size: 0.8rem;
   font-weight: 900;
}

.service-grid p {
   margin-bottom: 0;
   color: var(--muted);
}

.split {
   display: grid;
   grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
   gap: clamp(32px, 6vw, 74px);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
}

.text-stack {
   align-self: end;
}

.check-list {
   display: grid;
   gap: 12px;
   padding: 0;
   margin: 24px 0 0;
   list-style: none;
}

.check-list li {
   position: relative;
   padding-left: 28px;
   font-weight: 700;
}

.check-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.55em;
   width: 11px;
   height: 11px;
   background: var(--warning);
}

.clients {
   background: #ffffff;
}

.logo-grid {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 14px;
}

.logo-grid a,
.logo-grid span {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 126px;
   padding: 20px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: var(--surface);
}

.logo-grid img {
   max-height: 78px;
   width: 100%;
   object-fit: contain;
}

.contact-section {
   display: grid;
   grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.8fr);
   gap: clamp(30px, 5vw, 70px);
   align-items: start;
}

.contact-card {
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
   background: var(--surface);
}

.contact-row {
   display: grid;
   gap: 6px;
   padding: 20px;
   text-decoration: none;
   border-bottom: 1px solid var(--line);
}

.contact-row:last-child {
   border-bottom: 0;
}

a.contact-row:hover {
   background: var(--panel);
}

.contact-row span {
   color: var(--muted);
   font-size: 0.82rem;
   font-weight: 800;
   text-transform: uppercase;
}

.contact-row strong {
   overflow-wrap: anywhere;
   font-size: 1.08rem;
}

.site-footer {
   display: flex;
   justify-content: space-between;
   gap: 18px;
   padding: 24px clamp(18px, 4vw, 52px);
   color: #ffffff;
   background: var(--ink);
}

.site-footer p {
   margin: 0;
   color: rgba(255, 255, 255, 0.78);
   font-size: 0.92rem;
}

@media (max-width: 980px) {
   .site-header {
      grid-template-columns: 1fr auto;
   }

   .main-nav {
      grid-column: 1 / -1;
      justify-content: flex-start;
      overflow-x: auto;
      padding-bottom: 2px;
   }

   .hero,
   .split,
   .contact-section {
      grid-template-columns: 1fr;
   }

   .hero {
      min-height: auto;
   }

   h1 {
      max-width: 12ch;
   }

   .service-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .logo-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 620px) {
   .site-header {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 12px;
      min-height: 0;
      padding: 12px 16px;
   }

   .brand img {
      width: 132px;
      height: 44px;
   }

   .header-call {
      width: 100%;
      padding: 8px 10px;
      font-size: 0.85rem;
      text-align: center;
   }

   .main-nav {
      grid-row: 2;
      flex-wrap: wrap;
      gap: 2px;
      width: 100%;
      overflow: visible;
   }

   .main-nav a {
      padding: 7px 8px;
      font-size: 0.84rem;
   }

   .section {
      width: 100vw !important;
      max-width: 100vw !important;
      padding: 48px 28px 48px 16px;
   }

   .hero-content {
      width: min(310px, calc(100vw - 80px)) !important;
      max-width: min(310px, calc(100vw - 80px)) !important;
   }

   .hero-content h1,
   .hero-content p {
      width: min(310px, calc(100vw - 80px)) !important;
      max-width: min(310px, calc(100vw - 80px)) !important;
   }

   h1 {
      max-width: 100%;
      font-size: clamp(2.15rem, 12vw, 3rem);
      line-height: 1.02;
   }

   .hero-actions,
   .button {
      width: 100%;
   }

   .service-grid,
   .logo-grid {
      grid-template-columns: 1fr;
   }

   .service-grid article {
      min-height: 220px;
   }

   .service-index {
      margin-bottom: 28px;
   }

   .site-footer {
      display: grid;
   }

   .hero-panel,
   .contact-card {
      width: min(310px, calc(100vw - 80px)) !important;
   }

   .button {
      width: min(310px, calc(100vw - 80px)) !important;
   }

   .hero-panel dd,
   .contact-row strong {
      font-size: 1rem;
      overflow-wrap: anywhere;
   }
}