/* Kalem's presentation uses the reference's soft green stages and floating device. */
:root { --kp-ink:#152a24; --kp-muted:#68756d; --kp-green:#17664e; --kp-green-dark:#104d3b; --kp-bg:#f9faf6; --kp-line:#dfebe2; }
.kp-site { overflow-x:clip; }
.kp-container { width:min(1320px,calc(100% - 64px)); }
.kp-scroll-progress { position:fixed; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#8cc95e,#17664e); transform:scaleX(var(--kp-progress,0)); transform-origin:right; z-index:100; pointer-events:none; }
.kp-header { background:#f3faefdb; border-bottom-color:transparent; transition:background .3s,box-shadow .3s; }
.kp-header.is-scrolled { background:#ffffffef; box-shadow:0 6px 30px #163e2510; }
.kp-header-inner { height:82px; }
.kp-nav a { font-size:13px; padding-block:28px; }
.kp-header-cta { background:var(--kp-green); color:#fff; border-radius:50px; padding:12px 23px; font-size:12px; font-weight:700; box-shadow:0 12px 25px #17664e20; transition:transform .25s,background .25s; white-space:nowrap; }
.kp-header-cta:hover { transform:translateY(-2px); background:var(--kp-green-dark); }
.kp-language { background:#ffffffa8; border:1px solid #fff; border-radius:40px; padding:10px 13px; }
.kp-hero { padding-top:25px; background:radial-gradient(ellipse at 22% 55%,#dcebd3b0,transparent 43%),radial-gradient(ellipse at 90% 0,#e0f4e5,transparent 55%),linear-gradient(180deg,#eef8e9,#faf9f5); isolation:isolate; }
.kp-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(#77977c08 1px,transparent 1px),linear-gradient(90deg,#77977c08 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(transparent,#000 50%,transparent); }
.kp-hero-grid { min-height:650px; grid-template-columns:1.15fr 1fr; gap:55px; padding-bottom:36px; }
.kp-hero-copy h1 { font-size:clamp(40px,4.2vw,64px); line-height:1.5; letter-spacing:-1.5px; }
.kp-hero-copy h1 em { background:linear-gradient(110deg,#104d3b,#478a36); background-clip:text; -webkit-text-fill-color:transparent; }
.kp-hero-copy h1 svg { display:none; }
.kp-hero-copy > p { font-size:16px; line-height:2.1; max-width:590px; }
.kp-eyebrow { font-size:12px; }
.kp-button { border-radius:50px; padding:16px 28px; font-size:13px; gap:20px; }
.kp-hero-buttons .kp-secondary { background:#fff9; }
.kp-hero-note > span { font-size:11px; color:#687c6e; }
.kp-device-scene { position:relative; width:100%; height:610px; isolation:isolate; perspective:1200px; }
.kp-device-halo { position:absolute; inset:30px -20px 0; background:radial-gradient(ellipse,#bbd8b6aa,transparent 65%); filter:blur(18px); animation:kp-halo-breathe 7s ease-in-out infinite; }
.kp-device-orbit { position:absolute; width:470px; height:470px; max-width:110%; inset:60px auto auto 50%; transform:translateX(-50%); border:1px solid #769d6a14; border-radius:50%; }
.kp-device-orbit::before { content:""; position:absolute; inset:35px; border:1px dashed #74996b26; border-radius:50%; }
.kp-device-float { position:absolute; width:248px; height:480px; top:25px; left:50%; margin-left:-124px; z-index:2; animation:kp-device-hover 6s ease-in-out infinite; }
.kp-device { height:100%; padding:9px; border-radius:44px; background:linear-gradient(120deg,#638477,#153e31 20%,#09261e 72%,#57776a); border:2px solid #15362b; box-shadow:inset 0 0 0 2px #8bac9255,14px 22px 38px #12392333,-5px 2px 7px #173d3320; transform:rotateY(var(--device-y,-8deg)) rotateX(var(--device-x,3deg)); transition:transform .4s ease-out; position:relative; }
.kp-device::before,.kp-device::after { content:""; position:absolute; width:3px; border-radius:3px; background:#254b3d; }
.kp-device::before { left:-4px; top:100px; height:53px; }
.kp-device::after { right:-4px; top:125px; height:38px; }
.kp-device-screen { height:100%; border-radius:33px; overflow:hidden; background:linear-gradient(#fff,#f1f9f4); border:1px solid #9eb2a4; padding:0 13px; position:relative; }
.kp-device-status { direction:ltr; height:34px; display:flex; align-items:center; justify-content:space-between; font-family:Arial,sans-serif; font-size:9px; font-weight:700; color:#405b4b; padding:0 3px; }
.kp-device-status > span:last-child { font-size:8px; }
.kp-device-notch { position:absolute; width:100px; height:22px; left:50%; transform:translateX(-50%); top:0; background:#0d2a20; border-radius:0 0 15px 15px; }
.kp-device-brand { display:flex; align-items:center; gap:7px; padding:6px 0; }
.kp-device-brand > strong { font-size:21px; }
.kp-device-brand > span { margin-inline-start:auto; border:1px solid #e4ece7; border-radius:9px; padding:6px 8px; color:#618e75; font-size:12px; }
.kp-device-welcome { padding:10px 0 12px; }
.kp-device-welcome > small { font-size:8px; color:#81978a; }
.kp-device-welcome h3 { font-size:14px; margin:4px 0 0; }
.kp-device-identity { background:#fff; border:1px solid #e4ede6; border-radius:15px; padding:12px; text-align:center; box-shadow:0 6px 15px #244e2e06; }
.kp-device-avatar { width:43px; height:43px; display:grid; place-items:center; background:#eaf4e5; border-radius:13px; color:#568e62; font-size:22px; margin:0 auto 8px; position:relative; }
.kp-device-avatar > span { position:absolute; bottom:-3px; right:-5px; border:2px solid #fff; background:#237752; color:#fff; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; font-size:7px; }
.kp-device-identity > strong { display:block; font-size:10px; }
.kp-device-qr { position:relative; width:70px; height:70px; margin:12px auto 8px; padding:5px; border:1px solid #dce9df; border-radius:7px; color:#1c5440; overflow:hidden; }
.kp-device-qr svg { width:100%; height:100%; }
.kp-scan-line { position:absolute; inset:5px 0 auto; height:2px; background:#5bc38e; box-shadow:0 -7px 14px #5bc38e80; animation:kp-scan 4s ease-in-out infinite; }
.kp-device-identity > small { font-size:7px; color:#81988a; }
.kp-device-connection { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:13px 10px 10px; }
.kp-device-connection > span { color:#377c59; font-size:16px; }
.kp-connection-line { width:60px; height:1px; background:#c4dcca; position:relative; }
.kp-connection-line::after { content:""; position:absolute; top:-2px; left:0; width:5px; height:5px; border-radius:50%; background:#319162; animation:kp-connection 2.5s ease-in-out infinite; }
.kp-device-connection small { flex-basis:100%; text-align:center; color:#6f8f7a; font-size:8px; margin-top:-7px; }
.kp-device-tabs { display:flex; justify-content:space-around; border-top:1px solid #e1ece4; padding:11px 0; color:#aec4b6; font-size:12px; }
.kp-device-tabs > i:first-child { color:#267e58; }
.kp-device-home { position:absolute; width:65px; height:3px; border-radius:5px; bottom:6px; left:50%; transform:translateX(-50%); background:#183e2c; }
.kp-device-stage { position:absolute; width:310px; height:88px; background:linear-gradient(90deg,#0a2b20,#1d5942 45%,#0a2a1f); border-radius:50% / 32%; bottom:40px; left:50%; transform:translateX(-50%); box-shadow:0 27px 35px #234d3533; z-index:1; }
.kp-stage-top { position:absolute; height:66px; inset:-23px 0 auto; background:radial-gradient(ellipse at center,#4c8b69,#1b4f38 60%,#0c3022); border-radius:50%; border:1px solid #417654; }
.kp-stage-top::after { content:""; position:absolute; inset:15px 48px; border-radius:50%; background:#071d18; filter:blur(8px); opacity:.5; animation:kp-shadow-breathe 6s ease-in-out infinite; }
.kp-orbit-icon { position:absolute; width:54px; height:54px; display:grid; place-items:center; background:#ffffffed; border:1px solid #e6eee1; border-radius:17px; color:#7aad8b; box-shadow:0 10px 25px #19492c09; font-size:22px; animation:kp-tag-float 5s ease-in-out infinite; }
.kp-orbit-icon-one { top:90px; inset-inline-start:15px; }
.kp-orbit-icon-two { bottom:150px; inset-inline-end:0; animation-delay:-2s; }
.kp-device-notice { position:absolute; top:285px; inset-inline-start:-10px; display:flex; align-items:center; gap:9px; padding:12px 15px; background:#fffffff0; box-shadow:0 10px 25px #19492c0f; border:1px solid #e5ede1; border-radius:13px; z-index:3; animation:kp-tag-float 7s ease-in-out infinite; animation-delay:-3s; }
.kp-device-notice > span { width:28px; height:28px; border-radius:50%; background:#e6f4e7; color:#4c9f6a; display:grid; place-items:center; font-size:11px; }
.kp-device-notice strong { display:block; font-size:9px; }
.kp-device-notice small { font-size:7px; color:#7b9281; }
.kp-device-caption { position:absolute; bottom:5px; width:100%; text-align:center; font-size:9px; color:#8a9d8c; }
.kp-audience-strip { background:#fff; border:1px solid #edf1e7; border-radius:24px; box-shadow:0 20px 50px #234d3510; padding:27px 36px; margin:0 0 36px; }
.kp-audience-strip > div { color:#2b6642; }
.kp-about { background:#eaf6e5; }
.kp-about-grid { gap:65px; }
.kp-about-art { order:2; background:transparent; border:0; overflow:visible; }
.kp-about-grid > div:last-child { order:1; }
.kp-about-art::after { opacity:.12; }
.kp-about-center { background:linear-gradient(135deg,#fff,#edf7eb); box-shadow:0 25px 50px #3267351a; transform:translate(-50%,-50%) rotate(-7deg); }
.kp-about-orbit { animation:kp-orbit-turn 45s linear infinite; }
.kp-person { animation:kp-tag-float 6s ease-in-out infinite; border:1px solid #e7eee4; box-shadow:0 15px 25px #4e714d12; }
.kp-person-teacher { animation-delay:-3s; }.kp-person-parent { animation-delay:-1.5s; }
.kp-about-points { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.kp-about-points > div { flex-direction:column; padding:20px; background:#ffffffcf; border:1px solid #e9f0e5; border-radius:18px; transition:transform .3s,box-shadow .3s; }
.kp-about-points > div:last-child { grid-column:1 / -1; }
.kp-about-points > div:hover { transform:translateY(-5px); box-shadow:0 18px 35px #294d2410; }
.kp-about-points > div > span { width:38px; flex-basis:38px; border:0; background:#e7f2e8; color:var(--kp-green); }
.kp-section-description { font-size:14px; max-width:580px; }
.kp-features { background:#fafbf8; border:0; }
.kp-feature-card { background:#fff; border:1px solid #e9eee6; border-radius:22px; padding:30px; box-shadow:0 8px 25px #1f4c2805; overflow:hidden; }
.kp-feature-card::before { content:""; position:absolute; top:0; inset-inline:22px; height:3px; background:linear-gradient(90deg,#9dc783,var(--kp-green)); transform:scaleX(0); transition:transform .35s; }
.kp-feature-card:hover::before { transform:scaleX(1); }
.kp-feature-card p { font-size:12px; }
.kp-feature-top > span { border:0; background:#e8f3ed; color:#297558; }
.kp-how { background:#f6f7f2; }
.kp-steps { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:30px; }
.kp-step { background:#fff; border:1px solid #e8eee5; border-radius:20px; padding:42px 28px 28px; box-shadow:0 8px 25px #25462a07; }
.kp-step-number { width:42px; height:42px; margin:-64px auto 22px; border-radius:50%; background:var(--kp-green); color:#fff; border:4px solid #f6f7f2; box-shadow:none; font-size:13px; }
.kp-step:not(:last-child)::after { content:"←"; width:auto; border:0; font-size:23px; color:var(--kp-green); top:50%; inset-inline-start:calc(100% + 5px); transform:translateY(-50%); }
html[dir="ltr"] .kp-step:not(:last-child)::after { content:"→"; }
.kp-step h3 { font-size:16px; }.kp-step p { font-size:12px; }
.kp-faq { background:#eaf6e5; border:0; }
.kp-faq-grid { gap:70px; align-items:start; }
.kp-question { background:#fff; border:1px solid #dfeadc; border-radius:17px; padding:20px 24px; margin-bottom:13px; transition:box-shadow .3s,border-color .3s; }
.kp-question[open] { border-color:#99b997; box-shadow:0 14px 30px #29482a08; }
.kp-question summary { font-size:14px; }.kp-question summary > span { background:#eaf4e5; color:var(--kp-green); }
.kp-contact { background:#f9faf6; border:0; }.kp-contact-form { border-radius:23px; box-shadow:0 22px 60px #234c3210; padding:36px; }
.kp-contact-form input,.kp-contact-form textarea { background:#fafcf8; border-radius:11px; }
.kp-partners { padding:65px 0; background:#fff; overflow:hidden; }
.kp-partner-track { display:flex; width:max-content; align-items:center; gap:60px; padding:20px 30px; direction:ltr; }
.kp-partner-track .kp-partner-logos { display:flex; flex-wrap:nowrap; flex-shrink:0; gap:60px; margin:0; }
.kp-partner-track img { max-width:125px; height:54px; object-fit:contain; filter:grayscale(1); opacity:.65; transition:filter .3s,opacity .3s; }
.kp-partner-track img:hover { filter:none; opacity:1; }
.kp-partner-window { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.kp-partner-track.is-moving { animation:kp-partners-slide 30s linear infinite; }
.kp-partner-window:hover .kp-partner-track { animation-play-state:paused; }
.kp-reveal-ready { transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1); transition-delay:var(--kp-delay,0ms); }
.kp-reveal-ready:not(.is-visible) { opacity:0; transform:translateY(35px); }
.kp-footer { background:#112e22; }
@keyframes kp-device-hover { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-14px) rotate(1deg); } }
@keyframes kp-halo-breathe { 0%,100% { opacity:.65; transform:scale(.95); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes kp-shadow-breathe { 0%,100% { transform:scale(1); opacity:.5; } 50% { transform:scale(.85); opacity:.3; } }
@keyframes kp-scan { 0%,100% { transform:translateY(0); opacity:0; } 20%,80% { opacity:1; } 85% { transform:translateY(57px); } }
@keyframes kp-connection { 0%,100% { transform:translateX(0); opacity:.4; } 50% { transform:translateX(55px); opacity:1; } }
@keyframes kp-orbit-turn { to { rotate:360deg; } }
@keyframes kp-partners-slide { to { transform:translateX(-50%); } }
@media(min-width:1500px) { .kp-hero-grid { min-height:710px; }.kp-device-scene { scale:1.06; } }
@media(max-width:1199px) { .kp-header-inner { gap:16px; }.kp-nav { gap:16px; }.kp-nav a { font-size:11px; }.kp-header-actions { gap:9px; }.kp-header-cta { padding:11px 17px; }.kp-hero-grid { gap:30px; }.kp-hero-copy h1 { font-size:46px; }.kp-hero-copy > p { font-size:14px; }.kp-device-notice { inset-inline-start:-20px; }.kp-about-grid { gap:25px; } }
@media(max-width:991px) { .kp-nav { top:82px; }.kp-nav a { font-size:13px; padding:13px 8px; }.kp-hero-grid { gap:10px; min-height:590px; }.kp-device-scene { height:570px; }.kp-device-float { width:228px; height:460px; margin-left:-114px; }.kp-device-stage { width:270px; bottom:20px; }.kp-device-caption { bottom:-5px; }.kp-device-notice { top:325px; inset-inline-start:-8px; padding:10px; }.kp-orbit-icon { width:45px; height:45px; }.kp-orbit-icon-one { inset-inline-start:0; top:90px; }.kp-orbit-icon-two { inset-inline-end:-4px; }.kp-hero-copy h1 { font-size:38px; }.kp-about-points { grid-template-columns:1fr; }.kp-about-points > div:last-child { grid-column:auto; }.kp-about-points > div { padding:16px; flex-direction:row; }.kp-step:not(:last-child)::after { display:none; }.kp-contact-grid { gap:40px; } }
@media(max-width:767px) { .kp-container { width:calc(100% - 36px); }.kp-header-inner { height:76px; }.kp-nav { top:76px; }.kp-brand small { display:none; }.kp-header-cta { font-size:11px; padding:10px 15px; }.kp-language { padding:8px 10px; }.kp-hero { padding-top:45px; }.kp-hero-grid { grid-template-columns:1fr; gap:20px; padding-bottom:30px; }.kp-hero-copy h1 { font-size:43px; }.kp-hero-copy > p { font-size:14px; }.kp-device-scene { max-width:420px; margin:auto; height:580px; }.kp-device-float { width:248px; height:480px; margin-left:-124px; }.kp-device-stage { bottom:20px; width:300px; }.kp-device-notice { inset-inline-start:0; top:310px; }.kp-orbit-icon-two { inset-inline-end:0; }.kp-audience-strip { padding:24px 16px; gap:20px; margin-bottom:30px; }.kp-about-grid { gap:30px; }.kp-about-art { min-height:370px; }.kp-about-points { grid-template-columns:repeat(2,minmax(0,1fr)); }.kp-about-points > div { flex-direction:column; }.kp-about-points > div:last-child { grid-column:1 / -1; }.kp-section-description { font-size:13px; }.kp-steps { grid-template-columns:1fr; gap:48px; max-width:480px; margin-inline:auto; }.kp-features-grid { grid-template-columns:1fr; }.kp-feature-card { padding:27px; }.kp-feature-card h3 { font-size:17px; }.kp-feature-card p { font-size:13px; min-height:0; }.kp-faq-grid { gap:30px; }.kp-question { padding:18px; }.kp-question p { font-size:12px; }.kp-contact-form { padding:25px; }.kp-partner-track,.kp-partner-track .kp-partner-logos { gap:35px; }.kp-partner-track { padding-inline:17.5px; } }
@media(max-width:399px) { .kp-container { width:calc(100% - 28px); }.kp-header-cta { font-size:10px; padding:9px 12px; }.kp-header-inner { gap:7px; }.kp-header-actions { gap:7px; }.kp-language { padding:8px; }.kp-hero-copy h1 { font-size:36px; }.kp-device-scene { height:540px; }.kp-device-float { scale:.9; transform-origin:top center; }.kp-device-stage { bottom:32px; width:265px; }.kp-device-notice { top:290px; padding:8px; }.kp-device-notice strong { font-size:8px; }.kp-device-notice small { font-size:6px; }.kp-device-caption { bottom:6px; }.kp-orbit-icon { width:38px; height:38px; font-size:18px; }.kp-about-points { grid-template-columns:1fr; }.kp-about-points > div:last-child { grid-column:auto; } }
@media(prefers-reduced-motion:reduce) { .kp-site *, .kp-site *::before, .kp-site *::after { animation:none!important; transition:none!important; }.kp-reveal-ready:not(.is-visible) { opacity:1; transform:none; }.kp-device { transform:none; }.kp-partner-track.is-moving { transform:none; }.kp-partner-track [aria-hidden="true"] { display:none; } }