:root {
   --dark: #131F26;
   --mid: #323F47;
   --white: #FFFFFF;
   --gray-1: #F2F2F0;
   --gray-2: #D8D8D6;
   --gray-3: #999994;
   --accent: #2B6CB0;
   --accent2: #E8593C;
   --nav-h: 80px;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
   scroll-padding-top: var(--nav-h);
   -webkit-text-size-adjust: 100%;
 }

 body {
   background: var(--white);
   color: var(--dark);
   font-family: 'Outfit', sans-serif;
   font-size: 16px;
   line-height: 1.6;
   overflow-x: hidden;
 }

 /* NAV */
 nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   height: var(--nav-h);
   padding: 0 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(4px);
   border-bottom: 0.5px solid rgba(19, 31, 38, 0.08);
 }

 .logo {
   display: block;
   height: 40px;
   width: auto;
   object-fit: contain;
 }

 .nav-toggle {
   display: none;
 }

 .logo span {
   display: block;
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   opacity: 0.6;
   font-family: 'Outfit', sans-serif;
   margin-top: 2px;
 }

 .nav-links {
   display: flex;
   gap: 40px;
   list-style: none;
   font-size: 16px;
   font-weight: 300;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }

 .nav-links a {
   color: var(--dark);
   text-decoration: none;
   transition: color 0.2s;
   opacity: 0.6;
 }

 .nav-links a:hover {
   opacity: 1;
 }

 /* LOGO BANNER */
 .logo-banner {
   position: relative;
   width: 100%;
   height: 200px;
   display: flex;
   align-items: center;
   background: var(--white);
   border-bottom: 0.5px solid rgba(19, 31, 38, 0.08);
   overflow: hidden;
   margin-top: var(--nav-h);
 }

 .logo-track {
   display: flex;
   width: max-content;
   animation: scroll-logos 25s linear infinite;
   will-change: transform;
 }

 .logo-group {
   display: flex;
   gap: 80px;
   align-items: center;
   padding-right: 80px;
 }

 .banner-logo {
   width: 220px;
   height: 88px;
   object-fit: contain;
   flex-shrink: 0;
 }

 @keyframes scroll-logos {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 /* SECTIONS */
 section {
   padding: 120px 60px;
   max-width: 1400px;
   margin: 0 auto;
 }

 .section-label {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--gray-3);
   margin-bottom: 16px;
 }

 h1,
 h2,
 h3,
 h4 {
   font-family: 'Unbounded', sans-serif;
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.03em;
   color: var(--dark);
 }

 /* HERO */
 .hero {
   display: flex;
   flex-direction: column;
   padding: 80px 60px 80px;
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, var(--white) 0%, var(--gray-1) 100%);
 }

 .hero-content {
   max-width: 1400px;
   margin: 0 auto;
   width: 100%;
 }

 .hero-bg {
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 800px 600px at 80% 40%, rgba(--accent, 0.08) 0%, transparent 70%);
   pointer-events: none;
 }

 .hero-eyebrow {
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--dark);
   margin-bottom: 24px;
   font-family: 'Outfit', sans-serif;
   font-weight: 500;
   position: relative;
   z-index: 2;
 }

 .hero-title {
   font-family: 'Unbounded', sans-serif;
   font-size: clamp(48px, 8vw, 120px);
   font-weight: 900;
   line-height: 0.95;
   letter-spacing: -0.04em;
   margin-bottom: 40px;
   position: relative;
   z-index: 2;
   color: var(--dark);
 }

 .hero-bottom {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-top: 60px;
   position: relative;
   z-index: 2;
 }

 .hero-desc {
   font-size: 15px;
   color: rgba(19, 31, 38, 0.6);
   max-width: 340px;
   line-height: 1.7;
 }

 .cta-button {
   padding: 16px 40px;
   background: var(--dark);
   color: var(--white);
   border: none;
   font-family: 'Unbounded', sans-serif;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-decoration: none;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
   border-radius: 2px;
 }

 .cta-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 24px var(--gray-2);
 }

 /* DIVIDER */
 .divider {
   height: 0.5px;
   background: rgba(19, 31, 38, 0.1);
   margin: 0 60px;
 }

 /* SERVICES */
 .services-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px;
   margin-top: 60px;
 }

 .service-card {
   padding: 48px;
   border: 0.5px solid rgba(19, 31, 38, 0.08);
   background: var(--white);
   transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }

 .service-card:hover {
   border-color: var(--dark);
   box-shadow: 0 24px 48px rgba(--accent);
   transform: translateY(-4px);
 }

 .service-number {
   font-family: 'Unbounded', sans-serif;
   font-size: 11px;
   font-weight: 400;
   color: rgba(19, 31, 38, 0.2);
   margin-bottom: 16px;
 }

 .service-card h3 {
   font-size: clamp(24px, 4vw, 32px);
   margin-bottom: 16px;
 }

 .service-card p {
   font-size: 15px;
   color: rgba(19, 31, 38, 0.6);
   line-height: 1.8;
 }

 /* ABOUT */
 .about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: start;
 }

 .about-content h2 {
   font-size: clamp(32px, 4vw, 56px);
   margin-bottom: 32px;
 }

 .about-content p {
   font-size: 15px;
   color: rgba(19, 31, 38, 0.6);
   margin-bottom: 24px;
   line-height: 1.8;
 }

 .about-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2px;
   margin-top: 40px;
 }

 .stat-box {
   padding: 32px;
   background: var(--gray-1);
   border: 0.5px solid rgba(19, 31, 38, 0.06);
 }

 .stat-number {
   font-family: 'Unbounded', sans-serif;
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -0.04em;
   margin-bottom: 8px;
 }

 .stat-label {
   font-size: 12px;
   color: rgba(19, 31, 38, 0.35);
   letter-spacing: 0.06em;
   text-transform: uppercase;
   font-weight: 500;
 }

 .about-highlight {
   padding: 40px;
   background: var(--gray-1);
   border: 0.5px solid rgba(19, 31, 38, 0.08);
   border-left: 3px solid var(--dark);
 }

 .about-highlight p {
   font-family: 'Unbounded', sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 1.8;
   color: var(--dark);
   margin: 0;
 }

 /* PROCESS */
 .process-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 2px;
   margin-top: 60px;
 }

 .process-step {
   padding: 48px 32px;
   background: var(--gray-1);
   border: 0.5px solid rgba(19, 31, 38, 0.08);
   position: relative;
   text-align: center;
 }

 .process-step::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--dark);
 }

 .step-number {
   font-family: 'Unbounded', sans-serif;
   font-size: 32px;
   font-weight: 700;
   color: var(--dark);
   margin-bottom: 12px;
 }

 .step-title {
   font-family: 'Unbounded', sans-serif;
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 12px;
 }

 .step-desc {
   font-size: 13px;
   color: rgba(19, 31, 38, 0.5);
   line-height: 1.6;
 }

 /* CONTACT */
 .contact-section {
   background: var(--dark);
   color: var(--white);
   padding: 120px 60px;
   max-width: 100%;
   margin: 120px 0 0 0;
 }

 .contact-container {
   max-width: 600px;
   margin: 0 auto;
 }

 .contact-label {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.4);
   margin-bottom: 16px;
 }

 .contact-title {
   font-family: 'Unbounded', sans-serif;
   font-size: clamp(32px, 4vw, 56px);
   font-weight: 700;
   letter-spacing: -0.03em;
   margin-bottom: 16px;
 }

 .contact-title-light {
   font-family: 'Unbounded', sans-serif;
   font-size: clamp(32px, 4vw, 56px);
   font-weight: 700;
   letter-spacing: -0.03em;
   margin-bottom: 16px;
   color: var(--white);
 }

 .contact-desc {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.5);
   margin-bottom: 60px;
   line-height: 1.8;
 }

 .form-group {
   margin-bottom: 32px;
 }

 .form-group label {
   display: block;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-bottom: 12px;
   color: rgba(255, 255, 255, 0.6);
 }

 .form-group input,
 .form-group textarea {
   width: 100%;
   padding: 16px;
   background: rgba(255, 255, 255, 0.05);
   border: 0.5px solid rgba(255, 255, 255, 0.1);
   color: var(--white);
   font-family: 'Outfit', sans-serif;
   font-size: 14px;
   transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
   color: rgba(255, 255, 255, 0.3);
 }

 .form-group input:focus,
 .form-group textarea:focus {
   outline: none;
   background: rgba(255, 255, 255, 0.08);
   border-color: var(--dark);
   box-shadow: 0 0 0 2px var(--accent);
 }

 .form-group textarea {
   resize: vertical;
   min-height: 120px;
 }

 .submit-btn {
   width: 100%;
   padding: 16px;
   background: var(--dark);
   color: var(--white);
   border: none;
   font-family: 'Unbounded', sans-serif;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }

 .submit-btn:hover {
   background: var(--mid);
   transform: translateY(-2px);
 }

 /* FOOTER */
 footer {
   padding: 60px;
   border-top: 0.5px solid rgba(19, 31, 38, 0.1);
   text-align: center;
   background: var(--gray-1);
 }

 footer p {
   font-size: 12px;
   color: rgba(19, 31, 38, 0.4);
   letter-spacing: 0.04em;
   margin: 8px 0;
 }

 /* ANIMATIONS */
 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .fade-in {
   opacity: 0;
   animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

 .delay-1 {
   animation-delay: 0.1s;
 }

 .delay-2 {
   animation-delay: 0.2s;
 }

 .delay-3 {
   animation-delay: 0.3s;
 }

 /* RESPONSIVE */
 @media (max-width: 1024px) {
   :root {
     --nav-h: 72px;
   }

   nav {
     padding: 0 40px;
   }

   section {
     padding: 100px 40px;
   }

   .hero {
     padding: 80px 40px;
   }

   .divider {
     margin: 0 40px;
   }

   .logo-banner {
     height: 300px;
   }

   .banner-logo {
     height: 100px;
   }

   .services-grid {
     gap: 32px;
   }

   .about-grid {
     gap: 60px;
   }

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

 @media (max-width: 768px) {
   :root {
     --nav-h: 64px;
   }

   nav {
     padding: 0 20px;
   }

   .nav-toggle {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 7px;
     width: 44px;
     height: 44px;
     margin-right: -10px;
     padding: 10px;
     background: none;
     border: none;
     cursor: pointer;
   }

   .nav-toggle span {
     display: block;
     height: 1.5px;
     background: var(--dark);
     transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
   }

   nav.open .nav-toggle span:first-child {
     transform: translateY(4.25px) rotate(45deg);
   }

   nav.open .nav-toggle span:last-child {
     transform: translateY(-4.25px) rotate(-45deg);
   }

   .nav-links {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     flex-direction: column;
     gap: 0;
     padding: 8px 20px 24px;
     background: var(--white);
     border-bottom: 0.5px solid rgba(19, 31, 38, 0.08);
     box-shadow: 0 16px 32px rgba(19, 31, 38, 0.08);
     font-size: 15px;
     animation: none;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px);
     transition: opacity 200ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 200ms;
   }

   nav.open .nav-links {
     opacity: 1;
     visibility: visible;
     transform: none;
   }

   .nav-links a {
     display: block;
     padding: 16px 0;
     border-bottom: 0.5px solid rgba(19, 31, 38, 0.08);
   }

   .nav-links li:last-child a {
     border-bottom: none;
   }

   section {
     padding: 80px 20px;
   }

   .hero {
     padding: 60px 20px;
   }

   .divider {
     margin: 0 20px;
   }

   .logo-banner {
     height: 140px;
   }

   .banner-logo {
     width: 160px;
     height: 64px;
   }

   .logo-group {
     gap: 48px;
     padding-right: 48px;
   }

   h1,
   h2,
   h3 {
     hyphens: auto;
     overflow-wrap: break-word;
   }

   .hero-title {
     font-size: clamp(36px, 7vw, 72px);
     margin-bottom: 32px;
   }

   .hero-bottom {
     flex-direction: column;
     align-items: flex-start;
     gap: 32px;
   }

   .cta-button {
     padding: 14px 32px;
     font-size: 11px;
   }

   .services-grid {
     grid-template-columns: 1fr;
     gap: 24px;
   }

   .service-card {
     padding: 32px;
   }

   .about-grid {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .about-stats {
     grid-template-columns: 1fr 1fr;
   }

   .about-highlight {
     padding: 32px;
   }

   .about-highlight p {
     font-size: 14px;
   }

   .process-grid {
     grid-template-columns: 1fr;
   }

   .process-step {
     padding: 32px 24px;
   }

   .step-number {
     font-size: 24px;
   }

   .step-title {
     font-size: 14px;
   }

   .contact-section {
     padding: 80px 20px;
     margin: 80px 0 0 0;
   }

   .contact-container {
     max-width: 100%;
   }

   .form-group input,
   .form-group textarea {
     padding: 14px;
     font-size: 16px;
     border-radius: 0;
   }

   .submit-btn {
     padding: 14px;
     font-size: 11px;
   }

   footer {
     padding: 40px 20px;
   }

   footer p {
     font-size: 11px;
   }
 }

 @media (max-width: 480px) {
   :root {
     --nav-h: 56px;
   }

   nav {
     padding: 0 16px;
   }

   .nav-links {
     padding: 8px 16px 24px;
   }

   section {
     padding: 60px 16px;
   }

   .hero {
     padding: 50px 16px;
   }

   .divider {
     margin: 0 16px;
   }

   .logo-banner {
     height: 110px;
   }

   .banner-logo {
     width: 130px;
     height: 52px;
   }

   .logo-group {
     gap: 36px;
     padding-right: 36px;
   }

   .logo {
     height: 32px;
   }

   .hero-eyebrow {
     font-size: 10px;
     margin-bottom: 16px;
   }

   .hero-title {
     font-size: clamp(30px, 9vw, 48px);
     margin-bottom: 24px;
   }

   .hero-bottom {
     flex-direction: column;
     gap: 24px;
   }

   .hero-desc {
     font-size: 14px;
     max-width: 100%;
   }

   .cta-button {
     padding: 16px 24px;
     font-size: 11px;
     width: 100%;
     text-align: center;
   }

   .section-label {
     font-size: 10px;
   }

   h1,
   h2,
   h3,
   h4 {
     font-size: 24px;
   }

   .service-card {
     padding: 24px;
   }

   .service-card h3 {
     font-size: clamp(18px, 3vw, 24px);
   }

   .service-card p {
     font-size: 13px;
   }

   .service-number {
     font-size: 10px;
     margin-bottom: 12px;
   }

   .about-content h2 {
     font-size: clamp(24px, 3vw, 40px);
   }

   .about-content p {
     font-size: 13px;
   }

   .stat-box {
     padding: 20px;
   }

   .stat-number {
     font-size: 20px;
   }

   .stat-label {
     font-size: 10px;
   }

   .about-highlight {
     padding: 24px;
   }

   .about-highlight p {
     font-size: 13px;
   }

   .process-step {
     padding: 24px 16px;
   }

   .step-number {
     font-size: 20px;
     margin-bottom: 8px;
   }

   .step-title {
     font-size: 13px;
   }

   .step-desc {
     font-size: 12px;
   }

   .contact-section {
     padding: 60px 16px;
     margin: 60px 0 0 0;
   }

   .contact-label {
     font-size: 10px;
   }

   .contact-title,
   .contact-title-light {
     font-size: 26px;
     margin-bottom: 12px;
   }

   .contact-desc {
     font-size: 13px;
     margin-bottom: 40px;
   }

   .form-group {
     margin-bottom: 24px;
   }

   .form-group label {
     font-size: 11px;
     margin-bottom: 8px;
   }

   .form-group input,
   .form-group textarea {
     padding: 12px;
     font-size: 16px;
   }

   .form-group textarea {
     min-height: 100px;
   }

   .submit-btn {
     padding: 16px;
     font-size: 11px;
   }

   footer {
     padding: 32px 16px;
   }

   footer p {
     font-size: 10px;
   }
 }
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;
   }

   .logo-track {
     animation-duration: 60s;
   }
 }