/* =========================================
   SIRNAVA — SELECTED WORK UPGRADE
========================================= */

.work{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f9ff 100%
    );
}

.work .sectionHead{
  max-width:760px;
}

.workGrid{
  gap:32px;
  margin-top:52px;
}

/* Project card */

.workCard{
  overflow:hidden;

  border:
    1px solid #dfe4ef;

  border-radius:20px;

  background:#ffffff;

  box-shadow:
    0 15px 40px
    rgba(25,35,75,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.workCard:hover{
  transform:
    translateY(-5px);

  border-color:
    #bec9ff;

  box-shadow:
    0 28px 65px
    rgba(25,35,75,.12);
}

/* =========================================
   PROJECT PREVIEW
========================================= */

.workVisual{
  position:relative;

  height:330px;

  padding:26px;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #edf1ff,
      #f8faff
    );

  border-bottom:
    1px solid #dce0ea;
}

.workVisual.v2{
  background:
    linear-gradient(
      135deg,
      #eef1f8,
      #fafbff
    );
}

/* Browser top */

.screenBar{
  position:relative;

  z-index:2;

  height:38px;

  display:flex;

  align-items:center;

  gap:6px;

  padding:
    0 14px;

  background:#ffffff;

  border:
    1px solid #d9deea;

  border-bottom:0;

  border-radius:
    12px 12px 0 0;

  box-shadow:
    0 10px 25px
    rgba(25,35,75,.08);
}

.screenBar i{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#c8cedb;
}

.screenBar i:first-child{
  background:#9badff;
}

/* Browser screen */

.screenBody{
  position:relative;

  z-index:1;

  height:235px;

  padding:0;

  overflow:hidden;

  background:#ffffff;

  border:
    1px solid #d9deea;

  border-radius:
    0 0 12px 12px;

  box-shadow:
    0 18px 35px
    rgba(25,35,75,.10);
}

/* Remove old fake blocks */

.workCard .screenBody b,
.workCard .screenBody span{
  display:none;
}

/* Screenshot layer */

.workCard .screenBody::after{
  content:'';

  position:absolute;

  inset:0;

  display:block;

  background-repeat:
    no-repeat;

  background-position:
    top center;

  background-size:
    cover;

  transition:
    transform .35s ease;
}

.workCard:hover .screenBody::after{
  transform:
    scale(1.025);
}

/* NOVABUILD */

.workCard:nth-child(1)
.screenBody::after{
  background-image:
    url('/resources/novabuild.png');
}

/* SIRNAVA CRM */

.workCard:nth-child(2)
.screenBody::after{
  background-image:
    url('/resources/sirnava-crm.png');
}

/* =========================================
   PROJECT INFORMATION
========================================= */

.workCopy{
  padding:
    30px 30px 32px;
}

.workCopy small{
  display:inline-flex;

  align-items:center;

  padding:
    6px 10px;

  border-radius:
    999px;

  background:
    #eef2ff;

  color:
    #294af5;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

.workCopy h3{
  margin:
    16px 0 2px;

  font-size:
    30px;

  line-height:
    1.15;

  letter-spacing:
    -.03em;
}

.workCopy h4{
  margin:
    0 0 14px;

  color:
    #505769;

  font-size:
    15px;

  font-weight:
    650;
}

.workCopy p{
  margin:0;

  min-height:
    72px;

  max-width:
    540px;

  color:
    #687083;

  line-height:
    1.7;
}

/* Live demo button */

.workCopy a{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  margin-top:
    22px;

  padding:
    11px 15px;

  border:
    1px solid #ccd5ff;

  border-radius:
    9px;

  background:
    #f6f8ff;

  color:
    #294af5;

  font-size:
    13px;

  font-weight:
    800;

  transition:
    .2s ease;
}

.workCopy a:hover{
  background:
    #294af5;

  border-color:
    #294af5;

  color:
    #ffffff;

  transform:
    translateY(-1px);
}

/* =========================================
   TABLET
========================================= */

@media(max-width:1040px){

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

  .workVisual{
    height:
      360px;
  }

  .screenBody{
    height:
      265px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:740px){

  .workGrid{
    gap:
      22px;

    margin-top:
      34px;
  }

  .workCard{
    border-radius:
      14px;
  }

  .workVisual{
    height:
      245px;

    padding:
      18px;
  }

  .screenBar{
    height:
      32px;

    border-radius:
      9px 9px 0 0;
  }

  .screenBody{
    height:
      175px;

    border-radius:
      0 0 9px 9px;
  }

  .workCopy{
    padding:
      24px 22px 26px;
  }

  .workCopy h3{
    font-size:
      25px;
  }

  .workCopy p{
    min-height:
      auto;
  }

  .workCopy a{
    width:
      100%;
  }
}/* ===== Portfolio screenshot fit fix ===== */

.workCard .screenBody::after{
  background-size:100% auto;
  background-position:top left;
  background-color:#0b1017;
}

.workCard:nth-child(1) .screenBody::after{
  background-position:top center;
}

.workCard:nth-child(2) .screenBody::after{
  background-position:top left;
}/* ===== Safe mobile navigation ===== */

@media(max-width:1040px){

  .topbar{
    flex-wrap:wrap;
    gap:10px;
    padding:12px 18px 0;
    min-height:auto;
  }

  .topbar nav{
    display:flex;
    order:3;
    width:calc(100% + 36px);
    margin:0 -18px;
    padding:12px 18px;

    gap:24px;

    overflow-x:auto;
    white-space:nowrap;

    background:rgba(250,251,255,.96);

    border-top:1px solid #e5e8f0;

    scrollbar-width:none;
  }

  .topbar nav::-webkit-scrollbar{
    display:none;
  }

  .topbar nav a{
    flex:0 0 auto;
    font-size:13px;
    font-weight:600;
  }
}

@media(max-width:740px){

  .topbar nav{
    gap:20px;
  }

  .topbar nav a{
    font-size:12px;
  }
}/* =========================================
   CONTACT + FOOTER UPGRADE
========================================= */

.contact{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255,255,255,.08),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #142ca4,
      #101f72
    );

  border-radius:0;
}

.contact::after{
  content:'';
  position:absolute;

  width:320px;
  height:320px;

  right:-120px;
  bottom:-160px;

  border-radius:50%;

  border:
    1px solid rgba(255,255,255,.12);

  pointer-events:none;
}

.contact > div{
  position:relative;
  z-index:1;
}

.contact h2{
  max-width:760px;
}

.contactActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

.contact .cta.light{
  min-height:48px;

  border-radius:10px;

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.12);
}

.contact .email{
  min-height:48px;

  border-radius:10px;

  background:
    rgba(255,255,255,.04);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}

.contact .email:hover{
  background:
    rgba(255,255,255,.10);

  border-color:
    rgba(255,255,255,.7);

  color:#fff;
}

/* =========================================
   FOOTER
========================================= */

footer{
  max-width:none;

  margin:0;

  padding:
    34px max(
      34px,
      calc((100vw - 1280px)/2 + 34px)
    );

  background:#0f1320;

  color:#a8afc0;

  border-top:
    1px solid rgba(255,255,255,.07);
}

footer .brand{
  color:#fff;
}

footer p{
  margin:0;

  line-height:1.6;
}

footer p:nth-of-type(1){
  color:#c2c8d4;
}

footer p:nth-of-type(2){
  color:#777f91;
}

/* =========================================
   MOBILE CONTACT + FOOTER
========================================= */

@media(max-width:740px){

  .contact{
    gap:34px;
  }

  .contactActions{
    align-items:stretch;
  }

  .contactActions a{
    width:100%;
  }

  footer{
    padding:
      30px 18px;

    gap:16px;
  }

  footer .brand{
    margin-bottom:4px;
  }
}