* {
     box-sizing: border-box
 }

 html,
 body {
     margin: 0;
     background: #ffffff;
     color: #0f172a;
     font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
     line-height: 1.65;
     scroll-behavior: smooth
 }

 a {
     color: #2563eb;
     text-decoration: none
 }

 a:hover {
     text-decoration: underline
 }

 .container {
     max-width: clamp(1100px, 94vw, 1440px);
     margin: 0 auto;
     padding: clamp(20px, 3vw, 40px)
 }

 /* HERO */
 header.hero {
     border-bottom: 1px solid #e2e8f0;
     background: linear-gradient(120deg, rgba(37, 99, 235, .06), rgba(147, 51, 234, .06))
 }

 .crumbs {
     font-size: 13px;
     color: #64748b;
     margin-bottom: 10px
 }

 .crumbs a {
     color: #64748b
 }

 h1 {
     margin: 10px 0 6px;
     font-size: clamp(32px, 3.2vw, 52px);
     line-height: 1.15;
     letter-spacing: -.01em
 }

 .sub {
     color: #64748b;
     max-width: 72ch
 }

 /* 3-col grid */
 .grid-3col {
     display: grid;
     gap: 28px;
     grid-template-columns: 260px minmax(0, 1fr) 260px
 }

 @media (min-width:1280px) {
     .grid-3col {
         grid-template-columns: 280px minmax(0, 1fr) 280px;
         gap: 34px
     }
 }

 @media (min-width:1536px) {
     .grid-3col {
         grid-template-columns: 300px minmax(0, 1fr) 280px
     }
 }

 @media (max-width:1100px) {
     .grid-3col {
         grid-template-columns: 1fr
     }

     .sidebar-left,
     .services {
         position: static
     }
 }

 /* LEFT SIDEBAR */
 .sidebar-left {
     position: sticky;
     top: 24px;
     align-self: start;
     display: flex;
     flex-direction: column;
     gap: 16px;
     max-height: none;
     overflow: visible;
     scrollbar-width: none
 }

 .sidebar-left::-webkit-scrollbar {
     display: none
 }

 .side-section {
     background: #f9fafb;
     border: 1px solid #e2e8f0;
     border-radius: 14px;
     box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
     padding: 16px
 }

 .side-section h3 {
     margin: 0 0 10px;
     font-size: 14px;
     color: #64748b;
     letter-spacing: .06em;
     text-transform: uppercase
 }

 /* On this page */
 .nav {
     display: flex;
     flex-direction: column;
     gap: 6px
 }

 .link {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
     border-radius: 10px;
     color: #0f172a;
     border-left: 3px solid transparent;
     position: relative
 }

 .link:hover {
     background: rgba(37, 99, 235, .06)
 }

 .dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: #cbd5e1;
     flex: 0 0 auto;
     box-shadow: inset 0 0 0 2px #fff
 }

 #page-toc .link.active,
 [aria-current="true"] {
     background: rgba(37, 99, 235, .10);
     border-left-color: #2563eb;
     color: #0b3ea8;
     font-weight: 600
 }

 #page-toc .link.active .dot,
 [aria-current="true"] .dot {
     background: #2563eb
 }

 /* Brochure */
 .brochure p {
     margin: 6px 0 12px;
     color: #64748b;
     font-size: 14px
 }

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

 .btn {
     appearance: none;
     border: 0;
     cursor: pointer;
     font-weight: 600;
     padding: 9px 12px;
     border-radius: 10px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px
 }

 .btn.primary {
     background: linear-gradient(90deg, #2563eb, #9333ea);
     color: #fff;
     box-shadow: 0 3px 8px rgba(37, 99, 235, .20)
 }

 .btn.outline {
     background: #fff;
     color: #2563eb;
     border: 1px solid #e2e8f0
 }

 .ico {
     width: 16px;
     height: 16px;
     display: inline-block
 }

 /* Work Together */
 .work .badge {
     --size: 72px;
     width: 72px;
     height: 72px;
     border-radius: 999px;
     display: grid;
     place-items: center;
     margin-bottom: 10px;
     background: radial-gradient(120% 120% at 20% 20%, rgba(37, 99, 235, .18), rgba(147, 51, 234, .12));
     border: 1px solid #e2e8f0
 }

 .work .badge svg {
     width: 38px;
     height: 38px;
     color: #1e40af
 }

 .work p {
     margin: 6px 0 10px;
     color: #64748b;
     font-size: 14px
 }

 .work ul {
     margin: 8px 0 0 18px;
     padding: 0
 }

 .work li {
     margin: 6px 0;
     color: #334155;
     font-size: 14px
 }

 /* RIGHT services */
 .services {
     position: sticky;
     top: 24px;
     align-self: start;
     padding: 16px;
     background: #f9fafb;
     border: 1px solid #e2e8f0;
     border-radius: 14px
 }

 .services h3 {
     margin: 0 0 8px;
     font-size: 14px;
     color: #64748b;
     letter-spacing: .04em
 }

 .services .group-title {
     margin-top: 12px;
     margin-bottom: 6px;
     color: #0f172a;
     font-weight: 700;
     font-size: 13px
 }

 .services .nav {
     gap: 4px;
     margin-bottom: 10px
 }

 .services .link {
     padding: 7px 10px;
     font-size: 14px;
     border-left-width: 2px
 }

 .services .link:hover {
     background: #f8fafc;
     border-left-color: #2563eb
 }

 .services .dot {
     width: 7px;
     height: 7px;
     background: #d1d5db
 }

 .services .link.active,
 .services .link[aria-current="true"] {
     background: rgba(37, 99, 235, .10);
     border-left-color: #2563eb;
     color: #0b3ea8;
     font-weight: 600
 }

 .services .link.active .dot,
 .services .link[aria-current="true"] .dot {
     background: #2563eb;
 }

 /* CONTENT */
 section.section {
     background: #f9fafb;
     border: 1px solid #e2e8f0;
     border-radius: 14px;
     box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
     padding: 24px;
     scroll-margin-top: 80px
 }

 .eyebrow {
     font-size: 12px;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: #64748b
 }

 .lead {
     color: #334155;
     max-width: 75ch
 }

 h2 {
     margin: 0 0 8px;
     font-size: clamp(22px, 3.4vw, 30px)
 }

 .hr {
     height: 1px;
     background: #e2e8f0;
     margin: 24px 0
 }

 .cards {
     display: grid;
     gap: 18px;
     grid-template-columns: repeat(2, minmax(0, 1fr))
 }

 @media (max-width:800px) {
     .cards {
         grid-template-columns: 1fr
     }
 }

 .card {
     background: #ffffff;
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     padding: 18px;
     transition: transform .18s ease, box-shadow .18s ease;
     border-left: 3px solid transparent
 }

 .card:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(15, 23, 42, .12);
     border-left-color: #2563eb
 }

 .card h3 {
     margin: 0 0 6px;
     font-size: 18px
 }

 .pill {
     display: inline-block;
     font-size: 12px;
     color: #fff;
     background: linear-gradient(90deg, #2563eb, #9333ea);
     padding: 4px 10px;
     border-radius: 999px;
     font-weight: 600;
     margin-bottom: 10px
 }

 ul.clean {
     margin: 8px 0 0 0;
     padding-left: 18px
 }

 ul.clean li {
     margin: 6px 0
 }

 .muted {
     color: #64748b
 }

 .callout {
     margin: 14px 0;
     padding: 14px 16px;
     border: 1px solid #e2e8f0;
     border-radius: 10px;
     background: rgba(37, 99, 235, .05)
 }



 /* new other css  */