/* Kemlat home sections (kh): hero, the problem and the philosophy. Builds on ks.css tokens and kp.css components. */

/* ===== Hero ===== */
.kh-hero{min-height:min(100vh,920px);padding:150px 0 110px}
.kh-hero .ks-ring{top:-200px;inset-inline-end:-180px;opacity:.07}
.kh-glow{position:absolute;width:640px;height:640px;border-radius:50%;top:50%;inset-inline-end:8%;margin-top:-320px;background:radial-gradient(circle,rgba(61,139,255,.28),transparent 65%);filter:blur(10px)}
.kh-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.kh-hero h1.kp-title{font-size:clamp(2.8rem,6vw,5.4rem)}
.kh-sub{margin-top:16px!important;color:var(--subtle);font-size:1rem;line-height:1.7;max-width:620px}
.kh-hero .kh-contact{list-style:none;padding:22px 0 0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;border-top:1px solid rgba(255,255,255,.1);max-width:560px}
.kh-contact a{display:inline-flex;align-items:center;gap:10px;color:var(--muted)!important;font-size:14.5px;transition:color .3s}
.kh-contact a:hover{color:#fff!important}
.kh-contact .ks-ico{width:17px;height:17px;color:var(--sky)}

.kh-visual{position:relative}
.kh-panel{position:relative;border-radius:30px;padding:26px 22px 18px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);box-shadow:0 60px 120px -60px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.kh-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 80%);pointer-events:none}
[dir=rtl] .kh-art{transform:scaleX(-1)}
[dir=rtl] .kh-art text{transform:scaleX(-1)}
.kh-art{display:block;width:100%;height:auto;overflow:visible}
.kh-messy{fill:none;stroke:rgba(185,200,227,.45);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round}
.kh-clean{fill:none;stroke:url(#kh-g);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 10px rgba(61,139,255,.6))}
.kh-node circle{fill:#0B2350;stroke:rgba(140,187,255,.35);stroke-width:1.5;transition:fill .5s,stroke .5s}
.kh-node text{fill:#8EA1C4;font:800 20px Poppins,sans-serif;text-anchor:middle;transition:fill .5s;transform-box:fill-box;transform-origin:center}
.kh-node.is-lit circle{fill:url(#kh-g);stroke:#fff}
.kh-node.is-lit text{fill:#fff}
.kh-node{transform-box:fill-box}
.kh-tag{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
[dir=rtl] .kh-tag{letter-spacing:0;font-size:14.5px}
.kh-tag .ks-ico{width:16px;height:16px}
[dir=rtl] .kh-tag .ks-ico{transform:scaleX(-1)}
.kh-tag--from{bottom:20px;inset-inline-start:22px;color:var(--muted);background:rgba(255,255,255,.06);border:1px dashed rgba(185,200,227,.35)}
.kh-tag--to{top:22px;inset-inline-end:22px;color:#fff;background:linear-gradient(135deg,var(--sky),var(--signal));box-shadow:0 10px 30px -10px rgba(61,139,255,.9)}
.kh-ticker{position:relative;height:78px;margin-top:14px}
.kh-tick{position:absolute;inset:0;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:20px;background:rgba(6,26,59,.85);border:1px solid rgba(255,255,255,.12);color:#fff!important;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.kh-tick.is-on{opacity:1;transform:none;pointer-events:auto}
.kh-tick-l{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;font:800 20px Poppins,sans-serif;background:linear-gradient(145deg,var(--sky),var(--blue))}
.kh-tick-ico{color:var(--signal)}
.kh-tick-ico .ks-ico{width:20px;height:20px}
.kh-tick strong{display:block;font-size:15.5px;line-height:1.3}
.kh-tick small{display:block;font-size:13.5px;color:var(--muted);line-height:1.4}

/* ===== The problem ===== */
.kh-board{position:relative;padding:22px;border-radius:30px;background:linear-gradient(165deg,var(--deep),var(--navy) 55%,var(--ink));color:#fff;box-shadow:0 60px 110px -60px rgba(6,26,59,.85);overflow:hidden}
.kh-board::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;border:70px solid var(--sky);opacity:.08;bottom:-160px;inset-inline-start:-120px}
.kh-board-head{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
[dir=rtl] .kh-board-head{letter-spacing:0;font-size:14.5px}
.kh-state{color:var(--subtle);transition:color .4s}
.kh-state--a{color:#fff}
.kh-switch{width:46px;height:24px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;transition:background .4s}
.kh-switch i{position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .45s var(--ease)}
.kh-board.is-done .kh-state--a{color:var(--subtle)}
.kh-board.is-done .kh-state--b{color:#fff}
.kh-board.is-done .kh-switch{background:var(--sky)}
.kh-board.is-done .kh-switch i{inset-inline-start:25px}
.kh-cards{list-style:none;padding:0 12px;margin:0;display:grid;gap:10px;position:relative}
.kh-card{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);transform:translate(var(--x),var(--y)) rotate(var(--r));transition:background .5s,border-color .5s;will-change:transform}
.kh-card-dot{width:10px;height:10px;flex:none;border-radius:50%;background:#8a96aa;transition:background .5s,box-shadow .5s}
.kh-card-t{position:relative;flex:1;min-height:1.5em;font-size:15px;font-weight:600}
.kh-a,.kh-b{display:block;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.kh-a{color:#c9d3e4}
.kh-b{position:absolute;inset:0;opacity:0;transform:translateY(8px);color:#fff}
.kh-card-ok{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:#fff;opacity:0;transform:scale(.5);transition:opacity .4s,transform .5s var(--ease)}
.kh-card-ok .ks-ico{width:15px;height:15px}
.kh-board.is-done .kh-card{background:rgba(61,139,255,.13);border-color:rgba(61,139,255,.45)}
.kh-board.is-done .kh-card-dot{background:var(--signal);box-shadow:0 0 0 4px rgba(18,181,214,.2)}
.kh-board.is-done .kh-a{opacity:0;transform:translateY(-8px)}
.kh-board.is-done .kh-b{opacity:1;transform:none}
.kh-board.is-done .kh-card-ok{opacity:1;transform:none}
.kh-board.is-done .kh-card:nth-child(2) *{transition-delay:.06s}.kh-board.is-done .kh-card:nth-child(3) *{transition-delay:.12s}.kh-board.is-done .kh-card:nth-child(4) *{transition-delay:.18s}.kh-board.is-done .kh-card:nth-child(5) *{transition-delay:.24s}.kh-board.is-done .kh-card:nth-child(6) *{transition-delay:.3s}
.kh-board-bar{position:relative;height:4px;margin-top:20px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.kh-board-bar span{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--sky),var(--signal))}
[dir=rtl] .kh-board-bar span{transform-origin:right}
.kh-signs-t{margin-top:30px!important;font-weight:700;color:var(--navy);font-size:1.05rem}
.kh-signs{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr;gap:10px}
.kh-signs li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;background:var(--cloud);border:1px solid var(--line);transition:transform .45s var(--ease),border-color .4s}
.kh-signs li:hover{transform:translateY(-3px);border-color:rgba(0,74,173,.3)}
.kh-signs p{font-size:15.5px;line-height:1.5;color:var(--slate)}
.kh-signs strong{color:var(--blue)}
.kh-box{position:relative;margin-top:26px;padding:30px;border-radius:24px;overflow:hidden;color:#fff;background:radial-gradient(420px 220px at 100% 0,rgba(61,139,255,.45),transparent 60%),linear-gradient(140deg,var(--navy),var(--deep))}
.kh-box h3{font-size:1.45rem;font-weight:800;line-height:1.3}
.kh-box .kp-acc{background-image:linear-gradient(100deg,#8CBBFF,var(--sky) 45%,var(--signal))}
.kh-box p{color:var(--muted);margin:10px 0 22px!important;line-height:1.7}

/* ===== Philosophy ===== */
.kh-philo-head{max-width:820px}
.kh-philo-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:56px;align-items:start}
.kh-stage{position:sticky;top:110px}
.kh-stage-in{position:relative;aspect-ratio:1/0.92;border-radius:32px;background:radial-gradient(400px 300px at 50% 0,rgba(61,139,255,.25),transparent 70%),rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.kh-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.94);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.kh-scene.is-on{opacity:1;transform:none}
.kh-scene svg{width:82%;height:auto}
.kh-dots circle{fill:rgba(140,187,255,.25)}
.kh-lens{animation:kh-scan 7s var(--ease) infinite alternate}
.kh-lens-c{fill:rgba(61,139,255,.12);stroke:#8CBBFF;stroke-width:3}
.kh-lens-h{stroke:#8CBBFF;stroke-width:10;stroke-linecap:round}
@keyframes kh-scan{0%{transform:translate(0,0)}35%{transform:translate(120px,-30px)}70%{transform:translate(60px,70px)}100%{transform:translate(150px,40px)}}
.kh-bars rect{fill:rgba(61,139,255,.2);transform-box:fill-box;transform-origin:bottom;transform:scaleY(.2);transition:transform 1s var(--ease)}
.kh-scene.is-on .kh-bars rect{transform:none}
.kh-scene.is-on .kh-bars rect:nth-child(2){transition-delay:.1s}.kh-scene.is-on .kh-bars rect:nth-child(3){transition-delay:.2s}.kh-scene.is-on .kh-bars rect:nth-child(4){transition-delay:.3s}.kh-scene.is-on .kh-bars rect:nth-child(5){transition-delay:.4s;fill:rgba(61,139,255,.45)}
.kh-rise{fill:none;stroke:#12B5D6;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s .3s var(--ease)}
.kh-scene.is-on .kh-rise{stroke-dashoffset:0}
.kh-flag path{fill:rgba(185,200,227,.25);stroke:#B9C8E3;stroke-width:2.5;stroke-linejoin:round}
.kh-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:700;background:rgba(6,26,59,.9);border:1px solid rgba(255,255,255,.14);color:#fff}
.kh-chip .ks-ico{width:16px;height:16px;color:var(--signal)}
.kh-chip--a{top:24px;inset-inline-end:24px}
.kh-chip--b{bottom:24px;inset-inline-start:24px;color:var(--muted)}
.kh-layers{position:relative;width:70%;height:70%}
.kh-layer{position:absolute;left:0;right:0;top:50%;height:78px;margin-top:-39px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:20px;font-weight:700;font-size:16px;color:#fff;background:linear-gradient(135deg,rgba(61,139,255,.55),rgba(11,35,80,.9));border:1px solid rgba(140,187,255,.4);box-shadow:0 24px 40px -20px rgba(0,0,0,.8);transform:translateY(calc((var(--k) - 1) * 26px)) scale(calc(1 - (2 - var(--k)) * .06));transition:transform .9s var(--ease)}
.kh-layer .ks-ico{width:22px;height:22px}
.kh-scene.is-on .kh-layer{transform:translateY(calc((var(--k) - 1) * 96px))}
.kh-layer:nth-child(1){z-index:3}.kh-layer:nth-child(2){z-index:2;background:linear-gradient(135deg,rgba(18,181,214,.5),rgba(11,35,80,.9))}.kh-layer:nth-child(3){z-index:1}
.kh-stage-n{position:absolute;bottom:22px;inset-inline-end:24px;display:flex;gap:6px;font:700 12px Poppins,sans-serif;color:var(--subtle)}
.kh-stage-n span{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.06);transition:background .4s,color .4s}
.kh-philo-grid[data-on="0"] .kh-stage-n span:nth-child(1),.kh-philo-grid[data-on="1"] .kh-stage-n span:nth-child(2),.kh-philo-grid[data-on="2"] .kh-stage-n span:nth-child(3){background:var(--sky);color:#fff}
.kh-principles{list-style:none;padding:0;margin:0;display:grid;gap:0}
.kh-principle{display:flex;gap:22px;padding:44px 0;min-height:42vh;align-items:center;border-top:1px solid rgba(255,255,255,.1);opacity:.35;transition:opacity .5s var(--ease)}
.kh-principle:first-child{border-top:0;padding-top:0;min-height:0;align-items:flex-start}
.kh-principle.is-on{opacity:1}
.kh-principle-n{width:54px;height:54px;flex:none;border-radius:16px;display:grid;place-items:center;font:800 17px Poppins,sans-serif;background:rgba(255,255,255,.06);color:var(--sky);border:1px solid rgba(255,255,255,.1);transition:background .5s,color .5s}
.kh-principle.is-on .kh-principle-n{background:linear-gradient(145deg,var(--sky),var(--signal));color:#fff;border-color:transparent}
.kh-principle h3{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:800;line-height:1.25}
.kh-principle p{color:var(--muted);font-size:1.08rem;line-height:1.7;margin-top:10px!important}
.kh-philo-cta{justify-content:center}

/* Start states, only when scripts run */
.ks-js .kh-hero .kh-visual{opacity:0}

@media (max-width:1100px){
.kh-grid{gap:36px}
}
@media (max-width:900px){
.kh-grid{grid-template-columns:1fr}
.kh-visual{max-width:600px}
.kh-glow{display:none}
.kh-philo-grid{grid-template-columns:1fr;gap:28px}
.kh-stage{position:sticky;top:76px;z-index:2}
.kh-stage-in{aspect-ratio:16/9;max-height:38vh;width:100%;background-color:#0B2350}
.kh-principle{min-height:0;padding:28px 0}
.kh-principle:first-child{padding-top:10px}
}
@media (max-width:760px){
.kh-hero{padding:120px 0 80px}
.kh-signs{grid-template-columns:1fr}
.kh-board{padding:16px}
.kh-card{padding:12px 14px}
.kh-card-t{font-size:14px}
.kh-box{padding:24px 20px}
.kh-tick small{font-size:12.5px}
.kh-chip{font-size:12px;padding:7px 11px}
.kh-chip--a{top:14px;inset-inline-end:14px}.kh-chip--b{bottom:14px;inset-inline-start:14px}
.kh-layer{height:54px;margin-top:-27px;font-size:14px}
.kh-scene.is-on .kh-layer{transform:translateY(calc((var(--k) - 1) * 62px))}
.kh-stage-n{display:none}
}
@media (prefers-reduced-motion:reduce){
.kh-lens{animation:none}
.kh-clean{stroke-dashoffset:0}
.kh-card{transform:none}
.ks-js .kh-hero .kh-visual{opacity:1}
}

/* ===== Who we work with ===== */
.kh-who-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.kh-who-head .kp-actions{margin-top:0!important}
.kh-aud{display:flex;gap:14px;margin-top:52px;height:400px}
.kh-aud-item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:flex-grow .8s var(--ease),background .6s,border-color .6s}
.kh-aud-item::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;border:76px solid var(--sky);opacity:0;bottom:-190px;inset-inline-end:-150px;transition:opacity .8s}
.kh-aud-item.is-on{flex-grow:2.6;background:radial-gradient(520px 320px at 0 0,rgba(61,139,255,.35),transparent 65%),linear-gradient(160deg,var(--deep),var(--navy));border-color:rgba(61,139,255,.55)}
[dir=rtl] .kh-aud-item.is-on{background:radial-gradient(520px 320px at 100% 0,rgba(61,139,255,.35),transparent 65%),linear-gradient(160deg,var(--deep),var(--navy))}
.kh-aud-item.is-on::before{opacity:.12}
.kh-aud-item:not(.is-on):hover{background:rgba(61,139,255,.08);border-color:rgba(61,139,255,.35)}
.kh-aud-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:16px;padding:26px 26px 0;color:#fff;position:relative;z-index:1}
.kh-aud-tab:focus-visible{outline:2px solid var(--sky);outline-offset:-4px;border-radius:24px}
.kh-aud-ico{width:58px;height:58px;flex:none;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(61,139,255,.3),rgba(18,181,214,.1));color:#b6d3ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .6s,color .6s,transform .6s var(--ease)}
.kh-aud-ico .ks-ico{width:28px;height:28px}
.kh-aud-item.is-on .kh-aud-ico{background:linear-gradient(145deg,var(--sky),var(--signal));color:#fff;transform:rotate(-6deg)}
.kh-aud-name{font-size:1.35rem;font-weight:800;line-height:1.25}
.kh-aud-n{margin-inline-start:auto;font:800 14px Poppins,sans-serif;color:var(--subtle);letter-spacing:.1em}
.kh-aud-body{position:relative;z-index:1;padding:20px 26px 28px;margin-top:auto;opacity:0;transform:translateY(16px);transition:opacity .4s,transform .6s var(--ease);pointer-events:none}
.kh-aud-item.is-on .kh-aud-body{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.kh-aud-text{font-size:1.15rem;line-height:1.55;color:#fff;max-width:520px}
.kh-aud-need{margin-top:18px!important;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
[dir=rtl] .kh-aud-need{letter-spacing:0;font-size:14px}
.kh-aud-svcs{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kh-aud-svcs a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff!important;font-size:14px;font-weight:600;line-height:1.3;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.kh-aud-svcs a:hover{background:rgba(61,139,255,.18);border-color:rgba(61,139,255,.5);transform:translateY(-2px)}
.kh-aud-svcs a > .ks-ico{width:16px;height:16px;margin-inline-start:auto;flex:none;color:var(--subtle)}
[dir=rtl] .kh-aud-svcs a > .ks-ico{transform:scaleX(-1)}
.kh-aud-svcs .ks-mini-ico{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(61,139,255,.25);color:#b6d3ff}
.kh-aud-svcs .ks-mini-ico .ks-ico{width:16px;height:16px}
.kh-aud-timer{position:absolute;inset-inline:26px;bottom:12px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;opacity:0}
.kh-aud-timer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--sky),var(--signal));transform:scaleX(0);transform-origin:left}
[dir=rtl] .kh-aud-timer::after{transform-origin:right}
.kh-aud.is-auto .kh-aud-item.is-on .kh-aud-timer{opacity:1}
.kh-aud.is-auto .kh-aud-item.is-on .kh-aud-timer::after{animation:kh-timer 6s linear forwards}
@keyframes kh-timer{to{transform:scaleX(1)}}
/* Collapsed panels: the name stands vertically like a book spine. */
@media (min-width:901px){
.kh-aud-item:not(.is-on) .kh-aud-tab{flex-direction:column;align-items:flex-start;height:100%;padding-bottom:26px}
.kh-aud-item:not(.is-on) .kh-aud-n{margin-inline-start:0;margin-top:auto}
.kh-aud-item:not(.is-on) .kh-aud-body{position:absolute;inset-inline:0;bottom:0;visibility:hidden}
.kh-aud-body{min-width:460px}
}
@media (max-width:900px){
.kh-aud{flex-direction:column;height:auto}
.kh-aud-item{flex:none}
.kh-aud-tab{padding:18px 18px 18px}
.kh-aud-ico{width:48px;height:48px;border-radius:15px}
.kh-aud-body{display:none;padding:0 18px 24px}
.kh-aud-item.is-on .kh-aud-body{display:block}
.kh-aud-svcs{grid-template-columns:1fr}
.kh-aud-name{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){.kh-aud.is-auto .kh-aud-item.is-on .kh-aud-timer::after{animation:none}}