:root{
     --bg:#07090d;
     --bg-soft:#0f1420;
     --bg-card:#171821;
     --bg-card-2:#1a1c25;
     --line:rgba(255,255,255,.08);
     --text:#ffffff;
     --muted:rgba(255,255,255,.68);
     --blue:#148dff;
     --blue2:#0a64ff;
     --body-font:"Poppins", sans-serif;
     --heading-font:"Kanit", sans-serif;
     --utility-font:"DM Sans", sans-serif;
     --container:1330px;
     --radius-xl:42px;
     --radius-lg:30px;
     --radius-md:22px;
     --shadow:0 18px 50px rgba(0,0,0,.28);
}
 *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
 html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    color-scheme: dark;
    background: #07090d;
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
 body{
     font-family:var(--body-font);
     background: #07090d;
     color:var(--text);
     overflow-x:hidden;
     position:relative;
     min-height: 100vh;
     width: 100%;
     margin: 0 !important;
     padding: 0 !important;
}
 /* decorative overlays removed */
 .page-wrapper {
     padding-top: var(--header-h, 70px);
 }

 img{
    display:block;
    width:100%;
    height:auto;
}
 a{
    text-decoration:none;
    color:inherit;
}
 .container{
     width:min(var(--container), calc(100% - 32px));
     margin:0 auto;
     padding-inline:16px;
}
 .section{
    position:relative;
    z-index:1;
}
 h1, h2, h3, h4, h5, h6{
     font-family:var(--heading-font);
}
 .btn{
     display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:none;
    cursor:pointer;
     transition:.25s ease;
    font-family:var(--body-font);
    font-weight:600;
    white-space:nowrap;
}
 .btn:hover{
    transform:translateY(-2px);
}
 .btn-primary{
     height:58px;
    padding:0 34px;
    border-radius:999px;
    color:#fff;
    font-size:18px;
     background:linear-gradient(180deg, #17a3ff 0%, #0c68ff 100%);
     box-shadow:0 12px 35px rgba(18,120,255,.35);
}
 .btn-outline{
     height:62px;
    padding:0 36px;
    border-radius:999px;
    border:1.5px solid rgba(255,255,255,.55);
     color:#fff;
    background:transparent;
    font-size:18px;
}
 .btn-outline:hover{
    background:rgba(255,255,255,.05);
}
.hero-wrap{
    margin:24px auto 72px;
}
.hero-wrap .container{
     width:calc(100% - 24px);
     max-width:none;
     padding-inline:0;
}
.hero-box{
     background: radial-gradient(circle at 8% 12%, rgba(31,111,181,.16), transparent 30%), radial-gradient(circle at 82% 28%, rgba(193,58,255,.09), transparent 24%), linear-gradient(135deg, #0f2740 0%, #10263f 36%, #102139 70%, #0e1d32 100%);
     border-radius:46px;
    overflow:hidden;
    padding:18px 52px 34px;
    min-height:680px;
    box-shadow:var(--shadow);
     position:relative;
    border:1px solid rgba(255,255,255,.06);
}
 .hero-box::after{
     content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 40% 50%, rgba(255,255,255,.03), transparent 55%);
     pointer-events:none;
}
/* === NAVBAR (updated) === */
 .navbar{
     display:flex;
     align-items:center;
     gap:30px;
     position:relative;
     z-index:2;
}
 .logo{
     display:flex;
    align-items:center;
    gap:14px;
     font-size:34px;
    font-weight:800;
    letter-spacing:-.02em;
}
 .logo-icon{
     width:50px;
    height:50px;
    border-radius:50%;
    display:grid;
    place-items:center;
     background:linear-gradient(180deg, #19a7ff 0%, #0c69ff 100%);
     box-shadow:0 10px 26px rgba(12,105,255,.35);
    font-size:33px;
    font-weight:900;
    line-height:1;
}
 .nav-menu{
     display:flex;
     align-items:center;
     gap:42px;
     font-size:19px;
     font-weight:500;
     color:#fff;
     margin-left:auto;
    /* push nav menu to the right edge */
}
 .nav-menu a.active{
    color:var(--blue);
}
 .nav-menu a{
    transition:color .2s ease;
}
 .nav-menu a:hover{
    color:var(--blue);
}
 .navbar .btn-primary{
     margin-left:28px;
    /* tight gap between nav and button */
}
/* === /NAVBAR === */
.hero-main{
     margin-top:40px;
    display:grid;
    grid-template-columns:1.03fr .97fr;
    align-items:start;
    gap:20px;
    position:relative;
    z-index:2;
}
.hero-left{
    max-width:700px;
    padding-left:2px;
    padding-top:0;
}
 .eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:18px;
    font-weight:500;
    margin-bottom:18px;
    color:#f5f5f5;
}
 .eyebrow .spark{
    color:var(--blue);
    font-size:18px;
    font-weight:700;
    line-height:1;
}
 .hero-title{
    font-size:clamp(40px, 4vw, 56px);
    line-height:1.08;
    font-weight:700;
    letter-spacing:-.04em;
    margin-bottom:20px;
    max-width:700px;
}
 .hero-desc{
    max-width:640px;
    font-size:16px;
    line-height:1.5;
    color:var(--muted);
    margin-bottom:28px;
}
 .hero-actions{
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}
 .hero-link{
    font-size:15px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    text-decoration:underline;
    text-underline-offset:4px;
}
 .scribble{
    position:relative;
    display:inline-block;
    padding:0 .06em;
    z-index:1;
}
 .scribble::after{
     content:"";
    position:absolute;
    left:-10px;
    right:-10px;
    bottom:.08em;
    height:.46em;
    border:6px solid var(--blue);
    border-radius:999px;
    z-index:-1;
}
 .hero-right{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:470px;
    position:relative;
    padding-top:8px;
}
 .hero-right img{
     width:100%;
    max-width:640px;
    object-fit:contain;
    animation:heroSwing 7s ease-in-out infinite;
    transform-origin:center top;
     filter:drop-shadow(0 0 18px rgba(135, 85, 255, .14));
}
 @keyframes heroSwing {
     0%, 100% {
         transform: rotate(0deg) translateY(0);
    }
     25% {
         transform: rotate(1.2deg) translateY(-4px);
    }
     50% {
         transform: rotate(0deg) translateY(-7px);
    }
     75% {
         transform: rotate(-1.2deg) translateY(-4px);
    }
}
 .believe {
     padding: 20px 0 80px;
}
 .section-title-center {
     text-align: center;
     margin-bottom: 48px;
}
 .section-title-center h2 {
     font-size: clamp(30px, 2.96vw, 45px);
     line-height: 1.2;
     font-weight: 700;
     letter-spacing: -0.04em;
}
 .counter-banner {
     position: relative;
     margin: 0 100px;
     padding: 200px 0 25px 0;
     min-height: 430px;
     border-radius: 50px;
     overflow: hidden;
     background-image:
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
        url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=2000&q=85');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     background-color: #000;
}
 .stats-box {
     position: absolute;
     left: 50%;
     bottom: 28px;
     transform: translateX(-50%);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 54px;
     padding: 30px 38px;
     border-radius: 22px;
     background: rgba(88, 94, 105, 0.38);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     margin-bottom: 10px;
}
 .stat-item strong {
     display: block;
     font-size: 40px;
     line-height: 1;
     font-weight: 700;
     margin-bottom: 4px;
    
}
 .stat-item span {
     display: block;
     font-size: 14px;
     color: #fff;
     opacity: 0.95;
}
 .marquee{
    margin-top:74px;
    background:#2b2b30;
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
    overflow:hidden;
    white-space:nowrap;
}
 .marquee-track{
    display:inline-flex;
    align-items:center;
    gap:72px;
    min-width:max-content;
    padding:26px 0;
    animation:marquee 28s linear infinite;
}
 .marquee-item{
    display:inline-flex;
    align-items:center;
    gap:18px;
    font-size:16px;
    font-weight:500;
    letter-spacing:.02em;
}
 .marquee-star{
    color:var(--blue);
    font-size:16px;
    font-weight:900;
    line-height:1;
}
 .services{
     padding: 88px 0 40px;
     position: relative;
}
 .services-layout{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 70px 38px;
     align-items: start;
}
 .services-copy{
     grid-column: 1 / 3;
     padding-top: 26px;
     max-width: 760px;
}
 .services-copy h2{
     font-size: clamp(28px, 2.61vw, 42px);
     line-height: 1.1;
     font-weight: 700;
     letter-spacing: -0.04em;
     margin-bottom: 24px;
}
 .services-copy p{
     max-width: 720px;
     font-size: 17px;
     line-height: 1.5;
     color: var(--muted);
}
 .service-card{
     position: relative;
     min-height: 200px;
     background: #1a1a23;
     border-radius: 14px;
     text-align: center;
     padding: 58px 24px 34px;
     box-shadow: var(--shadow);
}
 .service-card-top{
     margin-top: 18px;
}
 .service-icon{
     position: absolute;
     top: -42px;
     left: 50%;
     transform: translateX(-50%);
     width: 94px;
     height: 94px;
     border-radius: 50%;
     background: #0b0d12;
     border: 6px solid #05070b;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--blue);
     font-size: 34px;
     box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}
 .service-card h3{
     font-size: 17px;
     line-height: 1.45;
     font-weight: 600;
     max-width: 250px;
     margin: 0 auto;
}
 .service-arrow{
     position: absolute;
     left: 50%;
     bottom: -16px;
     transform: translateX(-50%);
     width: 44px;
     height: 44px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255,255,255,.18);
     color: #fff;
     font-size: 20px;
}
@media (max-width: 1200px){
     .services-layout{
         grid-template-columns: repeat(2, 1fr);
    }
     .services-copy{
         grid-column: 1 / -1;
         max-width: 100%;
         padding-top: 0;
    }
     .service-card-top{
         margin-top: 0;
    }
}
 @media (max-width: 768px){
     .services{
         padding: 60px 0 30px;
    }
     .services-layout{
         grid-template-columns: 1fr;
         gap: 54px;
    }
     .services-copy h2{
         font-size: 35px;
    }
     .services-copy p{
         font-size: 17px;
    }
     .service-card{
         min-height: 180px;
         padding: 52px 20px 28px;
    }
     .service-icon{
         width: 78px;
         height: 78px;
         top: -34px;
         font-size: 28px;
    }
     .service-card h3{
         font-size: 19px;
    }
}
 .service-arrow{
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    width:46px;
    height:46px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:20px;
    background:rgba(255,255,255,.18);
    color:#fff;
}
 .gallery-grid{
    margin-top:32px;
    display:grid;
    grid-template-columns:1fr 1.05fr 1fr 1fr;
    gap:34px;
    align-items:start;
}
 .gallery-col{
    display:grid;
    gap:30px;
}
 .gallery-card{
    overflow:hidden;
    border-radius:14px;
    box-shadow:var(--shadow);
}
 .gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}
 .h-sm{
    height:215px
}
.h-md{
    height:245px
}
.h-tall{
    height:490px
}
 .steps {
     padding: 72px 0 92px;
}
 .steps-layout {
     display: grid;
     grid-template-columns: 460px minmax(0, 1fr);
     gap: 64px;
     align-items: start;
}
 .steps-left h2 {
     font-size: 63px;
     line-height: 1.12;
     font-weight: 700;
     letter-spacing: -0.04em;
     margin-bottom: 38px;
     max-width: 520px;
}
 .steps-visual {
     width: 100%;
     max-width: 430px;
     height: 435px;
     overflow: hidden;
     border-radius: 26px;
     box-shadow: var(--shadow);
}
 .steps-visual img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .steps-right {
     padding-top: 6px;
}
 .steps-right-top {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 24px;
}
 .steps-right-top .btn-primary {
     height: 58px;
     padding: 0 40px;
     font-size: 18px;
     font-weight: 600;
     border-radius: 999px;
}
 .step-row {
     display: grid;
     grid-template-columns: 74px 290px minmax(0, 1fr);
     gap: 42px;
     align-items: start;
     padding: 20px 0 22px;
     border-bottom: 1px solid rgba(255,255,255,.1);
}
 .step-row:last-child {
     border-bottom: none;
}
 .step-no {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(180deg, #1599ff 0%, #0867ff 100%);
     color: #fff;
     margin-top: 2px;
}
 .step-row h3 {
     font-size: 19px;
     line-height: 1.35;
     font-weight: 700;
     letter-spacing: -0.02em;
}
 .step-row p {
     font-size: 16px;
     line-height: 1.55;
     color: var(--muted);
     max-width: 640px;
}
 .blog{
    padding:90px 0 70px;
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    position:relative;
}
 .blog .container{
    position:relative;
    z-index:1;
}
 .blog-title{
    text-align:center;
    margin-bottom:62px;
}
 .blog-title h2{
    font-size: clamp(28px, 2.78vw, 44px);
    line-height:1.2;
    font-weight:700;
    letter-spacing:-.04em;
    max-width:1180px;
    margin:0 auto;
}
 .testimonial{
    padding:110px 0 40px;
    position:relative;
    overflow:hidden;
}
 .quote-big{
    position:absolute;
    font-size:560px;
    line-height:.7;
    color:rgba(7,84,168,.28);
    font-weight:800;
    pointer-events:none;
    user-select:none;
}
 .quote-left{
    left:24px;
    top:88px;
}
.quote-right{
    right:80px;
    bottom:16px;
}
 .testimonial-card{
    max-width:970px;
    min-height:460px;
    margin:0 auto;
    border-radius:44px;
    padding:58px 92px 70px;
    position:relative;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(20,24,31,.52);
    box-shadow:var(--shadow);
    backdrop-filter:blur(4px);
}
 .testimonial-author{
    text-align:center;
    position:relative;
    margin-top:-110px;
    margin-bottom:30px;
}
 .testimonial-author img{
    width:104px;
    height:104px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 16px;
    border:4px solid rgba(255,255,255,.12);
    box-shadow:var(--shadow);
}
 .testimonial-author h4{
    font-size:20px;
    font-weight:700;
    margin-bottom:4px;
}
 .testimonial-author p{
    font-size:16px;
    color:var(--muted);
}
 .testimonial-card blockquote{
    font-size:28px;
    line-height:1.55;
    font-weight:500;
    font-style:italic;
    max-width:760px;
    margin:30px auto 0;
    text-align:left;
}
 .float-dot{
    position:absolute;
    border-radius:50%;
    background:rgba(26,157,255,.55);
    box-shadow:0 0 18px rgba(26,157,255,.22);
}
 .dot-a{
    width:22px;
    height:22px;
    right:14px;
    top:118px;
}
.dot-b{
    width:110px;
    height:110px;
    right:-8px;
    bottom:34px;
    background:rgba(24,144,255,.28);
}
 .partners{
    padding:24px 0;
    background:#2a2a2e;
    margin-top:44px;
}
 .partners-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:24px;
    align-items:center;
}
 .partner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:16px;
    font-weight:500;
    color:#fff;
}
 .partner-mark{
    width:18px;
    height:18px;
    border-radius:50%;
    background:linear-gradient(180deg, #ff9900 0%, #ff6b00 100%);
    flex-shrink:0;
}
 .partner:nth-child(2) .partner-mark, .partner:nth-child(6) .partner-mark {
    background:linear-gradient(180deg,#ff5eb3,#ff2e85);
}
 .partner:nth-child(3) .partner-mark{
    background:linear-gradient(180deg,#18d5ff,#0b79ff);
    border-radius:4px;
}
 .partner:nth-child(4) .partner-mark{
    background:linear-gradient(180deg,#2ce366,#0eac40);
    border-radius:4px 50% 50% 50%;
}
 .steps {
     padding: 72px 0 92px;
}
 .steps-layout {
     display: grid;
     grid-template-columns: 430px minmax(0, 1fr);
     gap: 60px;
     align-items: start;
}
 .steps-left h2 {
     font-size: clamp(28px, 2.96vw, 45px);
     line-height: 1.1;
     font-weight: 700;
     letter-spacing: -0.04em;
     margin-bottom: 34px;
     max-width: 500px;
}
 .steps-visual {
     width: 100%;
     max-width: 430px;
     height: 435px;
     overflow: hidden;
     border-radius: 26px;
     box-shadow: var(--shadow);
}
 .steps-visual img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .steps-right {
     padding-top: 4px;
}
 .steps-right-top {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 24px;
}
 .steps-right-top .btn-primary {
     height: 58px;
     padding: 0 40px;
     font-size: 18px;
     font-weight: 600;
     border-radius: 999px;
}
 .step-row {
     display: grid;
     grid-template-columns: 70px 300px minmax(0, 1fr);
     gap: 28px;
     align-items: start;
     padding: 18px 0 20px;
     border-bottom: 1px solid rgba(255,255,255,.10);
}
 .step-row:last-child {
     border-bottom: none;
}
 .step-no {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 18px;
     font-weight: 600;
     background: linear-gradient(180deg, #1599ff 0%, #0867ff 100%);
     color: #fff;
     margin-top: 2px;
}
 .step-row h3 {
     font-size: 19px;
     line-height: 1.35;
     font-weight: 700;
     letter-spacing: -0.02em;
}
 .step-row p {
     font-size: 16px;
     line-height: 1.55;
     color: var(--muted);
     max-width: 620px;
}
 @media (max-width: 1200px) {
     .steps-layout {
         grid-template-columns: 1fr;
         gap: 36px;
    }
     .steps-left h2 {
         max-width: 700px;
    }
     .steps-visual {
         max-width: 420px;
    }
     .steps-right-top {
         justify-content: flex-start;
    }
     .step-row {
         grid-template-columns: 70px 280px 1fr;
    }
}
 @media (max-width: 768px) {
     .steps {
         padding: 58px 0 72px;
    }
     .steps-left h2 {
         font-size: 38px;
         line-height: 1.16;
         margin-bottom: 24px;
         max-width: 100%;
    }
     .steps-visual {
         max-width: 100%;
         height: 280px;
         border-radius: 20px;
    }
     .steps-right-top .btn-primary {
         height: 50px;
         padding: 0 24px;
         font-size: 15px;
    }
     .step-row {
         grid-template-columns: 52px 1fr;
         gap: 16px 18px;
         padding: 16px 0 18px;
    }
     .step-row h3 {
         font-size: 21px;
    }
     .step-row p {
         grid-column: 2;
         font-size: 17px;
         max-width: 100%;
    }
     .step-no {
         width: 40px;
         height: 40px;
         font-size: 16px;
    }
}
 .footer{
    padding:92px 0 36px;
    background:radial-gradient(circle at 20% 0%, rgba(12,79,141,.07), transparent 24%),linear-gradient(180deg, #0a0d12 0%, #080a0f 100%);
}
 .footer-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
    margin-bottom:52px;
}
 .footer-left h2{
    font-size: clamp(28px, 2.78vw, 44px);
    line-height:1.18;
    font-weight:700;
    letter-spacing:-.04em;
    max-width:650px;
}
 .footer-right{
    padding-top:8px;
}
 .subscribe{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    margin-bottom:26px;
    max-width:620px;
    margin-left:auto;
}
 .subscribe input{
    height:64px;
    border:none;
    outline:none;
    padding:0 24px;
    border-radius:18px;
    background:#5a5962;
    color:#fff;
    font-size:16px;
    font-family:var(--body-font);
}
 .subscribe input::placeholder{
    color:rgba(255,255,255,.6);
}
 .subscribe button{
    height:64px;
    padding:0 28px;
    border:none;
    border-radius:18px;
    background:var(--blue);
    color:#fff;
    font-size:16px;
    font-weight:600;
    font-family:var(--body-font);
    white-space:nowrap;
    cursor:pointer;
    transition:.2s ease;
}
 .subscribe button:hover{
    background:#0d6fd1;
}
 .footer-check{
    display:flex;
    align-items:flex-start;
    gap:14px;
    max-width:650px;
    margin-left:auto;
    font-size:16px;
    line-height:1.5;
    color:#fff;
}
 .footer-check input{
    width:20px;
    height:20px;
    margin-top:8px;
    flex-shrink:0;
}
 .footer-line{
    border-top:1px solid rgba(255,255,255,.12);
    margin:42px 0 44px;
}
 .footer-grid{
    display:grid;
    grid-template-columns:1fr .9fr 1fr .9fr .9fr;
    gap:28px;
}
 .footer-logo{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    text-decoration:none;
}
 .footer-logo-img {
    width: auto;
    height: 90px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 9px;
}
 .footer-logo-text {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    font-family: var(--body-font, 'Poppins', sans-serif);
    white-space: nowrap;
    line-height: 1;
}
 .footer-col h4{
    font-size:24px;
    font-weight:600;
    margin-bottom:22px;
}
 .footer-col-toggle i{
    display:none;
}
 .footer-col a{
    display:block;
    font-size:16px;
    color:var(--muted);
    margin-bottom:20px;
    transition:.2s ease;
}
 .footer-col a:hover{
    color:#fff;
    transform:translateX(4px);
}
 .footer-address{
    font-size:15px;
    line-height:1.6;
    color:var(--muted);
    margin:4px 0 14px;
    max-width:260px;
}
 .footer-address i{
    color:var(--blue);
    margin-right:6px;
}
 .footer-address-phone{
    display:block;
    font-size:16px;
    color:var(--muted);
    transition:.2s ease;
}
 .footer-bottom-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:28px;
    margin:0 0 32px;
}
 .footer-address--row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    white-space:nowrap;
    max-width:none;
    margin:0;
    gap:8px;
}
 .footer-bottom-row .footer-address-phone{
    margin:0;
}
 .footer-address-phone:hover{
    color:#fff;
    transform:translateX(4px);
}
 .footer-socials{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:18px;
}
 .footer-bottom-row .footer-socials{
    margin-top:0;
}
 .footer-socials a{
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.03);
    color:#fff;
    font-size:14px;
    transition:.2s ease;
}
 .footer-socials a:hover{
    background:var(--blue);
    border-color:var(--blue);
    transform:translateY(-2px);
}
 .copyright{
    border-top:1px solid rgba(255,255,255,.12);
    text-align:center;
    padding-top:22px;
    margin-top:38px;
    font-size:15px;
    color:var(--muted);
}
 @keyframes marquee{
    from{
        transform:translateX(0)
    }
    to{
        transform:translateX(-50%)
    }
}
 @media (max-width: 1600px){
     .container{
         width:min(var(--container), calc(100% - 60px));
         padding-inline:16px;
    }
     .hero-wrap .container{
         width:calc(100% - 28px);
         max-width:none;
    }
     .hero-title, .section-title-center h2, .services-copy h2, .steps-left h2, .blog-title h2, .footer-left h2 {
        font-size: clamp(26px, 2.61vw, 38px);
    }
     .testimonial-card blockquote{
        font-size:30px;
    }
     .step-row h3{
        font-size: 19px;
    }
     .blog-card h3{
        font-size: 19px;
    }
     .footer-col h4{
        font-size:22px;
    }
     .footer-col a, .copyright, .footer-check {
        font-size:16px;
    }
     .footer-col a{
        margin-bottom:18px;
    }
     .nav-menu{
        gap:32px;
        font-size:17px;
    }
     .navbar .btn-primary{
        margin-left:22px;
    }
}
 @media (max-width: 1200px){
     .nav-menu{
        display:none;
    }
     .navbar .btn-primary{
        margin-left:auto;
    }
     .hero-main, .services-top, .steps-layout, .footer-top {
        grid-template-columns:1fr;
    }
    .hero-box{
        min-height:auto;
        padding:22px 28px 32px;
    }
    .hero-right{
        margin-top:20px;
        min-height:auto;
        padding-top:0;
    }
     .services-cards, .gallery-grid, .blog-grid, .footer-grid, .partners-grid {
        grid-template-columns:1fr 1fr;
    }
     .step-row{
        grid-template-columns:64px 1fr;
    }
     .step-row p{
        grid-column:2 / -1;
    }
     .subscribe, .footer-check {
        margin-left:0;
    }
     .testimonial-card{
        padding:50px 40px 55px;
    }
}
 @media (max-width: 768px){
     .container{
         width:min(var(--container), calc(100% - 24px));
         padding-inline:12px;
    }
     .hero-wrap .container{
         width:calc(100% - 16px);
         max-width:none;
         padding-inline:0;
    }
     .hero-wrap{
         margin:18px auto 50px;
    }
     .hero-box{
        padding:20px 18px 28px;
        border-radius:28px;
    }
     .logo{
        font-size:28px;
    }
     .logo-icon{
        width:42px;
        height:42px;
        font-size:28px;
    }
    .hero-main{
        margin-top:44px;
    }
    .eyebrow{
        font-size:16px;
        margin-bottom:16px;
    }
     .eyebrow .spark{
        font-size:20px;
    }
    .hero-title, .section-title-center h2, .services-copy h2, .steps-left h2, .blog-title h2, .footer-left h2 {
        font-size: 28px;
    }
    .hero-box{
        padding:20px 18px 26px;
    }
    .hero-desc, .services-copy p, .step-row p, .footer-check {
        font-size:14px;
    }
     .btn-primary, .btn-outline {
        height:46px;
        padding:0 18px;
        font-size:14px;
    }
     .hero-link{
        font-size:13px;
    }
     .banner-card{
        height:290px;
        border-radius:22px;
    }
     .counter-banner{
        margin:0 16px;
        padding:150px 0 20px 0;
        min-height:360px;
    }
     .stats-box{
        left:14px;
        right:14px;
        bottom:14px;
        transform:none;
        min-width:auto;
        gap:16px;
        padding:16px 14px;
        flex-wrap:wrap;
        justify-content:center;
    }
     .stat-item{
        flex:1 1 calc(50% - 16px);
        min-width:110px;
        text-align:center;
    }
     .stat-item strong{
        font-size:30px;
    }
     .stat-item span{
        font-size:13px;
    }
     .marquee-item{
        font-size:14px;
    }
    .marquee-star{
        font-size:18px;
    }
     .services-cards, .gallery-grid, .blog-grid, .footer-grid, .partners-grid {
        grid-template-columns:1fr;
    }
     .gallery-col{
        gap:18px;
    }
    .gallery-grid{
        gap:18px;
    }
     .h-sm, .h-md, .h-tall {
        height:220px;
    }
     .service-card h3{
        font-size: 16px;
    }
     .service-icon{
        width:78px;
        height:78px;
        font-size:28px;
        top:-34px;
    }
     .steps-visual{
        width:100%;
        height:280px;
    }
     .steps-right-top{
        justify-content:flex-start;
    }
     .step-row{
        grid-template-columns:52px 1fr;
        gap:18px;
    }
     .step-row h3{
        font-size: 16px;
    }
     .step-no{
        width:38px;
        height:38px;
        font-size:16px;
    }
     .blog-image{
        height:220px;
    }
    .blog-meta{
        font-size:16px;
    }
    .blog-meta span{
        font-size:14px;
    }
     .blog-card h3{
        font-size: 16px;
    }
    .mini-badge{
        width:38px;
        height:38px;
        font-size:16px;
    }
     .quote-big{
        display:none;
    }
     .testimonial-card{
        min-height:auto;
        padding:34px 20px 28px;
        border-radius:24px;
    }
     .testimonial-author{
        margin-top:0;
    }
     .testimonial-author img{
        width:74px;
        height:74px;
    }
     .testimonial-author h4{
        font-size:20px;
    }
    .testimonial-author p{
        font-size:16px;
    }
     .testimonial-card blockquote{
        font-size:22px;
        line-height:1.55;
    }
     .footer{
        padding:58px 0 24px;
    }
     .subscribe{
        grid-template-columns:1fr auto;
    }
     .subscribe input{
        height:52px;
        font-size:14px;
        padding:0 16px;
    }
     .subscribe button{
        height:52px;
        padding:0 18px;
        font-size:14px;
    }
     .footer-col h4{
        font-size:18px;
        margin-bottom:16px;
    }
     .footer-col a{
        font-size:14px;
        margin-bottom:16px;
    }
     .copyright{
        font-size:15px;
    }
     .footer-grid{
        gap:6px;
    }
     .footer-bottom-row{
        flex-direction:column;
        gap:14px;
    }
     .footer-address--row{
        display:block;
        white-space:normal;
        text-align:center;
        font-size:14px;
    }
     .footer-col--collapsible{
        border-bottom:1px solid rgba(255,255,255,.08);
        padding-bottom:4px;
    }
     .footer-col-toggle{
        display:flex;
        align-items:center;
        justify-content:space-between;
        cursor:pointer;
        margin-bottom:0;
        padding:14px 2px;
    }
     .footer-col-toggle i{
        display:inline-block;
        font-size:13px;
        color:var(--muted);
        transition:transform .25s ease;
    }
     .footer-col--collapsible.is-open .footer-col-toggle i{
        transform:rotate(180deg);
    }
     .footer-col-links{
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease;
    }
     .footer-col--collapsible.is-open .footer-col-links{
        max-height:300px;
    }
     .footer-col-links a{
        margin-bottom:14px;
    }
     .footer-col-links a:first-child{
        margin-top:4px;
    }
     .scribble::after{
        border-width:3px;
        height:.36em;
        bottom:.14em;
    }
}

/* ===========================================================
   ABOUT US PAGE
   =========================================================== */

/* ---------- Page Header (title + breadcrumb) ---------- */
.page-hero-wrap {
    margin: 38px auto 70px;
}
.page-hero-wrap .container {
    width: min(1560px, calc(100% - 200px));
    padding-inline: 0;
}
.page-hero-box {
    background:
        radial-gradient(circle at 8% 12%, rgba(31,111,181,.22), transparent 36%),
        radial-gradient(circle at 82% 28%, rgba(193,58,255,.09), transparent 24%),
        linear-gradient(135deg, #0f2740 0%, #10263f 36%, #102139 70%, #0e1d32 100%);
    border-radius: 46px;
    overflow: hidden;
    padding: 34px 52px 64px;
    box-shadow: var(--shadow);
    position: relative;
    border: 1px solid rgba(255,255,255,.06);
}
.page-hero-content {
    text-align: center;
    margin-top: 60px;
    position: relative;
    z-index: 2;
}
.page-hero-content h1 {
    font-size: clamp(30px, 3.12vw, 48px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: 18px;
}
.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    color: #fff;
}
.breadcrumb i {
    color: #fff;
    font-size: 18px;
}
.breadcrumb .sep {
    color: var(--blue);
    font-weight: 700;
    letter-spacing: 1px;
}
.breadcrumb .current {
    color: var(--blue);
}

/* ---------- About Ideas (image + text + 4 cells) ---------- */
.about-ideas {
    padding: 30px 0 90px;
}
.about-ideas-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.about-ideas-image {
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 1 / 1;
}
.about-ideas-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-ideas-text h2 {
    font-size: clamp(30px, 2.61vw, 40px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 22px;
}
.about-ideas-text > p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 36px;
    max-width: 540px;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 48px;
}
.about-grid-item h4 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -.01em;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ---------- Specialist Section (timeline + image) ---------- */
.specialist {
    padding: 80px 0 100px;
}
.specialist-layout {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 70px;
    align-items: center;
}
.specialist-left h2 {
    font-size: clamp(30px, 2.61vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 22px;
}
.specialist-left > p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 42px;
    max-width: 520px;
}
.timeline {
    position: relative;
    padding-left: 30px;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(255,255,255,.18);
}
.timeline-item {
    position: relative;
    padding-bottom: 34px;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(20,141,255,.18);
}
.timeline-item h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 8px;
}
.timeline-item p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    max-width: 420px;
}
.specialist-image {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 10;
}
.specialist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================================================
   TESTIMONIAL (matches image 1)
   =========================================================== */
.testimonial {
  position: relative;
  padding: 110px 0 120px;
  overflow: hidden;
}

/* Big background quotation marks */
.quote-big {
  position: absolute;
  font-size: 420px;
  line-height: .7;
  color: rgba(20, 100, 200, .22);
  font-weight: 800;
  font-family: var(--heading-font);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.quote-left {
  left: 6%;
  top: 30px;
}
.quote-right {
  right: 6%;
  bottom: 0;
}

/* Glass card */
.testimonial-card {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  min-height: 380px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 90px 80px 70px;
  background: linear-gradient(135deg, rgba(17,35,59,.98), rgba(12,21,39,.98));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Multi-card testimonial grid (client review + CEO message + team message) */
.testimonial-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 32px;
  max-width: 1320px;
  margin: 0 auto;
}

.testimonial-grid .testimonial-card {
  max-width: none;
  min-height: 320px;
  padding: 70px 36px 40px;
  margin: 0;
}

.testimonial-grid .testimonial-card blockquote {
  margin-top: 70px;
  font-size: 18px;
  line-height: 1.7;
}

@media (max-width: 992px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }
}

/* Avatar sits centered, overlapping the top of the card */
.testimonial-author {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  width: 100%;
  margin: 0;
}
.testimonial-author img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  margin: 0;
}
.testimonial-avatar-fallback {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #25f2c5;
  background: rgba(37,242,197,.10);
  border: 4px solid rgba(255, 255, 255, .1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  margin: 0;
}
.testimonial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.testimonial-badge i { color: #25f2c5; }
.testimonial-author h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  margin: 0;
}
.testimonial-author h4 span {
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}

/* Quote text */
.testimonial-card blockquote {
  margin: 90px auto 0;
  font-size: 28px;
  line-height: 1.55;
  font-style: italic;
  font-weight: 500;
  color: #fff;
  text-align: center;
  max-width: 780px;
}

/* Small floating accent dot (top-left of card) */
.testimonial-card::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 26px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px rgba(20, 141, 255, .6);
}

/* Responsive */
@media (max-width: 1200px) {
  .quote-big { font-size: 320px; }
  .testimonial-card { padding: 80px 50px 60px; }
  .testimonial-card blockquote { font-size: 24px; }
}

@media (max-width: 768px) {
  .testimonial { padding: 50px 0 40px; }
  .quote-big { display: none; }
  .testimonial-card {
    padding: 28px 20px 26px;
    border-radius: 20px;
    min-height: auto;
  }
  .testimonial-author {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin: 0 0 16px;
    gap: 8px;
  }
  .testimonial-author img,
  .testimonial-avatar-fallback {
    width: 64px;
    height: 64px;
    font-size: 24px;
  }
  .testimonial-author h4 { font-size: 15px; }
  .testimonial-author h4 span {
    display: block;
    margin-left: 0;
    font-size: 12.5px;
  }
  .testimonial-badge { font-size: 10.5px; }
  .testimonial-card blockquote {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    text-align: center;
  }
  .testimonial-card::before { display: none; }
}

@media (max-width: 1600px) {
    .page-hero-wrap .container {
        width: min(1560px, calc(100% - 140px));
    }
}

@media (max-width: 1200px) {
    .about-ideas-layout, .specialist-layout {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .specialist-left > p {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .page-hero-wrap {
        margin: 18px auto 40px;
    }
    .page-hero-wrap .container {
        width: min(var(--container), calc(100% - 24px));
        padding-inline: 12px;
    }
    .page-hero-box {
        padding: 20px 18px 40px;
        border-radius: 28px;
    }
    .page-hero-content {
        margin-top: 36px;
    }
    .page-hero-content h1 {
        font-size: 23px;
        line-height: 1.2;
    }
    .breadcrumb {
        font-size: 15px;
    }
    .breadcrumb .current {
        display: inline-block;
        max-width: 56vw;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }

    .about-ideas {
        padding: 10px 0 60px;
    }
    .about-ideas-text h2, .specialist-left h2 {
        font-size: 28px;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .about-grid-item h4 {
        font-size: 18px;
        padding-bottom: 16px;
    }

    .specialist {
        padding: 50px 0 60px;
    }
    .timeline-item h3 {
        font-size: 16px;
    }

    .testimonial {
        padding: 24px 0 80px;
    }
    .quote-big {
        display: none;
    }
    .testimonial-card {
        padding: 28px 20px 26px;
        border-radius: 20px;
    }
    .testimonial-author {
        margin-top: 0;
    }
    .testimonial-author img {
        width: 64px;
        height: 64px;
    }
    .testimonial-author h4 {
        font-size: 15px;
    }
    .testimonial-card blockquote {
        font-size: 15px;
        line-height: 1.5;
    }
}


/* ===========================================================
   SERVICES PAGE
   =========================================================== */

/* ---------- Section heading row (left title, right paragraph + dot) ---------- */
.services-page {
  padding: 30px 0 70px;
}
.services-page-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}
.services-page-head h2 {
  font-size: clamp(30px, 2.61vw, 40px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Small blue dot + paragraph layout */
.services-page-intro {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 540px;
}
.intro-dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(20, 141, 255, .18);
  margin-top: 8px;
}
.services-page-intro p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 4-column service cards grid ---------- */
.services-page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 70px 30px;
}

/* ---------- One-Stop IT Solution section ---------- */
.onestop {
  padding: 90px 0;
}

.onestop-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 54px;
}
.onestop-head h2 {
  font-size: clamp(30px, 2.61vw, 40px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.02em;
}
.onestop-head p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 520px;
}

/* ---------- Tabs strip (dot on the line, icon + label below) ---------- */
.onestop-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 0 0 36px;
  margin-bottom: 40px;
}

/* Horizontal line running through all the dots */
.onestop-tabs::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 8px;
  height: 1px;
  background: rgba(255, 255, 255, .18);
  z-index: 0;
}

.onestop-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  z-index: 1;
  transition: .2s ease;
}

/* Blue dot sits on the line at the top */
.onestop-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0a64ff;
  box-shadow: 0 0 0 5px rgba(20, 141, 255, .18);
  transition: .2s ease;
  z-index: 2;
}

/* Icon + label stacked vertically below the dot */
.onestop-tab-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.onestop-tab-label i {
  font-size: 22px;
  color: rgba(255, 255, 255, .85);
  transition: .2s ease;
}
.onestop-tab-label span {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: .2s ease;
}

/* Active + hover */
.onestop-tab.active .onestop-tab-label i, .onestop-tab.active .onestop-tab-label span, .onestop-tab:hover .onestop-tab-label i, .onestop-tab:hover .onestop-tab-label span {
  color: var(--blue);
}
.onestop-tab.active .onestop-dot, .onestop-tab:hover .onestop-dot {
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(20, 141, 255, .28);
}

/* ---------- Body: image left, content right ---------- */
.onestop-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 54px;
  align-items: start;
}
.onestop-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3.4;
}
.onestop-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onestop-content h3 {
  font-size: clamp(21px, 1.74vw, 26px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}
.onestop-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 28px;
}

.onestop-inline {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  align-items: center;
  margin-bottom: 32px;
}
.onestop-inline-image {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.onestop-inline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.onestop-inline p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Bullet list (solid blue circle with white arrow) ---------- */
.onestop-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onestop-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
}
.onestop-bullet {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1599ff 0%, #0867ff 100%);
  color: #fff;
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(9, 104, 255, .45),
              0 0 0 4px rgba(20, 141, 255, .12);
}
.onestop-bullet i {
  line-height: 1;
}

/* ---------- Service icon ring (subtle outer ring) ---------- */
.service-icon {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12),
              inset 0 0 0 1px rgba(255, 255, 255, .04);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .services-page-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 24px;
  }
  .services-page-head, .onestop-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .onestop-head p, .services-page-intro {
    max-width: 100%;
  }
  .onestop-tabs {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px;
  }
  .onestop-tabs::before {
    display: none;
  }
  .onestop-body {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .services-page {
    padding: 10px 0 50px;
  }
  .services-page-head {
    margin-bottom: 60px;
  }
  .services-page-head h2, .onestop-head h2 {
    font-size: 26px;
  }
  .services-page-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .onestop {
    padding: 60px 0;
  }
  .onestop-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .onestop-tab-label span {
    font-size: 14px;
  }
  .onestop-content h3 {
    font-size: 19px;
  }
  .onestop-inline {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .onestop-inline-image {
    aspect-ratio: 16 / 9;
  }
  .onestop-list li {
    font-size: 14px;
  }
}


/* ===========================================================
   BLOG DETAILS PAGE
   =========================================================== */

.blog-details {
  padding: 0 0 90px;
}

/* ---------- Featured image ---------- */
.blog-details-image {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 36px;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 10;
}
.blog-details-image.small {
  aspect-ratio: 16 / 6;
}
.blog-details-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Body paragraphs ---------- */
.blog-details-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 40px;
}

/* ---------- Quote block ---------- */
.blog-quote {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  background: #1a1a23;
  border-radius: 14px;
  padding: 40px 48px;
  margin-bottom: 50px;
}
.blog-quote-icon {
  flex-shrink: 0;
  font-size: 40px;
  color: var(--blue);
  line-height: 1;
  margin-top: 4px;
}
.blog-quote-body p {
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
  font-weight: 600;
  margin-bottom: 22px;
}
.blog-quote-body h5 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

/* ---------- Tags + Share row ---------- */
.blog-tags-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
  margin: 30px 0 50px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  flex-wrap: wrap;
}
.blog-tags, .blog-share {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px;
}
.blog-tags strong, .blog-share strong {
  color: #fff;
  font-weight: 700;
  margin-right: 4px;
}
.blog-tags a, .blog-share a {
  color: var(--muted);
  font-weight: 400;
  transition: color .2s ease;
}
.blog-tags a:hover, .blog-share a:hover {
  color: var(--blue);
}

/* ---------- Leave a reply box ---------- */
.blog-reply {
  background: #1a1a23;
  border-radius: 14px;
  padding: 50px 50px 60px;
}
.blog-reply h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.blog-reply p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}
.blog-reply p a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-reply p a:hover {
  color: var(--blue);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .blog-quote {
    padding: 32px 36px;
  }
  .blog-reply {
    padding: 40px 36px 48px;
  }
}

@media (max-width: 768px) {
  .blog-details {
    padding: 0 0 60px;
  }
  .blog-details-image {
    aspect-ratio: 16 / 11;
    border-radius: 12px;
    margin-bottom: 24px;
  }
  .blog-details-image.small {
    aspect-ratio: 16 / 9;
  }
  .blog-details-text {
    font-size: 15px;
    margin-bottom: 28px;
  }
  .blog-quote {
    flex-direction: column;
    gap: 16px;
    padding: 26px 22px;
    margin-bottom: 36px;
  }
  .blog-quote-icon {
    font-size: 30px;
  }
  .blog-quote-body p {
    font-size: 16px;
  }
  .blog-tags-share {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 20px 0 36px;
  }
  .blog-tags, .blog-share {
    font-size: 15px;
  }
  .blog-reply {
    padding: 30px 22px 36px;
    border-radius: 12px;
  }
  .blog-reply h3 {
    font-size: 21px;
  }
  .blog-reply p {
    font-size: 14px;
  }
}


/* ===========================================================
   CONTACT US PAGE
   =========================================================== */

.contact-page {
  padding: 30px 0 90px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: start;
}

/* ---------- LEFT: info column ---------- */
.contact-info h2 {
  font-size: clamp(30px, 2.61vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.contact-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 36px;
  max-width: 480px;
}

/* phone + email row */
.contact-meta {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  font-size: 17px;
  color: #fff;
}
.contact-meta-item {
  font-weight: 500;
  transition: color .2s ease;
}
.contact-meta-item:hover {
  color: var(--blue);
}
.contact-meta-item.underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* social icons */
.contact-socials {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.contact-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 15px;
  transition: .2s ease;
}
.contact-socials a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-3px);
}

/* map */
.contact-map {
  width: 100%;
  height: 320px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  filter: grayscale(100%) brightness(.95);
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- RIGHT: form card ---------- */
.contact-form-card {
  background: #1a1a23;
  border-radius: 24px;
  padding: 50px 50px 56px;
  box-shadow: var(--shadow);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-group label {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.form-group label span {
  color: var(--blue);
  margin-left: 2px;
}
.form-group input, .form-group textarea {
  width: 100%;
  background: #0f1018;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 0 24px;
  height: 56px;
  color: #fff;
  font-family: var(--body-font);
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease;
}
.form-group textarea {
  height: auto;
  min-height: 140px;
  border-radius: 22px;
  padding: 18px 24px;
  resize: vertical;
}
.form-group input::placeholder, .form-group textarea::placeholder {
  color: rgba(255, 255, 255, .4);
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--blue);
}

/* submit row */
.form-footer {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.btn-submit {
  height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
}
.btn-submit:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.form-note {
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .contact-form-card {
    padding: 40px 32px 48px;
  }
}

@media (max-width: 768px) {
    .contact-page {
        padding: 10px 0 60px;
    }
  .contact-info h2 {
    font-size: 28px;
  }
  .contact-meta {
    gap: 18px;
    font-size: 15px;
  }
  .contact-socials a {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  .contact-map {
    height: 260px;
  }
  .contact-form-card {
    padding: 28px 22px 32px;
    border-radius: 18px;
  }
  .form-group input {
    height: 50px;
    font-size: 14px;
  }
  .form-group textarea {
    min-height: 120px;
  }
  .btn-submit {
    height: 50px;
    padding: 0 24px;
    font-size: 14px;
  }
  .form-footer {
    gap: 16px;
  }
  .form-note {
    font-size: 14px;
  }
}

/* ===========================================================
   BLOG LISTING + BLOG DETAIL (dynamic)
   =========================================================== */

.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  transition: transform .25s ease;
}

.blog-card-link:hover {
  transform: translateY(-6px);
}

.blog-card-link .blog-meta {
  color: #fff;
}

.blog-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 0;
  color: var(--muted);
}

.blog-detail-summary-card {
  background: #1a1a23;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  padding: 34px 38px;
  box-shadow: var(--shadow);
  margin-bottom: 34px;
}

.blog-detail-category {
  display: inline-block;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

.blog-detail-summary-card h2 {
  font-size: clamp(24px, 2.26vw, 37px);
  line-height: 1.2;
  margin-bottom: 14px;
  color: #fff;
}

.blog-detail-short {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 0;
}

.blog-detail-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.blog-detail-content p {
  margin-bottom: 18px;
}

.blog-detail-content h1, .blog-detail-content h2, .blog-detail-content h3, .blog-detail-content h4, .blog-detail-content h5, .blog-detail-content h6 {
  color: #fff;
  margin: 28px 0 14px;
}

.blog-detail-content ul, .blog-detail-content ol {
  margin: 18px 0 18px 22px;
}

.blog-detail-content a {
  color: var(--blue);
}

.blog-detail-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  margin: 24px 0;
  box-shadow: var(--shadow);
}

/* ===========================================================
   TEAM PAGE
   =========================================================== */

.team-hero-wrap {
  margin: 38px auto 70px;
}

.team-hero-box {
  background:
    radial-gradient(circle at 14% 18%, rgba(20, 141, 255, .20), transparent 30%),
    radial-gradient(circle at 86% 24%, rgba(150, 70, 255, .10), transparent 26%),
    linear-gradient(135deg, #0f2740 0%, #10213b 42%, #0d1a2f 100%);
}

.team-hero-content {
  max-width: 820px;
  text-align: center;
}

.team-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #fff;
  font-family: var(--utility-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}

.team-kicker i {
  color: var(--blue);
  font-size: 16px;
}

.team-hero-content h1 {
  margin-bottom: 16px;
}

.team-hero-content p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.team-hero-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 38px;
}

.team-stat {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  padding: 20px 22px;
  backdrop-filter: blur(10px);
}

.team-stat strong {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 8px;
  color: #fff;
}

.team-stat span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.team-section {
  padding: 10px 0 110px;
}

.team-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.team-section-head .section-label {
  display: inline-block;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.team-section-head h2 {
  font-size: clamp(30px, 2.61vw, 45px);
  line-height: 1.08;
  margin-bottom: 0;
  max-width: 680px;
}

.team-section-head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.team-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(26, 28, 37, .98), rgba(17, 18, 25, .98));
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.team-card:hover {
  transform: translateY(-8px);
  border-color: rgba(20, 141, 255, .38);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .36);
}

.team-photo {
  position: relative;
  aspect-ratio: .92 / 1;
  overflow: hidden;
}

.team-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(7, 9, 13, 0), rgba(7, 9, 13, .88));
  pointer-events: none;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.team-card:hover .team-photo img {
  transform: scale(1.05);
}

.team-card-body {
  position: relative;
  padding: 24px 24px 28px;
}

.team-role {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
}

.team-name {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 8px;
  color: #fff;
}

.team-title {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .blog-detail-summary-card {
    padding: 26px 22px;
    border-radius: 18px;
    margin-bottom: 28px;
  }

  .blog-detail-summary-card h2 {
    font-size: 21px;
  }

  .blog-detail-short, .blog-detail-content {
    font-size: 15px;
  }

  .team-hero-wrap {
    margin: 18px auto 42px;
  }

  .team-hero-box {
    padding: 24px 18px 34px;
    border-radius: 28px;
  }

  .team-hero-content p {
    font-size: 15px;
  }

  .team-hero-band {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .team-section {
    padding: 0 0 70px;
  }

  .team-section-head {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 26px;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .team-card-body {
    padding: 22px 20px 24px;
  }

  .team-name {
    font-size: 24px;
  }
}
/* -------------------------------------------------- */
/* ===========================================================
   Security Pursuit Style Hero
   =========================================================== */

.security-hero {
    position: relative;
    min-height: 760px;
    width: 100%;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
}

/* Background network/globe image */
.security-hero__bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.15) 42%,
            rgba(0, 0, 0, 0.92) 78%,
            #000 100%
        ),
        url("https://static.wixstatic.com/media/4e0783_a16179c3e09d4512ace3f9485f802932~mv2.jpg/v1/fill/w_1600,h_714,al_c,q_85,enc_avif,quality_auto/4e0783_a16179c3e09d4512ace3f9485f802932~mv2.jpg");
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    opacity: 0.78;
    transform: scale(1.02);
}

/* Extra dark premium overlay */
.security-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 26% 48%, rgba(255,255,255,0.06), transparent 28%),
        linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.88));
    pointer-events: none;
}

.security-hero__content {
    position: relative;
    z-index: 2;
    width: min(1600px, calc(100% - 120px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.45fr 0.55fr;
    align-items: center;
    gap: 60px;
    padding-top: 80px;
}

.security-hero__text h1 {
    font-family: var(--heading-font, "Kanit", sans-serif);
    font-size: clamp(35px, 3.39vw, 62px);
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -0.045em;
    color: #fff;
    max-width: 1100px;
    margin: 0 0 54px;
}

.security-hero__text p {
    font-family: var(--body-font, "Poppins", sans-serif);
    font-size: clamp(22px, 2vw, 36px);
    line-height: 1.35;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0;
}

.security-hero__action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 180px;
}

.security-hero__btn {
    min-width: 340px;
    height: 76px;
    padding: 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: linear-gradient(135deg, #21f2be 0%, #1de6c8 100%);
    color: #03140f;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 0 0 rgba(33, 242, 190, 0);
    transition: 0.28s ease;
}

.security-hero__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(33, 242, 190, 0.32);
    background: linear-gradient(135deg, #35ffd0 0%, #20e9ff 100%);
}

/* Responsive */
@media (max-width: 1200px) {
    .security-hero {
        min-height: 680px;
    }

    .security-hero__content {
        width: min(100%, calc(100% - 56px));
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .security-hero__action {
        justify-content: flex-start;
        padding-top: 0;
    }

    .security-hero__text h1 {
        margin-bottom: 34px;
    }
}

@media (max-width: 768px) {
    .security-hero {
        min-height: 620px;
    }

    .security-hero__bg {
        background-position: 28% center;
        opacity: 0.55;
    }

    .security-hero__content {
        width: min(100%, calc(100% - 32px));
        padding-top: 40px;
    }

    .security-hero__text h1 {
        font-size: 29px;
        line-height: 1.15;
        margin-bottom: 26px;
    }

    .security-hero__text p {
        font-size: 20px;
        max-width: 420px;
    }

    .security-hero__btn {
        min-width: auto;
        width: 100%;
        height: 58px;
        font-size: 15px;
        padding: 0 20px;
    }
}


/* ===========================================================
   Premium Services Section With Images
   Paste at the end of your CSS file
   =========================================================== */

.services {
    position: relative;
    padding: 120px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(33, 242, 190, 0.10), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(20, 141, 255, 0.13), transparent 28%),
        linear-gradient(180deg, #000000 0%, #05080d 52%, #07090d 100%);
}

.services::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 76px 76px;
    opacity: .24;
    mask-image: radial-gradient(circle at center, black 35%, transparent 88%);
}

.services::after {
    content: "";
    position: absolute;
    right: -220px;
    top: 80px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 242, 190, .18), transparent 58%);
    filter: blur(18px);
    pointer-events: none;
}

.services .container {
    position: relative;
    z-index: 2;
}

.services-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: stretch;
}

.services-copy {
    grid-column: 1 / 3;
    min-height: 420px;
    padding: 46px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(17,35,59,.95), rgba(8,13,24,.96)),
        radial-gradient(circle at 20% 20%, rgba(33, 242, 190, .16), transparent 34%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 80px rgba(0,0,0,.42);
}

.services-copy::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 29px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(33,242,190,.7), rgba(20,141,255,.08), rgba(255,255,255,.08));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.services-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 9px 16px;
    border-radius: 999px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(33, 242, 190, .09);
    border: 1px solid rgba(33, 242, 190, .22);
}

.services-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25f2c5;
    box-shadow: 0 0 16px rgba(33, 242, 190, .8);
}

.services-copy h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(30px, 2.78vw, 47px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.045em;
    margin-bottom: 22px;
    color: #fff;
}

.services-copy p {
    position: relative;
    z-index: 2;
    max-width: 720px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255,255,255,.72);
    margin-bottom: 34px;
}

.services-cta {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 24px;
    border-radius: 999px;
    color: #03140f;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 16px 42px rgba(33, 242, 190, .24);
    transition: .25s ease;
}

.services-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 56px rgba(33, 242, 190, .34);
}

.service-card {
    position: relative;
    min-height: 420px;
    padding: 16px 16px 28px;
    border-radius: 28px;
    overflow: hidden;
    text-align: left;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        rgba(9, 13, 20, .92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: .32s ease;
}

.service-card-top {
    margin-top: 0;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 18%, rgba(33,242,190,.18), transparent 34%),
        linear-gradient(135deg, rgba(33,242,190,.12), transparent 38%);
    opacity: 0;
    transition: .32s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(33, 242, 190, .26);
    box-shadow:
        0 34px 90px rgba(0,0,0,.48),
        0 0 48px rgba(33, 242, 190, .12);
}

.service-card:hover::before {
    opacity: 1;
}

.service-image {
    position: relative;
    z-index: 2;
    height: 190px;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 28px;
    background: #10151f;
    border: 1px solid rgba(255,255,255,.10);
}

.service-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(0,0,0,.66) 100%),
        radial-gradient(circle at 20% 18%, rgba(33,242,190,.18), transparent 36%);
    pointer-events: none;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .45s ease;
    filter: saturate(1.08) contrast(1.05);
}

.service-card:hover .service-image img {
    transform: scale(1.08);
}

.service-number {
    position: absolute;
    right: 26px;
    top: 176px;
    z-index: 3;
    color: rgba(255,255,255,.78);
    font-size: 46px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    font-family: var(--heading-font, "Kanit", sans-serif);
    transition: .32s ease;
}

.service-card:hover .service-number {
    color: #25f2c5;
    text-shadow: 0 0 24px rgba(33, 242, 190, .42);
}

.service-card h3 {
    position: relative;
    z-index: 2;
    max-width: 260px;
    margin: 0 0 14px;
    padding: 0 8px;
    color: #fff;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.service-card p {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.7;
    max-width: 280px;
    margin: 0;
    padding: 0 8px;
}

/* hide old icon style if still exists anywhere */
.service-icon {
    display: none;
}

/* Responsive */
@media (max-width: 1200px) {
    .services {
        padding: 90px 0 80px;
    }

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

    .services-copy {
        grid-column: 1 / -1;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 70px 0 60px;
    }

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

    .services-copy {
        padding: 30px 24px;
        border-radius: 24px;
    }

    .services-copy h2 {
        font-size: 30px;
    }

    .services-copy p {
        font-size: 15px;
    }

    .service-card {
        min-height: auto;
        padding: 14px 14px 26px;
        border-radius: 24px;
    }

    .service-image {
        height: 210px;
        border-radius: 20px;
        margin-bottom: 24px;
    }

    .service-number {
        top: 190px;
        right: 24px;
        font-size: 38px;
    }

    .service-card h3 {
        font-size: 19px;
    }

    .service-card p {
        font-size: 14px;
    }
}
/* ===========================================================
   Premium Steps / Process Section
   Paste at the end of your CSS file
   =========================================================== */

.steps {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(33, 242, 190, 0.10), transparent 30%),
        radial-gradient(circle at 86% 72%, rgba(20, 141, 255, 0.12), transparent 28%),
        linear-gradient(180deg, #07090d 0%, #000000 48%, #05080d 100%);
}

.steps::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: .22;
    mask-image: radial-gradient(circle at center, black 34%, transparent 90%);
}

.steps::after {
    content: "";
    position: absolute;
    left: -240px;
    bottom: -240px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 242, 190, .18), transparent 62%);
    filter: blur(20px);
    pointer-events: none;
}

.steps .container {
    position: relative;
    z-index: 2;
}

.steps-layout {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 48px;
    align-items: stretch;
}

.steps-left {
    position: relative;
    padding: 46px;
    border-radius: 34px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(17,35,59,.94), rgba(8,13,24,.96)),
        radial-gradient(circle at 22% 18%, rgba(33,242,190,.15), transparent 34%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.steps-left::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 33px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(33,242,190,.62), rgba(20,141,255,.10), rgba(255,255,255,.08));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.steps-kicker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 9px 16px;
    border-radius: 999px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(33, 242, 190, .09);
    border: 1px solid rgba(33, 242, 190, .22);
}

.steps-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25f2c5;
    box-shadow: 0 0 16px rgba(33, 242, 190, .8);
}

.steps-left h2 {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(31px, 2.96vw, 50px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.steps-intro {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 0 0 34px;
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.75;
}

.steps-visual {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    height: 440px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(0,0,0,.42);
    border: 1px solid rgba(255,255,255,.10);
}

.steps-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 40%, rgba(0,0,0,.72) 100%),
        radial-gradient(circle at 18% 18%, rgba(33,242,190,.22), transparent 36%);
    pointer-events: none;
}

.steps-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
    filter: saturate(1.08) contrast(1.04);
}

.steps-left:hover .steps-visual img {
    transform: scale(1.06);
}

.steps-visual-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(5, 8, 13, .70);
    border: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 48px rgba(0,0,0,.34);
}

.steps-visual-badge strong {
    display: block;
    color: #25f2c5;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.steps-visual-badge span {
    display: block;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.steps-right {
    position: relative;
    padding: 34px;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
        rgba(8, 12, 19, .82);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.steps-right-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 0 4px 22px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.steps-right-top span {
    color: rgba(255,255,255,.74);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.steps-top-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    color: #03140f;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 16px 42px rgba(33,242,190,.22);
    transition: .25s ease;
}

.steps-top-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 56px rgba(33,242,190,.32);
}

.step-row {
    position: relative;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 22px;
    align-items: start;
    padding: 26px 6px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    transition: .28s ease;
}

.step-row:last-child {
    border-bottom: none;
}

.step-row::before {
    content: "";
    position: absolute;
    inset: 10px 0;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(33,242,190,.12), rgba(20,141,255,.05));
    opacity: 0;
    transition: .28s ease;
}

.step-row:hover {
    padding-left: 18px;
    padding-right: 18px;
}

.step-row:hover::before {
    opacity: 1;
}

.step-no {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #03140f;
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow:
        0 14px 38px rgba(33,242,190,.22),
        inset 0 0 0 1px rgba(255,255,255,.22);
    transition: .28s ease;
}

.step-row:hover .step-no {
    transform: rotate(-4deg) scale(1.04);
    box-shadow:
        0 18px 46px rgba(33,242,190,.32),
        0 0 30px rgba(33,242,190,.14);
}

.step-content {
    position: relative;
    z-index: 2;
}

.step-row h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.step-row p {
    margin: 0;
    max-width: 720px;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.75;
}

/* Responsive */
@media (max-width: 1200px) {
    .steps {
        padding: 90px 0;
    }

    .steps-layout {
        grid-template-columns: 1fr;
    }

    .steps-left, .steps-right {
        padding: 34px;
    }

    .steps-visual {
        height: 380px;
    }
}

@media (max-width: 768px) {
    .steps {
        padding: 70px 0 60px;
    }

    .steps-layout {
        gap: 24px;
    }

    .steps-left, .steps-right {
        padding: 24px;
        border-radius: 26px;
    }

    .steps-left h2 {
        font-size: 30px;
    }

    .steps-intro {
        font-size: 15px;
    }

    .steps-visual {
        height: 280px;
        border-radius: 22px;
    }

    .steps-visual-badge {
        left: 14px;
        bottom: 14px;
        padding: 13px 14px;
    }

    .steps-visual-badge strong {
        font-size: 28px;
    }

    .steps-right-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .step-row {
        grid-template-columns: 56px 1fr;
        gap: 16px;
        padding: 22px 0;
    }

    .step-row:hover {
        padding-left: 0;
        padding-right: 0;
    }

    .step-row::before {
        display: none;
    }

    .step-no {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 15px;
    }

    .step-row h3 {
        font-size: 18px;
    }

    .step-row p {
        font-size: 14px;
        line-height: 1.65;
    }
}
/* ===========================================================
   Premium Blog Section
   Paste at the end of your CSS file
   =========================================================== */

.blog {
    position: relative;
    padding: 120px 0 110px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 20%, rgba(33, 242, 190, 0.10), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(20, 141, 255, 0.12), transparent 28%),
        linear-gradient(180deg, #05080d 0%, #000000 48%, #07090d 100%);
}

.blog::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: .20;
    mask-image: radial-gradient(circle at center, black 35%, transparent 90%);
}

.blog::after {
    content: "";
    position: absolute;
    right: -230px;
    bottom: -260px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 242, 190, .16), transparent 62%);
    filter: blur(18px);
    pointer-events: none;
}

.blog .container {
    position: relative;
    z-index: 2;
}

.blog-title {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 62px;
}

.blog-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 9px 16px;
    border-radius: 999px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(33, 242, 190, .09);
    border: 1px solid rgba(33, 242, 190, .22);
}

.blog-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25f2c5;
    box-shadow: 0 0 16px rgba(33, 242, 190, .8);
}

.blog-title h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(31px, 3.13vw, 50px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.blog-title h2 span {
    color: #25f2c5;
    position: relative;
    display: inline-block;
}

.blog-title h2 span::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    bottom: 4px;
    height: 10px;
    border-radius: 999px;
    background: rgba(33, 242, 190, .20);
    z-index: -1;
}

.blog-title p {
    max-width: 720px;
    margin: 22px auto 0;
    color: rgba(255,255,255,.66);
    font-size: 16px;
    line-height: 1.75;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 400px));
    justify-content: center;
    gap: 28px;
}

.blog-card {
    position: relative;
    display: block;
    padding: 20px;
    border-radius: 30px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        rgba(9, 13, 20, .92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: .32s ease;
}

.blog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 18%, rgba(33,242,190,.16), transparent 34%),
        linear-gradient(135deg, rgba(33,242,190,.11), transparent 38%);
    opacity: 0;
    transition: .32s ease;
}

.blog-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 29px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(33,242,190,.52), rgba(20,141,255,.12), transparent) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: .32s ease;
    pointer-events: none;
}

.blog-card:hover {
    transform: translateY(-10px);
    border-color: rgba(33, 242, 190, .26);
    box-shadow:
        0 34px 90px rgba(0,0,0,.48),
        0 0 48px rgba(33, 242, 190, .12);
}

.blog-card:hover::before, .blog-card:hover::after {
    opacity: 1;
}

.blog-image {
    position: relative;
    z-index: 2;
    height: 280px;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 0;
    background: #10151f;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset 0 0 56px 18px rgba(0,0,0,.65),
        0 18px 48px rgba(0,0,0,.30);
}

.blog-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 30%, rgba(0,0,0,.82) 100%),
        radial-gradient(ellipse at center, transparent 36%, rgba(8,10,16,.78) 100%),
        radial-gradient(circle at 20% 18%, rgba(33,242,190,.16), transparent 32%);
    pointer-events: none;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .48s ease;
    filter: saturate(1.08) contrast(1.04);
}

.blog-card:hover .blog-image img {
    transform: scale(1.08);
}

.blog-category {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: #03140f;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 14px 34px rgba(33,242,190,.26);
}

.blog-content {
    position: relative;
    z-index: 2;
    padding: 30px 14px 12px;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.4;
}

.blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.blog-meta i {
    color: #25f2c5;
    font-size: 13px;
}

.blog-card h3 {
    max-width: 100%;
    margin: 0 0 24px;
    color: #fff;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.025em;
    transition: .25s ease;
}

.blog-card:hover h3 {
    color: #eafffb;
}

.blog-excerpt {
    margin: 0 0 18px;
    color: rgba(255,255,255,.62);
    font-size: 14.5px;
    line-height: 1.6;
}

.blog-view-all {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

.blog-readmore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #25f2c5;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    transition: .25s ease;
}

.blog-readmore i {
    transition: .25s ease;
}

.blog-card:hover .blog-readmore {
    color: #20e9ff;
}

.blog-card:hover .blog-readmore i {
    transform: translateX(5px);
}

.blog-empty-state {
    grid-column: 1 / -1;
    padding: 48px 28px;
    border-radius: 26px;
    text-align: center;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
}

.blog-empty-state p {
    margin: 0;
    color: rgba(255,255,255,.70);
    font-size: 16px;
}

/* Responsive */
@media (max-width: 1200px) {
    .blog {
        padding: 90px 0 80px;
    }

    .blog-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 400px));
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .blog {
        padding: 70px 0 60px;
    }

    .blog-title {
        margin-bottom: 40px;
    }

    .blog-title h2 {
        font-size: 30px;
    }

    .blog-title p {
        font-size: 15px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .blog-card {
        padding: 16px;
        border-radius: 24px;
    }

    .blog-image {
        height: 230px;
        border-radius: 20px;
    }

    .blog-content {
        padding: 24px 10px 8px;
    }

    .blog-card h3 {
        font-size: 18px;
    }

    .blog-meta {
        gap: 12px;
        font-size: 12px;
    }
}

/* ===========================================================
   Premium Services Page
   =========================================================== */

.services-page-hero {
    position: relative;
    min-height: 660px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #000;
}

.services-page-hero__bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.76) 42%, rgba(0,0,0,.40) 100%),
        url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2200&q=85");
    background-size: cover;
    background-position: center;
    opacity: .82;
}

.services-page-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 42%, rgba(33,242,190,.16), transparent 28%),
        radial-gradient(circle at 80% 22%, rgba(20,141,255,.15), transparent 30%),
        linear-gradient(180deg, transparent 0%, #000 100%);
    pointer-events: none;
}

.services-page-hero .container {
    position: relative;
    z-index: 2;
}

.services-page-hero__content {
    max-width: 980px;
    padding-top: 80px;
}

.services-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 9px 16px;
    border-radius: 999px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(33, 242, 190, .09);
    border: 1px solid rgba(33, 242, 190, .22);
}

.services-page-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25f2c5;
    box-shadow: 0 0 16px rgba(33, 242, 190, .8);
}

.services-page-hero h1 {
    margin: 0 0 24px;
    color: #fff;
    font-size: clamp(31px, 3.39vw, 60px);
    line-height: 1.06;
    font-weight: 600;
    letter-spacing: -0.055em;
}

.services-page-hero p {
    max-width: 780px;
    margin: 0 0 36px;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    line-height: 1.75;
}

.services-page-hero__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.services-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    transition: .25s ease;
}

.services-page-btn:hover {
    transform: translateY(-3px);
}

.services-page-btn--primary {
    color: #03140f;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 48px rgba(33,242,190,.26);
}

.services-page-btn--outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(12px);
}

.services-page-btn--outline:hover {
    border-color: rgba(33,242,190,.35);
    color: #25f2c5;
}

/* Services Grid */
.services-premium {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(33,242,190,.10), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(20,141,255,.12), transparent 28%),
        linear-gradient(180deg, #000 0%, #05080d 55%, #07090d 100%);
}

.services-premium::before, .services-process::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: .20;
    mask-image: radial-gradient(circle at center, black 34%, transparent 90%);
}

.services-premium .container, .services-feature .container, .services-process .container, .services-cta-section .container {
    position: relative;
    z-index: 2;
}

.services-premium-head {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 50px;
    align-items: end;
    margin-bottom: 58px;
}

.services-premium-head h2, .services-feature-content h2, .services-process-head h2, .services-cta-box h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.13vw, 50px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.services-premium-head p {
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: 16px;
    line-height: 1.75;
}

.services-premium-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.premium-service-card {
    position: relative;
    display: block;
    min-height: 460px;
    padding: 16px;
    border-radius: 30px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        rgba(9,13,20,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.34);
    backdrop-filter: blur(14px);
    transition: .32s ease;
}

.premium-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 18%, rgba(33,242,190,.16), transparent 34%),
        linear-gradient(135deg, rgba(33,242,190,.11), transparent 38%);
    opacity: 0;
    transition: .32s ease;
}

.premium-service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(33,242,190,.26);
    box-shadow:
        0 34px 90px rgba(0,0,0,.48),
        0 0 48px rgba(33,242,190,.12);
}

.premium-service-card:hover::before {
    opacity: 1;
}

.premium-service-img {
    position: relative;
    z-index: 2;
    height: 190px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: #10151f;
}

.premium-service-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 32%, rgba(0,0,0,.72) 100%),
        radial-gradient(circle at 20% 18%, rgba(33,242,190,.18), transparent 36%);
    pointer-events: none;
}

.premium-service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .45s ease;
    filter: saturate(1.08) contrast(1.05);
}

.premium-service-card:hover .premium-service-img img {
    transform: scale(1.08);
}

.premium-service-content {
    position: relative;
    z-index: 2;
    padding: 24px 8px 4px;
}

.premium-service-content span {
    display: inline-flex;
    margin-bottom: 18px;
    color: #25f2c5;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    font-family: var(--heading-font, "Kanit", sans-serif);
}

.premium-service-content h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.premium-service-content p {
    margin: 0 0 22px;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.7;
}

.premium-service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #25f2c5;
    font-size: 14px;
    font-weight: 800;
}

.premium-service-link i {
    transition: .25s ease;
}

.premium-service-card:hover .premium-service-link i {
    transform: translateX(5px);
}

/* Feature */
.services-feature {
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(circle at 18% 30%, rgba(20,141,255,.11), transparent 28%),
        linear-gradient(180deg, #07090d 0%, #000 100%);
}

.services-feature-box {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 44px;
    align-items: center;
    padding: 34px;
    border-radius: 36px;
    background:
        linear-gradient(135deg, rgba(17,35,59,.94), rgba(8,13,24,.96));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.services-feature-img {
    height: 520px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
}

.services-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-feature-content p {
    margin: 24px 0 30px;
    color: rgba(255,255,255,.66);
    font-size: 16px;
    line-height: 1.75;
}

.services-feature-list {
    display: grid;
    gap: 16px;
}

.services-feature-list div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: rgba(255,255,255,.84);
    font-size: 15px;
    line-height: 1.55;
}

.services-feature-list i {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #03140f;
    font-size: 12px;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
}

/* Process */
.services-process {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 22%, rgba(33,242,190,.10), transparent 28%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.services-process-head {
    max-width: 880px;
    text-align: center;
    margin: 0 auto 56px;
}

.services-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.process-card {
    position: relative;
    min-height: 280px;
    padding: 32px;
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        rgba(9,13,20,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.30);
    transition: .3s ease;
}

.process-card:hover {
    transform: translateY(-8px);
    border-color: rgba(33,242,190,.28);
}

.process-card span {
    display: block;
    margin-bottom: 34px;
    color: rgba(37,242,197,.95);
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.process-card h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 21px;
    font-weight: 600;
}

.process-card p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.7;
}

/* CTA */
.services-cta-section {
    padding: 100px 0;
    background: #000;
}

.services-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 54px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 16% 20%, rgba(33,242,190,.16), transparent 32%),
        linear-gradient(135deg, rgba(17,35,59,.96), rgba(8,13,24,.98));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.services-cta-box h2 {
    max-width: 820px;
}

/* Responsive */
@media (max-width: 1200px) {
    .services-premium-grid, .services-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-premium-head, .services-feature-box {
        grid-template-columns: 1fr;
    }

    .services-feature-img {
        height: 420px;
    }

    .services-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .services-page-hero {
        min-height: 620px;
    }

    .services-page-hero__content {
        padding-top: 40px;
    }

    .services-page-hero h1 {
        font-size: 24px;
        line-height: 1.15;
    }

    .services-page-hero p {
        font-size: 15px;
    }

    .services-page-btn {
        width: 100%;
    }

    .services-premium, .services-feature, .services-process {
        padding: 70px 0;
    }

    .services-premium-head {
        gap: 20px;
        margin-bottom: 38px;
    }

    .services-premium-head h2, .services-feature-content h2, .services-process-head h2, .services-cta-box h2 {
        font-size: 30px;
    }

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

    .premium-service-card {
        min-height: auto;
        border-radius: 24px;
    }

    .premium-service-img {
        height: 220px;
        border-radius: 20px;
    }

    .services-feature-box {
        padding: 20px;
        border-radius: 26px;
    }

    .services-feature-img {
        height: 280px;
        border-radius: 22px;
    }

    .process-card {
        min-height: auto;
        border-radius: 24px;
    }

    .services-cta-section {
        padding: 70px 0;
    }

    .services-cta-box {
        padding: 30px 24px;
        border-radius: 26px;
    }
}
/* ===========================================================
   Premium Services Grid V2
   Replace old services-premium design visually
   =========================================================== */

.services-premium-v2 {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(33,242,190,.11), transparent 30%),
        radial-gradient(circle at 88% 20%, rgba(20,141,255,.13), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 55%, #07090d 100%);
}

.services-premium-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: .20;
    mask-image: radial-gradient(circle at center, black 34%, transparent 90%);
}

.services-premium-v2::after {
    content: "";
    position: absolute;
    right: -260px;
    top: 180px;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33,242,190,.16), transparent 62%);
    filter: blur(20px);
    pointer-events: none;
}

.services-premium-v2 .container {
    position: relative;
    z-index: 2;
}

.services-v2-head {
    max-width: 980px;
    margin-bottom: 36px;
}

.services-v2-head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 2.61vw, 40px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.services-v2-head p {
    max-width: 760px;
    margin: 14px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 15px;
    line-height: 1.65;
}

.services-v2-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 20px;
    align-items: stretch;
}

/* Featured large card */
.service-feature-card {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 24px;
    background: #071018;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.50);
    transition: .35s ease;
}

.service-feature-card:hover {
    transform: translateY(-10px);
    border-color: rgba(33,242,190,.32);
    box-shadow:
        0 44px 110px rgba(0,0,0,.58),
        0 0 60px rgba(33,242,190,.13);
}

.service-feature-img {
    position: absolute;
    inset: 0;
}

.service-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
    filter: saturate(1.08) contrast(1.08);
}

.service-feature-card:hover .service-feature-img img {
    transform: scale(1.08);
}

.service-feature-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.92) 100%),
        radial-gradient(circle at 18% 16%, rgba(33,242,190,.20), transparent 34%);
}

.service-feature-content {
    position: relative;
    z-index: 2;
    padding: 26px;
    max-width: 720px;
}

.service-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    color: #03140f;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 14px 34px rgba(33,242,190,.26);
}

.service-feature-content h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(19px, 1.74vw, 28px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.04em;
}

.service-feature-content p {
    max-width: 650px;
    margin: 0 0 16px;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.6;
}

.service-feature-points {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.service-feature-points span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    color: rgba(255,255,255,.86);
    font-size: 13px;
    font-weight: 600;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
}

.service-feature-points i {
    color: #25f2c5;
}

.service-card-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
}

.service-card-action i {
    transition: .25s ease;
}

.service-feature-card:hover .service-card-action i {
    transform: translateX(6px);
}

/* Right stacked cards */
.services-v2-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.service-mini-card {
    position: relative;
    min-height: 110px;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        rgba(9,13,20,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    transition: .32s ease;
}

.service-mini-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 16%, rgba(33,242,190,.14), transparent 34%),
        linear-gradient(135deg, rgba(33,242,190,.10), transparent 38%);
    opacity: 0;
    transition: .32s ease;
}

.service-mini-card:hover {
    transform: translateX(8px);
    border-color: rgba(33,242,190,.28);
    box-shadow:
        0 30px 80px rgba(0,0,0,.42),
        0 0 48px rgba(33,242,190,.10);
}

.service-mini-card:hover::before {
    opacity: 1;
}

.service-mini-icon {
    position: relative;
    z-index: 2;
    height: 86px;
    border-radius: 14px;
    overflow: hidden;
    background: #10151f;
    border: 1px solid rgba(255,255,255,.10);
}

.service-mini-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .45s ease;
}

.service-mini-card:hover .service-mini-icon img {
    transform: scale(1.08);
}

.service-mini-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 30%, rgba(0,0,0,.65) 100%),
        radial-gradient(circle at 18% 18%, rgba(33,242,190,.18), transparent 38%);
}

.service-mini-card > div:last-child {
    position: relative;
    z-index: 2;
}

.service-mini-card span {
    display: block;
    margin-bottom: 4px;
    color: #25f2c5;
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.service-mini-card h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.service-mini-card p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.5;
}

/* Bottom wide cards */
.services-v2-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.service-wide-card {
    position: relative;
    min-height: 150px;
    padding: 18px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 18%, rgba(33,242,190,.10), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
        rgba(9,13,20,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.30);
    transition: .32s ease;
}

.service-wide-card:hover {
    transform: translateY(-8px);
    border-color: rgba(33,242,190,.28);
    box-shadow:
        0 34px 90px rgba(0,0,0,.45),
        0 0 48px rgba(33,242,190,.11);
}

.service-wide-card span {
    display: block;
    margin-bottom: 10px;
    color: rgba(37,242,197,.95);
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    font-family: var(--heading-font, "Kanit", sans-serif);
}

.service-wide-card h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.service-wide-card p {
    max-width: 420px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.55;
}

.service-wide-card > i {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #03140f;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 14px 34px rgba(33,242,190,.24);
    transition: .25s ease;
}

.service-wide-card:hover > i {
    transform: rotate(-35deg);
}

/* Responsive */
@media (max-width: 1200px) {
    .services-premium-v2 {
        padding: 60px 0;
    }

    .services-v2-layout {
        grid-template-columns: 1fr;
    }

    .service-feature-card {
        min-height: 380px;
    }

    .services-v2-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .services-premium-v2 {
        padding: 40px 0;
    }

    .services-v2-head {
        margin-bottom: 22px;
    }

    .services-v2-head h2 {
        font-size: 23px;
    }

    .services-v2-head p {
        font-size: 13px;
    }

    .service-feature-card {
        min-height: 340px;
        border-radius: 18px;
    }

    .service-feature-content {
        padding: 18px;
    }

    .service-feature-content h3 {
        font-size: 19px;
    }

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

    .service-feature-points {
        display: none;
    }

    .service-mini-card {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
        border-radius: 16px;
        min-height: auto;
    }

    .service-mini-card:hover {
        transform: translateY(-6px);
    }

    .service-mini-icon {
        height: 140px;
        border-radius: 12px;
    }

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

    .service-wide-card {
        min-height: auto;
        padding: 16px;
        border-radius: 16px;
    }

    .service-wide-card span {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .service-wide-card h3 {
        font-size: 14px;
    }

    .service-wide-card p {
        font-size: 13px;
        padding-right: 36px;
    }

    .service-wide-card > i {
        width: 30px;
        height: 30px;
        right: 12px;
        top: 12px;
    }
}
/* ===========================================================
   Premium Why Choose Us Section
   Paste at the end of your CSS file
   =========================================================== */

.services-feature-v2 {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 26%, rgba(33,242,190,.11), transparent 30%),
        radial-gradient(circle at 88% 20%, rgba(20,141,255,.13), transparent 28%),
        linear-gradient(180deg, #07090d 0%, #000000 48%, #05080d 100%);
}

.services-feature-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: .18;
    mask-image: radial-gradient(circle at center, black 34%, transparent 90%);
}

.services-feature-v2::after {
    content: "";
    position: absolute;
    right: -260px;
    bottom: -260px;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33,242,190,.16), transparent 62%);
    filter: blur(20px);
    pointer-events: none;
}

.why-choose-box {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    align-items: center;
    padding: 22px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(17,35,59,.94), rgba(8,13,24,.97)),
        radial-gradient(circle at 14% 18%, rgba(33,242,190,.12), transparent 32%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
    overflow: hidden;
}

.why-choose-box::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 37px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(33,242,190,.55), rgba(20,141,255,.10), rgba(255,255,255,.08));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.why-choose-content {
    position: relative;
    z-index: 2;
    padding: 16px 8px 16px 16px;
}

.why-choose-content h2 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(23px, 2.61vw, 33px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.why-choose-content > p {
    max-width: 720px;
    margin: 14px 0 20px;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.6;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.why-item {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
        rgba(7, 12, 20, .70);
    border: 1px solid rgba(255,255,255,.09);
    transition: .3s ease;
}

.why-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 18%, rgba(33,242,190,.16), transparent 34%),
        linear-gradient(135deg, rgba(33,242,190,.09), transparent 38%);
    opacity: 0;
    transition: .3s ease;
}

.why-item:hover {
    transform: translateY(-6px);
    border-color: rgba(33,242,190,.25);
    box-shadow:
        0 22px 60px rgba(0,0,0,.32),
        0 0 34px rgba(33,242,190,.09);
}

.why-item:hover::before {
    opacity: 1;
}

.why-icon {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #03140f;
    font-size: 15px;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 14px 34px rgba(33,242,190,.22);
}

.why-item h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 4px;
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.why-item p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 12.5px;
    line-height: 1.5;
}

.why-choose-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.why-rating {
    display: grid;
    gap: 6px;
}

.why-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #25f2c5;
    font-size: 14px;
}

.why-rating span {
    color: rgba(255,255,255,.62);
    font-size: 13px;
    font-weight: 600;
}

/* Right Image */
.why-choose-visual {
    position: relative;
    z-index: 2;
    min-height: 360px;
    border-radius: 20px;
    overflow: hidden;
    background: #10151f;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 28px 80px rgba(0,0,0,.42);
}

.why-choose-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.26) 42%, rgba(0,0,0,.86) 100%),
        radial-gradient(circle at 20% 18%, rgba(33,242,190,.22), transparent 36%);
    pointer-events: none;
}

.why-choose-visual img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    transition: .7s ease;
    filter: saturate(1.08) contrast(1.06);
}

.why-choose-box:hover .why-choose-visual img {
    transform: scale(1.06);
}

.why-floating-card {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 4px;
    min-width: 140px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(5, 8, 13, .72);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 22px 58px rgba(0,0,0,.38);
}

.why-floating-card--top {
    top: 28px;
    right: 28px;
}

.why-floating-card--bottom {
    left: 28px;
    bottom: 90px;
}

.why-floating-card strong {
    color: #25f2c5;
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    font-family: var(--heading-font, "Kanit", sans-serif);
}

.why-floating-card span {
    color: rgba(255,255,255,.78);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
}

.why-tech-pill {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    font-weight: 700;
    background: rgba(5, 8, 13, .72);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.why-tech-pill i {
    color: #25f2c5;
}

/* Responsive */
@media (max-width: 1200px) {
    .services-feature-v2 {
        padding: 60px 0;
    }

    .why-choose-box {
        grid-template-columns: 1fr;
    }

    .why-choose-content {
        padding: 14px 8px;
    }

    .why-choose-visual, .why-choose-visual img {
        min-height: 320px;
    }
}

@media (max-width: 768px) {
    .services-feature-v2 {
        padding: 40px 0;
    }

    .why-choose-box {
        padding: 14px;
        border-radius: 18px;
    }

    .why-choose-content {
        padding: 6px 4px 10px;
    }

    .why-choose-content h2 {
        font-size: 21px;
    }

    .why-choose-content > p {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .why-item {
        padding: 12px;
        border-radius: 14px;
    }

    .why-choose-actions {
        gap: 10px;
    }

    .why-choose-actions .services-page-btn {
        width: 100%;
    }

    .why-choose-visual {
        border-radius: 16px;
    }

    .why-choose-visual, .why-choose-visual img {
        min-height: 260px;
    }

    .why-floating-card {
        min-width: 120px;
        padding: 10px;
    }

    .why-floating-card strong {
        font-size: 20px;
    }

    .why-floating-card span {
        font-size: 11px;
    }

    .why-floating-card--top {
        top: 12px;
        right: 12px;
    }

    .why-floating-card--bottom {
        left: 12px;
        bottom: 60px;
    }

    .why-tech-pill {
        left: 12px;
        right: 12px;
        bottom: 12px;
        min-height: 36px;
        font-size: 11px;
        padding: 0 10px;
    }
}
/* ===========================================================
   Premium Workflow Section V2
   Paste at the end of your CSS file
   =========================================================== */

.services-process-v2 {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 20%, rgba(33,242,190,.11), transparent 30%),
        radial-gradient(circle at 88% 76%, rgba(20,141,255,.12), transparent 30%),
        linear-gradient(180deg, #000000 0%, #05080d 54%, #07090d 100%);
}

.services-process-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: .18;
    mask-image: radial-gradient(circle at center, black 34%, transparent 90%);
}

.services-process-v2::after {
    content: "";
    position: absolute;
    left: -260px;
    bottom: -260px;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33,242,190,.16), transparent 62%);
    filter: blur(20px);
    pointer-events: none;
}

.services-process-v2 .container {
    position: relative;
    z-index: 2;
}

.workflow-head {
    max-width: 980px;
    margin: 0 auto 36px;
    text-align: center;
}

.workflow-head h2 {
    max-width: 940px;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(23px, 2.61vw, 35px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.workflow-head p {
    max-width: 760px;
    margin: 14px auto 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    line-height: 1.65;
}

.workflow-layout {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 20px;
    align-items: stretch;
}

/* Left visual card */
.workflow-visual {
    position: sticky;
    top: 90px;
    min-height: 380px;
    border-radius: 22px;
    overflow: hidden;
    background: #10151f;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
}

.workflow-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.92) 100%),
        radial-gradient(circle at 18% 16%, rgba(33,242,190,.22), transparent 34%);
    pointer-events: none;
}

.workflow-visual img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.06);
    transition: .7s ease;
}

.workflow-layout:hover .workflow-visual img {
    transform: scale(1.06);
}

.workflow-visual-content {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    padding: 16px;
    border-radius: 16px;
    background: rgba(5, 8, 13, .72);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 70px rgba(0,0,0,.38);
}

.workflow-visual-content span {
    display: inline-flex;
    margin-bottom: 8px;
    color: #25f2c5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.workflow-visual-content h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(17px, 1.74vw, 24px);
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.035em;
}

/* Right timeline */
.workflow-steps {
    position: relative;
    display: grid;
    gap: 12px;
}

.workflow-steps::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(33,242,190,.0),
        rgba(33,242,190,.40),
        rgba(32,233,255,.28),
        rgba(33,242,190,.0)
    );
}

.workflow-step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        rgba(9,13,20,.92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.30);
    transition: .32s ease;
}

.workflow-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 16%, rgba(33,242,190,.16), transparent 34%),
        linear-gradient(135deg, rgba(33,242,190,.10), transparent 38%);
    opacity: 0;
    transition: .32s ease;
}

.workflow-step::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 31px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(33,242,190,.52), rgba(20,141,255,.12), transparent) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: .32s ease;
    pointer-events: none;
}

.workflow-step:hover {
    transform: translateX(10px);
    border-color: rgba(33,242,190,.28);
    box-shadow:
        0 34px 90px rgba(0,0,0,.46),
        0 0 48px rgba(33,242,190,.11);
}

.workflow-step:hover::before, .workflow-step:hover::after {
    opacity: 1;
}

.workflow-no {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #03140f;
    font-size: 15px;
    font-weight: 900;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow:
        0 18px 46px rgba(33,242,190,.26),
        inset 0 0 0 1px rgba(255,255,255,.22);
}

.workflow-content {
    position: relative;
    z-index: 2;
}

.workflow-content span {
    display: inline-flex;
    margin-bottom: 6px;
    color: #25f2c5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.workflow-content h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.workflow-content p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1200px) {
    .services-process-v2 {
        padding: 60px 0;
    }

    .workflow-layout {
        grid-template-columns: 1fr;
    }

    .workflow-visual {
        position: relative;
        top: auto;
        min-height: 300px;
    }

    .workflow-visual img {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .services-process-v2 {
        padding: 40px 0;
    }

    .workflow-head {
        margin-bottom: 20px;
    }

    .workflow-head h2 {
        font-size: 21px;
    }

    .workflow-head p {
        font-size: 13px;
    }

    .workflow-visual {
        min-height: 220px;
        border-radius: 18px;
    }

    .workflow-visual img {
        min-height: 220px;
    }

    .workflow-visual-content {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 12px;
        border-radius: 14px;
    }

    .workflow-visual-content h3 {
        font-size: 17px;
    }

    .workflow-steps {
        gap: 10px;
    }

    .workflow-steps::before {
        display: none;
    }

    .workflow-step {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
        border-radius: 16px;
    }

    .workflow-step:hover {
        transform: translateY(-6px);
    }

    .workflow-no {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 14px;
    }

    .workflow-content h3 {
        font-size: 15px;
    }

    .workflow-content p {
        font-size: 13px;
        line-height: 1.5;
    }
}

/* ===========================================================
   New Premium About Page - Different Structure
   =========================================================== */

.about-editorial-hero {
    position: relative;
    padding: 150px 0 70px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(37, 242, 197, .11), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(32, 233, 255, .10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.about-editorial-hero::before, .about-story-new::before, .about-difference::before, .about-capabilities::before, .about-journey::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: .20;
    mask-image: radial-gradient(circle at center, black 35%, transparent 90%);
}

.about-editorial-hero .container, .about-metrics-strip .container, .about-story-new .container, .about-difference .container, .about-capabilities .container, .about-journey .container, .about-final-cta .container {
    position: relative;
    z-index: 2;
}

.about-editorial-grid {
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 70px;
}

.about-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.about-label::before {
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, #25f2c5, transparent);
}

.about-editorial-left h1 {
    margin: 0;
    max-width: 980px;
    color: #fff;
    font-size: clamp(33px, 4.07vw, 70px);
    line-height: .96;
    font-weight: 500;
    letter-spacing: -0.07em;
}

.about-editorial-right {
    padding-bottom: 12px;
}

.about-editorial-right p {
    margin: 0 0 34px;
    color: rgba(255,255,255,.70);
    font-size: 18px;
    line-height: 1.85;
}

.about-editorial-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.about-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 58px;
    padding: 0 28px;
    border-radius: 999px;
    color: #03140f;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 48px rgba(33,242,190,.24);
    transition: .25s ease;
}

.about-main-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 62px rgba(33,242,190,.34);
}

.about-text-link {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 6px;
    transition: .25s ease;
}

.about-text-link:hover {
    color: #25f2c5;
}

.about-hero-media {
    position: relative;
    height: 560px;
    border-radius: 44px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
}

.about-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42) 52%, rgba(0,0,0,.82)),
        radial-gradient(circle at 20% 18%, rgba(37,242,197,.18), transparent 35%);
}

.about-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.06);
    transition: .7s ease;
}

.about-hero-media:hover img {
    transform: scale(1.06);
}

.about-hero-note {
    position: absolute;
    left: 34px;
    bottom: 34px;
    z-index: 3;
    max-width: 420px;
    padding: 24px 26px;
    border-radius: 26px;
    background: rgba(5, 8, 13, .72);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.about-hero-note span {
    display: block;
    margin-bottom: 8px;
    color: #25f2c5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-hero-note strong {
    display: block;
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
}

/* Metrics Strip */
.about-metrics-strip {
    padding: 0;
    background: #000;
}

.about-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.about-metrics div {
    padding: 38px 32px;
    border-right: 1px solid rgba(255,255,255,.10);
}

.about-metrics div:last-child {
    border-right: none;
}

.about-metrics strong {
    display: block;
    margin-bottom: 8px;
    color: #25f2c5;
    font-size: 46px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    font-family: var(--heading-font, "Kanit", sans-serif);
}

.about-metrics span {
    display: block;
    color: rgba(255,255,255,.74);
    font-size: 15px;
    font-weight: 700;
}

/* Story Different Layout */
.about-story-new {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 26%, rgba(32,233,255,.10), transparent 28%),
        linear-gradient(180deg, #000 0%, #07090d 100%);
}

.about-story-new-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.about-story-copy h2, .about-section-split h2, .about-capabilities-head h2, .about-journey-title h2, .about-final-box h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(33px, 3.48vw, 57px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.055em;
}

.about-story-copy p {
    margin: 26px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.85;
}

.about-collage {
    position: relative;
    min-height: 650px;
}

.about-collage-main {
    position: absolute;
    right: 0;
    top: 40px;
    width: 74%;
    height: 520px;
    border-radius: 38px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.46);
}

.about-collage-small {
    position: absolute;
    width: 300px;
    height: 220px;
    border-radius: 28px;
    overflow: hidden;
    border: 8px solid #07090d;
    box-shadow: 0 28px 70px rgba(0,0,0,.42);
}

.about-collage-small-one {
    left: 0;
    top: 0;
}

.about-collage-small-two {
    left: 70px;
    bottom: 0;
}

.about-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Difference Rows */
.about-difference {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 20%, rgba(37,242,197,.10), transparent 30%),
        linear-gradient(180deg, #07090d 0%, #000 100%);
}

.about-section-split {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 64px;
}

.about-difference-list {
    border-top: 1px solid rgba(255,255,255,.12);
}

.about-difference-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 46px;
    padding: 38px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: .28s ease;
}

.about-difference-row:hover {
    padding-left: 28px;
    border-color: rgba(37,242,197,.32);
}

.about-row-number {
    color: #25f2c5;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.05em;
    font-family: var(--heading-font, "Kanit", sans-serif);
}

.about-difference-row h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.about-difference-row p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 16px;
    line-height: 1.75;
}

/* Capabilities */
.about-capabilities {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 22%, rgba(32,233,255,.10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.about-capabilities-head {
    max-width: 920px;
    margin-bottom: 58px;
}

.about-capability-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.about-capability-item {
    min-height: 150px;
    padding: 26px;
    border-radius: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        rgba(9,13,20,.86);
    border: 1px solid rgba(255,255,255,.10);
    transition: .3s ease;
}

.about-capability-item:hover {
    transform: translateY(-7px);
    border-color: rgba(37,242,197,.28);
    background:
        radial-gradient(circle at 20% 20%, rgba(37,242,197,.14), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
        rgba(9,13,20,.92);
}

.about-capability-item i {
    color: #25f2c5;
    font-size: 28px;
}

.about-capability-item span {
    color: #fff;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    text-align: right;
}

/* Journey */
.about-journey {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 22%, rgba(37,242,197,.10), transparent 30%),
        linear-gradient(180deg, #05080d 0%, #000 100%);
}

.about-journey-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: start;
}

.about-journey-title {
    position: sticky;
    top: 110px;
}

.about-journey-timeline {
    position: relative;
    display: grid;
    gap: 0;
}

.about-journey-item {
    position: relative;
    padding: 0 0 48px 54px;
    border-left: 1px solid rgba(255,255,255,.14);
}

.about-journey-item:last-child {
    padding-bottom: 0;
}

.about-journey-item::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #25f2c5;
    box-shadow: 0 0 0 8px rgba(37,242,197,.12);
}

.about-journey-item span {
    display: inline-flex;
    margin-bottom: 12px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-journey-item h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.about-journey-item p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 16px;
    line-height: 1.75;
}

/* Final CTA */
.about-final-cta {
    padding: 110px 0;
    background: #000;
}

.about-final-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 44px;
    align-items: center;
    padding: 58px 0;
    border-top: 1px solid rgba(255,255,255,.14);
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.about-final-box h2 {
    max-width: 950px;
}

/* Responsive */
@media (max-width: 1200px) {
    .about-editorial-grid, .about-story-new-grid, .about-section-split, .about-journey-layout, .about-final-box {
        grid-template-columns: 1fr;
    }

    .about-journey-title {
        position: relative;
        top: auto;
    }

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

    .about-metrics div:nth-child(2) {
        border-right: none;
    }

    .about-metrics div:nth-child(1), .about-metrics div:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,.10);
    }
}

@media (max-width: 768px) {
    .about-editorial-hero {
        padding: 100px 0 50px;
    }

    .about-editorial-grid {
        gap: 30px;
        margin-bottom: 42px;
    }

    .about-editorial-left h1, .about-story-copy h2, .about-section-split h2, .about-capabilities-head h2, .about-journey-title h2, .about-final-box h2 {
        font-size: 21px;
        line-height: 1.2;
    }

    .about-editorial-right p, .about-story-copy p, .about-difference-row p, .about-journey-item p {
        font-size: 15px;
    }

    .about-main-btn {
        width: 100%;
    }

    .about-hero-media {
        height: 420px;
        border-radius: 28px;
    }

    .about-hero-note {
        left: 18px;
        right: 18px;
        bottom: 18px;
        padding: 18px;
        border-radius: 20px;
    }

    .about-hero-note strong {
        font-size: 18px;
    }

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

    .about-metrics div {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.10);
        padding: 28px 0;
    }

    .about-metrics div:last-child {
        border-bottom: none;
    }

    .about-story-new, .about-difference, .about-capabilities, .about-journey {
        padding: 70px 0;
    }

    .about-collage {
        min-height: auto;
        display: grid;
        gap: 18px;
    }

    .about-collage-main, .about-collage-small {
        position: relative;
        inset: auto;
        width: 100%;
        height: 260px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,.12);
    }

    .about-section-split {
        gap: 20px;
        margin-bottom: 38px;
    }

    .about-difference-row {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 0;
    }

    .about-difference-row:hover {
        padding-left: 0;
    }

    .about-difference-row h3, .about-journey-item h3 {
        font-size: 23px;
    }

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

    .about-capability-item {
        min-height: 120px;
    }

    .about-journey-layout {
        gap: 38px;
    }

    .about-journey-item {
        padding-left: 34px;
        padding-bottom: 38px;
    }

    .about-final-cta {
        padding: 70px 0;
    }

    .about-final-box {
        padding: 42px 0;
    }
}
/* ===========================================================
   Premium Blog Listing Page
   =========================================================== */

.blog-list-hero {
    position: relative;
    padding: 150px 0 90px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(37, 242, 197, .11), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(32, 233, 255, .10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.blog-list-hero::before, .blog-featured-section::before, .blog-listing-section::before, .blog-bottom-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: .20;
    mask-image: radial-gradient(circle at center, black 35%, transparent 90%);
}

.blog-list-hero .container, .blog-featured-section .container, .blog-listing-section .container, .blog-bottom-cta .container {
    position: relative;
    z-index: 2;
}

.blog-list-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: end;
}

.blog-page-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.blog-page-label::before {
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, #25f2c5, transparent);
}

.blog-list-hero-content h1 {
    margin: 0;
    max-width: 1050px;
    color: #fff;
    font-size: clamp(33px, 3.94vw, 68px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -0.07em;
}

.blog-list-hero-content p {
    max-width: 760px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 18px;
    line-height: 1.85;
}

.blog-list-hero-card {
    padding: 36px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 20%, rgba(37,242,197,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.030)),
        rgba(9,13,20,.90);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.blog-list-hero-card span {
    display: inline-flex;
    margin-bottom: 20px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.blog-list-hero-card h2 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.blog-list-hero-card p {
    margin: 0 0 26px;
    color: rgba(255,255,255,.66);
    font-size: 15px;
    line-height: 1.75;
}

.blog-list-hero-card a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #03140f;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 48px rgba(33,242,190,.24);
    transition: .25s ease;
}

.blog-list-hero-card a:hover {
    transform: translateY(-3px);
}

/* Featured */
.blog-featured-section {
    position: relative;
    padding: 90px 0 120px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 24%, rgba(32,233,255,.10), transparent 28%),
        linear-gradient(180deg, #05080d 0%, #000 100%);
}

.blog-featured-card {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 0;
    min-height: 570px;
    border-radius: 42px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(17,35,59,.94), rgba(8,13,24,.98));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
}

.blog-featured-image {
    position: relative;
    overflow: hidden;
}

.blog-featured-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.68) 100%),
        radial-gradient(circle at 20% 18%, rgba(37,242,197,.18), transparent 35%);
}

.blog-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
    filter: saturate(1.08) contrast(1.06);
}

.blog-featured-card:hover .blog-featured-image img {
    transform: scale(1.06);
}

.blog-featured-content {
    padding: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured-content h2 {
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(30px, 2.96vw, 50px);
    line-height: 1.06;
    font-weight: 500;
    letter-spacing: -0.055em;
}

.blog-featured-content p {
    margin: 0 0 26px;
    color: rgba(255,255,255,.68);
    font-size: 16px;
    line-height: 1.8;
}

.blog-featured-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.blog-featured-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    font-weight: 700;
}

.blog-featured-meta i {
    color: #25f2c5;
}

.blog-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: max-content;
    min-height: 56px;
    padding: 0 26px;
    border-radius: 999px;
    color: #03140f;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 48px rgba(33,242,190,.24);
    transition: .25s ease;
}

.blog-main-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 62px rgba(33,242,190,.34);
}

/* Listing */
.blog-listing-section {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(37,242,197,.10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.blog-listing-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 58px;
}

.blog-listing-top h2 {
    margin: 0;
    max-width: 840px;
    color: #fff;
    font-size: clamp(31px, 3.48vw, 57px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.055em;
}

.blog-category-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.blog-category-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 800;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    transition: .25s ease;
}

.blog-category-pills a:hover, .blog-category-pills a.active {
    color: #03140f;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    border-color: transparent;
}

.blog-listing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 34px;
    align-items: start;
}

.blog-listing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.blog-list-card {
    position: relative;
    display: block;
    padding: 16px;
    border-radius: 30px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.030)),
        rgba(9,13,20,.90);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
    transition: .32s ease;
}

.blog-list-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 18%, rgba(37,242,197,.14), transparent 34%),
        linear-gradient(135deg, rgba(37,242,197,.09), transparent 38%);
    opacity: 0;
    transition: .32s ease;
}

.blog-list-card:hover {
    transform: translateY(-10px);
    border-color: rgba(37,242,197,.28);
    box-shadow:
        0 34px 90px rgba(0,0,0,.48),
        0 0 48px rgba(37,242,197,.11);
}

.blog-list-card:hover::before {
    opacity: 1;
}

.blog-list-image {
    position: relative;
    z-index: 2;
    height: 260px;
    border-radius: 23px;
    overflow: hidden;
    background: #10151f;
    border: 1px solid rgba(255,255,255,.10);
}

.blog-list-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(0,0,0,.76) 100%),
        radial-gradient(circle at 20% 18%, rgba(37,242,197,.16), transparent 36%);
    pointer-events: none;
}

.blog-list-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .45s ease;
    filter: saturate(1.08) contrast(1.05);
}

.blog-list-card:hover .blog-list-image img {
    transform: scale(1.08);
}

.blog-list-category {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: #03140f;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
}

.blog-list-content {
    position: relative;
    z-index: 2;
    padding: 24px 8px 6px;
}

.blog-list-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.blog-list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    font-weight: 700;
}

.blog-list-meta i {
    color: #25f2c5;
}

.blog-list-card h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.blog-list-card p {
    margin: 0 0 24px;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.7;
}

.blog-list-read {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #25f2c5;
    font-size: 14px;
    font-weight: 800;
}

.blog-list-read i {
    transition: .25s ease;
}

.blog-list-card:hover .blog-list-read i {
    transform: translateX(5px);
}

/* Sidebar */
.blog-sidebar {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 22px;
}

.blog-sidebar-box, .blog-sidebar-cta {
    padding: 26px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
        rgba(9,13,20,.88);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.blog-sidebar-box h3, .blog-sidebar-cta h3 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.blog-search-form {
    display: grid;
    grid-template-columns: 1fr 50px;
    gap: 10px;
}

.blog-search-form input {
    width: 100%;
    height: 52px;
    border: 1px solid rgba(255,255,255,.10);
    outline: none;
    border-radius: 999px;
    padding: 0 18px;
    color: #fff;
    font-size: 14px;
    background: rgba(255,255,255,.055);
}

.blog-search-form input::placeholder {
    color: rgba(255,255,255,.46);
}

.blog-search-form button {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    color: #03140f;
    cursor: pointer;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
}

.blog-sidebar-categories {
    display: grid;
    gap: 10px;
}

.blog-sidebar-categories a {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    transition: .25s ease;
}

.blog-sidebar-categories a:hover {
    color: #25f2c5;
    border-color: rgba(37,242,197,.25);
    transform: translateX(5px);
}

.blog-sidebar-categories i {
    font-size: 12px;
}

.blog-recent-list {
    display: grid;
    gap: 16px;
}

.blog-recent-item {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    align-items: center;
}

.blog-recent-img {
    height: 76px;
    border-radius: 16px;
    overflow: hidden;
    background: #10151f;
}

.blog-recent-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-recent-item span {
    display: inline-flex;
    margin-bottom: 6px;
    color: #25f2c5;
    font-size: 12px;
    font-weight: 800;
}

.blog-recent-item h4 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
}

.blog-sidebar-empty {
    margin: 0;
    color: rgba(255,255,255,.60);
    font-size: 14px;
}

.blog-sidebar-cta {
    background:
        radial-gradient(circle at 18% 20%, rgba(37,242,197,.15), transparent 34%),
        linear-gradient(135deg, rgba(17,35,59,.95), rgba(8,13,24,.98));
}

.blog-sidebar-cta > span {
    display: inline-flex;
    margin-bottom: 14px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.blog-sidebar-cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    color: #03140f;
    font-size: 14px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
}

.blog-empty-premium {
    grid-column: 1 / -1;
    padding: 50px;
    border-radius: 28px;
    text-align: center;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
}

.blog-empty-premium h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 23px;
}

.blog-empty-premium p {
    margin: 0;
    color: rgba(255,255,255,.62);
}

.blog-pagination {
    margin-top: 50px;
}

/* Bottom CTA */
.blog-bottom-cta {
    position: relative;
    padding: 100px 0;
    background: #000;
    overflow: hidden;
}

.blog-bottom-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 56px;
    border-radius: 36px;
    background:
        radial-gradient(circle at 16% 20%, rgba(37,242,197,.16), transparent 32%),
        linear-gradient(135deg, rgba(17,35,59,.96), rgba(8,13,24,.98));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.blog-bottom-box h2 {
    max-width: 820px;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.13vw, 50px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.052em;
}

/* Responsive */
@media (max-width: 1200px) {
    .blog-list-hero-grid, .blog-featured-card, .blog-listing-top, .blog-listing-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: relative;
        top: auto;
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-sidebar-cta {
        grid-column: 1 / -1;
    }

    .blog-category-pills {
        justify-content: flex-start;
    }

    .blog-bottom-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .blog-list-hero {
        padding: 100px 0 60px;
    }

    .blog-list-hero-grid {
        gap: 34px;
    }

    .blog-list-hero-content h1 {
        font-size: 23px;
        line-height: 1.15;
    }

    .blog-list-hero-content p {
        font-size: 15px;
    }

    .blog-list-hero-card {
        padding: 24px;
        border-radius: 26px;
    }

    .blog-list-hero-card h2 {
        font-size: 19px;
    }

    .blog-featured-section, .blog-listing-section {
        padding: 70px 0;
    }

    .blog-featured-card {
        min-height: auto;
        border-radius: 28px;
    }

    .blog-featured-image {
        height: 280px;
    }

    .blog-featured-content {
        padding: 26px;
    }

    .blog-featured-content h2, .blog-listing-top h2, .blog-bottom-box h2 {
        font-size: 22px;
        line-height: 1.2;
    }

    .blog-main-btn {
        width: 100%;
    }

    .blog-listing-top {
        gap: 28px;
        margin-bottom: 38px;
    }

    .blog-category-pills {
        gap: 8px;
    }

    .blog-category-pills a {
        font-size: 12px;
        min-height: 38px;
        padding: 0 13px;
    }

    .blog-listing-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .blog-list-card {
        border-radius: 24px;
        padding: 14px;
    }

    .blog-list-image {
        height: 230px;
        border-radius: 20px;
    }

    .blog-list-card h3 {
        font-size: 19px;
    }

    .blog-sidebar {
        grid-template-columns: 1fr;
    }

    .blog-sidebar-box, .blog-sidebar-cta {
        padding: 22px;
        border-radius: 24px;
    }

    .blog-bottom-cta {
        padding: 70px 0;
    }

    .blog-bottom-box {
        padding: 30px 24px;
        border-radius: 26px;
    }
}

/* ===========================================================
   Premium Contact Us Page
   =========================================================== */

.contact-hero {
    position: relative;
    padding: 150px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(37, 242, 197, .11), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(32, 233, 255, .10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.contact-hero::before, .contact-info-section::before, .contact-main-section::before, .contact-map-section::before, .contact-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: .20;
    mask-image: radial-gradient(circle at center, black 35%, transparent 90%);
}

.contact-hero .container, .contact-info-section .container, .contact-main-section .container, .contact-map-section .container, .contact-final-cta .container {
    position: relative;
    z-index: 2;
}

.contact-hero-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 70px;
    align-items: end;
}

.contact-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.contact-label::before {
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, #25f2c5, transparent);
}

.contact-hero-content h1 {
    margin: 0;
    max-width: 980px;
    color: #fff;
    font-size: clamp(33px, 3.94vw, 68px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -0.07em;
}

.contact-hero-content p {
    max-width: 760px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 18px;
    line-height: 1.85;
}

.contact-hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.contact-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 58px;
    padding: 0 28px;
    border-radius: 999px;
    color: #03140f;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 48px rgba(33,242,190,.24);
    border: none;
    cursor: pointer;
    transition: .25s ease;
}

.contact-main-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 62px rgba(33,242,190,.34);
}

.contact-text-link {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 6px;
    transition: .25s ease;
}

.contact-text-link:hover {
    color: #25f2c5;
}

/* CEO Card */
.contact-ceo-card {
    position: relative;
    padding: 36px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 18% 20%, rgba(37,242,197,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.030)),
        rgba(9,13,20,.90);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.contact-ceo-top {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}

.contact-ceo-avatar {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(37,242,197,.45);
    box-shadow: 0 18px 46px rgba(37,242,197,.16);
}

.contact-ceo-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-ceo-top span {
    display: inline-flex;
    margin-bottom: 8px;
    color: #25f2c5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.contact-ceo-top h3 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.contact-ceo-card p {
    margin: 0 0 26px;
    color: rgba(255,255,255,.70);
    font-size: 16px;
    line-height: 1.85;
    font-style: italic;
}

.contact-ceo-sign strong {
    display: block;
    color: #fff;
    font-size: 16px;
    margin-bottom: 6px;
}

.contact-ceo-sign span {
    display: block;
    color: rgba(255,255,255,.56);
    font-size: 13px;
}

/* Contact Info Cards */
.contact-info-section {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    background: #000;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.contact-info-card {
    display: block;
    padding: 38px 30px;
    border-right: 1px solid rgba(255,255,255,.10);
    transition: .28s ease;
}

.contact-info-card:last-child {
    border-right: none;
}

.contact-info-card:hover {
    background: rgba(255,255,255,.035);
}

.contact-info-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    color: #03140f;
    font-size: 20px;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 14px 34px rgba(33,242,190,.22);
}

.contact-info-card span {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.56);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.contact-info-card h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.contact-info-card p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.7;
}

/* Main Form Section */
.contact-main-section {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(37,242,197,.10), transparent 30%),
        radial-gradient(circle at 86% 22%, rgba(32,233,255,.10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.contact-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 34px;
    align-items: start;
}

.contact-form-panel {
    padding: 46px;
    border-radius: 38px;
    background:
        linear-gradient(135deg, rgba(17,35,59,.94), rgba(8,13,24,.98));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
}

.contact-form-panel h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(31px, 3.48vw, 56px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.055em;
}

.contact-form-panel > p {
    max-width: 760px;
    margin: 22px 0 36px;
    color: rgba(255,255,255,.66);
    font-size: 16px;
    line-height: 1.75;
}

.contact-form {
    display: grid;
    gap: 22px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.contact-field {
    display: grid;
    gap: 10px;
}

.contact-field label {
    color: rgba(255,255,255,.82);
    font-size: 14px;
    font-weight: 700;
}

.contact-field input, .contact-field select, .contact-field textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.11);
    outline: none;
    border-radius: 18px;
    padding: 0 18px;
    color: #fff;
    font-size: 14px;
    font-family: var(--body-font, "Poppins", sans-serif);
    background: rgba(255,255,255,.055);
    transition: .25s ease;
}

.contact-field input, .contact-field select {
    height: 58px;
}

.contact-field textarea {
    min-height: 150px;
    padding-top: 16px;
    resize: vertical;
}

.contact-field input::placeholder, .contact-field textarea::placeholder {
    color: rgba(255,255,255,.40);
}

.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus {
    border-color: rgba(37,242,197,.42);
    box-shadow: 0 0 0 4px rgba(37,242,197,.08);
}

.contact-field select option {
    background: #08111c;
    color: #fff;
}

.contact-submit-btn {
    width: max-content;
    min-height: 58px;
    padding: 0 30px;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #03140f;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 48px rgba(33,242,190,.24);
    transition: .25s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 62px rgba(33,242,190,.34);
}

/* Side Panel */
.contact-side-panel {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 22px;
}

.contact-side-box, .contact-services-box {
    padding: 28px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
        rgba(9,13,20,.88);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.contact-side-box h3, .contact-services-box h3 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.contact-side-box p {
    margin: 0 0 24px;
    color: rgba(255,255,255,.64);
    font-size: 14px;
    line-height: 1.7;
}

.contact-side-list {
    display: grid;
    gap: 12px;
}

.contact-side-list a, .contact-side-list span {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 16px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 14px;
    transition: .25s ease;
}

.contact-side-list a:hover {
    color: #25f2c5;
    border-color: rgba(37,242,197,.25);
    transform: translateX(5px);
}

.contact-side-list i {
    color: #25f2c5;
}

.contact-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-service-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    color: rgba(255,255,255,.76);
    font-size: 13px;
    font-weight: 700;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
}

/* Map */
.contact-map-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 22%, rgba(32,233,255,.10), transparent 30%),
        linear-gradient(180deg, #05080d 0%, #000 100%);
}

.contact-map-head {
    display: grid;
    grid-template-columns: 1fr .75fr;
    gap: 50px;
    align-items: end;
    margin-bottom: 46px;
}

.contact-map-head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(31px, 3.48vw, 56px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.055em;
}

.contact-map-head p {
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: 16px;
    line-height: 1.75;
}

.contact-map-box {
    height: 500px;
    border-radius: 38px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
    background: #10151f;
}

.contact-map-box iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(1) invert(.92) contrast(.9);
}

/* Final CTA */
.contact-final-cta {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #000;
}

.contact-final-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 44px;
    align-items: center;
    padding: 58px 0;
    border-top: 1px solid rgba(255,255,255,.14);
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.contact-final-box h2 {
    max-width: 880px;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.13vw, 50px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.052em;
}

/* Responsive */
@media (max-width: 1200px) {
    .contact-hero-grid, .contact-main-layout, .contact-map-head, .contact-final-box {
        grid-template-columns: 1fr;
    }

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

    .contact-info-card:nth-child(2) {
        border-right: none;
    }

    .contact-info-card:nth-child(1), .contact-info-card:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .contact-side-panel {
        position: relative;
        top: auto;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .contact-hero {
        padding: 100px 0 70px;
    }

    .contact-hero-grid {
        gap: 34px;
    }

    .contact-hero-content h1 {
        font-size: 23px;
        line-height: 1.15;
    }

    .contact-hero-content p {
        font-size: 15px;
    }

    .contact-main-btn, .contact-submit-btn {
        width: 100%;
    }

    .contact-ceo-card {
        padding: 24px;
        border-radius: 26px;
    }

    .contact-ceo-top {
        grid-template-columns: 68px 1fr;
    }

    .contact-ceo-avatar {
        width: 68px;
        height: 68px;
    }

    .contact-ceo-top h3 {
        font-size: 19px;
    }

    .contact-info-section {
        padding: 40px 0;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.10);
        padding: 28px 0;
    }

    .contact-info-card:last-child {
        border-bottom: none;
    }

    .contact-main-section, .contact-map-section {
        padding: 70px 0;
    }

    .contact-form-panel {
        padding: 24px;
        border-radius: 28px;
    }

    .contact-form-panel h2, .contact-map-head h2, .contact-final-box h2 {
        font-size: 21px;
        line-height: 1.2;
    }

    .contact-form-panel > p, .contact-map-head p {
        font-size: 15px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .contact-side-panel {
        grid-template-columns: 1fr;
    }

    .contact-side-box, .contact-services-box {
        padding: 22px;
        border-radius: 24px;
    }

    .contact-map-box {
        height: 360px;
        border-radius: 26px;
    }

    .contact-final-cta {
        padding: 70px 0;
    }

    .contact-final-box {
        padding: 42px 0;
    }
}

/* ===========================================================
   Premium Meet Our Team Page
   =========================================================== */

.team-hero {
    position: relative;
    padding: 90px 0 56px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(37,242,197,.11), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(32,233,255,.10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.team-hero::before, .team-members-section::before, .team-culture-section::before, .team-skills-section::before, .team-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: .18;
    mask-image: radial-gradient(circle at center, black 35%, transparent 90%);
}

.team-hero .container, .team-members-section .container, .team-culture-section .container, .team-skills-section .container, .team-cta-section .container {
    position: relative;
    z-index: 2;
}

.team-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 36px;
    align-items: end;
}

.team-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.team-label::before {
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, #25f2c5, transparent);
}

.team-hero-content h1 {
    max-width: 1050px;
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2.71vw, 35px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.05em;
}

.team-hero-content p {
    max-width: 760px;
    margin: 16px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 15px;
    line-height: 1.7;
}

.team-hero-card {
    margin: 0;
    padding: 22px;
    border-radius: 20px;
    border-left: 3px solid #25f2c5;
    background:
        radial-gradient(circle at 18% 20%, rgba(37,242,197,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.030)),
        rgba(9,13,20,.90);
    border-top: 1px solid rgba(255,255,255,.11);
    border-right: 1px solid rgba(255,255,255,.11);
    border-bottom: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
}

.team-hero-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.team-hero-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(37,242,197,.35);
}

.team-hero-card span {
    display: inline-flex;
    margin: 0;
    color: #25f2c5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.team-hero-card blockquote {
    margin: 0 0 10px;
    padding: 0;
}

.team-hero-card blockquote p {
    margin: 0;
    color: #fff;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.03em;
    font-style: normal;
}

.team-hero-card figcaption {
    color: rgba(255,255,255,.66);
    font-size: 13px;
    line-height: 1.6;
}

/* Team Members */
.team-members-section {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(37,242,197,.10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.team-section-head {
    max-width: 920px;
    margin-bottom: 32px;
}

.team-section-head h2, .team-culture-content h2, .team-skills-head h2, .team-cta-box h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(23px, 2.61vw, 37px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.045em;
}

.team-section-head p {
    max-width: 740px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    line-height: 1.65;
}

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

.team-card {
    position: relative;
    min-height: 300px;
    padding: 12px;
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.030)),
        rgba(9,13,20,.90);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.32);
    transition: .32s ease;
}

.team-card-large {
    grid-row: span 2;
    min-height: 420px;
}

.team-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 18%, rgba(37,242,197,.14), transparent 34%),
        linear-gradient(135deg, rgba(37,242,197,.09), transparent 38%);
    opacity: 0;
    transition: .32s ease;
}

.team-card:hover {
    transform: translateY(-10px);
    border-color: rgba(37,242,197,.28);
    box-shadow:
        0 34px 90px rgba(0,0,0,.48),
        0 0 48px rgba(37,242,197,.11);
}

.team-card:hover::before {
    opacity: 1;
}

.team-card-image {
    position: relative;
    z-index: 2;
    height: 190px;
    border-radius: 14px;
    overflow: hidden;
    background: #10151f;
    border: 1px solid rgba(255,255,255,.10);
}

.team-card-large .team-card-image {
    height: 280px;
}

.team-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(0,0,0,.76) 100%),
        radial-gradient(circle at 20% 18%, rgba(37,242,197,.16), transparent 36%);
}

.team-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .45s ease;
    filter: saturate(1.08) contrast(1.05);
}

.team-card:hover .team-card-image img {
    transform: scale(1.08);
}

.team-card-content {
    position: relative;
    z-index: 2;
    padding: 14px 4px 4px;
}

.team-card-content > span {
    display: inline-flex;
    margin-bottom: 5px;
    color: #25f2c5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.team-card-content h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.025em;
}

.team-card-content p {
    margin: 0 0 12px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.55;
}

.team-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-socials a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    transition: .25s ease;
}

.team-socials a:hover {
    color: #03140f;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    transform: translateY(-3px);
}

/* Bento grid variation for team + role cards */
.team-bento-grid {
    grid-template-columns: repeat(3, 1fr);
}

.team-founder-photo {
    position: relative;
    background: linear-gradient(135deg, rgba(37,242,197,.18), rgba(20,141,255,.14));
}

.team-photo-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.92);
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-family: var(--heading-font, "Kanit", sans-serif);
}

.team-founder-photo img {
    position: relative;
    z-index: 2;
}

.team-role-card {
    min-height: auto;
    padding: 16px;
}

.team-role-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.team-role-avatar {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #03140f;
    font-size: 17px;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 14px 34px rgba(33,242,190,.18);
}

.team-role-head span {
    color: #25f2c5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.team-role-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.team-role-skills span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
}

.team-role-card:hover .team-role-skills span {
    border-color: rgba(37,242,197,.30);
    color: #fff;
}

.team-role-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 700;
}

.team-role-link i {
    transition: .25s ease;
}

.team-role-card:hover .team-role-link i {
    transform: translateX(4px);
}

/* Skills marquee */
.team-skills-marquee {
    margin-top: 32px;
}

/* Culture */
.team-culture-section {
    position: relative;
    padding: 70px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 22%, rgba(32,233,255,.10), transparent 30%),
        linear-gradient(180deg, #05080d 0%, #000 100%);
}

.team-culture-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 32px;
    align-items: start;
}

.team-culture-content {
    position: sticky;
    top: 90px;
}

.team-culture-content p {
    margin: 14px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.65;
}

.team-culture-list {
    display: grid;
    gap: 12px;
}

.team-culture-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.030)),
        rgba(9,13,20,.90);
    border: 1px solid rgba(255,255,255,.10);
    transition: .3s ease;
}

.team-culture-item:hover {
    transform: translateX(8px);
    border-color: rgba(37,242,197,.28);
}

.team-culture-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #03140f;
    font-size: 17px;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 14px 34px rgba(33,242,190,.22);
}

.team-culture-item h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
}

.team-culture-item p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.55;
}

/* Skills */
.team-skills-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(37,242,197,.10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.team-skills-head {
    max-width: 860px;
    margin-bottom: 24px;
}

/* CTA */
.team-cta-section {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    background: #000;
}

.team-cta-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 32px 0;
    border-top: 1px solid rgba(255,255,255,.14);
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.team-cta-box h2 {
    max-width: 880px;
}

.team-main-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    color: #03140f;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 48px rgba(33,242,190,.24);
    transition: .25s ease;
}

.team-main-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 62px rgba(33,242,190,.34);
}

/* ══════════════════════════════════════════════════════════════
   TEAM — sophisticated, database-driven person cards
══════════════════════════════════════════════════════════════ */
.team-person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.team-person-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 26px;
    padding: 28px 26px 30px;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.team-person-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(37,242,197,.35), transparent 40%, rgba(20,141,255,.25));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.team-person-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37,242,197,.30);
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
}

.team-person-card:hover::before {
    opacity: 1;
}

.team-person-card--founder {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    background: linear-gradient(135deg, rgba(37,242,197,.07), rgba(20,141,255,.05));
}

.team-person-photo {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(37,242,197,.14), rgba(20,141,255,.10));
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-person-card--founder .team-person-photo {
    width: 220px;
    max-width: 38%;
    margin-bottom: 0;
}

.team-person-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-person-fallback {
    font-family: var(--heading-font);
    font-size: 42px;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    letter-spacing: .02em;
}

.team-person-founder-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    color: #03140f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.team-person-card--placeholder {
    border-style: dashed;
    background: rgba(255,255,255,.02);
}

.team-person-card--placeholder .team-person-photo {
    background: rgba(255,255,255,.04);
}

.team-person-founder-tag--placeholder {
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.18);
}


.team-person-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.team-person-body h3 {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.team-person-role {
    display: inline-block;
    color: #25f2c5;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

.team-person-exp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 13px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 600;
}

.team-person-bio {
    color: rgba(255,255,255,.62);
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.team-person-portfolio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    color: #25f2c5;
    font-size: 14px;
    font-weight: 600;
    transition: .2s ease;
}

.team-person-portfolio:hover {
    color: #fff;
    transform: translateX(4px);
}

.team-person-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.team-person-skills span {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(37,242,197,.08);
    border: 1px solid rgba(37,242,197,.18);
    color: rgba(255,255,255,.78);
    font-size: 11.5px;
    font-weight: 600;
}

.team-person-socials {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.team-person-socials a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.78);
    font-size: 14px;
    transition: .2s ease;
}

.team-person-socials a:hover {
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    border-color: transparent;
    color: #03140f;
    transform: translateY(-2px);
}

.team-empty-state {
    color: rgba(255,255,255,.55);
    font-size: 15px;
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
}

@media (max-width: 900px) {
    .team-person-card--founder {
        grid-column: 1 / -1;
        flex-direction: column;
        text-align: left;
    }

    .team-person-card--founder .team-person-photo {
        width: 100%;
        max-width: none;
        margin-bottom: 22px;
    }
}


/* Responsive */
@media (max-width: 1200px) {
    .team-hero-grid, .team-culture-layout, .team-cta-box {
        grid-template-columns: 1fr;
    }

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

    .team-card-large {
        grid-row: auto;
        min-height: 320px;
    }

    .team-card-large .team-card-image {
        height: 190px;
    }

    .team-culture-content {
        position: relative;
        top: auto;
    }
}

@media (max-width: 768px) {
    .team-hero {
        padding: 60px 0 40px;
    }

    .team-hero-grid {
        gap: 22px;
    }

    .team-hero-content h1, .team-section-head h2, .team-culture-content h2, .team-skills-head h2, .team-cta-box h2 {
        font-size: 18px;
        line-height: 1.15;
    }

    .team-hero-content p, .team-section-head p, .team-culture-content p {
        font-size: 13px;
    }

    .team-hero-card {
        padding: 16px;
        border-radius: 16px;
    }

    .team-hero-card blockquote p {
        font-size: 18px;
    }

    .team-members-section, .team-culture-section, .team-skills-section {
        padding: 44px 0;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .team-card {
        min-height: auto;
        border-radius: 18px;
    }

    .team-person-grid {
        gap: 14px;
    }

    .team-person-card {
        padding: 18px 16px 20px;
        border-radius: 18px;
    }

    .team-person-body h3 {
        font-size: 16px;
    }

    .team-person-bio {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .team-card-image, .team-card-large .team-card-image {
        height: 220px;
        border-radius: 14px;
    }

    .team-photo-fallback {
        font-size: 44px;
    }

    .team-culture-layout {
        gap: 20px;
    }

    .team-culture-item {
        padding: 14px;
        border-radius: 14px;
    }

    .team-culture-item:hover {
        transform: translateY(-6px);
    }

    .team-culture-item h3 {
        font-size: 13px;
    }

    .team-cta-section {
        padding: 44px 0;
    }

    .team-cta-box {
        padding: 26px 0;
    }

    .team-main-btn {
        width: 100%;
    }
}
/* ===========================================================
   New Index Hero Slider + What We Do V3 + Process V3
   Paste at the end of your CSS file
   =========================================================== */

/* HERO SLIDER */
.home-slider-hero {
    position: relative;
    min-height: 700px;
    overflow: hidden;
    background: #07090d;
}

.home-slider {
    position: relative;
    min-height: 780px;
}

.home-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    animation: homeSlideShow 18s infinite;
    background-size: cover;
    background-position: center;
}

.home-slide.is-active {
    pointer-events: auto;
}

.home-slide-one {
    opacity: 1;
    animation-delay: 0s;
    background-image: url("https://images.pexels.com/photos/36706460/pexels-photo-36706460.jpeg?auto=compress&cs=tinysrgb&w=2200");
}

.home-slide-two {
    animation-delay: 6s;
    background-image: url("https://images.pexels.com/photos/7947968/pexels-photo-7947968.jpeg?auto=compress&cs=tinysrgb&w=2200");
}

.home-slide-three {
    animation-delay: 12s;
    background-image: url("https://images.pexels.com/photos/32778341/pexels-photo-32778341.jpeg?auto=compress&cs=tinysrgb&w=2200");
}
@keyframes homeSlideShow {
    0% {
        opacity: 0;
        transform: scale(1.015);
    }
    5% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    38% {
        opacity: 0;
        transform: scale(1.035);
    }
    100% {
        opacity: 0;
    }
}

.home-slide-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.74) 42%, rgba(0,0,0,.34) 100%),
        radial-gradient(circle at 24% 44%, rgba(37,242,197,.16), transparent 28%),
        linear-gradient(180deg, rgba(0,0,0,.20), #000 100%);
}

.home-slide-content {
    position: relative;
    z-index: 2;
      width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding-top: 80px;
}

.home-slide-kicker, .home-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.home-slide-kicker::before, .home-section-label::before {
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, #25f2c5, transparent);
}

.home-slide-content h1, .home-slide-content h2 {
    max-width: 1050px;
    margin: 0;
    color: #fff;
    font-size: clamp(33px, 3.94vw, 68px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -0.07em;
}

.home-slide-content p {
    max-width: 720px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    line-height: 1.8;
}

.home-slide-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 38px;
}

.home-primary-btn, .home-outline-btn {
    min-height: 58px;
    padding: 0 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 15px;
    font-weight: 800;
    transition: .25s ease;
}

.home-primary-btn {
    color: #03140f;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 48px rgba(33,242,190,.26);
}

.home-outline-btn {
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
}

.home-primary-btn:hover, .home-outline-btn:hover {
    transform: translateY(-3px);
}

.home-outline-btn:hover {
    color: #25f2c5;
    border-color: rgba(37,242,197,.36);
}

.home-trust-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.home-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    font-weight: 600;
}

.home-trust-item i {
    color: #25f2c5;
    font-size: 13px;
}

.home-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 42px;
    z-index: 5;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.home-slider-dots span {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    overflow: hidden;
    position: relative;
}

.home-slider-dots span::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #25f2c5;
    transform: translateX(-100%);
    animation: homeDot 18s infinite;
}

.home-slider-dots span:nth-child(2)::before {
    animation-delay: 6s;
}

.home-slider-dots span:nth-child(3)::before {
    animation-delay: 12s;
}

@keyframes homeDot {
    0%, 33% {
        transform: translateX(-100%);
    }
    5%, 30% {
        transform: translateX(0);
    }
    38%, 100% {
        transform: translateX(100%);
    }
}

/* WHAT WE DO V3 */
.home-services-v3 {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(37,242,197,.10), transparent 30%),
        radial-gradient(circle at 86% 16%, rgba(32,233,255,.10), transparent 30%),
        linear-gradient(180deg, #000 0%, #05080d 100%);
}

.home-services-v3::before, .home-process-v3::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: .18;
    mask-image: radial-gradient(circle at center, black 35%, transparent 90%);
}

.home-services-v3 .container, .home-process-v3 .container {
    position: relative;
    z-index: 2;
}

.home-services-head {
    max-width: 980px;
    margin-bottom: 62px;
}

.home-services-head h2, .home-process-head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(33px, 3.65vw, 63px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -0.06em;
}

.home-services-head p {
    max-width: 760px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 17px;
    line-height: 1.75;
}

.home-services-v3-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 28px;
    align-items: stretch;
}

.home-service-feature {
    min-height: 650px;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 38px;
    background: #10151f;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.48);
    transition: .34s ease;
}

.home-service-feature:hover {
    transform: translateY(-10px);
    border-color: rgba(37,242,197,.30);
}

.home-service-feature-img {
    position: absolute;
    inset: 0;
}

.home-service-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
    filter: saturate(1.08) contrast(1.06);
}

.home-service-feature:hover .home-service-feature-img img {
    transform: scale(1.08);
}

.home-service-feature-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.36) 42%, rgba(0,0,0,.92) 100%),
        radial-gradient(circle at 18% 16%, rgba(37,242,197,.20), transparent 34%);
}

.home-service-feature-content {
    position: relative;
    z-index: 2;
    padding: 42px;
}

.home-service-feature-content > span {
    display: inline-flex;
    margin-bottom: 18px;
    min-height: 34px;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: #03140f;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
}

.home-service-feature-content h3 {
    max-width: 650px;
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(30px, 2.78vw, 49px);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: -0.055em;
}

.home-service-feature-content p {
    max-width: 650px;
    margin: 0 0 28px;
    color: rgba(255,255,255,.70);
    font-size: 16px;
    line-height: 1.75;
}

.home-service-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #25f2c5;
    font-size: 15px;
    font-weight: 800;
}

.home-service-list {
    display: grid;
    gap: 18px;
}

.home-service-row {
    position: relative;
    min-height: 149px;
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 20px;
    align-items: center;
    padding: 24px;
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.030)),
        rgba(9,13,20,.90);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    transition: .3s ease;
}

.home-service-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 16%, rgba(37,242,197,.14), transparent 34%),
        linear-gradient(135deg, rgba(37,242,197,.09), transparent 38%);
    opacity: 0;
    transition: .3s ease;
}

.home-service-row:hover {
    transform: translateX(8px);
    border-color: rgba(37,242,197,.28);
}

.home-service-row:hover::before {
    opacity: 1;
}

.home-service-row span, .home-service-row div, .home-service-row i {
    position: relative;
    z-index: 2;
}

.home-service-row > span {
    color: #25f2c5;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    font-family: var(--heading-font, "Kanit", sans-serif);
}

.home-service-row h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.home-service-row p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.65;
}


.home-service-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.home-service-bottom div {
    padding: 28px;
    border-radius: 26px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
}

.home-service-bottom strong {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
}

.home-service-bottom span {
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.65;
}

/* PROCESS V3 */
.home-process-v3 {
    position: relative;
    padding: 130px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 18%, rgba(37,242,197,.10), transparent 30%),
        linear-gradient(180deg, #05080d 0%, #000 100%);
}

.home-process-head {
    max-width: 980px;
    margin-bottom: 70px;
}

.home-process-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.home-process-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37,242,197,.38), transparent);
}

.home-process-card {
    position: relative;
    min-height: 340px;
    padding: 38px 30px;
    border-right: 1px solid rgba(255,255,255,.12);
    transition: .3s ease;
}

.home-process-card:last-child {
    border-right: none;
}

.home-process-card:hover {
    background:
        radial-gradient(circle at 20% 18%, rgba(37,242,197,.12), transparent 34%),
        rgba(255,255,255,.035);
}

.home-process-card span {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    margin-bottom: 70px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #03140f;
    font-size: 17px;
    font-weight: 900;
    background: linear-gradient(135deg, #25f2c5, #20e9ff);
    box-shadow: 0 18px 46px rgba(37,242,197,.24);
}

.home-process-card h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.04em;
}

.home-process-card p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.75;
}

.home-process-banner {
    margin-top: 40px;
    padding: 36px;
    border-radius: 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 34px;
    align-items: center;
    background:
        radial-gradient(circle at 16% 20%, rgba(37,242,197,.13), transparent 32%),
        linear-gradient(135deg, rgba(17,35,59,.94), rgba(8,13,24,.97));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 30px 90px rgba(0,0,0,.36);
}

.home-process-banner span {
    display: inline-flex;
    margin-bottom: 10px;
    color: #25f2c5;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-process-banner h3 {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 2.35vw, 38px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.045em;
}

/* Responsive */
@media (max-width: 1200px) {
    .home-services-v3-grid, .home-process-banner {
        grid-template-columns: 1fr;
    }

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

    .home-process-card:nth-child(2) {
        border-right: none;
    }

    .home-process-card:nth-child(1), .home-process-card:nth-child(2) {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

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

@media (max-width: 768px) {
    .home-slider-hero, .home-slider {
        min-height: 680px;
    }

    .home-slide-content {
        width: min(100%, calc(100% - 32px));
        padding-top: 40px;
    }

    .home-slide-content h1, .home-slide-content h2 {
        font-size: 29px;
        line-height: 1.08;
    }

    .home-slide-content p {
        font-size: 15px;
    }

    .home-primary-btn, .home-outline-btn {
        width: 100%;
    }

    .home-slider-dots {
        bottom: 24px;
    }

    .home-services-v3, .home-process-v3 {
        padding: 70px 0;
    }

    .home-services-head, .home-process-head {
        margin-bottom: 38px;
    }

    .home-services-head h2, .home-process-head h2 {
        font-size: 31px;
        line-height: 1.08;
    }

    .home-services-head p {
        font-size: 15px;
    }

    .home-service-feature {
        min-height: 560px;
        border-radius: 28px;
    }

    .home-service-feature-content {
        padding: 20px;
    }

    .home-service-feature-content h3 {
        font-size: 19px;
        line-height: 1.25;
    }

    .home-service-row {
        grid-template-columns: 1fr;
        gap: 16px;
        min-height: auto;
        padding: 22px;
        border-radius: 24px;
    }

    .home-service-row:hover {
        transform: translateY(-6px);
    }

    .home-service-bottom div {
        padding: 24px;
        border-radius: 22px;
    }

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

    .home-process-line::before {
        display: none;
    }

    .home-process-card {
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.12);
        padding: 30px 0;
    }

    .home-process-card:last-child {
        border-bottom: none;
    }

    .home-process-card span {
        margin-bottom: 34px;
    }

    .home-process-card h3 {
        font-size: 23px;
    }

    .home-process-banner {
        padding: 26px;
        border-radius: 24px;
    }

    .home-process-banner h3 {
        font-size: 24px;
    }
}
/* ===========================================================
   FIX: Hero Slider Text Overflow / Zoom Responsive
   Paste at the END of CSS file
   =========================================================== */

.home-slider-hero, .home-slider, .home-slide {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.home-slide {
    left: 0;
    right: 0;
}

.home-slide-content {
    width: min(1320px, calc(100% - 48px));
    max-width: 1320px;
    margin: 0 auto;
    padding-top: 70px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.home-slide-content h1, .home-slide-content h2 {
    max-width: 980px;
    font-size: clamp(29px, 3.39vw, 57px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    word-break: normal;
    overflow-wrap: normal;
}

.home-slide-content p {
    max-width: 680px;
    font-size: clamp(15px, 1.2vw, 18px);
}

.home-slide-actions {
    max-width: 680px;
}

/* Fix for browser zoom / medium screens */
@media (max-width: 1400px) {
    .home-slide-content {
        width: min(1180px, calc(100% - 56px));
    }

    .home-slide-content h1, .home-slide-content h2 {
        max-width: 900px;
        font-size: clamp(40px, 4.7vw, 74px);
    }
}

@media (max-width: 1200px) {
    .home-slide-content {
        width: min(100%, calc(100% - 40px));
        padding-top: 50px;
    }

    .home-slide-content h1, .home-slide-content h2 {
        max-width: 760px;
        font-size: clamp(26px, 4.07vw, 44px);
        line-height: 1.05;
    }

    .home-slide-content p {
        max-width: 620px;
    }
}

@media (max-width: 768px) {
    .home-slider-hero, .home-slider {
        min-height: 760px;
    }

    .home-slide-content {
        width: calc(100% - 28px);
        padding-top: 35px;
    }

    .home-slide-kicker {
        font-size: 11px;
        gap: 8px;
        margin-bottom: 16px;
    }

    .home-slide-content h1, .home-slide-content h2 {
        max-width: 100%;
        font-size: 22px;
        line-height: 1.18;
        letter-spacing: -0.03em;
    }

    .home-slide-content p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.6;
    }

    .home-slide-actions {
        max-width: 100%;
        margin-top: 22px;
    }

    .home-trust-row {
        gap: 10px 16px;
        margin-top: 18px;
    }

    .home-trust-item {
        font-size: 12px;
    }

    .home-trust-item i {
        font-size: 11px;
    }
}
/* ===========================================================
   FIX: Make Hero Slider Background Image More Visible
   Paste at the END of CSS file
   =========================================================== */

.home-slide-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.54) 42%,
            rgba(0,0,0,.22) 100%
        ),
        radial-gradient(circle at 24% 44%, rgba(37,242,197,.10), transparent 30%),
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.42) 100%
        );
}

.home-slide {
    background-position: center center;
}

.home-slide-content h1, .home-slide-content h2, .home-slide-content p {
    text-shadow: 0 8px 28px rgba(0,0,0,.55);
}


/* ===========================================================
   Header Logo + Active Menu Fix
   Paste at the END of your CSS file
   =========================================================== */

.theme-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    background: rgba(7, 9, 13, 0.92);
    border-bottom: none;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.theme-header .navbar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity .25s ease, transform .25s ease;
    padding: 0;
    margin: 0;
    overflow: hidden;
    line-height: 0;
}

.header-logo-img {
    width: 220px;
    height: auto;
    max-width: none;
    object-fit: contain;
    border-radius: 0;
    display: block;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    font-family: var(--body-font, 'Poppins', sans-serif);
    white-space: nowrap;
    line-height: 1;
}

/* Remove old A icon style if still exists */
.logo-icon {
    display: none;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.nav-menu a {
    position: relative;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    padding: 10px 14px;
    border-radius: 999px;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.nav-menu a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 9px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    transition: .25s ease;
    opacity: 0;
}

.nav-menu a:hover, .nav-menu a.active {
    color: #fff;
    background: linear-gradient(135deg, rgb(169, 68, 117), rgb(238, 90, 71));
    box-shadow: 0 10px 24px rgba(238, 90, 71, .22);
    transform: translateY(-1px);
}

.nav-menu a:hover::after, .nav-menu a.active::after {
    opacity: 0;
    width: 0;
}

.header-cta, .navbar .btn-primary {
    margin-left: 10px;
    height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, rgb(169, 68, 117), rgb(238, 90, 71));
    box-shadow: 0 12px 35px rgba(238, 90, 71, .24);
}

/* ── Mobile nav toggle (hamburger) ── */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1101;
}
.mobile-nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s ease, opacity .25s ease;
}
body.mobile-nav-open .mobile-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.mobile-nav-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
body.mobile-nav-open .mobile-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.mobile-nav-open { overflow: hidden; }
body.mobile-nav-open::after {
    content: "";
    position: fixed;
    top: var(--header-h, 78px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.55);
    z-index: 1050;
}

body.mobile-nav-open .mobile-nav-toggle {
    border-radius: 8px;
    border-color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.1);
}

/* Responsive */
@media (max-width: 1200px) {
    .mobile-nav-toggle {
        display: flex;
        order: 3;
    }

    .theme-header .navbar {
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .navbar .btn-primary, .header-cta {
        margin-left: 0;
        order: 2;
    }

    .nav-menu {
        display: flex;
        position: fixed;
        top: var(--header-h, 78px);
        left: 0;
        right: 0;
        height: auto;
        width: 100%;
        max-width: none;
        max-height: calc(100vh - var(--header-h, 78px));
        margin-left: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        padding: 26px 20px 34px;
        border: none;
        border-radius: 0 0 22px 22px;
        background: linear-gradient(165deg, #0d2c52 0%, #0a1f3d 58%, #081526 100%);
        box-shadow: 0 30px 70px rgba(0,0,0,.55);
        overflow-y: auto;
        transform: translateY(-16px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
        z-index: 1100;
    }

    body.mobile-nav-open .nav-menu {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-menu a {
        width: 100%;
        padding: 14px 16px;
        text-align: center;
    }
    .nav-menu a::after {
        display: none;
    }

    body .nav-item-dropdown {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    body .nav-dropdown-trigger {
        width: 100%;
        justify-content: center;
        padding: 14px 16px;
    }

    body .nav-has-mega {
        position: static;
        width: 100%;
    }
    body .nav-mega-menu {
        display: none;
        position: static;
        top: auto;
        left: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        width: 100%;
        max-width: none;
        flex-direction: column;
        border-radius: 14px;
        margin: 4px 0 6px;
        padding: 10px;
        z-index: auto;
        box-shadow: none;
    }
    body .nav-has-mega.is-open .nav-mega-menu {
        display: flex;
        background: rgba(5,9,18,.65);
    }
    body .nav-mega-heading {
        justify-content: center;
    }
    body .nav-mega-divider {
        width: 100%;
        height: 1px;
        margin: 8px 0;
    }
}

@media (max-width: 768px) {
    .theme-header {
        padding: 0;
    }

    .header-logo-img {
        width: 180px;
        height: auto;
    }
    .logo-text {
        font-size: 14px;
    }

    .header-cta, .navbar .btn-primary {
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
    }

    .theme-header .navbar {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .theme-header {
        padding: 0;
    }

    .header-logo-img {
        width: 150px;
        height: auto;
    }

    .header-cta, .navbar .btn-primary {
        height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }

    .mobile-nav-toggle {
        width: 36px;
        height: 36px;
    }

    .theme-header .navbar {
        gap: 8px;
    }

    .nav-menu {
        width: 100%;
        padding: 20px 16px 24px;
    }

    .counter-banner {
        margin: 0 8px;
        padding: 130px 0 18px 0;
        min-height: 320px;
        border-radius: 30px;
    }

    .stats-box {
        left: 8px;
        right: 8px;
        bottom: 8px;
        transform: none;
        gap: 10px;
        padding: 14px 10px;
    }

    .stat-item {
        flex: 1 1 calc(50% - 10px);
        min-width: 96px;
    }

    .stat-item strong {
        font-size: 24px;
    }

    .stat-item span {
        font-size: 11.5px;
    }
}

/* ── Theme toggle button ── */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.theme-toggle-btn:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.theme-toggle-btn svg {
    transition: transform .35s ease;
}


/* ── CSS custom-property overrides ── */


/* ── Body ── */


/* ── Header ── */


/* ── Hero boxes ── */


/* ── Team stat cards inside hero ── */


/* ── Marquee ── */


/* ── Partners strip ── */


/* ── Services section (premium) ── */


/* service cards */


/* ── Steps section (premium) ── */


/* ── Blog section (premium) ── */


/* blog detail cards */


/* ── Testimonial ── */


/* ── Footer ── */


/* ── About page ── */


/* ── Contact page ── */


/* ── Team cards ── */


/* ── Onestop tabs (services page) ── */


/* ── Counter / stats banner ── */


/* ── Security hero ── */


/* ── Onestop section inline image ── */


/* ── General heading/text fallbacks ── */


/* services-page hero (security-style) already covered by .security-hero above */

/* services-premium / v2 section backgrounds */


/* premium service cards */


/* services feature section */


/* services process section */


/* services CTA section */


/* contact hero — already uses body bg, hero headings covered globally */


/* CEO card */


/* contact info strip */


/* contact main form section */


/* contact form fields */


/* side panel boxes */


/* contact map section */


/* contact final CTA */


/* team hero */


/* team hero card (right panel) */


/* team members section */


/* team member cards (premium version) */


/* team culture section */


/* team skills section */


/* team CTA section */


/* Home slider hero — dark overlay never changes */


/* Services page hero — dark overlay stays dark */


/* ── 1. Variables ── */


/* ── 2. Body ── */


/* ── 3. Every section → light (hero exceptions below) ── */

/* restore hero overlays */


/* ── 4. Header ── */


.logo-for-light { display: none; }
.logo-for-dark  { display: block; }


/* ── 6. ALL headings → dark ── */


/* ── 7. Hero headings stay WHITE (higher specificity wins) ── */


/* ── 8. ALL paragraphs → dark (hero p already white from rule 7) ── */


/* ── 9. ALL cards & boxes → white ── */


/* ── 10. Footer ── */


/* ── 11. Form inputs ── */


/* ── 12. Marquee + partners ── */


/* ── 13. Stats ── */


/* ── 14. Process border lines ── */


/* ── 15. Protect gradient buttons — NEVER change ── */


/* .services-page-kicker generic: teal; hero version stays white via rule ── 7 (higher specificity) */


/* ── 17. Page hero boxes (old-style hero used on About breadcrumb etc.) ── */


/* ══════════════════════════════════════════════════════════════
   NAV SERVICES DROPDOWN
══════════════════════════════════════════════════════════════ */
.nav-item-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-dropdown-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
}
.nav-chevron {
    font-size: 9px;
    transition: transform .25s ease;
    opacity: .7;
}
.nav-item-dropdown:hover .nav-chevron, .nav-item-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    background: rgba(13,15,26,.97);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    z-index: 1000;
    backdrop-filter: blur(14px);
}
.nav-item-dropdown:hover .nav-dropdown-panel, .nav-item-dropdown:focus-within .nav-dropdown-panel, .nav-item-dropdown.is-open .nav-dropdown-panel { display: flex; }

.nav-dropdown-panel a {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: 9px;
    color: rgba(255,255,255,.72) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .18s, color .18s;
    background: transparent !important;
}
.nav-dropdown-panel a:hover, .nav-dropdown-panel a.nav-dd-active {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
}
.nav-dropdown-panel a i {
    color: #25f2c5;
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
/* divider after "All Services" */
.nav-dropdown-panel a:first-child {
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 4px;
    padding-bottom: 12px;
}


/* Wide dropdown for Web Design (9 items — 2 column grid) */
.nav-dropdown-panel--wide {
    min-width: 460px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.nav-item-dropdown:hover .nav-dropdown-panel--wide, .nav-item-dropdown:focus-within .nav-dropdown-panel--wide { display: grid; }

/* First item (All Web Design) spans both columns */
.nav-dropdown-panel--wide a:first-child {
    grid-column: 1 / -1;
}


/* ── Service page breadcrumb ── */
.svc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 22px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
}
.svc-breadcrumb a {
    color: rgba(255,255,255,.60);
    text-decoration: none;
    transition: color .18s;
}
.svc-breadcrumb a:hover { color: #25f2c5; }
.svc-breadcrumb i {
    font-size: 9px;
    margin: 0 9px;
    opacity: .45;
}
.svc-breadcrumb span { color: rgba(255,255,255,.88); }


/* ══════════════════════════════════════════════════════════════
   SERVICES MEGA-MENU
══════════════════════════════════════════════════════════════ */
.nav-has-mega { position: static; }

.nav-mega-menu {
    /* Use opacity/visibility so CSS transition-delay works (display can't animate) */
    display:         flex;
    opacity:         0;
    visibility:      hidden;
    pointer-events:  none;
    /* Hide delay: gives the cursor time to travel from trigger into the panel */
    transition:      opacity .18s ease, visibility .18s ease;
    transition-delay: .13s;

    position:        absolute;
    top:             calc(100% + 10px);
    left:            50%;
    transform:       translateX(-50%);
    width:           min(1140px, 94vw);
    background:      rgba(13,15,26,.97);
    border:          1px solid rgba(255,255,255,.09);
    border-radius:   18px;
    padding:         28px 24px;
    flex-direction:  row;
    gap:             0;
    box-shadow:      0 28px 80px rgba(0,0,0,.60);
    backdrop-filter: blur(16px);
    z-index:         1000;
}

/* Invisible bridge above the panel — fills the gap so hover stays alive */
.nav-mega-menu::before {
    content:  '';
    position: absolute;
    top:      -18px;
    left:     0;
    right:    0;
    height:   18px;
    display:  block;
}

/* the navbar must be position:relative for absolute children */
.navbar { position: relative; }

.nav-has-mega:hover .nav-mega-menu, .nav-has-mega:focus-within .nav-mega-menu, .nav-has-mega.is-open .nav-mega-menu {
    opacity:          1;
    visibility:       visible;
    pointer-events:   auto;
    transition-delay: 0s; /* show instantly */
}

/* Columns */
.nav-mega-col {
    flex: 1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

/* Vertical divider between columns */
.nav-mega-divider {
    width:        1px;
    background:   rgba(255,255,255,.07);
    margin:       0 16px;
    flex-shrink:  0;
}

/* Column heading (clickable category title) */
.nav-mega-col a.nav-mega-heading {
    display:         flex !important;
    align-items:     center;
    gap:             9px;
    padding:         10px 12px 12px;
    font-size:       13px;
    font-weight:     800;
    letter-spacing:  .07em;
    text-transform:  uppercase;
    color:           #25f2c5 !important;
    border-bottom:   1px solid rgba(255,255,255,.07);
    margin-bottom:   6px;
    border-radius:   0;
    background:      transparent !important;
    text-decoration: none;
}
.nav-mega-col a.nav-mega-heading i { font-size: 14px; color: #25f2c5; }
.nav-mega-col a.nav-mega-heading:hover { color: #fff !important; }

/* Regular service links */
.nav-mega-col a {
    display:     flex !important;
    align-items: center;
    gap:         10px;
    padding:     9px 12px;
    border-radius: 8px;
    font-size:   13.5px;
    font-weight: 500;
    color:       rgba(255,255,255,.68) !important;
    text-decoration: none;
    transition:  background .16s, color .16s;
    background:  transparent !important;
}
.nav-mega-col a:hover, .nav-mega-col a.nav-dd-active {
    background: rgba(255,255,255,.07) !important;
    color:      #fff !important;
}
.nav-mega-col a i {
    color:      #25f2c5;
    font-size:  12px;
    width:      15px;
    text-align: center;
    flex-shrink: 0;
}

/* Card-style item: boxed icon + title + description (Capabilities style) */
.nav-mega-col a.nav-mega-item {
    align-items: flex-start;
    gap: 12px;
    padding: 9px 12px;
}
.nav-mega-item-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37,242,197,.08);
    border: 1px solid rgba(37,242,197,.18);
    margin-top: 1px;
    transition: background .16s, border-color .16s;
}
.nav-mega-item-icon i {
    color: #25f2c5;
    font-size: 14px;
    width: auto;
}
.nav-mega-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nav-mega-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    line-height: 1.3;
}
.nav-mega-item-desc {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255,255,255,.45);
    line-height: 1.4;
}
.nav-mega-col a.nav-mega-item:hover .nav-mega-item-icon, .nav-mega-col a.nav-mega-item.nav-dd-active .nav-mega-item-icon {
    background: rgba(37,242,197,.16);
    border-color: rgba(37,242,197,.32);
}

/* "View All →" link */
.nav-mega-col a.nav-mega-viewall {
    margin-top:  8px;
    font-size:   12px;
    font-weight: 700;
    color:       rgba(255,255,255,.40) !important;
    padding:     7px 12px;
    border-top:  1px solid rgba(255,255,255,.06);
    border-radius: 0;
    letter-spacing: .04em;
    gap:         6px;
}
.nav-mega-col a.nav-mega-viewall:hover {
    background:  transparent !important;
    color:       #25f2c5 !important;
}
.nav-mega-col a.nav-mega-viewall i { color: inherit; font-size: 10px; }

/* Mega-menu mobile stacking is handled inside the .nav-menu drawer rules (max-width: 1200px) above. */

/* ============== Site-wide notice modal (contact form / newsletter) ============== */
.site-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}

.site-modal.open {
    display: flex;
}

.site-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(6px);
}

.site-modal-panel {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    border-radius: 24px;
    background: linear-gradient(180deg, #0f1e34 0%, #09111f 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.site-modal-panel.success { border-color: rgba(37, 242, 197, 0.35); }
.site-modal-panel.error { border-color: rgba(255, 92, 92, 0.45); }

.site-modal-header {
    padding: 22px 26px 0;
    display: flex;
    justify-content: flex-end;
}

.site-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.site-modal-body {
    padding: 10px 28px 32px;
    text-align: center;
}

.site-modal-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    font-size: 28px;
    color: #0a1320;
}

.site-modal-panel.success .site-modal-icon { background: linear-gradient(180deg, #4dffcf 0%, #25f2c5 100%); }
.site-modal-panel.error .site-modal-icon { background: linear-gradient(180deg, #ff7b7b 0%, #f03d3d 100%); color: #fff; }

.site-modal-title {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #fff;
}

.site-modal-message {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

@media (max-width: 768px) {
    .site-modal-panel { border-radius: 18px; }
    .site-modal-body { padding: 6px 20px 26px; }
    .site-modal-title { font-size: 21px; }
    .site-modal-message { font-size: 14px; }
}

/* ===========================================================
   MOBILE CARD SLIDERS
   Converts stacked card grids into a horizontal swipeable
   row on mobile, instead of long vertical stacks.
   Paste at the END of CSS file
   =========================================================== */
@media (max-width: 768px) {
    .blog-grid, .services-v2-stack, .services-v2-bottom, .about-capability-grid, .team-person-grid, .blog-listing-grid, .home-service-bottom {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        margin: 0 -16px;
        padding: 4px 16px 14px;
        scrollbar-width: none;
    }

    .blog-grid::-webkit-scrollbar, .services-v2-stack::-webkit-scrollbar, .services-v2-bottom::-webkit-scrollbar, .about-capability-grid::-webkit-scrollbar, .team-person-grid::-webkit-scrollbar, .blog-listing-grid::-webkit-scrollbar, .home-service-bottom::-webkit-scrollbar {
        display: none;
    }

    .blog-grid > .blog-card, .services-v2-stack > .service-mini-card, .services-v2-bottom > .service-wide-card, .about-capability-grid > .about-capability-item, .team-person-grid > .team-person-card, .blog-listing-grid > .blog-list-card, .home-service-bottom > div {
        flex: 0 0 85%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .team-person-grid > .team-person-card--founder {
        flex-basis: 92%;
    }
}

/* ===========================================================
   MOBILE STEP SLIDERS
   Numbered step/process rows become horizontal sliders.
   (.why-choose-grid is intentionally excluded - those cards sit
   directly above a CTA button and the slider nav crowded it.)
   Paste at the END of CSS file
   =========================================================== */
@media (max-width: 768px) {
    /* Break min-content propagation so the fr/grid ancestor tracks shrink
       to the viewport instead of expanding to fit the un-wrapped slider content */
    .workflow-layout, .about-journey-layout {
        min-width: 0;
    }

    .workflow-steps, .about-journey-timeline, .home-process-line {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        margin: 0 -16px;
        padding: 4px 16px 14px;
        scrollbar-width: none;
        min-width: 0;
    }

    .workflow-steps::-webkit-scrollbar, .about-journey-timeline::-webkit-scrollbar, .home-process-line::-webkit-scrollbar {
        display: none;
    }

    .workflow-steps > .workflow-step, .about-journey-timeline > .about-journey-item, .home-process-line > .home-process-card {
        flex: 0 0 85%;
        min-width: 0;
        scroll-snap-align: start;
    }

    /* Disable vertical timeline connectors - they don't make sense in a horizontal slider */
    .workflow-steps::before, .home-process-line::before {
        display: none;
    }

    /* Give borderless timeline items a self-contained card look */
    .about-journey-item {
        padding: 22px 18px 26px;
        border-left: none;
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
            rgba(7,12,20,.65);
        border: 1px solid rgba(255,255,255,.09);
    }

    .about-journey-item:last-child {
        padding-bottom: 26px;
    }

    .about-journey-item::before {
        display: none;
    }

    .home-process-card {
        border-right: none;
        border-bottom: none;
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
            rgba(7,12,20,.65);
        border: 1px solid rgba(255,255,255,.09);
        padding: 22px 18px;
        min-height: auto;
    }
}

/* ===========================================================
   MOBILE SLIDER NAV CONTROLS (prev/next + dots)
   Injected by mobile-sliders.js after each slider container.
   Hidden above the mobile breakpoint where sliders are inactive.
   Paste at the END of CSS file
   =========================================================== */
.slider-nav {
    display: none;
}

@media (max-width: 768px) {
    .slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 14px;
    }

    .slider-nav-btn {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.16);
        color: #fff;
        font-size: 13px;
        cursor: pointer;
        transition: .2s ease;
    }

    .slider-nav-btn:hover:not(:disabled) {
        background: rgba(37,242,197,.16);
        border-color: rgba(37,242,197,.45);
        color: #25f2c5;
    }

    .slider-nav-btn:disabled {
        opacity: .35;
        cursor: default;
    }

    .slider-dots {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .slider-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: rgba(255,255,255,.22);
        cursor: pointer;
        transition: .2s ease;
    }

    .slider-dot.is-active {
        width: 20px;
        background: #25f2c5;
    }
}


/* ===========================================================
   BACK TO TOP BUTTON
   Paste at the END of CSS file
   =========================================================== */
.back-to-top-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .25s ease, color .25s ease;
    z-index: 900;
    box-shadow: 0 14px 34px rgba(0,0,0,.4);
}

.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background: #25f2c5;
    color: #03140f;
}

body.mobile-nav-open .back-to-top-btn {
    display: none;
}

@media (max-width: 768px) {
    .back-to-top-btn {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
        font-size: 14px;
    }
}