/* "Knooz story" — the About page told as a story that unfolds while you scroll */
.st-hero { position: relative; text-align: center; padding: 84px 0 70px; color: #fff; overflow: hidden;
  background: radial-gradient(ellipse at 85% 0%, rgba(240, 183, 58, .28), transparent 45%), radial-gradient(ellipse at 10% 100%, rgba(140, 235, 205, .25), transparent 50%), var(--pat-hero), linear-gradient(160deg, #1a6f7a 0%, #0a4c63 100%); }
.st-hero__in { display: grid; justify-items: center; gap: 14px; }
.st-tag { display: inline-block; padding: 12px 38px; border-radius: 999px; font-weight: 800; font-size: 1.3rem; color: #3b2a05; background: linear-gradient(90deg, #f6c453, #e09a14); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.st-hero h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; line-height: 1.4; color: #fff !important; text-shadow: 0 4px 22px rgba(0, 0, 0, .3); }
.st-hero p { margin: 0; max-width: 640px; font-size: 1.25rem; font-weight: 700; line-height: 2; color: #eef7f9 !important; }

/* the thread that fills while you scroll */
.st { position: relative; padding: 60px 0 40px; }
.st__thread { position: absolute; top: 40px; bottom: 40px; inset-inline-start: 50%; width: 4px; margin-inline-start: -2px; border-radius: 4px; background: repeating-linear-gradient(180deg, rgba(24, 96, 120, .3) 0 10px, transparent 10px 20px); }
.st__thread i { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(180deg, #f6c453, #d89018); transform-origin: top; transform: scaleY(0); }
.st__in { position: relative; display: grid; gap: 70px; }

.st-ch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: center; }
.st-ch__dot { grid-column: 2; grid-row: 1; justify-self: center; z-index: 2; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #1f7a90, #0a3d4d); box-shadow: 0 0 0 8px #fff, 0 14px 28px rgba(14, 69, 88, .3); transition: background .5s, color .5s, transform .5s cubic-bezier(.3, 1.6, .5, 1); transform: scale(.7); }
.st-ch__dot b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-ch.is-on .st-ch__dot { transform: scale(1); color: #3b2a05; background: linear-gradient(145deg, #f8d27a, #e09a14); }
.st-ch__card { grid-column: 3; grid-row: 1; padding: 28px 30px; border-radius: 26px; background: #fff; border: 1px solid rgba(24, 96, 120, .14); box-shadow: 0 20px 44px rgba(14, 69, 88, .13); opacity: 0; transform: translateX(-40px); transition: opacity .7s, transform .8s cubic-bezier(.3, 1.1, .5, 1); }
.st-ch--b .st-ch__card { grid-column: 1; transform: translateX(40px); }
.st-ch.is-on .st-ch__card { opacity: 1; transform: none; }
.st-ch__kick { display: inline-block; margin-bottom: 4px; padding: 2px 14px; border-radius: 999px; font-weight: 800; font-size: .88rem; color: #b8780a; background: rgba(216, 144, 24, .13); }
.st-ch__card h2 { margin: 4px 0 8px; font-size: 1.7rem; font-weight: 800; line-height: 1.5; color: var(--teal-deep) !important; }
.st-ch__card p { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 2; color: #1d2b31 !important; }
.st-ch__tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-ch__tags li { padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: .95rem; color: #fff; background: linear-gradient(145deg, #1f7a90, #0a3d4d); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--k) * 140ms + 500ms); }
.st-ch__tags li:nth-child(even) { color: #3b2a05; background: linear-gradient(145deg, #f8d27a, #e09a14); }
.st-ch.is-on .st-ch__tags li { opacity: 1; transform: none; }

.st-end { position: relative; display: grid; justify-items: center; gap: 22px; text-align: center; padding-top: 10px; padding-bottom: 20px; opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.st-end.is-on { opacity: 1; transform: none; }
.st-end__dot { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #34a47f, #1d7a5c); box-shadow: 0 0 0 8px #fff, 0 14px 28px rgba(29, 122, 92, .35); z-index: 2; }
.st-end__dot .icon { width: 38px; height: 38px; stroke-width: 3; }
.st-end b { font-size: 1.5rem; font-weight: 800; color: var(--teal-deep); line-height: 1.7; }

/* numbers */
.st-nums { padding: 14px 0 54px; }
.st-nums__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 900px; }
.st-nums__in > div { display: grid; justify-items: center; gap: 2px; padding: 26px 14px; border-radius: 24px; background: linear-gradient(160deg, #1a6f7a, #0a4c63); color: #fff; box-shadow: 0 20px 40px rgba(14, 69, 88, .25); }
.st-nums__in b { font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 800; line-height: 1.1; color: #f6c453; font-variant-numeric: tabular-nums; }
.st-nums__in span { font-weight: 800; font-size: 1.05rem; color: #fff; text-align: center; }

@media (max-width: 800px) {
  .st__thread { inset-inline-start: 37px; margin-inline-start: 0; }
  .st-ch { grid-template-columns: 74px minmax(0, 1fr); gap: 16px; }
  .st-ch__dot { grid-column: 1; grid-row: 1; width: 62px; height: 62px; justify-self: start; }
  .st-ch__card, .st-ch--b .st-ch__card { grid-column: 2; grid-row: 1; padding: 22px 18px; }
  .st-art { display: none; }
  .st-ch__card h2 { font-size: 1.4rem; }
  .st-end { justify-items: start; grid-template-columns: 74px 1fr; align-items: center; text-align: start; gap: 16px; }
  .st-nums__in { grid-template-columns: 1fr; }
}
.st-nums__in > div:nth-child(2) b::after { content: "%"; }
.st, .st-hero { content-visibility: visible !important; contain-intrinsic-size: none !important; }

/* white logos on both sides of the hero */
.st-hero { padding: 96px 0 84px; }
.st-hero__logo { position: absolute; top: 50%; width: clamp(140px, 17vw, 240px); height: auto; translate: 0 -50%; opacity: .92; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .25)); animation: st-logo 6s ease-in-out infinite; }
.st-hero__logo--r { inset-inline-end: 10.5%; }
.st-hero__logo--l { inset-inline-start: 10.5%; animation-delay: -3s; }
@keyframes st-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 860px) { .st-hero__logo { width: 90px; top: 14%; opacity: .5; } .st-hero__logo--l { display: none; } }

/* instead of an arrow: a button with a thread dripping down toward the story */
.st-go { display: grid; justify-items: center; gap: 0; margin-top: 18px; text-decoration: none; }
.st-go span { padding: 12px 34px; border-radius: 999px; font-weight: 800; font-size: 1.1rem; color: #3b2a05; background: linear-gradient(90deg, #f6c453, #e09a14); box-shadow: 0 12px 26px rgba(0, 0, 0, .3); transition: transform .2s; }
.st-go:hover span { transform: translateY(-3px); }
.st-go i { position: relative; width: 4px; height: 64px; margin-top: 4px; border-radius: 4px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .5) 0 8px, transparent 8px 16px); }
.st-go i::after { content: ''; position: absolute; inset-inline-start: -4px; top: 0; width: 12px; height: 12px; border-radius: 50%; background: #f6c453; box-shadow: 0 0 14px rgba(246, 196, 83, .9); animation: st-drip 1.8s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes st-drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(56px); opacity: 0; } }

/* chapter art: a glowing medallion with small satellites orbiting it */
.st-art { --c1: #1f7a90; --c2: #0a3d4d; --g: rgba(31, 122, 144, .45); position: relative; grid-column: 1; grid-row: 1; justify-self: center; width: 250px; height: 250px; display: grid; place-items: center; opacity: 0; transform: scale(.55) rotate(-12deg); transition: opacity .8s .1s, transform 1s .1s cubic-bezier(.3, 1.4, .5, 1); }
.st-ch--b .st-art { grid-column: 3; }
.st-ch.is-on .st-art { opacity: 1; transform: none; }
.st-art--safe, .st-art--way { --c1: #f8d27a; --c2: #e09a14; --g: rgba(240, 183, 58, .55); }
.st-art--promise { --c1: #34a47f; --c2: #1d7a5c; --g: rgba(52, 164, 127, .5); }
.st-art__halo { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, var(--g) 0%, transparent 68%); animation: st-pulse 3.4s ease-in-out infinite; }
.st-art__ring { position: absolute; inset: 22px; border-radius: 50%; border: 2px dashed rgba(24, 96, 120, .4); animation: st-spin 28s linear infinite; }
.st-art__ring--2 { inset: 4px; border: 2px solid rgba(216, 144, 24, .35); animation: st-spin 40s linear infinite reverse; }
.st-art__core { position: relative; z-index: 2; display: grid; place-items: center; width: 118px; height: 118px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: 0 0 0 8px #fff, 0 0 0 10px rgba(216, 144, 24, .45), 0 22px 44px var(--g); }
.st-art--safe .st-art__core, .st-art--way .st-art__core { color: #3b2a05; }
.st-art__core .icon { width: 56px; height: 56px; animation: st-bob2 3.2s ease-in-out infinite; }
.st-art__orbit { position: absolute; inset: 0; animation: st-spin 16s linear infinite; }
.st-art__sat { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-112px); }
.st-art__sat b { position: absolute; left: -22px; top: -22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c2); background: #fff; box-shadow: 0 10px 22px rgba(14, 69, 88, .3); animation: st-counter 16s linear infinite; }
.st-art--safe .st-art__sat b, .st-art--way .st-art__sat b { color: #b8780a; }
.st-art__sat .icon { width: 22px; height: 22px; }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-pulse { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes st-bob2 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.06); } }
@keyframes st-counter { from { transform: rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(-1 * var(--a) - 360deg)); } }

/* the story label: no box — gold text between two fading gold lines with turning stars */
.st-tag { display: flex; align-items: center; gap: 14px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 1rem; }
.st-tag::before, .st-tag::after { content: ''; width: clamp(50px, 12vw, 130px); height: 2px; background: linear-gradient(90deg, transparent, #f6c453); }
.st-tag::after { transform: scaleX(-1); }
.st-tag b { font-family: var(--font-display), serif; font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1.3; color: #f6c453; letter-spacing: .02em; text-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
.st-tag__star { font-style: normal; font-size: 1.3rem; color: #f6c453; animation: st-spin 9s linear infinite; }
.st-hero { padding: 64px 0 40px; }
.st-hero__in { gap: 10px; }
.st-go i { height: 44px; }
@keyframes st-drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }
.st-hero h1 { margin-top: 2px; }
.st-hero p { margin-bottom: 4px; }
@media (max-width: 860px) { .st-hero { padding: 44px 0 30px; } }
@media (max-width: 800px) { .st-art, .st-ch--b .st-art { display: none !important; } }

/* breathing room between the number circle and the card */
.st-ch { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); }
@media (max-width: 800px) {
  .st-ch { grid-template-columns: 82px minmax(0, 1fr); gap: 22px; }
  .st__thread { inset-inline-start: 41px; }
}