/* EXAB interactive booklet — night-blue desk, one landscape page at a time, live animated pages. */
:root{
  --k-desk:#04101D;--k-desk2:#0A2138;--k-panel:#0A1D33;--k-ink:#EEF3F8;--k-mute:#93A6BD;--k-line:rgba(238,243,248,.12);--k-chip:rgba(238,243,248,.07);
  --k-accent:#2FA6E0;--k-accent2:#03689A;--k-soft:#8FD0F2;--k-accent-ink:#03121F;--k-paper:#F3F6FA;--k-danger:#FF8A80;
  --k-chev:polygon(0 0,50% 70%,100% 0,100% 30%,50% 100%,0 30%);
  --k-font:"Thmanyah Sans","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:radial-gradient(120% 90% at 50% 0%,var(--k-desk2) 0%,var(--k-desk) 70%);color:var(--k-ink);font-family:var(--k-font);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--k-accent);outline-offset:2px;border-radius:8px}
.k-app{height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}

/* top bar */
.k-top{display:flex;align-items:center;gap:10px;padding-block:12px;flex:none}
.k-logo{height:28px;width:auto;display:block}
.k-brand{display:flex;flex-direction:column;line-height:1.3;min-width:0;padding-inline-start:10px;border-inline-start:1px solid var(--k-line)}
.k-brand b{font-size:15px;font-weight:700}
.k-brand span{font-size:12px;color:var(--k-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-sp{flex:1}
.k-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:10px;background:var(--k-chip);border:1px solid var(--k-line);font-size:13px;font-weight:500;white-space:nowrap}
.k-btn:hover{background:rgba(238,243,248,.13)}
.k-btn.on{background:var(--k-accent);color:var(--k-accent-ink);border-color:var(--k-accent);font-weight:700}
.k-btn svg{width:16px;height:16px;flex:none}
.k-cta{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;background:var(--k-accent);color:var(--k-accent-ink);font-weight:700;font-size:13.5px;white-space:nowrap;box-shadow:0 8px 22px rgba(47,166,224,.28)}
.k-cta:hover{filter:brightness(1.07)}
.k-cta svg{width:17px;height:17px}
.k-share{position:relative}
.k-pop{position:absolute;top:44px;inset-inline-end:0;z-index:15;background:var(--k-panel);border:1px solid var(--k-line);border-radius:12px;padding:6px;min-width:214px;box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column}
.k-pop a,.k-pop button{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;text-decoration:none;text-align:start}
.k-pop a:hover,.k-pop button:hover{background:var(--k-chip)}
.k-pop svg{width:17px;height:17px;flex:none}
.k-pop a svg{color:#25D366}

/* stage + leaves */
.k-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;perspective:2600px}
.k-book{position:relative;aspect-ratio:1122.52/793.7;max-width:100%;max-height:100%;container-type:inline-size;--k:1}
.k-leaf{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:#061423;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);transform-origin:right center;backface-visibility:hidden}
.k-pgw{position:absolute;left:0;top:0;width:1122.52px;height:793.7px;transform:scale(var(--k));transform-origin:0 0}
.k-pgw>.page{margin:0;box-shadow:none}
.k-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.38) 100%);z-index:5}
.k-leaf.k-next{animation:kTurnNext .78s cubic-bezier(.45,.05,.3,1) forwards;z-index:3}
.k-leaf.k-next .k-shade{animation:kShade .78s forwards}
.k-leaf.k-prev{animation:kTurnPrev .78s cubic-bezier(.45,.05,.3,1) forwards;z-index:3}
@keyframes kTurnNext{0%{transform:rotateY(0)}100%{transform:rotateY(-105deg)}}
@keyframes kTurnPrev{0%{transform:rotateY(-105deg)}100%{transform:rotateY(0)}}
@keyframes kShade{to{opacity:1}}
.k-leaf.k-enter .k-pgw{animation:kSettle .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes kSettle{from{transform:scale(calc(var(--k) * 1.025));filter:brightness(.9)}to{transform:scale(var(--k));filter:none}}
.k-leaf::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);transform:translateX(120%)}
.k-leaf.k-enter::after{animation:kSheen 1.6s .2s ease-out forwards}
@keyframes kSheen{to{transform:translateX(-120%)}}
.k-leaf .page a,.k-leaf .k-go{cursor:pointer}
.k-go{transition:filter .2s,transform .2s}
.k-go:hover{filter:brightness(1.12)}
.k-glow{position:relative}
.k-glow::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid var(--k-accent);opacity:0;animation:kRing 2.6s ease-out 1.8s infinite;pointer-events:none}
@keyframes kRing{0%{opacity:.85;transform:scale(.96)}80%,100%{opacity:0;transform:scale(1.12)}}
.uis{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden;background:#EEF2F6}
.uis.dk{background:#0B1220}

/* nav arrows */
.k-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(6,20,35,.72);border:1px solid var(--k-line);display:flex;align-items:center;justify-content:center;z-index:6;backdrop-filter:blur(6px)}
.k-nav:hover{background:var(--k-accent);color:var(--k-accent-ink)}
.k-nav svg{width:20px;height:20px}
.k-nav.prev{right:-8px}.k-nav.next{left:-8px}
.k-nav[disabled]{opacity:.25;pointer-events:none}
.k-rot{display:none;position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--k-mute);background:var(--k-chip);border:1px solid var(--k-line);border-radius:14px;padding:5px 12px;align-items:center;gap:6px;white-space:nowrap}
.k-rot svg{width:15px;height:15px}

/* bottom bar */
.k-bar{flex:none;display:flex;align-items:center;gap:14px;padding-block:12px calc(12px + env(safe-area-inset-bottom,0px))}
.k-count{font-size:13px;color:var(--k-mute);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:62px;text-align:center}
.k-count b{color:var(--k-ink);font-weight:700}
.k-title{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;max-width:30%}
.k-scrub{flex:1;min-width:80px;position:relative;height:40px;display:flex;align-items:center}
.k-scrub input{position:relative;z-index:1;width:100%;appearance:none;-webkit-appearance:none;background:transparent;height:40px;margin:0;direction:rtl;cursor:pointer;touch-action:pan-y}
.k-scrub input:focus{outline:none}
.k-scrub input::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(to left,var(--k-accent) var(--p,0%),rgba(238,243,248,.18) var(--p,0%))}
.k-scrub input::-moz-range-track{height:5px;border-radius:5px;background:rgba(238,243,248,.18)}
.k-scrub input::-moz-range-progress{height:5px;border-radius:5px;background:var(--k-accent)}
.k-scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:-8.5px;border:0;box-shadow:0 0 0 5px rgba(47,166,224,.32),0 3px 10px rgba(0,0,0,.35);transition:transform .15s}
.k-scrub input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(47,166,224,.32),0 3px 10px rgba(0,0,0,.35)}
.k-scrub input:active::-webkit-slider-thumb{transform:scale(1.18)}
.k-ticks{position:absolute;inset:0;pointer-events:none;z-index:0}
.k-ticks i{position:absolute;top:50%;width:2px;height:11px;margin:-5.5px -1px 0;background:rgba(238,243,248,.32);border-radius:1px}
.k-bub{position:absolute;bottom:calc(100% + 10px);z-index:20;transform:translateX(-50%) translateY(6px) scale(.96);opacity:0;pointer-events:none;background:#0B1E35;border:1px solid rgba(47,166,224,.4);border-radius:14px;padding:7px;width:176px;box-shadow:0 18px 40px rgba(0,0,0,.5);transition:opacity .16s,transform .16s}
.k-bub.on{opacity:1;transform:translateX(-50%) scale(1)}
.k-bub .k-th{display:block;width:100%;aspect-ratio:1122.52/793.7;border-radius:8px;overflow:hidden;background:#0F2A47;position:relative}
.k-bub .k-th img{width:100%;height:100%;object-fit:cover;display:block}
.k-bub div{display:flex;flex-direction:column;gap:2px;padding:6px 3px 2px}
.k-bub b{font-size:13px;color:var(--k-accent);font-variant-numeric:tabular-nums}
.k-bub span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-bub::after{content:"";position:absolute;top:100%;left:calc(50% + var(--ax,0px));margin-left:-7px;border:7px solid transparent;border-top-color:#0B1E35}
.k-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:linear-gradient(150deg,#0F2A47,#061423);color:var(--k-mute);font-size:11px;text-align:center;padding:8px}
.k-ph b{font-size:22px;color:var(--k-soft);font-weight:700}
.k-ph.lt{background:linear-gradient(150deg,#FFFFFF,#E3EAF2);color:#4F6279}.k-ph.lt b{color:#03689A}

/* floating consultation button */
.k-fab{position:fixed;left:max(18px,env(safe-area-inset-left,0px));bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:12;display:flex;align-items:center;gap:10px;background:#fff;color:#061423;border-radius:40px;padding:7px 7px 7px 18px;box-shadow:0 14px 34px rgba(0,0,0,.45);animation:kFab .6s 1.2s both cubic-bezier(.3,1.4,.5,1)}
.k-fab-ic{width:42px;height:42px;border-radius:50%;background:var(--k-accent2);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.k-fab-ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--k-accent);animation:kPulse 2.4s ease-out infinite}
.k-fab-ic svg{width:21px;height:21px}
.k-fab-t{display:flex;flex-direction:column;text-align:right;line-height:1.35}
.k-fab-t b{font-size:13.5px}.k-fab-t small{font-size:11px;color:#4F6279}
.k-fab-s{display:none}
.k-fab:hover{transform:translateY(-2px)}
@keyframes kFab{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
@keyframes kPulse{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(1.9);opacity:0}}

/* drawer */
.k-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20;opacity:0;pointer-events:none;transition:opacity .25s}
.k-scrim.open{opacity:1;pointer-events:auto}
.k-drawer{position:fixed;top:0;bottom:0;right:0;width:min(370px,88vw);background:var(--k-panel);border-left:1px solid var(--k-line);z-index:21;transform:translateX(105%);transition:transform .3s cubic-bezier(.3,.7,.2,1);display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) 18px}
.k-drawer.open{transform:none}
.k-drawer h2{margin:0 0 4px;font-size:17px}
.k-drawer p{margin:0 0 14px;font-size:12.5px;color:var(--k-mute);line-height:1.7}
.k-sec{display:flex;flex-direction:column;gap:2px;overflow:auto;padding-inline-end:4px}
.k-grp{font-size:11.5px;color:var(--k-mute);margin:12px 4px 4px;font-weight:500;display:flex;align-items:center;gap:7px}
.k-grp::before{content:"";width:11px;height:6px;background:var(--gc,var(--k-accent));clip-path:var(--k-chev)}
.k-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13.5px;text-align:start;width:100%}
.k-item:hover{background:var(--k-chip)}
.k-item.cur{background:rgba(47,166,224,.16);color:#fff}
.k-item .n{margin-inline-start:auto;font-size:11.5px;color:var(--k-mute);font-variant-numeric:tabular-nums}
.k-item .dot{width:8px;height:8px;border-radius:50%;background:var(--gc,var(--k-accent));flex:none;opacity:.55}
.k-item .tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 7px;flex:none;background:var(--gc,var(--k-accent));color:#03121F}
.k-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:14px;width:34px;height:34px;border-radius:10px;background:var(--k-chip);display:flex;align-items:center;justify-content:center}
.k-x svg{width:16px;height:16px}

/* grid */
.k-ov{position:fixed;inset:0;z-index:30;background:rgba(3,10,18,.97);display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.k-ohead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.k-ohead b{font-size:16px}
.k-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;align-content:start;padding:2px}
.k-tile{display:flex;flex-direction:column;gap:6px;text-align:start}
.k-tile .k-th{display:block;width:100%;aspect-ratio:1122.52/793.7;border-radius:5px;overflow:hidden;position:relative;box-shadow:0 8px 18px rgba(0,0,0,.4);outline:2px solid transparent;outline-offset:2px;background:#0F2A47}
.k-tile .k-th img{width:100%;height:100%;object-fit:cover;display:block}
.k-tile.cur .k-th{outline-color:var(--k-accent)}
.k-tile>span{font-size:11.5px;color:var(--k-mute);display:flex;gap:6px}
.k-tile>span b{color:var(--k-ink);font-weight:700;font-variant-numeric:tabular-nums}

/* zoom */
.k-zoom{position:fixed;inset:0;z-index:40;background:#02080F;overflow:auto;cursor:zoom-out}
.k-zoom .k-zin{width:max(100vw,1600px);aspect-ratio:1122.52/793.7;position:relative;overflow:hidden}
.k-zoom .k-pgw{transform-origin:0 0}
.k-zoom .zx{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));z-index:41;width:42px;height:42px;border-radius:50%;background:rgba(6,20,35,.88);border:1px solid var(--k-line);display:flex;align-items:center;justify-content:center}
.k-zoom .zx svg{width:18px;height:18px}
.k-zoom .zt{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:50%;transform:translateX(50%);background:rgba(6,20,35,.88);border:1px solid var(--k-line);font-size:12px;padding:6px 12px;border-radius:14px;color:var(--k-mute);white-space:nowrap}

/* modal + form */
.k-modal{position:fixed;inset:0;z-index:50;background:rgba(2,8,15,.74);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:kFade .2s ease}
@keyframes kFade{from{opacity:0}to{opacity:1}}
.k-card{position:relative;width:min(540px,100%);max-height:calc(100% - 8px);overflow:auto;background:#fff;color:#071A2E;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.55);animation:kRise .3s cubic-bezier(.2,.8,.2,1)}
@keyframes kRise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.k-card .k-x{position:sticky;top:12px;z-index:3;margin:12px 0 -46px;margin-inline-start:auto;margin-inline-end:12px;background:#0C2A44;color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.k-card .k-x:hover{background:#2FA6E0;color:#03121F}
.k-mhead{background:radial-gradient(120% 160% at 100% 0%,#0C3352,#061423 70%);color:#fff;padding:22px 22px 20px;display:flex;gap:14px;align-items:center;position:relative;overflow:hidden}
.k-mhead::after{content:"";position:absolute;width:120px;height:66px;left:-20px;bottom:-26px;background:var(--k-accent);opacity:.12;clip-path:var(--k-chev)}
.k-mhead img{height:30px}
.k-mhead h3{margin:0 0 4px;font-size:17px}
.k-mhead p{margin:0;font-size:12.5px;color:#B8CBDD;line-height:1.7}
.k-mbody{padding:18px 22px 22px}
.lf{display:flex;flex-direction:column;gap:.85em;font-size:14px}
.lf-seg{display:grid;grid-template-columns:repeat(3,1fr);background:#EDF2F7;border-radius:10px;padding:3px;gap:3px}
.lf-seg label{position:relative}
.lf-seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.lf-seg span{display:block;text-align:center;padding:.5em .3em;border-radius:8px;font-size:.9em;font-weight:500;color:#4F6279;white-space:nowrap}
.lf-seg input:checked+span{background:#fff;color:#03689A;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.lf-seg input:focus-visible+span{outline:2px solid var(--k-accent2)}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.lf-f{display:flex;flex-direction:column;gap:.3em;min-width:0}
.lf-f label{font-size:.86em;font-weight:500;color:#2A3D52}
.lf-f label em{font-style:normal;color:#C0392B}
.lf-f label small{font-weight:300;color:#7D8DA0}
.lf-f input,.lf-f select,.lf-f textarea{font:inherit;font-size:.95em;color:#071A2E;background:#fff;border:1px solid #D5DFEA;border-radius:9px;padding:.6em .75em;width:100%;min-width:0}
.lf-f textarea{resize:vertical;min-height:4.2em}
.lf-f input:focus,.lf-f select:focus,.lf-f textarea:focus{outline:none;border-color:var(--k-accent2);box-shadow:0 0 0 3px rgba(47,166,224,.2)}
.lf-phone{display:flex;gap:.5em;direction:ltr}
.lf-phone select{width:auto;flex:none}
.lf-phone input{flex:1;text-align:left}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-err{color:#B3261E;font-size:.86em;background:#FDECEA;border-radius:8px;padding:.5em .7em}
.lf-go{background:#03689A;color:#fff;font-weight:700;border-radius:10px;padding:.8em;font-size:1em;display:flex;align-items:center;justify-content:center;gap:.5em}
.lf-go:hover{background:#025680}
.lf-go[disabled]{opacity:.6;cursor:default}
.lf-go svg{width:1.15em;height:1.15em}
.lf-note{font-size:.78em;color:#7D8DA0;text-align:center;margin:0}
.lf-done{text-align:center;padding:1.2em .4em;display:flex;flex-direction:column;align-items:center;gap:.6em}
.lf-done .ok{width:3.6em;height:3.6em;border-radius:50%;background:#E1F2FB;color:#03689A;display:flex;align-items:center;justify-content:center;animation:kPop .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes kPop{from{transform:scale(0)}to{transform:scale(1)}}
.lf-done .ok svg{width:1.8em;height:1.8em}
.lf-done h4{margin:0;font-size:1.15em}
.lf-done p{margin:0;color:#4F6279;font-size:.92em;line-height:1.8}
.lf-done button{margin-top:.4em;border:1px solid #D5DFEA;border-radius:9px;padding:.55em 1.2em;font-weight:500;font-size:.92em}
.ms{position:relative}
.ms-btn{width:100%;display:flex;align-items:center;gap:.5em;border:1px solid #D5DFEA;border-radius:9px;padding:.6em .75em;background:#fff;color:#071A2E;font-size:.95em;text-align:start;min-height:2.6em}
.ms.open .ms-btn,.ms-btn:focus-visible{border-color:var(--k-accent2);box-shadow:0 0 0 3px rgba(47,166,224,.2);outline:none}
.ms-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-val.ph{color:#7D8DA0}
.ms-chev{flex:none;color:#03689A;transition:transform .2s}
.ms.open .ms-chev{transform:rotate(180deg)}
.ms-pop{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:20;background:#fff;border:1px solid #D5DFEA;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:.4em;display:flex;flex-direction:column;animation:kFade .18s ease-out}
.ms-opt{display:flex;align-items:center;gap:.6em;padding:.5em .6em;border-radius:8px;cursor:pointer;font-size:.92em}
.ms-opt:hover{background:#F2F6FA}
.ms-opt input{position:absolute;opacity:0;pointer-events:none}
.ms-opt small{color:#7D8DA0;font-weight:300;margin-inline-start:auto;font-size:.85em}
.ms-box{width:1.25em;height:1.25em;border-radius:.35em;border:1.5px solid #B4C2D1;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;background:#fff}
.ms-box svg{width:.85em;height:.85em;opacity:0}
.ms-opt input:checked+.ms-box{background:#03689A;border-color:#03689A}
.ms-opt input:checked+.ms-box svg{opacity:1}
.ms-all{font-weight:700;border-bottom:1px solid #EDF2F7;border-radius:8px 8px 0 0;margin-bottom:.2em}
.ms-done{margin-top:.3em;align-self:flex-start;background:#061423;color:#fff;font-weight:500;font-size:.85em;padding:.4em 1.2em;border-radius:8px}

.k-toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:60;background:#fff;color:#061423;font-weight:500;font-size:13px;padding:9px 16px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.4);animation:kRise .25s ease}

/* final page (consultation) */
.k-final{position:absolute;inset:0;background:radial-gradient(110% 120% at 100% 0%,#0C3352 0%,#061423 58%,#030B14 100%);color:#fff;display:flex;font-size:calc(var(--k) * 13.5px)}
.k-final .ghost{position:absolute;width:62cqw;height:62cqw;left:-14cqw;bottom:-30cqw;opacity:.05;background:#8FD0F2;clip-path:polygon(50% 36.4%,84.2% 2.2%,97.8% 15.8%,63.6% 50%,97.8% 84.2%,84.2% 97.8%,50% 63.6%,15.8% 97.8%,2.2% 84.2%,36.4% 50%,2.2% 15.8%,15.8% 2.2%)}
.k-final .fin{position:relative;flex:1;display:grid;grid-template-columns:1fr 1.12fr;gap:4cqw;padding:4.6cqw 5cqw}
.k-final .copy{display:flex;flex-direction:column;justify-content:center;gap:1.5cqw}
.k-final .copy img{width:12cqw;height:auto}
.k-final .kick{display:inline-flex;align-items:center;gap:.8cqw;color:var(--k-soft);font-size:1.35cqw}
.k-final .kick::before{content:"";width:1.2cqw;height:.65cqw;background:currentColor;clip-path:var(--k-chev)}
.k-final h2{margin:0;font-size:3.5cqw;line-height:1.35;font-weight:700}
.k-final h2 em{font-style:normal;color:var(--k-accent)}
.k-final p{margin:0;font-size:1.5cqw;color:#B8CBDD;line-height:1.85}
.k-final .list{display:flex;flex-direction:column;gap:.85cqw;font-size:1.4cqw;color:#DCE7F2}
.k-final .list div{display:flex;align-items:center;gap:.9cqw}
.k-final .list i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:rgba(47,166,224,.2);display:flex;align-items:center;justify-content:center;flex:none}
.k-final .list svg{width:1.15cqw;height:1.15cqw;color:var(--k-accent)}
.k-final .fcard{background:#fff;color:#071A2E;border-radius:1.6cqw;padding:2.2cqw 2.5cqw;align-self:center;box-shadow:0 20px 50px rgba(0,0,0,.4);max-height:100%;overflow:auto}
.k-final .fcard .lf{font-size:1.32cqw}
.k-final .fcta{display:none;align-self:center;justify-self:center;flex-direction:column;align-items:center;gap:2cqw}
.k-final .fcta button{background:var(--k-accent);color:var(--k-accent-ink);font-weight:700;font-size:3.4cqw;padding:2.4cqw 5cqw;border-radius:3cqw;box-shadow:0 10px 30px rgba(47,166,224,.35)}
.k-final .fcta small{font-size:2.5cqw;color:#B8CBDD}
@container (max-width: 760px){
  .k-final .fin{grid-template-columns:1fr;gap:3cqw;padding:5cqw 6cqw;align-content:center}
  .k-final .fcard,.k-final .list{display:none}
  .k-final .fcta{display:flex}
  .k-final .copy{align-items:center;text-align:center}
  .k-final .copy img{width:17cqw}
  .k-final h2{font-size:5.4cqw}
  .k-final p{font-size:2.9cqw}
  .k-final .kick{font-size:2.6cqw}
}

/* intro */
.k-intro{position:fixed;inset:0;z-index:70;background:radial-gradient(110% 90% at 70% 10%,#0C3352 0%,#061423 48%,#030B14 100%);display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .6s ease,visibility .6s;overflow:hidden}
.k-intro.gone{opacity:0;visibility:hidden}
.k-ibg{position:absolute;inset:0;pointer-events:none}
.k-ibg i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.k-ibg .b1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,#03597B 0%,transparent 65%);opacity:.55;animation:kB1 22s ease-in-out infinite alternate}
.k-ibg .b2{width:40vmax;height:40vmax;right:-14vmax;bottom:-12vmax;background:radial-gradient(circle,#2FA6E0 0%,transparent 62%);opacity:.22;animation:kB2 26s ease-in-out infinite alternate}
.k-ibg .gx{position:absolute;width:70vmin;height:70vmin;right:-12vmin;top:-14vmin;background:#8FD0F2;opacity:.035;clip-path:polygon(50% 36.4%,84.2% 2.2%,97.8% 15.8%,63.6% 50%,97.8% 84.2%,84.2% 97.8%,50% 63.6%,15.8% 97.8%,2.2% 84.2%,36.4% 50%,2.2% 15.8%,15.8% 2.2%);animation:kSpin 60s linear infinite}
@keyframes kB1{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes kB2{to{transform:translate(-16vw,-18vh) scale(1.2)}}
@keyframes kSpin{to{transform:rotate(360deg)}}
#kFx{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.k-iin{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:640px}
.k-ilogo{width:170px;height:auto;animation:kLogo 1.1s cubic-bezier(.2,.8,.2,1) both}
.k-iin .kick{display:inline-flex;align-items:center;gap:8px;color:var(--k-soft);font-size:13px;animation:kUp .8s .25s both}
.k-iin .kick::before{content:"";width:13px;height:7px;background:currentColor;clip-path:var(--k-chev)}
.k-iin h1{margin:0;font-size:clamp(28px,5.4vw,48px);line-height:1.3;font-weight:700;animation:kUp .8s .35s both}
.k-iin h1 em{font-style:normal;color:var(--k-accent)}
.k-iin p{margin:0;color:#B8CBDD;font-size:clamp(13px,2.3vw,16px);line-height:1.8;animation:kUp .8s .5s both}
.k-isys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.k-isys span{border:1px solid rgba(47,166,224,.38);color:#DCE7F2;border-radius:20px;padding:4px 13px;font-size:12.5px;animation:kUp .6s both}
.k-isys span:nth-child(1){animation-delay:.65s}.k-isys span:nth-child(2){animation-delay:.75s}.k-isys span:nth-child(3){animation-delay:.85s}.k-isys span:nth-child(4){animation-delay:.95s}
.k-igo{margin-top:14px;display:inline-flex;align-items:center;gap:10px;background:var(--k-accent);color:var(--k-accent-ink);font-weight:700;font-size:15px;padding:13px 26px;border-radius:14px;box-shadow:0 12px 30px rgba(47,166,224,.32);animation:kUp .8s 1.1s both}
.k-igo svg{width:18px;height:18px}
.k-igo[disabled]{background:rgba(238,243,248,.12);color:var(--k-mute);box-shadow:none}
.k-ilang{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));z-index:2;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;background:rgba(238,243,248,.08);border:1px solid rgba(238,243,248,.18);font-size:13px;font-weight:500;animation:kUp .8s .2s both}
.k-ilang svg{width:16px;height:16px}
@keyframes kLogo{from{opacity:0;transform:scale(.75);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes kUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* rotate prompt */
.k-rotate{position:fixed;inset:0;z-index:80;background:rgba(2,8,15,.86);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;animation:kFade .25s ease}
.k-rcard{position:relative;background:var(--k-panel);border:1px solid var(--k-line);border-radius:20px;padding:26px 22px;text-align:center;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:10px}
.k-rph{width:74px;height:74px;border-radius:50%;background:rgba(47,166,224,.14);display:flex;align-items:center;justify-content:center;color:var(--k-accent)}
.k-rph svg{width:40px;height:40px;animation:kTurnPhone 2.2s ease-in-out infinite}
@keyframes kTurnPhone{0%,20%{transform:rotate(0)}45%,75%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.k-rcard h3{margin:0;font-size:17px}
.k-rcard p{margin:0;font-size:13px;color:var(--k-mute);line-height:1.7}
.k-rx{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--k-mute);background:rgba(255,255,255,.06)}
.k-rx svg{width:15px;height:15px}
.k-rbar{display:block;width:120px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:6px}
.k-rbar i{display:block;height:100%;width:100%;background:var(--k-accent);transform-origin:right}
.k-rotate.run .k-rbar i{animation:kRbar 4s linear forwards}
@keyframes kRbar{to{transform:scaleX(0)}}

@media (max-width:900px){.k-btn .lbl{display:none}.k-btn{padding:0 10px}.k-cta{display:none}.k-title{display:none}.k-brand span{display:none}}
@media (max-width:720px){
  .k-brand{display:none}
  .k-nav{width:38px;height:38px}.k-nav.prev{right:-4px}.k-nav.next{left:-4px}
  .k-fab{padding:6px;bottom:calc(60px + env(safe-area-inset-bottom,0px))}.k-fab-t{display:none}
  .lf-row{grid-template-columns:1fr}
}
@media (max-width:720px) and (orientation:portrait){.k-rot{display:inline-flex}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* phone held sideways: page fills the screen, compact controls */
.k-mctl{display:none}
@media (orientation:landscape) and (max-height:560px){
  .k-top,.k-bar,.k-rot{display:none!important}
  .k-app{padding:0}
  .k-leaf{border-radius:0}
  .k-mctl{display:block}
  .k-mc{position:fixed;z-index:12;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;min-width:40px;padding:0 11px;border-radius:12px;background:rgba(6,20,35,.84);border:1px solid var(--k-line);font-size:13px;font-weight:500;backdrop-filter:blur(6px)}
  .k-mc svg{width:18px;height:18px}
  .k-mc.toc{top:calc(10px + env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px))}
  .k-mtl{position:fixed;z-index:12;top:calc(10px + env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:8px}
  .k-mtl .k-mc{position:static}
  .k-mcount{position:fixed;z-index:12;bottom:calc(12px + env(safe-area-inset-bottom,0px));right:max(12px,env(safe-area-inset-right,0px));font-size:12.5px;color:var(--k-mute);background:rgba(6,20,35,.84);border:1px solid var(--k-line);border-radius:10px;padding:5px 10px;font-variant-numeric:tabular-nums}
  .k-mcount b{color:var(--k-ink)}
  .k-nav{width:40px;height:40px;position:fixed}
  .k-nav.prev{right:max(10px,env(safe-area-inset-right,0px))}.k-nav.next{left:max(10px,env(safe-area-inset-left,0px))}
  .k-fab{left:max(10px,env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:5px 5px 5px 12px;gap:8px}
  .k-fab-t{display:none!important}.k-fab-s{display:block;font-size:12px;font-weight:700;white-space:nowrap}
  .k-fab-ic{width:36px;height:36px}.k-fab-ic svg{width:18px;height:18px}
}

/* ---------- English (left-to-right) ---------- */
[dir=ltr] .k-leaf{transform-origin:left center}
[dir=ltr] .k-leaf.k-next{animation-name:kTurnNextL}
[dir=ltr] .k-leaf.k-prev{animation-name:kTurnPrevL}
@keyframes kTurnNextL{0%{transform:rotateY(0)}100%{transform:rotateY(105deg)}}
@keyframes kTurnPrevL{0%{transform:rotateY(105deg)}100%{transform:rotateY(0)}}
[dir=ltr] .k-shade{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.38) 100%)}
[dir=ltr] .k-nav.prev{right:auto;left:-8px}
[dir=ltr] .k-nav.next{left:auto;right:-8px}
[dir=ltr] .k-nav svg,[dir=ltr] .k-igo svg{transform:scaleX(-1)}
[dir=ltr] .k-scrub input{direction:ltr}
[dir=ltr] .k-scrub input::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--k-accent) var(--p,0%),rgba(238,243,248,.18) var(--p,0%))}
[dir=ltr] .k-fab{left:auto;right:max(18px,env(safe-area-inset-right,0px));padding:7px 18px 7px 7px}
[dir=ltr] .k-fab-t{text-align:left}
[dir=ltr] .k-drawer{right:auto;left:0;border-left:0;border-right:1px solid var(--k-line);transform:translateX(-105%)}
[dir=ltr] .k-drawer.open{transform:none}
[dir=ltr] .k-x{left:auto;right:14px}
[dir=ltr] .k-ilang{left:auto;right:max(16px,env(safe-area-inset-right,0px))}
[dir=ltr] .k-zoom .zx{left:auto;right:max(12px,env(safe-area-inset-right,0px))}
[dir=ltr] .k-rx{left:auto;right:10px}
[dir=ltr] .k-rbar i{transform-origin:left}
[dir=ltr] .lf-f input,[dir=ltr] .lf-f textarea{text-align:left}
[dir=ltr] .ms-done{align-self:flex-end}
@media (max-width:720px){[dir=ltr] .k-nav.prev{right:auto;left:-4px}[dir=ltr] .k-nav.next{left:auto;right:-4px}}
@media (orientation:landscape) and (max-height:560px){
  [dir=ltr] .k-nav.prev{right:auto;left:max(10px,env(safe-area-inset-left,0px))}
  [dir=ltr] .k-nav.next{left:auto;right:max(10px,env(safe-area-inset-right,0px))}
  [dir=ltr] .k-mc.toc{right:auto;left:max(10px,env(safe-area-inset-left,0px))}
  [dir=ltr] .k-mtl{left:auto;right:max(10px,env(safe-area-inset-right,0px))}
  [dir=ltr] .k-mcount{right:auto;left:max(12px,env(safe-area-inset-left,0px))}
  [dir=ltr] .k-fab{left:auto;right:max(10px,env(safe-area-inset-right,0px));padding:5px 12px 5px 5px}
}
.k-final .fcard p.lf-note{color:#7D8DA0;font-size:.78em;line-height:1.6}
.k-final .fcard .lf-done p{color:#4F6279;font-size:.92em}
.k-top{min-width:0}
@media (max-width:560px){#btnPlay,#btnFs,#btnGrid{display:none}.k-top{gap:6px}.k-logo{height:24px}}