/* ==========================================================================
   TechSky Media — shared stylesheet
   ========================================================================== */

:root{
  --brand:#0269B8;
  --brand-dark:#024E8A;
  --brand-darker:#012F52;
  --brand-light:#E7F1FA;
  --brand-tint:#F0F7FD;
  --ink:#081B2B;
  --ink-soft:#4B5D6E;
  --ink-faint:#7C8CA0;
  --accent:#FF7A30;
  --accent-dark:#E3611A;
  --success:#17B890;
  --bg:#F6F9FC;
  --white:#FFFFFF;
  --border:#E1E8EF;
  --shadow-sm:0 2px 10px rgba(2,30,56,.06);
  --shadow-md:0 10px 30px rgba(2,30,56,.10);
  --shadow-lg:0 24px 60px rgba(2,30,56,.16);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --container:1500px; /* was 1240px — widened per request */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.15;letter-spacing:-0.02em;}
p{margin:0;line-height:1.7;color:var(--ink-soft);}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

.container{max-width:var(--container);margin:0 auto;padding:0 32px;} /* padding was 24px */
.section{padding:50px 0;}
.section--tight{padding:64px 0;}
.section--dark{background:var(--brand-darker);color:#fff;}
.section--dark p{color:#B7D2E8;}
.section--tint{background:var(--brand-tint);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-light);
  padding:7px 16px;border-radius:99px;margin-bottom:18px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);}

.section-head{max-width:680px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px;}
.section-head p{font-size:16.5px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:99px;font-weight:600;font-size:15px;
  border:2px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(255,122,48,.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,122,48,.45);}
.btn-outline{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:#fff;color:var(--brand-dark);border-color:#fff;}
.btn-ghost{border-color:var(--brand);color:var(--brand);}
.btn-ghost:hover{background:var(--brand);color:#fff;}
.btn-sm{padding:10px 20px;font-size:13.5px;}

/* ---------------- Top bar ---------------- */
.topbar{background:var(--brand-darker);color:#CFE2F3;font-size:13.5px;}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px;}
.topbar-left{display:flex;gap:22px;flex-wrap:wrap;}
.topbar-left a{display:flex;align-items:center;gap:7px;color:#CFE2F3;}
.topbar-left a:hover{color:#fff;}
.topbar-social{display:flex;gap:14px;}
.topbar-social a{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:12px;}
.topbar-social a:hover{background:var(--accent);}

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--brand-darker);}
.logo .mark{
  width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:800;
  box-shadow:var(--shadow-sm);
}
.logo span{color:var(--accent);}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav > ul{display:flex;align-items:center;gap:2px;}
.main-nav > ul > li{position:relative;}
.nav-link{
  display:flex;align-items:center;gap:6px;padding:14px 16px;font-weight:600;font-size:14.5px;
  color:var(--ink);border-radius:8px;transition:color .2s;
}
.nav-link:hover,.has-mega.open .nav-link{color:var(--accent);} /* hover color now accent orange, was var(--brand) */
.nav-link .chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .25s;margin-top:-4px;opacity:.7;}
.has-mega.open .nav-link .chev{transform:rotate(-135deg);margin-top:2px;}

.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-phone{display:flex;flex-direction:column;line-height:1.25;}
.nav-phone small{color:var(--ink-faint);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.nav-phone strong{color:var(--brand-darker);font-size:15px;}

/* Mega panel (generic - used by About Us etc.) */
.mega{
  position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,10px);
  min-width:400px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  border:1px solid var(--border);border-top:3px solid var(--accent);padding:26px 22px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;z-index:50;
}
.has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
@media (min-width:901px){
  .has-mega:hover .mega,
  .has-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
  .has-mega:hover .nav-link,
  .has-mega:focus-within .nav-link{color:var(--accent);} /* hover color now accent orange, was var(--brand) */
  .has-mega:hover .nav-link .chev,
  .has-mega:focus-within .nav-link .chev{transform:rotate(-135deg);margin-top:2px;}
}
.mega::before{
  content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:16px;height:16px;background:#fff;border-left:1px solid var(--border);border-top:1px solid var(--border);
}
.mega-grid{display:grid;gap:26px;}
.mega-grid.cols-1{grid-template-columns:1fr;min-width:360px;}
.mega-grid.cols-3{grid-template-columns:repeat(3,1fr);min-width:1000px;}
.mega-col-title{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.mega-item{display:flex;gap:14px;align-items:center;padding:11px 10px;border-radius:12px;transition:background .18s ease,transform .18s ease;}
.mega-item:hover{background:#FFF3EB;transform:translateX(3px);}
.mega-item .ico{
  flex:none;width:40px;height:40px;border-radius:11px;background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:background .18s ease,color .18s ease;
}
.mega-item:hover .ico{background:var(--accent);color:#fff;}
.mega-item .txt strong{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px;}
.mega-item .txt span{font-size:12.5px;color:var(--ink-faint);}
.mega-cta{
  margin-top:6px;padding-top:20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.mega-cta p{font-size:13px;margin:0;color:var(--ink-soft);}

.mobile-toggle{display:none;flex-direction:column;gap:5px;width:34px;background:none;border:none;padding:4px;}
.mobile-toggle span{height:2.5px;border-radius:2px;background:var(--ink);transition:.25s;}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;background:linear-gradient(155deg,var(--brand-darker) 0%,var(--brand-dark) 45%,var(--brand) 100%);
  color:#fff;overflow:hidden;padding:90px 0 120px;
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);padding:7px 16px;border-radius:99px;font-size:13px;font-weight:600;margin-bottom:22px;
}
.hero h1{font-size:clamp(34px,5vw,54px);margin-bottom:20px;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p.lead{color:#CFE2F3;font-size:17.5px;max-width:520px;margin-bottom:30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.hero-points{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;max-width:520px;}
.hero-points li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#E4F0FA;}
.hero-points li .tick{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px;}

.quote-card{
  position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:32px;color:var(--ink);
}
.quote-card h3{font-size:20px;margin-bottom:4px;}
.quote-card .sub{font-size:13.5px;color:var(--ink-faint);margin-bottom:20px;display:block;}
.quote-card form{display:grid;gap:12px;}
.quote-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.quote-card input,.quote-card select,.quote-card textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--border);font-size:14px;background:var(--bg);
  transition:border-color .2s;
}
.quote-card input:focus,.quote-card select:focus,.quote-card textarea:focus{outline:none;border-color:var(--brand);}
.quote-card textarea{resize:vertical;min-height:70px;}
.quote-card button{width:100%;border:none;margin-top:4px;}

/* ---------------- Stats strip ---------------- */
.stats{background:var(--brand);color:#fff;}
.stats .container{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:34px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.18);}
.stat:last-child{border-right:none;}
.stat strong{display:block;font-size:clamp(26px,3vw,36px);font-weight:800;}
.stat span{font-size:13px;color:#CFE2F3;}

/* ---------------- Cards ---------------- */
.grid{display:grid;gap:26px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}

.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:30px;
  box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.card .ico{
  width:54px;height:54px;border-radius:14px;background:var(--accent-tint,var(--brand-light));color:var(--accent,var(--brand));
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px;
}
.card h3{font-size:18.5px;margin-bottom:10px;}
.card p{font-size:14.5px;}
.card .learn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--brand);}

.pill-list{display:flex;flex-wrap:wrap;gap:10px;}
.pill{padding:9px 16px;border-radius:99px;background:var(--brand-tint);color:var(--brand-dark);font-size:13px;font-weight:600;border:1px solid var(--border);}

/* ---------------- Vision/Mission/Values (icon-ring cards) ---------------- */
.value-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.value-card{
  --accent:#0269B8;--accent-tint:#E7F1FA;
  background:#fff;border:1px solid var(--border);border-bottom:4px solid var(--accent);
  border-radius:var(--radius-md);padding:38px 32px 32px;text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease;
}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.value-card .ico-ring{
  width:88px;height:88px;border-radius:50%;border:2px dashed var(--accent-tint);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.value-card .ico-ring .ico-inner{
  width:62px;height:62px;border-radius:50%;background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.value-card h3{font-size:20px;margin-bottom:14px;}
.value-card h3 .ink{color:var(--ink);}
.value-card h3 .accent{color:var(--accent);}
.value-card > p{font-size:14px;margin-bottom:22px;}
.value-list{display:grid;gap:11px;text-align:left;}
.value-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);}
.value-list li .tick{
  flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:10px;margin-top:1px;
}
@media (max-width:1080px){.value-grid{grid-template-columns:1fr;}}

.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);}
.feature-list li strong{display:block;color:var(--ink);font-size:15px;margin-bottom:2px;}
.feature-list li .tick{flex:none;width:34px;height:34px;border-radius:10px;background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}

/* ---------------- Industry icon-card grid ---------------- */
.industry-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.industry-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:28px 14px;box-shadow:var(--shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.industry-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;
  background:linear-gradient(160deg,var(--brand),var(--brand-dark));
}
.industry-card .ico{
  width:56px;height:56px;border-radius:16px;background:var(--accent-tint,var(--brand-light));color:var(--accent,var(--brand));
  display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.industry-card:hover .ico{background:rgba(255,255,255,.18);color:#fff;transform:scale(1.08) rotate(-4deg);}
.industry-card span.label{font-size:13.8px;font-weight:600;color:var(--ink);transition:color .25s ease;}
.industry-card:hover span.label{color:#fff;}
@media (max-width:1080px){.industry-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:640px){.industry-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------------- Solutions grid (icon cards w/ tags) ---------------- */
.solutions-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.solution-card{
  --accent:#2E86EF;--accent-tint:#E9F2FE;
  background:#fff;border:1px solid var(--border);border-top:3px solid var(--accent);
  border-radius:var(--radius-md);padding:30px;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.solution-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.solution-card .ico{
  width:52px;height:52px;border-radius:14px;background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px;
}
.solution-card h3{font-size:18px;margin-bottom:10px;color:var(--accent);}
.solution-card p{font-size:14px;margin-bottom:20px;}
.solution-card .tags{display:flex;flex-wrap:wrap;gap:8px;}
.solution-card .tag{
  background:var(--accent-tint);color:var(--accent);font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:99px;
}

@media (max-width:1080px){
  .solutions-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .solutions-grid{grid-template-columns:1fr;}
}

/* ---------------- Process ---------------- */
.process{position:relative;}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;}
.process-steps::before{content:'';position:absolute;top:28px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--border) 0 8px,transparent 8px 16px);}
.step{position:relative;text-align:left;}
.step .num{
  width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--brand);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin-bottom:18px;position:relative;z-index:2;
}
.step h4{font-size:16.5px;margin-bottom:8px;}
.step p{font-size:13.8px;}

/* ---------------- Testimonial Swiper ---------------- */
.testimonial-swiper-outer{position:relative;margin:0 auto;}
.testimonialSwiper{
  padding:60px 4px 60px !important;
}
.testimonialSwiper .swiper-wrapper{align-items:stretch;}
.testimonialSwiper .swiper-slide{height:auto;display:flex;}

.pc-card{
  background:#F7F6F3;border-radius:18px;padding:56px 26px 30px;text-align:center;
  position:relative;box-shadow:0 4px 18px rgba(2,30,56,.05);border:1px solid #ECE9E2;
  width:100%;
}
.pc-avatar{
  width:92px;height:92px;border-radius:50%;object-fit:cover;
  position:absolute;top:-46px;left:50%;transform:translateX(-50%);
  border:4px solid #fff;box-shadow:var(--shadow-sm);background:var(--brand-light);
}
.pc-card h4{font-size:16px;margin-top:6px;margin-bottom:10px;color:var(--ink);}
.pc-stars{color:#F5A623;font-size:14px;margin-bottom:14px;}
.pc-card p{font-size:14px;color:var(--ink-soft);line-height:1.65;margin:0;}

.pc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all .2s ease;
    z-index: 20;
}

.pc-arrow:hover {
    background: var(--brand);
    color: #fff;
}

.pc-prev {
    left: -58px;
}

.pc-next {
    right: -58px;
}

@media (max-width: 1200px) {
    .pc-prev {
        left: 10px;
    }

    .pc-next {
        right: 10px;
    }
}

.testimonialSwiper .swiper-pagination{position:static;margin-top:26px;}
.testimonialSwiper .swiper-pagination-bullet{width:8px;height:8px;background:var(--border);opacity:1;transition:background .2s ease,width .2s ease;}
.testimonialSwiper .swiper-pagination-bullet-active{background:var(--brand);width:22px;border-radius:5px;}

/* ---------------- Career hero (dark navy + application form) ---------------- */
.career-hero{background:var(--brand-darker);color:#fff;padding:80px 0;}
.career-hero .hero-grid{align-items:start;}
.career-hero .hero-eyebrow{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);}
.career-hero h1{font-size:clamp(28px,3.6vw,40px);}
.career-hero p.lead{color:#B7D2E8;}

.career-form{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:28px;color:var(--ink);}
.career-form .file-upload{
  border:1.5px dashed var(--border);border-radius:10px;padding:14px;font-size:13px;color:var(--ink-faint);
  background:var(--bg);cursor:pointer;
}
.career-form .file-upload input{width:100%;font-size:12.5px;}
.career-form .consent-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);}
.career-form .consent-row input{width:auto;}

/* ---------------- Why join us (image-left variant) ---------------- */
.feature-list.cols-2{grid-template-columns:1fr 1fr;gap:10px 20px;}

/* ---------------- Career opening cards ---------------- */
.opening-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.opening-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:28px 20px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.opening-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.opening-card .ico-circle{
  width:54px;height:54px;border-radius:50%;background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 14px;
}
.opening-card h4{font-size:15px;color:var(--brand-dark);margin-bottom:8px;}
.opening-card .op-meta{font-size:12px;color:var(--ink-faint);margin-bottom:16px;line-height:1.6;}
@media (max-width:1080px){.opening-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.opening-grid{grid-template-columns:1fr;}}

/* ---------------- Small icon-label cards (culture / benefits) ---------------- */
.mini-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.mini-grid.cols-6{grid-template-columns:repeat(6,1fr);}
.mini-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:24px 12px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.mini-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.mini-card .ico{
  width:46px;height:46px;border-radius:50%;background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:18px;margin:0 auto 12px;
}
.mini-card span{font-size:12.8px;font-weight:600;color:var(--ink);line-height:1.4;display:block;}
@media (max-width:1080px){.mini-grid,.mini-grid.cols-6{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.mini-grid,.mini-grid.cols-6{grid-template-columns:repeat(2,1fr);}}
/* ---------------- CTA band ---------------- */
.cta-band{
  background:linear-gradient(120deg,var(--brand-dark),var(--brand-darker));color:#fff;border-radius:var(--radius-lg);
  padding:56px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-band::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);}
.cta-band h3{font-size:clamp(22px,3vw,30px);margin-bottom:8px;}
.cta-band p{color:#CFE2F3;max-width:460px;}

/* ---------------- Page hero (sub pages) ---------------- */
.page-hero{
  background:linear-gradient(155deg,var(--brand-darker),var(--brand-dark) 60%,var(--brand));
  color:#fff;padding:70px 0 56px;position:relative;overflow:hidden;
}
.page-hero::after{content:'';position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.5px,transparent 1.5px);background-size:24px 24px;}
.breadcrumb{position:relative;display:flex;gap:8px;align-items:center;font-size:13px;color:#B7D2E8;margin-bottom:16px;}
.breadcrumb a:hover{color:#fff;}
.page-hero h1{position:relative;font-size:clamp(28px,4.2vw,44px);max-width:760px;}
.page-hero p{position:relative;color:#CFE2F3;max-width:600px;margin-top:14px;font-size:16px;}

/* ---------------- Two column feature ---------------- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.feature-row.reverse .feature-media{order:2;}
.feature-media{
  border-radius:var(--radius-lg);
  position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;
}
.feature-media .badge{
  position:absolute;bottom:22px;left:22px;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:var(--shadow-md);
  display:flex;align-items:center;gap:12px;
}
.feature-media .badge strong{display:block;font-size:20px;color:var(--brand-dark);}
.feature-media .badge span{font-size:11.5px;color:var(--ink-faint);}
.feature-list{display:grid;gap:16px;margin-top:24px;}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);}
.feature-list li .tick{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}

/* ---------------- Founder intro (compact photo + bio) ---------------- */
.founder-intro{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start;margin-bottom:60px;}
.founder-photo{width:100%;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.founder-info h1{font-size:clamp(26px,3.2vw,34px);color:var(--brand);margin-bottom:10px;}
.founder-info .role{display:block;font-size:14.5px;margin-bottom:16px;}
.founder-info .role a{color:var(--brand);font-weight:600;}
.founder-info .role span{color:var(--ink-faint);}
.founder-info p{font-size:14.5px;line-height:1.75;margin-bottom:20px;}
.btn-success{background:var(--success);color:#fff;box-shadow:0 8px 20px rgba(23,184,144,.32);}
.btn-success:hover{transform:translateY(-2px);filter:brightness(.95);}

.founder-article h2{font-size:22px;color:var(--brand);margin-bottom:16px;}
.founder-article{margin-bottom:44px;}
.founder-article p{font-size:14.5px;line-height:1.8;margin-bottom:16px;max-width:900px;}
.founder-article p:last-child{margin-bottom:0;}

@media (max-width:768px){
  .founder-intro{grid-template-columns:1fr;}
  .founder-photo{max-width:260px;}
}

/* ---------------- Case study cards ---------------- */
.case-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease;
  display:flex;flex-direction:column;height:100%;
}
.case-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.case-shot{aspect-ratio:16/11;overflow:hidden;background:var(--brand-tint);flex-shrink:0;}
.case-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.case-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column;}
.case-body h4{font-size:17px;color:var(--brand-dark);margin-bottom:4px;}
.case-body .case-sub{display:block;font-size:13px;font-weight:600;color:var(--brand);margin-bottom:10px;}
.case-body p{font-size:13.5px;margin-bottom:16px;}
.case-list{display:grid;gap:8px;margin-bottom:20px;}
.case-list li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-soft);}
.case-list li .tick{flex:none;width:16px;height:16px;border-radius:50%;background:var(--brand-light);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:8px;margin-top:2px;}
.case-body .btn-product{margin-top:auto;width:fit-content;padding:10px 20px;font-size:13.5px;}

/* ---------------- Timeline (case studies / founder) ---------------- */
.timeline{position:relative;padding-left:34px;}
.timeline::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--border);}
.timeline-item{position:relative;padding-bottom:34px;}
.timeline-item::before{content:'';position:absolute;left:-34px;top:4px;width:20px;height:20px;border-radius:50%;background:var(--brand);border:4px solid var(--brand-light);}
.timeline-item h4{font-size:16px;margin-bottom:6px;}
.timeline-item p{font-size:14px;}

/* ---------------- Pricing ---------------- */
.price-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:34px;position:relative;box-shadow:var(--shadow-sm);}
.price-card.featured{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:scale(1.03);}
.price-card .badge-pop{position:absolute;top:-14px;right:28px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:99px;}
.price-card h3{font-size:19px;margin-bottom:6px;}
.price-card .price{font-size:34px;font-weight:800;color:var(--brand-dark);margin:14px 0 4px;}
.price-card .price span{font-size:13px;font-weight:500;color:var(--ink-faint);}
.price-card ul{display:grid;gap:11px;margin:22px 0 26px;}
.price-card li{display:flex;gap:10px;font-size:13.8px;color:var(--ink-soft);align-items:flex-start;}
.price-card li .tick{flex:none;color:var(--success);font-weight:800;}

/* ---------------- Job listing ---------------- */
.job-card{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:22px 26px;flex-wrap:wrap;}
.job-card h4{font-size:16px;margin-bottom:6px;}
.job-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-faint);}
.job-meta span{display:flex;align-items:center;gap:5px;}

/* ---------------- Portfolio ---------------- */
.portfolio-card{background:#fff;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.portfolio-thumb{aspect-ratio:16/10;background:linear-gradient(150deg,var(--brand),var(--brand-dark));position:relative;display:flex;align-items:flex-end;padding:18px;}
.portfolio-thumb span{background:rgba(255,255,255,.15);color:#fff;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:99px;backdrop-filter:blur(4px);}
.portfolio-body{padding:22px;}
.portfolio-body h4{font-size:16px;margin-bottom:8px;}
.portfolio-body p{font-size:13.5px;margin-bottom:14px;}
.portfolio-body a{font-size:13px;font-weight:700;color:var(--brand);}

/* ---------------- Portfolio v2 (full screenshot + solid color body, scroll + zoom overlay on hover) ---------------- */
.portfolio-card-v2{
  background:#fff;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}
.portfolio-card-v2:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}

.pf-shot{
  aspect-ratio:16/11;
  overflow:hidden;
  background:var(--brand-tint);
  position:relative;
  flex-shrink:0;
}
.pf-shot img{
  width:100%;
  height:auto;
  display:block;
  position:absolute;
  top:0;
  left:0;
  object-fit:cover;
  object-position:top;
  transition:transform 8s ease, filter .3s ease;
  transform:translateY(0);
}
.portfolio-card-v2:hover .pf-shot img{
  transform:translateY(calc(-100% + var(--pf-h, 260px)));
  filter:brightness(.55);
}

.pf-shot::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(2,30,56,0);
  transition:background .3s ease;
  pointer-events:none;
  z-index:1;
}
.portfolio-card-v2:hover .pf-shot::after{
  background:rgba(2,30,56,.15);
}

.pf-shot .pf-zoom{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.7);
  width:52px;height:52px;
  border-radius:50%;
  background:#fff;
  color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  opacity:0;
  box-shadow:var(--shadow-md);
  transition:opacity .3s ease, transform .3s ease;
  z-index:2;
  pointer-events:none;
}
.portfolio-card-v2:hover .pf-shot .pf-zoom{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.pf-body{
  background:var(--brand);color:#fff;padding:22px 24px;
  flex:1;
}
.pf-body h4{font-size:17px;margin-bottom:10px;color:#fff;}
.pf-body p{font-size:13.5px;color:#DCEBF9;line-height:1.65;}

@media (max-width:1080px){
  .pf-shot{ --pf-h: 220px; }
}
@media (max-width:640px){
  .pf-shot{ --pf-h: 200px; }
}

/* ---------------- Footer ---------------- */
.site-footer{background:#0B1220;color:#93A4B8;padding-top:70px;}
.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand .logo{display:inline-block;background:#ffffff;}
.footer-brand p{margin-top:18px;font-size:13.8px;line-height:1.75;max-width:290px;color:#ffffff;}
.footer-social{display:flex;gap:10px;margin-top:24px;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:13px;color:#ffffff;transition:background .2s ease,color .2s ease,transform .2s ease;}
.footer-social a:hover{background:var(--accent);color:#fff;transform:translateY(-3px);}
.footer-col h5{color:#fff;font-size:14.5px;margin-bottom:22px;position:relative;padding-bottom:12px;}
.footer-col h5::after{content:'';position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--accent);border-radius:2px;}
.footer-col ul{display:grid;gap:12px;}
.footer-col a{font-size:13.6px;color:#ffffff;transition:color .18s ease,padding-left .18s ease;}
.footer-col a:hover{color:#fff;padding-left:4px;}
.footer-contact li{display:flex;gap:12px;font-size:13.6px;margin-bottom:15px;align-items:flex-start;color:#ffffff;line-height:1.6;}
.footer-contact li i{color:var(--accent);font-size:13px;margin-top:3px;flex:none;width:14px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:12.8px;color:#ffffff;flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:#ffffff;}

/* ---------------- Misc ---------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
  .process-steps{grid-template-columns:repeat(2,1fr);}
  .process-steps::before{display:none;}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .feature-row,.feature-row.reverse{grid-template-columns:1fr;}
  .feature-row.reverse .feature-media{order:0;}
  .topbar{display:none;}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(360px,86vw);height:100vh;background:#fff;
    padding:90px 26px 26px;box-shadow:-20px 0 50px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s ease;
    overflow-y:auto;z-index:999;}
  .main-nav.open{transform:translateX(0);}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:4px;}
  .nav-link{padding:14px 6px;border-bottom:1px solid var(--border);border-radius:0;justify-content:space-between;}
  .mega{position:static;transform:none;box-shadow:none;border:none;min-width:0;padding:6px 6px 6px 16px;
    opacity:1;visibility:visible;pointer-events:auto;display:none;border-left:2px solid var(--brand-light);margin-bottom:8px;}
  .has-mega.open .mega{display:block;}
  .mega::before{display:none;}
  .mega-grid.cols-3{grid-template-columns:1fr;min-width:0;}
  .mega-grid.cols-1{min-width:0;}
  .mega-cta{display:none;}
  .mobile-toggle{display:flex;}
  .nav-phone{display:none;}
  .stats .container{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2n){border-right:none;}
}
@media (max-width:640px){
  .section{padding:30px 15px;}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}
  .quote-card .row2{grid-template-columns:1fr;}
  .cta-band{flex-direction:column;text-align:center;padding:40px 26px;}
  .footer-top{grid-template-columns:1fr;}
}
/* ---------------- Products grid (Our Products section) ---------------- */
.products-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  margin-bottom:26px;
}
.product-card{
  --accent:#0269B8;--accent-tint:#E7F1FA;
  background:#fff;border:1px solid var(--border);border-top:4px solid var(--accent);
  border-radius:var(--radius-md);padding:32px 28px;box-shadow:var(--shadow-sm);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .22s ease,box-shadow .22s ease;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}

.product-logo{
  border-radius:20px;color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:18px;
  overflow:hidden;
  padding:6px;
}
.product-logo img{
  width:100%;height:45px;object-fit:cover;display:block;
  border-radius:12px;
}
.product-logo .brandmark{
  font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.2px;
}
.product-logo .brandmark .accent{color:var(--accent);}
.product-logo small{display:block;font-size:9px;color:var(--ink-faint);margin-top:2px;font-weight:600;}

.product-card h3{font-size:19px;margin-bottom:12px;}
.product-card h3 .ink{color:var(--ink);}
.product-card h3 .accent{color:var(--accent);}
.product-card > p{font-size:13.8px;margin-bottom:20px;}

.product-features{display:grid;gap:11px;margin-bottom:24px;text-align:left;width:100%;}
.product-features li{
  display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft);font-weight:500;
}
.product-features li i{color:var(--accent);font-size:13px;width:16px;text-align:center;}

.btn-product{
  background:var(--accent);color:#fff;width:100%;margin-top:auto;
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn-product:hover{transform:translateY(-2px);filter:brightness(.95);}

/* ---------------- Trust strip (4-col feature bar) ---------------- */
.trust-strip{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:30px;
}
.trust-item{
  display:flex;align-items:flex-start;gap:14px;padding:0 18px;
  border-right:1px solid var(--border);
}
.trust-item:last-child{border-right:none;}
.t-ico{
  --t-accent:#2E86EF;--t-tint:#E9F2FE;
  flex:none;width:46px;height:46px;border-radius:50%;background:var(--t-tint);color:var(--t-accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.trust-item h5{font-size:14.5px;margin-bottom:6px;color:var(--ink);}
.trust-item p{font-size:12.5px;line-height:1.55;}

@media (max-width:1080px){
  .products-grid{grid-template-columns:1fr;}
  .trust-strip{grid-template-columns:repeat(2,1fr);gap:24px 0;}
  .trust-item{border-right:none;border-bottom:1px solid var(--border);padding-bottom:20px;}
  .trust-item:nth-child(2n){padding-left:18px;}
}
@media (max-width:640px){
  .trust-strip{grid-template-columns:1fr;padding:24px;}
  .trust-item{border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:4px;}
  .trust-item:last-child{border-bottom:none;margin-bottom:0;}
}

/* ==========================================================================
   Services Mega Menu — Tabbed version (gradient sidebar + panel + visual)
   ========================================================================== */
.mega-services-tabbed{
  min-width:1020px; /* was 920px — widened per request */
  padding:0;
  overflow:hidden;
}
.mst-wrap{
  display:grid;
  grid-template-columns:280px 340px 400px; /* was 260px 300px 340px */
}

/* --- Left tabs column (plain white, no background color) --- */
.mst-tabs{
  background:#fff;
  border-right:1px solid var(--border);
  padding:22px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mst-tab{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  background:transparent;
  border:none;
  border-left:3px solid transparent;
  text-align:left;
  padding:14px 12px;
  border-radius:10px;
  color:var(--ink-soft);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.mst-tab-ico{
  width:34px;height:34px;flex:none;
  border-radius:10px;
  background:var(--brand-light);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--brand);
  transition:background .2s ease,color .2s ease;
}
.mst-tab span:nth-child(2){flex:1;}
.mst-arrow{font-size:10px;opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease;color:var(--accent);}
.mst-tab:hover,.mst-tab.active{
  background:#FFF3EB;
  color:var(--accent-dark);
  border-left-color:var(--accent);
}
.mst-tab.active .mst-tab-ico,
.mst-tab:hover .mst-tab-ico{
  background:var(--accent);
  color:#fff;
}
.mst-tab.active .mst-arrow,
.mst-tab:hover .mst-arrow{
  opacity:1;
  transform:translateX(0);
}

/* --- Middle services panel (plain white, no background color) --- */
.mst-panels{
  padding:30px 26px;
  border-right:1px solid var(--border);
  background:#fff;
}
.mst-panel{display:none;}
.mst-panel.active{display:block;animation:mstFade .25s ease;}
@keyframes mstFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

.mst-panels .mega-sublist{display:grid;gap:3px;}
.mst-panels .mega-sublist li a{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;font-size:13.8px;font-weight:500;
  color:var(--ink-soft);border-radius:8px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.mst-panels .mega-sublist li a i{font-size:10px;color:var(--brand);opacity:.6;transition:opacity .18s ease,transform .18s ease;}
.mst-panels .mega-sublist li a:hover{background:#FFF3EB;color:var(--accent-dark);transform:translateX(3px);}
.mst-panels .mega-sublist li a:hover i{opacity:1;transform:translateX(2px);color:var(--accent);}

/* --- Right visual panel (plain white, only the image itself shows) --- */
.mst-visual{
  position:relative;
  overflow:hidden;
  background:#fff;
}
.mst-visual-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .4s ease,transform .5s ease;
}
.mst-visual-img.active{
  opacity:1;
  transform:scale(1);
}
.mst-visual-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  background:linear-gradient(0deg,rgba(1,26,49,.92) 10%,rgba(1,26,49,.35) 55%,rgba(1,26,49,0) 100%);
}
.mst-visual-overlay h4{
  color:#fff;
  font-size:18px;
  margin-bottom:8px;
}
.mst-visual-overlay p{
  color:#CFE2F3;
  font-size:13px;
  line-height:1.6;
  margin-bottom:16px;
}
.mst-visual-overlay .btn{
  align-self:flex-start;
}

@media (max-width:1200px){
  .mega-services-tabbed{min-width:0;}
  .mst-wrap{grid-template-columns:1fr;}
  .mst-tabs{flex-direction:row;overflow-x:auto;}
  .mst-panels{border-right:none;border-bottom:1px solid var(--border);}
  .mst-visual{height:180px;}
}