.application-hariomoffsetkn{ padding:90px 0; overflow:hidden;}
.application-hariomoffsetkn__hero{ display:grid; grid-template-columns:1.5fr 1fr; border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-bottom:40px; background:var(--white);}
.application-hariomoffsetkn__hero-left{ background:var(--text-dark); padding:45px;}
.application-hariomoffsetkn__hero-left .common-title{ margin:0;}
.application-hariomoffsetkn__hero-left .common-title__heading{ color:var(--white); font-size: 32px;}
.application-hariomoffsetkn__hero-left .common-title__text{ color:rgba(255,255,255,.75);}
.application-hariomoffsetkn__hero-right{ display:flex; align-items:center; justify-content:space-evenly; padding:40px; background:var(--surface);}
.application-hariomoffsetkn__stat{ text-align:center;}
.application-hariomoffsetkn__stat h3{ margin:0; font-size:40px; color:var(--primary); line-height:1;}
.application-hariomoffsetkn__stat span{ display:block; margin-top:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-light);}
.application-hariomoffsetkn__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.application-hariomoffsetkn__card{ background:var(--white); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:.35s;}
.application-hariomoffsetkn__card:hover{ transform:translateY(-8px); box-shadow:0 18px 35px rgba(0,0,0,.08);}
.application-hariomoffsetkn__image{ height:180px; overflow:hidden; background:var(--surface-alt);}
.application-hariomoffsetkn__image img{ width:100%; height:100%; display:block; object-fit:cover; transition:.5s;}
.application-hariomoffsetkn__card:hover .application-hariomoffsetkn__image img{ transform:scale(1.08);}
.application-hariomoffsetkn__content{ padding:22px;}
.application-hariomoffsetkn__smalltitle{ display:inline-block; margin-bottom:10px; font-size:11px; font-family:var(--font-mono); color:var(--secondary); text-transform:uppercase; letter-spacing:.15em;}
.application-hariomoffsetkn__content h3{ margin:0 0 14px; font-size:20px; color:var(--text-dark);}
.application-hariomoffsetkn__content p{ margin:0; color:var(--text-light); line-height:1.8; font-size: 15px;}
.application-hariomoffsetkn__tags{  display:flex;  flex-wrap:wrap;  gap:10px;  padding:22px 26px;  border-top:1px solid var(--border);  background:var(--surface-alt);}
.application-hariomoffsetkn__tags .badge{  background:var(--white);  border:1px solid var(--border);}
@media(max-width:991px){.application-hariomoffsetkn{ padding:70px 0;} .application-hariomoffsetkn__hero{ grid-template-columns:1fr;}  .application-hariomoffsetkn__hero-right{ padding:35px;}
.application-hariomoffsetkn__grid{ grid-template-columns:1fr;}}
@media(max-width:767px){.application-hariomoffsetkn{ padding:55px 0;} .application-hariomoffsetkn__hero-left{ padding:30px;}
.application-hariomoffsetkn__hero-right{ flex-direction:column; gap:30px;} .application-hariomoffsetkn__content{  padding:22px;}
.application-hariomoffsetkn__content h3{ font-size:18px;} .application-hariomoffsetkn__image{ height:220px;} .application-hariomoffsetkn__tags{  padding:18px 22px;}}
.application-hariomoffsetkn__card{ position:relative; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.application-hariomoffsetkn__card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:linear-gradient(90deg,var(--primary),var(--secondary));
 transform:scaleX(0); transform-origin:left; transition:.35s; z-index:2;}
.application-hariomoffsetkn__card:hover::before{ transform:scaleX(1);}
.application-hariomoffsetkn__card:hover{ border-color:var(--primary); transform:translateY(-10px); box-shadow:0 18px 40px rgba(0,0,0,.10);}
.application-hariomoffsetkn__image{ position:relative;}
.application-hariomoffsetkn__image::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0)); opacity:0; transition:.35s;}
.application-hariomoffsetkn__card:hover .application-hariomoffsetkn__image::after{ opacity:1;}
.application-hariomoffsetkn__card:hover .application-hariomoffsetkn__image img{ transform:scale(1.08);}
.application-hariomoffsetkn__content h3{  transition:.3s;}
.application-hariomoffsetkn__card:hover .application-hariomoffsetkn__content h3{ color:var(--primary);}
.application-hariomoffsetkn__tags .badge{ transition:.3s;}
.application-hariomoffsetkn__tags .badge:hover{ background:var(--primary); color:var(--white); border-color:var(--primary);}
.application-hariomoffsetkn__card:nth-child(even){  margin-top:0px;}
@media(max-width:991px){ .application-hariomoffsetkn__card:nth-child(even){ margin-top:0;}}
.application-hariomoffsetkn__card{  animation:application-hariomoffsetknFade .8s ease both;}
.application-hariomoffsetkn__card:nth-child(2){ animation-delay:.08s;}
.application-hariomoffsetkn__card:nth-child(3){ animation-delay:.16s;}
.application-hariomoffsetkn__card:nth-child(4){ animation-delay:.24s;}
.application-hariomoffsetkn__card:nth-child(5){ animation-delay:.32s;}
.application-hariomoffsetkn__card:nth-child(6){ animation-delay:.40s;}
.application-hariomoffsetkn__card:nth-child(7){ animation-delay:.48s;}
@keyframes application-hariomoffsetknFade{ from{ opacity:0; transform:translateY(40px);} to{ opacity:1; transform:translateY(0);}}
.application-hariomoffsetkn__hero{ animation:application-hariomoffsetknHero .9s ease;}
@keyframes application-hariomoffsetknHero{ from{ opacity:0; transform:translateY(-25px);} to{ opacity:1; transform:translateY(0);}}
.application-hariomoffsetkn__stat{ transition:.3s;}
.application-hariomoffsetkn__stat:hover{ transform:translateY(-6px);}
.application-hariomoffsetkn__stat h3{ transition:.3s;}
.application-hariomoffsetkn__stat:hover h3{ color:var(--secondary);}
.application-hariomoffsetkn__image img{ aspect-ratio:16/9; object-fit:cover;}
@media(min-width:1400px){ .application-hariomoffsetkn__grid{ gap:35px;} .application-hariomoffsetkn__content{ padding:25px;}
.application-hariomoffsetkn__content h3{ font-size:20px;}}