/* Haklayit (I♥TRIM) project page. Green and violet come from the system itself. */
.ph-dark[data-p="haklayit"]{--hk:#4fae3f;--hv:#5b4fe0}
.hk-heart{display:inline-block;color:#8bd46a;font-size:.8em;margin:0 .04em;animation:hkBeat 1.6s ease-in-out infinite;transform-origin:50% 60%}
@keyframes hkBeat{0%,60%,100%{transform:scale(1)}20%{transform:scale(1.22)}35%{transform:scale(.96)}}

/* hero scene */
.hk-scene{position:relative;aspect-ratio:1/.8;width:100%}
.hk-glow{position:absolute;inset:6% 4% 10% 10%;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(139,212,106,.45),rgba(91,79,224,.18) 55%,transparent 72%);filter:blur(10px);animation:hkGlow 8s ease-in-out infinite alternate}
@keyframes hkGlow{to{transform:scale(1.08) translate(-3%,2%)}}
.hk-lap{position:absolute;left:4%;top:12%;width:86%;animation:hkIn 1s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes hkIn{from{opacity:0;transform:translateY(40px) rotateX(12deg)}}
.hk-lid{background:linear-gradient(135deg,rgba(255,255,255,.4),rgba(255,255,255,.12));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:16px 16px 0 0;padding:2%;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 40px 70px -30px rgba(0,0,0,.6)}
.hk-scr{position:relative;aspect-ratio:1440/960;overflow:hidden;border-radius:6px;background:#fff}
.hk-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:hkCy 12s linear infinite both}
.hk-scr img:nth-child(2){animation-delay:4s}.hk-scr img:nth-child(3){animation-delay:8s}
.hk-scr img:first-child{animation-name:hkCy1}
@keyframes hkCy{0%{opacity:0;transform:scale(1.03)}4%,33%{opacity:1;transform:none}38%,100%{opacity:0}}
@keyframes hkCy1{0%,33%{opacity:1}38%,96%{opacity:0}100%{opacity:1}}
.hk-base{height:14px;margin:0 -6%;border-radius:0 0 20px 20px;background:linear-gradient(rgba(255,255,255,.65),rgba(200,214,205,.4));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);border-top:0}
.hk-card{position:absolute;border-radius:18px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 40px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.6);color:#1f2a24;font-weight:700}
.hk-hoof{left:-2%;bottom:2%;width:30%;padding:8px 8px 10px;animation:hkPop .8s cubic-bezier(.3,1.5,.5,1) .9s both,hkFloat 6s ease-in-out 1.8s infinite}
.hk-hoof img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover;object-position:50% 60%;border-radius:12px}
.hk-hoof b{display:block;margin-top:6px;font-size:.85rem;text-align:center;color:#4fae3f}
.hk-stat{right:-2%;top:2%;padding:12px 16px;min-width:150px;animation:hkPop .8s cubic-bezier(.3,1.5,.5,1) 1.1s both,hkFloat 7s ease-in-out 2s infinite reverse}
.hk-stat small{display:block;font-size:.78rem;font-weight:600;opacity:.7}
.hk-num{display:block;font-family:'Rubik',sans-serif;font-size:2rem;line-height:1.1;color:#5b4fe0}
.hk-bar{display:block;height:6px;border-radius:6px;background:#e6efe3;margin-top:6px;overflow:hidden}
.hk-bar i{display:block;height:100%;width:76%;border-radius:6px;background:linear-gradient(90deg,#8bd46a,#4fae3f);transform-origin:100% 50%;animation:hkGrow 1.6s cubic-bezier(.2,.8,.2,1) 1.4s both}
@keyframes hkGrow{from{transform:scaleX(0)}}
.hk-tag{right:6%;bottom:10%;padding:10px 16px;font-size:.9rem;display:flex;align-items:center;gap:8px;animation:hkTag 6s ease-in-out 2.4s infinite both}
.hk-dot{width:10px;height:10px;border-radius:50%;background:#4fae3f;box-shadow:0 0 0 0 rgba(79,174,63,.6);animation:hkPing 1.6s ease-out infinite}
@keyframes hkPing{to{box-shadow:0 0 0 12px rgba(79,174,63,0)}}
@keyframes hkTag{0%{opacity:0;transform:translateY(16px)}10%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hkPop{from{opacity:0;transform:scale(.6)}}
@keyframes hkFloat{50%{transform:translateY(-10px)}}
/* tour: the system's own green and violet */
.hk.zs{--zg:#4fae3f;--zgd:#2f6e26;--zgl:#b9e3a9;--zmint:#eef7ea}
.hk-zt .zt-lap{width:100%}
.hk-zt .zt-scr{aspect-ratio:1440/960}
/* hoof map */
.hk-split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.hk-txt p{font-size:1.1rem;line-height:1.75;margin:0 0 22px}
.hk-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hk-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:12px 16px;border-radius:16px;background:#eef7ea;border:1px solid rgba(79,174,63,.18)}
.hk-list b{min-width:64px;text-align:center;font-family:'Rubik',sans-serif;color:#5b4fe0;font-size:1.15rem}
.hk-hoofbig{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 40px 70px -40px rgba(31,42,36,.5)}
.hk-hoofbig img{display:block;width:100%}
.hk-pt{position:absolute;left:var(--x);top:var(--y);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(91,79,224,.9);box-shadow:0 0 0 0 rgba(91,79,224,.55);opacity:0;animation:hkPt 3.6s ease-out var(--d) infinite}
@keyframes hkPt{0%{opacity:0;transform:scale(.3);box-shadow:0 0 0 0 rgba(91,79,224,.55)}12%{opacity:1;transform:scale(1)}45%{box-shadow:0 0 0 18px rgba(91,79,224,0)}70%{opacity:1}100%{opacity:0}}
@media(max-width:900px){.hk-split{grid-template-columns:1fr}.hk-stat{min-width:120px}.hk-hoof{width:36%}}
@media(prefers-reduced-motion:reduce){.hk-scene *,.hk-hoofbig *{animation:none!important}.hk-scr img+img{opacity:0}.hk-pt{opacity:1}}

/* live mockup on a glass tablet */
.hkl{display:grid;grid-template-columns:minmax(240px,.7fr) 1.6fr;gap:clamp(20px,3vw,50px);align-items:center}
.hkl-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hkl-steps li{position:relative;overflow:hidden;display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:16px;transition:background .35s}
.hkl-steps li b{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:'Rubik',sans-serif;font-size:.85rem;background:#eef7ea;color:#2f6e26;transition:background .35s,color .35s}
.hkl-steps strong{display:block;font-size:1.05rem;color:#2f6e26}
.hkl-steps small{display:block;font-size:.92rem;line-height:1.5;opacity:.75;max-height:0;overflow:hidden;transition:max-height .45s ease,margin .45s}
.hkl-steps li.on{background:#eef7ea}
.hkl-steps li.on b{background:linear-gradient(135deg,#4fae3f,#2f6e26);color:#fff}
.hkl-steps li.on small{max-height:70px;margin-top:3px}
.hkl-bar{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transform-origin:100% 50%;background:linear-gradient(90deg,#b9e3a9,#4fae3f)}
.hkl-steps li.on .hkl-bar{animation:hklBar var(--hkl-d,4.2s) linear forwards}
@keyframes hklBar{to{transform:scaleX(1)}}
.hkl-tab{position:relative;padding:2.2%;border-radius:clamp(22px,2.6vw,38px);background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.16));-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 50px 80px -40px rgba(31,42,36,.45);transform:perspective(1800px) rotateY(-5deg) rotateX(3deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hkl-tab:hover{transform:none}
.hkl-cam{position:absolute;left:50%;top:.9%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:rgba(31,42,36,.35)}
.hkl-scr{position:relative;aspect-ratio:1440/960;overflow:hidden;border-radius:clamp(12px,1.4vw,20px);background:#f4f4f4}
.hkl-s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.hkl-s.on{opacity:1;transform:none}
.hkl-cur{position:absolute;left:0;top:0;width:clamp(18px,2vw,26px);z-index:3;transition:left 1s cubic-bezier(.5,0,.2,1),top 1s cubic-bezier(.5,0,.2,1),transform .15s;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.hkl-cur svg{display:block;width:100%;fill:#1f2a24;stroke:#fff;stroke-width:1.4}
.hkl-cur.press{transform:scale(.82)}
.hkl-ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid #5b4fe0;opacity:0;z-index:2;pointer-events:none}
.hkl-ring.go{animation:hklRing .6s ease-out}
@keyframes hklRing{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.4)}}
.hkl-toast{position:absolute;left:50%;bottom:6%;translate:-50% 0;padding:10px 20px;border-radius:99px;background:#4fae3f;color:#fff;font-weight:700;font-size:clamp(.8rem,1.1vw,1rem);opacity:0;transform:translateY(16px);transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1);z-index:4}
.hkl-toast.on{opacity:1;transform:none}
/* hoof views with the page's own tabs */
.hk-views{border-radius:24px;padding:14px;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.25));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);box-shadow:0 40px 70px -40px rgba(31,42,36,.5)}
.hkv-tabs{display:flex;gap:6px;margin-bottom:10px}
.hkv-tabs button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:12px;font-weight:700;color:#2c2640;background:rgba(255,255,255,.6);border:1px solid rgba(31,42,36,.1);transition:background .3s,color .3s}
.hkv-tabs button i{width:12px;height:12px;border-radius:50%;border:2px solid #5b4fe0}
.hkv-tabs button.on{background:#fff;color:#5b4fe0;box-shadow:0 6px 16px -10px rgba(91,79,224,.6)}
.hkv-tabs button.on i{background:radial-gradient(circle,#5b4fe0 45%,transparent 50%)}
.hkv-tabs button:focus-visible{outline:2px solid #5b4fe0;outline-offset:2px}
.hkv-pane{position:relative;aspect-ratio:1008/700;border-radius:16px;overflow:hidden;background:#fff}
.hkv-pane img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateX(-24px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hkv-pane img.on{opacity:1;transform:none}
@media(max-width:900px){.hkl{grid-template-columns:1fr}.hkl-tab{transform:none}}
@media(prefers-reduced-motion:reduce){.hkl-cur,.hkl-ring{display:none}}

/* hero: the scene sits a little lower, and the cow from the login screen in a circle on the right */
.ph-dark[data-p="haklayit"] .hk-scene{margin-top:clamp(30px,5vh,60px)}
.hk-cow{position:absolute;right:-3%;top:30%;width:26%;aspect-ratio:1;border-radius:50%;overflow:hidden;z-index:3;border:5px solid #fff;box-shadow:0 24px 40px -16px rgba(0,0,0,.6),0 0 0 8px rgba(139,212,106,.25);animation:hkPop .9s cubic-bezier(.3,1.5,.5,1) .6s both,hkFloat 6.5s ease-in-out 1.6s infinite}
.hk-cow img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.hk-cow{right:-2%;width:30%}}