/* Cinematic home. Everything is scoped under .kc (and body.kasra-cinematic). */
body.kasra-cinematic{position:fixed;inset:0;width:100%;overflow:hidden;background:var(--night);overscroll-behavior:none;touch-action:none}
.admin-bar.kasra-cinematic .kc{top:32px}
@media (max-width:782px){.admin-bar.kasra-cinematic .kc{top:46px}}

.kc{position:fixed;inset:0;overflow:hidden;font-family:"Vazirmatn",Tahoma,sans-serif;color:var(--ink);line-height:1.8;background:var(--night)}
.kc *,.kc *::before,.kc *::after{box-sizing:border-box;margin:0;padding:0}
.kc a{color:inherit;text-decoration:none}
.kc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.kc :focus-visible{outline:2px solid var(--up);outline-offset:4px}

.kc #warp{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.kc .flash{
  position:absolute;inset:0;z-index:40;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(var(--up-rgb),.24) 50%,transparent 62%);
  transform:translateY(-130%);
}
.kc .brand{
  position:absolute;top:1.4rem;inset-inline-start:max(1.5rem,calc((100% - 1200px)/2));
  z-index:30;font-weight:600;font-size:1rem;
}
.kc .dots{
  position:absolute;z-index:30;inset-inline-end:1.3rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.9rem;
}
.kc .dots button{
  width:10px;height:10px;border-radius:99px;border:1.5px solid var(--up);opacity:.55;
  transition:height .35s,background .35s,opacity .35s;position:relative;
}
.kc .dots button.on{height:30px;background:var(--up);opacity:1}
.kc .dots button::after{
  content:attr(data-label);position:absolute;inset-inline-end:22px;top:50%;
  transform:translateY(-50%);white-space:nowrap;font-size:.8rem;color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.kc .dots button:hover::after,.kc .dots button:focus-visible::after{opacity:1}

.kc #stage{position:absolute;inset:0;z-index:2}
.kc .scene{
  position:absolute;inset:0;visibility:hidden;overflow:hidden;
  display:flex;align-items:center;will-change:transform,opacity;
}
.kc .wrap{position:relative;z-index:3;width:min(1200px,100% - 3rem);margin-inline:auto;display:flex;align-items:center;gap:3rem}
.kc canvas.chart{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.kc .veil{position:absolute;inset:0;z-index:2;pointer-events:none}

.kc h2.title{font-size:clamp(2.2rem,5.4vw,4.6rem);font-weight:900;line-height:1.25}
.kc .rule{display:block;width:72px;height:3px;background:var(--up);margin-block:1.2rem;transform-origin:right}
.kc .lead{font-size:clamp(1rem,1.7vw,1.3rem);font-weight:300;max-width:30em}
.kc .lead + .lead{margin-top:.8rem;color:var(--muted)}
.kc .sub{margin-top:1.6rem;padding-inline-start:1rem;border-inline-start:2px solid var(--up);max-width:32em}
.kc .sub h3{font-size:clamp(1.1rem,2vw,1.45rem);font-weight:900;color:var(--up);line-height:1.5}
.kc .sub p{font-weight:300;font-size:clamp(.92rem,1.5vw,1.1rem)}
.kc .copy{flex:1 1 46%;min-width:0}

/* 0: hero */
.kc #s0 .veil{background:linear-gradient(270deg,rgba(4,6,5,.94) 5%,rgba(4,6,5,.6) 50%,rgba(4,6,5,.05) 100%)}
.kc #s0 canvas.chart{opacity:.5}
.kc .name{font-weight:900;line-height:1.1;font-size:clamp(2.6rem,9.5vw,8rem)}
.kc .name .row{display:block;overflow:hidden;padding-block:.06em .12em}
.kc .name .row span{display:block}
.kc .roles{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.4rem 0;font-size:clamp(.95rem,1.9vw,1.3rem);font-weight:600;color:var(--up)}
.kc .roles span{padding-inline:1rem}
.kc .roles span:first-child{padding-inline-start:0}
.kc .roles span + span{border-inline-start:1px solid var(--line)}
.kc .tagline{margin-top:1.3rem;font-size:clamp(1.05rem,2.2vw,1.6rem);font-weight:600}
.kc .intro{margin-top:1rem;max-width:34em;display:flex;flex-direction:column;gap:.5rem;color:var(--muted);font-weight:300;font-size:clamp(.85rem,1.3vw,1rem);line-height:1.8}
.kc .hint{position:absolute;z-index:3;bottom:1.4rem;inset-inline:0;display:flex;justify-content:center;align-items:center;gap:1rem;color:var(--muted);font-size:.9rem}
.kc .hint i{display:block;width:1px;height:2.2rem;background:var(--muted);transform-origin:top;animation:kc-drip 2s ease-in-out infinite}
@keyframes kc-drip{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* 1: web */
.kc .mock-wrap{flex:1 1 48%;perspective:1300px;display:flex;justify-content:center}
.kc .stack{position:relative;width:min(540px,100%);aspect-ratio:1.2;transform-style:preserve-3d}
.kc .win{
  position:absolute;width:78%;height:68%;border:1px solid rgba(var(--up-rgb),.28);border-radius:14px;
  background:rgba(6,14,10,.9);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(var(--up-rgb),.08);overflow:hidden;
}
.kc .win:nth-child(1){top:0;inset-inline-start:0}
.kc .win:nth-child(2){top:14%;inset-inline-start:11%}
.kc .win:nth-child(3){top:28%;inset-inline-start:22%}
.kc .bar{height:28px;display:flex;align-items:center;gap:6px;padding-inline:12px;border-bottom:1px solid var(--line)}
.kc .bar b{width:8px;height:8px;border-radius:50%}
.kc .bar b:nth-child(1){background:rgba(var(--up-rgb),.45)}.kc .bar b:nth-child(2){background:var(--up)}.kc .bar b:nth-child(3){background:var(--lime)}
.kc .body{padding:14px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 28px)}
.kc .blk{border-radius:8px;background:linear-gradient(120deg,rgba(var(--up-rgb),.8),rgba(8,60,34,.9));flex:1.4}
.kc .ln{height:8px;border-radius:99px;background:var(--line)}
.kc .ln.s{width:60%}.kc .ln.m{width:80%}
.kc .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1}
.kc .tiles i{border-radius:8px;background:rgba(233,245,236,.1)}
.kc .tiles i:nth-child(2){background:rgba(var(--up-rgb),.6)}
.kc .tiles i:nth-child(5){background:rgba(182,255,92,.5)}
.kc pre.code{direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:clamp(.62rem,1.1vw,.82rem);line-height:1.9;color:#a9c4b4;background:none;border:0;overflow:visible;white-space:pre-wrap}
.kc pre.code span{display:block}
.kc .k{color:var(--up);font-style:normal}.kc .s{color:var(--lime);font-style:normal}.kc .f{color:#7fe3b0;font-style:normal}

/* 2: trading */
.kc #s2 canvas.chart{opacity:.95}
.kc #s2 .veil{background:linear-gradient(270deg,rgba(4,6,5,.92) 0%,rgba(4,6,5,.75) 40%,rgba(4,6,5,0) 78%)}
.kc #s2 .wrap{align-items:flex-start}
.kc #s2 .copy{flex:0 1 640px;margin-bottom:3rem}
.kc .ticker{position:absolute;z-index:3;bottom:0;inset-inline:0;border-block-start:1px solid var(--line);background:rgba(4,6,5,.65);backdrop-filter:blur(6px);overflow:hidden;direction:ltr}
.kc .ticker .tr{display:flex;width:max-content;padding-block:.65rem;font-weight:600;font-size:.95rem;white-space:nowrap}
.kc .ticker span{padding-inline:1.6rem;display:inline-flex;gap:.5rem;align-items:center}
.kc .ticker .u{color:var(--up)}.kc .ticker .d{color:var(--down)}

/* 3: English */
.kc .mqs{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:1.2vh;pointer-events:none}
.kc .mq{direction:ltr;display:flex;width:max-content;white-space:nowrap;font-weight:900;font-size:clamp(5rem,17vw,14rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(233,245,236,.14)}
.kc .mq span{padding-inline:2.2vw}
.kc .mq:nth-child(2){-webkit-text-stroke-color:rgba(var(--up-rgb),.3)}
.kc .chat{flex:1 1 38%;display:flex;flex-direction:column;gap:1rem;direction:ltr;max-width:430px}
.kc .bub{padding:.9rem 1.3rem;border-radius:22px;font-size:clamp(1rem,1.8vw,1.3rem);font-weight:600;width:max-content;max-width:100%;backdrop-filter:blur(8px)}
.kc .bub.a{background:rgba(233,245,236,.1);border:1px solid var(--line);border-bottom-left-radius:6px}
.kc .bub.b{background:var(--up);color:#03140a;align-self:flex-end;border-bottom-right-radius:6px}
.kc .bub.t{display:flex;gap:6px;padding:1rem 1.2rem;background:rgba(233,245,236,.1);border:1px solid var(--line);border-bottom-left-radius:6px}
.kc .bub.t i{width:8px;height:8px;border-radius:50%;background:var(--ink);animation:kc-blink 1.1s infinite}
.kc .bub.t i:nth-child(2){animation-delay:.18s}.kc .bub.t i:nth-child(3){animation-delay:.36s}
@keyframes kc-blink{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-4px)}}

/* 4: why */
.kc .floor{
  position:absolute;z-index:1;inset-inline:-25%;bottom:-8%;height:58%;pointer-events:none;
  background-image:linear-gradient(rgba(var(--up-rgb),.35) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--up-rgb),.35) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 90%);mask-image:linear-gradient(to top,#000 10%,transparent 90%);
  animation:kc-floor 2.4s linear infinite;
}
@keyframes kc-floor{to{background-position:0 64px}}
.kc #s4 .copy{flex:1 1 36%}
.kc .why{flex:1 1 56%;list-style:none;perspective:900px}
.kc .why li{
  display:flex;align-items:center;gap:1rem;padding:.95rem 1.2rem;margin-bottom:.7rem;
  border:1px solid var(--line);border-radius:14px;background:rgba(4,6,5,.65);backdrop-filter:blur(6px);
  font-weight:600;font-size:clamp(.95rem,1.8vw,1.3rem);list-style:none;
}
.kc .why svg{flex:0 0 30px;width:30px;height:30px;fill:none;stroke:var(--up);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 5: about */
.kc .orb{position:absolute;z-index:1;inset-inline-end:7%;top:50%;width:48vmin;height:48vmin;transform:translateY(-50%);pointer-events:none}
.kc .orb .core{position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle,rgba(var(--up-rgb),.95),rgba(var(--up-rgb),.15) 60%,transparent 72%);filter:blur(2px)}
.kc .orb .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(var(--up-rgb),.7)}
.kc #s5 .copy{flex:0 1 640px}
.kc #s5 .lead{color:var(--ink)}

/* 6: contact */
.kc #s6 .wrap{flex-direction:column;align-items:flex-start;gap:0}
.kc #s6 h2{font-size:clamp(2.2rem,7.2vw,6.2rem);font-weight:900;line-height:1.3;display:flex;flex-wrap:wrap;gap:0 .3em}
.kc #s6 h2 span{display:inline-block}
.kc .who{margin-top:1.4rem;font-weight:900;font-size:clamp(1.1rem,2vw,1.5rem);color:var(--lime)}
.kc .links{margin-top:1.4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;width:min(640px,100%)}
.kc .chip{
  display:flex;flex-direction:column;padding:.9rem 1.3rem;border:1px solid var(--line);border-radius:16px;
  background:rgba(4,6,5,.65);backdrop-filter:blur(6px);transition:background .25s,color .25s,border-color .25s;
}
.kc .chip small{font-size:.8rem;color:var(--muted);transition:color .25s}
.kc .chip b{font-weight:600;font-size:clamp(.9rem,1.6vw,1.1rem);direction:ltr;text-align:right;overflow-wrap:anywhere}
.kc .chip:hover{background:var(--up);color:#03140a;border-color:var(--up)}
.kc .chip:hover small{color:#03140a}

@media (max-width:820px){
  .kc .dots{inset-inline-end:.6rem;gap:.7rem}
  .kc .wrap{gap:1rem}
  .kc .brand{font-size:.9rem}
  .kc #s0 .veil{background:linear-gradient(180deg,rgba(4,6,5,.6),rgba(4,6,5,.9))}
  .kc #s1 .wrap{align-items:flex-start}
  .kc #s1 .mock-wrap{position:absolute;inset-inline:0;bottom:-4%;width:100%;opacity:.3;z-index:1}
  .kc #s1 .stack{width:min(420px,88%)}
  .kc #s2 .veil{background:rgba(4,6,5,.68)}
  .kc #s3 .wrap,.kc #s4 .wrap{flex-direction:column;align-items:stretch}
  .kc #s3 .chat{max-width:100%;width:100%}
  .kc #s4 .copy{flex:0 0 auto}
  .kc .why li{padding:.65rem .9rem;margin-bottom:.5rem}
  .kc .why svg{flex-basis:24px;width:24px;height:24px}
  .kc .orb{inset-inline-end:50%;transform:translate(50%,-50%);opacity:.35;width:70vmin;height:70vmin}
  .kc .links{grid-template-columns:1fr 1fr;gap:.6rem}
  .kc .chip{padding:.7rem .9rem}
}
@media (max-height:700px){
  .kc .intro p:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  .kc .hint i,.kc .bub.t i,.kc .floor{animation:none}
}