.kasier-home-intro {
--kasier-red: #c90907;
--kasier-black: #171717;
--kasier-gray: #666666;
position: relative;
width: 100%;
padding: 95px 15px;
overflow: hidden;
background: #ffffff;
color: var(--kasier-black);
}
.kasier-home-intro *,
.kasier-home-intro *::before,
.kasier-home-intro *::after {
box-sizing: border-box;
}
.kasier-home-intro__container {
position: relative;
width: min(1170px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
align-items: stretch;
gap: 55px;
}
.kasier-home-intro__visual {
position: relative;
min-height: 570px;
overflow: hidden;
background: #1b1b1b;
}
.kasier-home-intro__visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.02),
rgba(0, 0, 0, 0.28)
);
pointer-events: none;
}
.kasier-home-intro__visual img {
display: block;
width: 100%;
height: 100%;
min-height: 570px;
object-fit: cover;
object-position: center;
transition: transform 0.7s ease;
}
.kasier-home-intro__visual:hover img {
transform: scale(1.025);
}
.kasier-home-intro__visual-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 40px;
color: rgba(255, 255, 255, 0.72);
font-size: 14px;
line-height: 1.6;
text-align: center;
letter-spacing: 0.04em;
}
.kasier-home-intro__badge {
position: absolute;
z-index: 2;
left: 22px;
bottom: 22px;
width: calc(100% - 44px);
padding: 19px 21px;
background: rgba(18, 18, 18, 0.94);
color: #ffffff;
}
.kasier-home-intro__badge strong {
display: block;
margin-bottom: 7px;
font-size: 15px;
line-height: 1.35;
}
.kasier-home-intro__badge span {
display: block;
color: rgba(255, 255, 255, 0.70);
font-size: 12px;
line-height: 1.55;
}
.kasier-home-intro__content {
align-self: center;
padding: 5px 0;
}
.kasier-home-intro__eyebrow {
display: inline-block;
margin: 0 0 17px;
color: #9d9d9d !important;
font-family: "Titillium Web", Arial, sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.kasier-home-intro__eyebrow::before {
content: "[ ";
color: #9d9d9d !important;
}
.kasier-home-intro__eyebrow::after {
content: " ]";
color: #9d9d9d !important;
}
.kasier-home-intro__title {
position: relative;
max-width: 650px;
margin: 0 0 28px;
color: var(--kasier-red) !important;
font-size: clamp(40px, 3.6vw, 54px);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.035em;
}
.kasier-home-intro__title strong {
color: var(--kasier-red) !important;
font-weight: 500;
}
.kasier-home-intro__title::after {
content: "";
display: block;
width: 72px;
height: 0;
margin-top: 20px;
border-bottom: 2px dotted var(--kasier-red);
}
.kasier-home-intro__lead {
max-width: 650px;
margin: 0 0 15px;
color: #4d4d4d;
font-size: 16px;
line-height: 1.7;
}
.kasier-home-intro__text {
max-width: 650px;
margin: 0;
color: var(--kasier-gray);
font-size: 14px;
line-height: 1.75;
}
.kasier-home-intro__features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 30px 0;
border-top: 1px solid rgba(23, 23, 23, 0.12);
border-bottom: 1px solid rgba(23, 23, 23, 0.12);
background: #ffffff;
}
.kasier-home-intro__feature {
min-height: 175px;
padding: 24px 20px;
border-right: 1px solid rgba(23, 23, 23, 0.12);
background: transparent;
transition: background 0.25s ease;
}
.kasier-home-intro__feature:last-child {
border-right: 0;
}
.kasier-home-intro__feature:hover {
background: #fafafa;
}
.kasier-home-intro__feature-number {
display: block;
margin-bottom: 16px;
color: var(--kasier-red);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
}
.kasier-home-intro__feature h3 {
margin: 0 0 9px;
color: var(--kasier-black);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
}
.kasier-home-intro__feature p {
margin: 0;
color: #6d6d6d;
font-size: 12px;
line-height: 1.6;
}
.kasier-home-intro__statement {
margin: 0 0 34px;
padding: 17px 20px;
border-left: 3px solid var(--kasier-red);
background: #f7f7f7;
color: #333333;
font-size: 13px;
line-height: 1.7;
}
.kasier-home-intro__actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 48px;
overflow: visible !important;
}
.kasier-home-intro__button,
a.kasier-home-intro__button {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 245px !important;
min-height: 68px !important;
padding: 17px 30px !important;
overflow: visible !important;
background: #171717 !important;
border: 1px solid #171717 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-decoration: none !important;
transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out !important;
}
.kasier-home-intro__button::before,
.kasier-home-intro__button::after {
content: none !important;
display: none !important;
}
.kasier-home-intro__button-label {
position: relative;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
color: inherit;
pointer-events: none;
}
.kasier-home-intro__button-line {
position: absolute !important;
z-index: 10 !important;
display: block !important;
background: #171717 !important;
border: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none !important;
transform: none !important;
will-change: clip-path;
}
.kasier-home-intro__button-line--horizontal {
left: 14px !important;
right: -21px !important;
bottom: -8px !important;
height: 1px !important;
clip-path: inset(0 0 0 0);
transition: clip-path 170ms cubic-bezier(.7, 0, .3, 1) !important;
}
.kasier-home-intro__button-line--vertical {
top: 14px !important;
right: -13px !important;
bottom: -15px !important;
width: 1px !important;
clip-path: inset(0 0 0 0);
transition: clip-path 100ms cubic-bezier(.7, 0, .3, 1) 100ms !important;
}
.kasier-home-intro__button:hover,
.kasier-home-intro__button:focus-visible,
a.kasier-home-intro__button:hover,
a.kasier-home-intro__button:focus-visible {
background: #c90907 !important;
border-color: #c90907 !important;
color: #ffffff !important;
}
.kasier-home-intro__button:hover .kasier-home-intro__button-line--horizontal,
.kasier-home-intro__button:focus-visible .kasier-home-intro__button-line--horizontal {
clip-path: inset(0 100% 0 0) !important;
}
.kasier-home-intro__button:hover .kasier-home-intro__button-line--vertical,
.kasier-home-intro__button:focus-visible .kasier-home-intro__button-line--vertical {
clip-path: inset(0 0 100% 0) !important;
}
.kasier-home-intro__button--primary,
.kasier-home-intro__button--secondary {
background: #171717 !important;
border-color: #171717 !important;
color: #ffffff !important;
}
.kasier-home-intro__arrow {
display: inline-block;
font-size: 20px;
line-height: 1;
pointer-events: none;
}
@media (max-width: 1100px) {
.kasier-home-intro {
padding: 75px 24px;
}
.kasier-home-intro__container {
grid-template-columns: 1fr;
gap: 42px;
}
.kasier-home-intro__visual,
.kasier-home-intro__visual img {
min-height: 500px;
}
.kasier-home-intro__content {
padding: 0;
}
}
@media (max-width: 767px) {
.kasier-home-intro {
padding: 55px 18px;
}
.kasier-home-intro__container {
gap: 38px;
}
.kasier-home-intro__visual,
.kasier-home-intro__visual img {
min-height: 390px;
}
.kasier-home-intro__badge {
left: 16px;
bottom: 16px;
width: calc(100% - 32px);
padding: 18px;
}
.kasier-home-intro__eyebrow {
font-size: 11px;
letter-spacing: 0.07em;
}
.kasier-home-intro__title {
font-size: clamp(35px, 10vw, 46px);
margin-bottom: 25px;
}
.kasier-home-intro__title::after {
width: 62px;
margin-top: 16px;
}
.kasier-home-intro__lead {
font-size: 16px;
}
.kasier-home-intro__features {
grid-template-columns: 1fr;
border-bottom: 0;
}
.kasier-home-intro__feature {
min-height: auto;
border-right: 0;
border-bottom: 1px solid #e7e7e7;
}
.kasier-home-intro__actions {
display: grid;
grid-template-columns: 1fr;
gap: 34px;
padding-right: 18px;
}
.kasier-home-intro__button,
a.kasier-home-intro__button {
width: 100% !important;
min-width: 0 !important;
min-height: 60px !important;
font-size: 13px !important;
}
.kasier-home-intro__button-line--horizontal {
left: 12px !important;
right: -18px !important;
bottom: -7px !important;
}
.kasier-home-intro__button-line--vertical {
top: 12px !important;
right: -10px !important;
bottom: -13px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.kasier-home-intro__button,
.kasier-home-intro__button-line {
transition: none !important;
}
}

/* Text-only introduction and centered responsive actions. */
.kasier-home-intro__container { grid-template-columns: minmax(0,1fr); }
.kasier-home-intro__actions { justify-content:center; }
.kasier-home-intro__button-icon { flex:0 0 21px; width:21px; height:21px; }
.kasier-home-intro__button-label { gap:12px; }
.kasier-home-intro__feature-number {font-family:"Titillium Web",sans-serif;font-size:30px;line-height:1.1;font-weight:300;}
@media(max-width:767px){.kasier-home-intro__actions {justify-items:center;} .kasier-home-intro__feature-number{font-size:26px;}}

/* KAS-15: outlined editorial numbers, inspired by Theratio .number-stroke. */
.kasier-home-intro__feature-number {
  font-size:72px;
  line-height:1;
  font-weight:600;
  letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums;
  margin-bottom:22px;
  color:var(--kasier-red);
}
@supports (-webkit-text-stroke: 1px red) {
  .kasier-home-intro__feature-number {
    color:transparent;
    -webkit-text-stroke:1px var(--kasier-red);
  }
}
@media(max-width:767px) {
  .kasier-home-intro__feature-number {font-size:56px;margin-bottom:16px;}
}
/* KAS-34: presentation and benefits side by side, stacked on smaller screens. */
.kasier-home-intro__content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 56px;align-items:start;}
.kasier-home-intro__features{display:grid;grid-template-columns:1fr;margin:0;}
.kasier-home-intro__feature{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px 18px;padding:22px 0;border-left:0!important;}
.kasier-home-intro__feature+.kasier-home-intro__feature{border-top:1px solid #e5e5e5;}
.kasier-home-intro__feature-number{grid-row:1/3;margin:0;font-size:60px;}
.kasier-home-intro__feature h3,.kasier-home-intro__feature p{margin:0;}
.kasier-home-intro__statement,.kasier-home-intro__actions{grid-column:1/-1;margin:0;}
@media(max-width:1024px){.kasier-home-intro__content{grid-template-columns:1fr;gap:28px;}}
@media(max-width:767px){.kasier-home-intro__feature{grid-template-columns:60px minmax(0,1fr);gap:8px 14px;}.kasier-home-intro__feature-number{font-size:52px;}}
.kasier-home-intro__feature{min-height:0;grid-template-rows:auto auto;align-content:start;border-right:0!important;}.kasier-home-intro__feature p{font-size:14px;line-height:1.65;}

/* KAS120: product families and a short route to the detailed budget page. */
.home .kasier-home-intro__feature p{font-size:17px;line-height:1.65}
.home .kasier-home-intro__feature h3 a{color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.home .kasier-home-intro__feature h3 a:hover{color:#c90907}
.home .kasier-home-intro__feature h3 a:focus-visible{outline:2px solid #c90907;outline-offset:5px}
.home .kasier-home-intro__button,.home a.kasier-home-intro__button{font-size:17px!important;text-transform:none!important;letter-spacing:0!important}
.home .kh120-budget{padding-top:0}.home .kh120-budget .kr-next{margin-top:0}.home .kh120-budget a{font-size:17px;padding:12px 0}
.home .elementor-widget-ibutton .octf-btn{font-size:16px!important;text-transform:none!important;letter-spacing:0!important}
.home #kasier-theratio-hero .kasier-theratio__description{font-size:19px!important;line-height:1.6!important;max-width:62ch!important;margin-inline:auto!important}
.home #kasier-theratio-hero .kasier-theratio__button{font-size:17px!important;line-height:1.4!important;text-transform:none!important;letter-spacing:0!important;min-height:52px!important}
.home .kasier-home-intro__feature h3{font-size:21px!important;line-height:1.35!important}
.home .kasier-home-intro__text,.home .kasier-home-intro__lead,.home .kasier-home-intro__statement{font-size:17px!important;line-height:1.65!important}
@media(max-width:767px){.home #kasier-theratio-hero .kasier-theratio__description{font-size:17px!important}.home #kasier-theratio-hero .kasier-theratio__title{font-size:clamp(30px,8vw,42px)!important;line-height:1.15!important}}