/* About Page Styles */

.about .article-title {
     margin-bottom: 24px;
}

.about-intro {
     margin-bottom: 34px;
     padding: 24px;
     border: 1px solid var(--jet);
     border-radius: var(--radius-lg);
     background: linear-gradient(140deg, hsla(230, 28%, 15%, 0.66), hsla(220, 22%, 10%, 0.56));
     box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.05);
}

.intro-content h3 {
     color: var(--white-2);
     font-size: var(--fs-2);
     margin-bottom: 14px;
     background: var(--text-gradient-yellow);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}

.intro-content>p {
     color: var(--light-gray);
     font-size: var(--fs-6);
     line-height: 1.75;
     margin-bottom: 20px;
     max-width: 80ch;
}

.intro-content .intro-objective {
     margin-top: 2px;
     margin-bottom: 24px;
     color: var(--light-gray-70);
     border-left: 3px solid hsla(42, 96%, 62%, 0.6);
     padding-left: 14px;
}

.intro-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
     gap: 14px;
}

.stat-item {
     text-align: center;
     padding: 18px 14px;
     background: var(--border-gradient-onyx);
     border-radius: var(--radius-md);
     position: relative;
     transition: transform var(--transition-1);
     border: 1px solid hsla(42, 96%, 62%, 0.2);
}

.stat-item::before {
     content: "";
     position: absolute;
     inset: 1px;
     background: var(--bg-gradient-jet);
     border-radius: inherit;
     z-index: -1;
}

.stat-item:hover {
     transform: translateY(-5px);
}

.stat-number {
     font-size: var(--fs-1);
     color: var(--orange-yellow-crayola);
     font-weight: var(--fw-600);
     margin-bottom: 5px;
}

.stat-label {
     font-size: var(--fs-7);
     color: var(--light-gray-70);
}

.about-text {
     color: var(--light-gray);
     font-size: var(--fs-6);
     font-weight: var(--fw-300);
     line-height: 1.6;
     text-align: justify;
}

.about-text p {
     margin-bottom: 15px;
}

/* Services Section */
.service {
     margin-bottom: 34px;
}

.service-title {
     margin-bottom: 25px;
}

.service-list {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px;
}

.service-item {
     position: relative;
     background: var(--border-gradient-onyx);
     padding: 24px;
     border-radius: var(--radius-md);
     transition: transform var(--transition-1);
     display: flex;
     gap: 16px;
     align-items: flex-start;
     border: 1px solid hsla(42, 96%, 62%, 0.14);
}

.service-item::before {
     content: "";
     position: absolute;
     inset: 1px;
     background: var(--bg-gradient-jet);
     border-radius: inherit;
     z-index: -1;
}

.service-item:hover {
     transform: translateY(-5px);
}

.service-icon-box {
     margin-bottom: 10px;
     /*  */
     flex-shrink: 0;
}

.service-icon-box img {
     margin: auto;
     /*  */
     width: 50px;
     height: 50px;
}

.service-content-box {
     text-align: left;
     flex: 1;
}

.service-item-title {
     margin-bottom: 10px;
     font-weight: var(--fw-500);
     color: var(--white-2);
     font-size: var(--fs-4);
}

.service-item-text {
     color: var(--light-gray);
     font-size: var(--fs-6);
     line-height: 1.6;
}

/* Companies Section */
.companies {
     margin-bottom: 30px;
}

.companies-title {
     margin-bottom: 25px;
}

.companies-list {
     display: flex;
     gap: 18px;
     padding: 12px 0 20px;
     overflow-x: auto;
     scroll-behavior: smooth;
     scroll-snap-type: x proximity;
     overscroll-behavior-inline: contain;
     scroll-padding-inline: 6px;
     scrollbar-width: none;
}

.companies-list::-webkit-scrollbar {
     display: none;
}

.companies-item {
     min-width: min(86vw, 340px);
     flex: 0 0 auto;
     scroll-snap-align: center;
}

.companies-item .content-card {
     min-height: 100%;
     cursor: pointer;
     transition: transform var(--transition-1), border-color var(--transition-1), box-shadow var(--transition-1);
}

.companies-item .content-card:hover {
     transform: translateY(-4px);
     border-color: hsla(42, 96%, 62%, 0.42);
     box-shadow: 0 14px 30px hsla(0, 0%, 0%, 0.28);
}

.companies-avatar-box {
     position: absolute;
     top: 0;
     left: 0;
     transform: translate(15px, -25px);
     background: var(--bg-gradient-onyx);
     border-radius: var(--radius-md);
     border: 1px solid var(--jet);
     box-shadow: var(--shadow-2);
}

.companies-item-title {
     margin-bottom: 8px;
     font-weight: var(--fw-500);
}

.companies-role {
     color: var(--light-gray-70);
     font-size: var(--fs-7);
     margin-bottom: 8px;
}

.companies-text {
     color: var(--light-gray);
     font-size: var(--fs-6);
     line-height: 1.6;
     text-align: justify;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.modal-role {
     margin-top: 2px;
     margin-bottom: 10px;
     color: var(--vegas-gold);
     font-size: var(--fs-7);
     font-weight: var(--fw-500);
}

.modal-tech-stack {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 12px;
}

.modal-tech-chip,
.modal-tech-empty {
     padding: 4px 9px;
     border-radius: 999px;
     font-size: var(--fs-8);
     border: 1px solid hsla(42, 96%, 62%, 0.35);
     background: hsla(42, 96%, 62%, 0.1);
     color: var(--white-2);
}

/* Modal */
.modal-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow-y: auto;
     z-index: 20;
     pointer-events: none;
     visibility: hidden;
}

.modal-container::-webkit-scrollbar {
     display: none;
}

.modal-container.active {
     pointer-events: all;
     visibility: visible;
}

.overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background: hsla(222, 28%, 8%, 0.78);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     opacity: 0;
     visibility: hidden;
     z-index: 1;
     transition: var(--transition-1);
}

.overlay.active {
     opacity: 0.8;
     visibility: visible;
}

body.modal-open {
     overflow: hidden;
     height: 100vh;
}

.modal-container.active {
     align-items: center; /* ensure modal centers in viewport when open */
}

.companies-modal {
     background: linear-gradient(150deg, hsla(230, 24%, 16%, 0.95), hsla(224, 20%, 11%, 0.95));
     position: relative;
     padding: 20px;
     margin: 15px 12px;
     border: 1px solid var(--jet);
     border-radius: 14px;
     box-shadow: var(--shadow-5);
     transform: translateY(14px) scale(0.96);
     opacity: 0;
     transition: none;
     z-index: 2;
     max-width: 760px;
     width: min(94vw, 760px);
}

.modal-container.active .companies-modal {
     transform: translateY(0) scale(1);
     opacity: 1;
     transition: var(--transition-1);
     animation: modalFadeIn 0.3s ease-out forwards;
}

@keyframes modalFadeIn {
     0% {
          transform: scale(0.9);
          opacity: 0;
     }

     100% {
          transform: scale(1);
          opacity: 1;
     }
}

.modal-close-btn {
     position: absolute;
     top: 15px;
     right: 15px;
     background: var(--onyx);
     border-radius: var(--radius-sm);
     width: 32px;
     height: 32px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--white-2);
     font-size: 18px;
     opacity: 0.7;
     transition: opacity var(--transition-1);
}

.modal-close-btn:hover {
     opacity: 1;
}

.modal-close-btn ion-icon {
     --ionicon-stroke-width: 50px;
}

.modal-avatar-box {
     background: var(--bg-gradient-onyx);
     width: max-content;
     border-radius: 14px;
     margin-bottom: 15px;
     box-shadow: var(--shadow-2);
}

.modal-img-wrapper>img {
     display: none;
}

.modal-title {
     margin-bottom: 4px;
}

.modal-content time {
     font-size: var(--fs-6);
     color: var(--light-gray-70);
     font-weight: var(--fw-300);
     margin-bottom: 10px;
}

.modal-content p {
     color: var(--light-gray);
     font-size: var(--fs-6);
     font-weight: var(--fw-300);
     line-height: 1.6;
}

/* Responsive */
@media (min-width: 580px) {
     .about .article-title {
          margin-bottom: 20px;
     }

     .about-text {
          margin-bottom: 40px;
     }

     .about-intro {
          padding: 28px;
     }

     .service-item {
          display: flex;
          align-items: flex-start;
          gap: 18px;
          padding: 30px;
     }

     .service-icon-box {
          margin-bottom: 0;
          margin-top: 5px;
     }

     .companies-title {
          margin-bottom: 25px;
     }

     .companies-list {
          gap: 20px;
          margin: 0 -12px;
          padding: 18px 12px 26px;
     }

     .companies-avatar-box {
          transform: translate(30px, -30px);
          border-radius: var(--radius-xl);
     }

     .companies-avatar-box img {
          width: 80px;
     }

     .companies-item-title {
          margin-bottom: 10px;
          margin-left: 95px;
     }

     .companies-text {
          -webkit-line-clamp: 2;
     }

     .companies-modal {
          display: flex;
          gap: 25px;
          padding: 30px;
          border-radius: var(--radius-xl);
     }

     .modal-img-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
     }

     .modal-avatar-box {
          border-radius: 18px;
          margin-bottom: 0;
     }

     .modal-avatar-box img {
          width: 65px;
     }

     .modal-img-wrapper>img {
          display: block;
          flex-grow: 1;
          width: 35px;
     }

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

     .intro-stats {
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
     }
}

@media (min-width: 768px) {
     .companies-item {
          flex: 0 0 calc(50% - 12px);
          width: calc(50% - 12px);
     }

     .companies-modal {
          gap: 35px;
          max-width: 680px;
     }

     .modal-avatar-box img {
          width: 80px;
     }

}

@media (min-width: 1024px) {
     .service-list {
          grid-template-columns: 1fr 1fr;
          gap: 25px;
     }

     .companies-item {
          flex: 0 0 calc(50% - 12px);
          width: calc(50% - 12px);
     }

     .about-intro {
          padding: 30px;
     }
}