*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:#071a35;
  line-height:1.5;
  background:#fff
}

a{
  text-decoration:none;
  color:inherit
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto
}


header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #e7edf3
}

.nav{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.logo{
  width:205px;
  height:auto;
  display:block
}

.nav nav{
  display:flex;
  align-items:center;
  gap:24px;
  font-size:13px;
  font-weight:600
}

.nav nav>a{
  padding:29px 0 24px
}

.nav nav>a.active{
  border-bottom:2px solid #ff5b13
}

.navcta{
  background:#ff5b13;
  color:#fff;
  border-radius:999px;
  padding:13px 21px!important;
  box-shadow:0 10px 24px rgba(255,91,19,.18)
}

.menu{
  display:none;
  border:0;
  background:none;
  font-size:24px
}


 /* ============================================================
   VC DIGITAL HERO FRAMEWORK V1.0
   Rule: the hero is a centered composition, never viewport-anchored.
   The text and visual live inside the same max-width frame.
   ============================================================ */
.hero{
  min-height:720px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,#f8fafc 0%,#f8fafc 45%,#f7f8fa 100%)
}

.hero-frame{
  width:min(1180px,calc(100% - 40px));
  min-height:720px;
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  align-items:center
}

.hero-copy{
  position:relative;
  z-index:3;
  width:min(650px,100%);
  padding:0
}

.hero-art{
  position:relative;
  z-index:1;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0
}

.hero-art img{
  display:block;
  width:110%;
  height:auto;
  max-width:none;
  flex:0 0 auto;
  margin-left:auto
}

.hero-art:before{
  content:"";
  position:absolute;
  inset:0 auto 0 -8%;
  width:28%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,#f8fafc 0%,rgba(248,250,252,.92) 24%,rgba(248,250,252,0) 100%)
}

.eyebrow{
  font-size:12px;
  letter-spacing:.17em;
  font-weight:800;
  color:#315071;
  margin:0 0 14px
}

.hero h1{
  font-size:clamp(50px,4.05vw,72px);
  line-height:.97;
  letter-spacing:-.055em;
  margin:0 0 24px;
  max-width:650px
}

.hero h1 em,.section em,.cta h2 em{
  font-style:normal;
  color:#1976e8
}

.hero h1 strong{
  color:#ff5b13;
  font-weight:800
}

.lead{
  font-size:17px;
  color:#4e627a;
  max-width:560px;
  margin:0
}

.actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin:26px 0 20px
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  padding:14px 22px;
  border-radius:999px
}
.orange{
  background:#ff5b13;
  color:#fff;
  box-shadow:0 10px 24px rgba(255,91,19,.18)
}
.white{
  background:rgba(255,255,255,.88);
  border:1px solid #bdc8d5;
  box-shadow:0 5px 15px rgba(7,26,53,.04)
}

.proof{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  color:#53677e;
  font-size:11px;
  font-weight:600
}

.journey{
  margin-top:-32px;
  position:relative;
  z-index:4
}

.journeybox{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 40px rgba(7,26,53,.12);
  border-radius:20px;
  padding:18px 28px;
  display:grid;
  grid-template-columns:1.1fr 1.15fr 22px 1.15fr 22px 1.15fr 22px 1.28fr;
  align-items:center;
  gap:0;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px)
}

.journey-title{
  font-size:17px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.025em;
  color:#071a35;
  padding-right:18px
}

.journey-step{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0
}

.journey-icon{
  width:54px;
  height:54px;
  min-width:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 7px 17px rgba(7,26,53,.14)
}

.journey-icon.blue{
  background:linear-gradient(145deg,#1688f2,#07539f)
}

.journey-icon.orange{
  background:linear-gradient(145deg,#ff741f,#f4510a)
}

.journey-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.journey-step strong{
  display:block;
  font-size:12px;
  line-height:1.05;
  color:#126ac5;
  letter-spacing:-.01em
}

.journey-step:last-child strong{
  color:#ff5b13
}

.journey-step small{
  display:block;
  font-size:10px;
  line-height:1.22;
  color:#53677e;
  margin-top:3px
}

.journeybox>i{
  font-style:normal;
  text-align:center;
  font-size:27px;
  line-height:1;
  color:#75a5d2;
  font-weight:300
}

.journeybox>i.orangeArrow{
  color:#ff7a38
}


.section{
  padding:95px 0
}

.center{
  text-align:center
}

.center>.intro{
  max-width:780px;
  margin:0 auto;
  color:#5d6e82;
  font-size:16px
}

.section h2,.cta h2{
  font-size:clamp(38px,4vw,56px);
  line-height:1.03;
  letter-spacing:-.045em;
  margin:0 0 20px
}

.dark{
  background:#071a35;
  color:#fff
}

.dark .kicker{
  color:#8abfff
}

.heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:42px
}

.heading>p{
  max-width:440px;
  color:#6b7c90
}

.dark .heading>p{
  color:#afbdcc
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.cards article{
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  padding:30px;
  background:rgba(255,255,255,.035)
}

.cards .featured{
  background:linear-gradient(140deg,rgba(25,118,232,.17),rgba(255,91,19,.12));
  border-color:rgba(25,118,232,.33)
}

.cards small{
  color:#8aa1ba;
  font-weight:800
}

.cards h3{
  font-size:29px;
  margin:16px 0 2px
}

.cards p{
  color:#bdc9d7
}

.cards ul{
  list-style:none;
  padding:0;
  color:#dbe3ec;
  line-height:2
}

.cards li:before{
  content:'✓';
  color:#ff5b13;
  margin-right:9px
}

.solutions{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:13px
}

.solutions article{
  min-height:185px;
  border:1px solid #e1e8ef;
  border-radius:18px;
  padding:23px;
  display:flex;
  flex-direction:column
}

.solutions b{
  color:#ff5b13;
  font-size:11px
}

.solutions h3{
  margin:18px 0 3px;
  font-size:18px
}

.solutions p{
  color:#68798d;
  font-size:13px;
  margin:0
}

.solutions a{
  margin-top:auto;
  color:#1976e8;
  font-size:12px;
  font-weight:700
}

.light{
  background:#f5f7fa
}

.work{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}

.work article{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(7,26,53,.06);
  padding-bottom:20px
}

.visual{
  height:165px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  font-size:25px
}

.tech{
  background:linear-gradient(135deg,#061a35,#1976e8)
}
.bcs{
  background:linear-gradient(135deg,#151820,#657181)
}
.lox{
  background:linear-gradient(135deg,#e9d0c1,#875846)
}
.vc{
  background:linear-gradient(135deg,#132338,#ff5b13)
}

.work article>small,.work h3{
  margin-left:19px;
  margin-right:19px
}

.work article>small{
  display:block;
  color:#ff5b13;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  margin-top:18px
}

.work h3{
  font-size:17px;
  line-height:1.3
}

.link{
  color:#ff5b13;
  font-weight:700;
  font-size:13px
}

.process{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  margin-top:45px;
  text-align:left
}

.process div{
  border-top:3px solid #1976e8;
  background:#f7f9fb;
  padding:22px 14px
}

.process div:nth-child(n+4){
  border-color:#ff5b13
}

.process b,.process small{
  display:block;
  color:#8494a7;
  font-size:11px
}

.process strong{
  display:block;
  margin:8px 0
}

.about{
  background:#f8fafc
}

.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}

.two p{
  color:#596b80;
  font-size:16px
}

.cta{
  background:#071a35;
  padding:80px 0
}

.ctabox{
  background:linear-gradient(120deg,#102e51,#071a35);
  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;
  padding:65px;
  color:#fff
}

.ctabox .kicker{
  color:#8abfff
}

.ctabox h2 em{
  color:#ff5b13
}

.ctabox>p:not(.kicker){
  max-width:650px;
  color:#bdc9d7
}

.darkbtn{
  background:#fff;
  color:#071a35
}

.cta .actions{
  margin-bottom:0
}

footer{
  background:#041226;
  color:#dce5ef;
  padding:65px 0 23px
}

.footgrid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.25fr;
  gap:48px
}

.footgrid>div:not(:first-child){
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12px
}

.footgrid h4{
  margin:0 0 10px;
  color:#fff
}

.footgrid p{
  color:#9eafc3
}

.footlogo{
  width:190px;
  height:auto;
  filter:brightness(0) invert(1)
}

.footgrid small{
  color:#ff5b13;
  letter-spacing:.12em
}

.social{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap;
  gap:7px!important
}

.social a{
  border:1px solid #2a3a4f;
  border-radius:999px;
  padding:4px 8px
}

.bottom{
  border-top:1px solid #1e3047;
  margin-top:48px;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  color:#7e90a5;
  font-size:10px
}


@media(max-width:1100px){
  
  .nav nav{
  gap:16px
}

  .hero-frame{
  width:min(1180px,calc(100% - 40px));
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)
}

  .hero-copy{
  width:100%;
  padding-right:6px
}

  .hero-art img{
  width:110%;
  max-width:none;
  margin-left:auto
}

  .hero-art:before{
  left:-18%;
  width:38%
}

  .solutions{
  grid-template-columns:repeat(3,1fr)
}

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

  .cards{
  grid-template-columns:1fr
}

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


}


@media (min-width:1101px) and (max-width:1350px){
  
  .hero-frame{
  grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  
}

  .hero-art img{
  width:110%;
  max-width:none;
  margin-left:auto;
  
}

  .hero-copy{
  max-width:620px;
  
}


}

@media(max-width:720px){
  
  .container{
  width:calc(100% - 28px)
}

  .nav{
  height:68px
}
.logo{
  width:180px
}
.menu{
  display:block
}

  .nav nav{
  display:none;
  position:absolute;
  top:68px;
  left:0;
  right:0;
  background:#fff;
  padding:15px;
  flex-direction:column;
  align-items:stretch;
  box-shadow:0 15px 30px rgba(7,26,53,.08)
}

  .nav nav.open{
  display:flex
}
.nav nav>a{
  padding:8px
}

  .hero{
  min-height:900px
}

  .hero-frame{
  width:calc(100% - 28px);
  min-height:900px;
  display:flex;
  flex-direction:column;
  align-items:stretch
}

  .hero-copy{
  width:100%;
  max-width:600px;
  padding:52px 0 16px
}

  .hero-art{
  width:calc(100% + 28px);
  margin-left:-14px;
  align-self:center;
  min-height:360px;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden
}

  .hero-art img{
  width:760px;
  max-width:none;
  position:relative;
  right:-20px
}

  .hero-art:before{
  inset:0 0 auto 0;
  width:100%;
  height:28%;
  background:linear-gradient(180deg,#f8fafc 0%,rgba(248,250,252,.75) 45%,rgba(248,250,252,0) 100%)
}

  .hero h1{
  font-size:clamp(43px,12vw,58px)
}

  .lead{
  font-size:15px
}

  .journey{
  margin-top:-18px
}
.journeybox{
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:20px
}
.journey-title{
  grid-column:1/-1;
  padding-right:0;
  font-size:19px
}
.journey-step{
  gap:11px
}
.journey-icon{
  width:50px;
  height:50px;
  min-width:50px
}
.journey-icon svg{
  width:25px;
  height:25px
}
.journeybox>i{
  display:none
}
.desktop-break{
  display:none
}

  .section{
  padding:70px 0
}
.heading{
  display:block
}
.heading>p{
  margin-top:18px
}

  .solutions,.work{
  grid-template-columns:1fr
}
.process{
  grid-template-columns:1fr 1fr
}
.two{
  display:block
}
.two>div+div{
  margin-top:30px
}

  .ctabox{
  padding:42px 24px
}
.footgrid{
  grid-template-columns:1fr
}
.bottom{
  flex-direction:column;
  gap:7px
}


}


@media(max-width:520px){
  
  .journeybox{
  grid-template-columns:1fr;
  padding:18px
}
.journey-title{
  font-size:21px
}
.journey-step{
  padding:2px 4px
}
.journey-icon{
  width:52px;
  height:52px;
  min-width:52px
}
.journey-step small{
  font-size:11px
}


}