.ck-hero { position: relative; overflow: hidden; background: linear-gradient(110deg, #fff 0%, #fff 58%, #edf4ff 58%, #edf4ff 74%, var(--ck-color-blue) 74%); }
.ck-hero::after { content: ""; position: absolute; inset: auto -7vw -32% auto; width: 36vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); }
.ck-hero__grid { position: relative; z-index: 1; min-height: 430px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ck-hero__copy { padding-block: 54px; max-width: 650px; }
.ck-hero h1 { margin: 0; max-width: 11ch; color: var(--ck-color-navy); font-family: var(--ck-font-display); font-size: clamp(3rem, 5.6vw, 5.4rem); line-height: .94; letter-spacing: -0.065em; }
.ck-hero h1 span { color: var(--ck-color-blue); }
.ck-hero__lead { margin: 22px 0 24px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: #323a48; }
.ck-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.ck-hero__visual { min-height: 340px; display: grid; grid-template-columns: minmax(190px, 270px) minmax(190px, 260px); align-items: center; justify-content: center; gap: 26px; }
.ck-hero-pack { position: relative; justify-self: end; width: min(250px, 100%); aspect-ratio: .7; padding: 24px; display: flex; flex-direction: column; justify-content: center; border-radius: 5px; color: var(--ck-color-white); background: linear-gradient(145deg, #0870ff, #003a9d 75%); box-shadow: 0 32px 45px rgba(11,16,32,.24); transform: perspective(700px) rotateY(-7deg); }
.ck-hero-pack::before { content: ""; position: absolute; inset: 18% -6px auto auto; width: 38px; height: 52%; border: 1px solid rgba(255,255,255,.38); border-left: 0; transform: skewY(-20deg); opacity: .65; }
.ck-hero-pack span { font-size: 2.7rem; font-weight: 900; letter-spacing: -.05em; }
.ck-hero-pack strong { margin-top: 8px; font-size: 1.1rem; letter-spacing: .12em; }
.ck-hero-pack small { margin-top: auto; font-size: 1.2rem; font-weight: 800; }
.ck-hero-facts { display: grid; gap: 10px; }
.ck-hero-facts > div { min-height: 66px; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 10px 13px; border-radius: 9px; background: var(--ck-color-white); box-shadow: var(--ck-shadow-sm); }
.ck-hero-facts .ck-fact-icon { grid-row: 1 / span 2; width: 36px; height: 36px; display: grid; place-items: center; color: var(--ck-color-blue); }
.ck-fact-icon svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ck-hero-facts strong { align-self: end; font-size: .98rem; }
.ck-hero-facts small { align-self: start; color: var(--ck-color-muted); font-size: .76rem; }
.ck-hero-facts .ck-hero-facts__price { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--ck-color-lime); color: var(--ck-color-navy); }
.ck-hero-facts__price small { color: #253006; }